PERF: Don't render advanced search options when not expanded.
* Debounce options update as well.
This commit is contained in:
Guo Xiang Tan
parent
1606ed01f9
commit
ef1918662c
|
|
@ -17,8 +17,7 @@ const REGEXP_CATEGORY_ID = /\s?(category:[0-9]+)/ig;
|
|||
const REGEXP_POST_TIME_WHEN = /(before|after)/ig;
|
||||
|
||||
export default Em.Component.extend({
|
||||
tagName: 'div',
|
||||
classNames: ['search-advanced', 'row'],
|
||||
classNames: ['search-advanced-options'],
|
||||
searchedTerms: {username: [], category: null, group: [], badge: [], tags: [],
|
||||
in: '', status: '', posts_count: '', time: {when: 'before', days: ''}},
|
||||
inOptions: [
|
||||
|
|
@ -45,8 +44,16 @@ export default Em.Component.extend({
|
|||
{name: I18n.t('search.advanced.post.time.after'), value: "after"}
|
||||
],
|
||||
|
||||
@on('init')
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
this._init();
|
||||
},
|
||||
|
||||
@observes('searchTerm')
|
||||
_updateOptions() {
|
||||
Ember.run.debounce(this, this._init, 250);
|
||||
},
|
||||
|
||||
_init() {
|
||||
let searchTerm = this.get('searchTerm');
|
||||
|
||||
|
|
@ -382,18 +389,5 @@ export default Em.Component.extend({
|
|||
badgeFinder(term) {
|
||||
const Badge = require('discourse/models/badge').default;
|
||||
return Badge.findAll({search: term});
|
||||
},
|
||||
|
||||
@computed('isExpanded')
|
||||
collapsedClassName(isExpanded) {
|
||||
return isExpanded ? "fa-caret-down" : "fa-caret-right";
|
||||
},
|
||||
|
||||
actions: {
|
||||
expandOptions() {
|
||||
this.set('isExpanded', !this.get('isExpanded'));
|
||||
if (this.get('isExpanded'))
|
||||
this._init();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { default as computed, observes } from 'ember-addons/ember-computed-decor
|
|||
import Category from 'discourse/models/category';
|
||||
import { escapeExpression } from 'discourse/lib/utilities';
|
||||
import { setTransient } from 'discourse/lib/page-tracker';
|
||||
import { iconHTML } from 'discourse-common/helpers/fa-icon';
|
||||
|
||||
const SortOrders = [
|
||||
{name: I18n.t('search.relevance'), id: 0},
|
||||
|
|
@ -143,6 +144,11 @@ export default Ember.Controller.extend({
|
|||
return this.currentUser && !this.site.mobileView && !expanded;
|
||||
},
|
||||
|
||||
@computed('expanded')
|
||||
searchAdvancedIcon(expanded) {
|
||||
return iconHTML(expanded ? "caret-down" : "caret-right");
|
||||
},
|
||||
|
||||
_search() {
|
||||
if (this.get("searching")) { return; }
|
||||
|
||||
|
|
@ -208,6 +214,10 @@ export default Ember.Controller.extend({
|
|||
|
||||
search() {
|
||||
this._search();
|
||||
},
|
||||
|
||||
toggleAdvancedSearch() {
|
||||
this.toggleProperty('expanded');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,80 +1,73 @@
|
|||
<h3 class="panel-title" {{action "expandOptions"}}>
|
||||
<i class="fa {{collapsedClassName}}"></i> {{i18n "search.advanced.title"}}
|
||||
</h3>
|
||||
{{#if isExpanded}}
|
||||
<div class="search-options">
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-posted-by">{{i18n "search.advanced.posted_by.label"}}</label>
|
||||
<div class="controls">
|
||||
{{user-selector excludeCurrentUser=false usernames=searchedTerms.username class="user-selector" single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-category">{{i18n "search.advanced.in_category.label"}}</label>
|
||||
<div class="controls">
|
||||
{{category-chooser value=searchedTerms.category}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-posted-by">{{i18n "search.advanced.posted_by.label"}}</label>
|
||||
<div class="controls">
|
||||
{{user-selector excludeCurrentUser=false usernames=searchedTerms.username class="user-selector" single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
|
||||
<!-- disable these super-advanced searches for now
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-group">{{i18n "search.advanced.in_group.label"}}</label>
|
||||
<div class="controls">
|
||||
{{group-selector groupFinder=groupFinder groupNames=searchedTerms.group single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-with-badge">{{i18n "search.advanced.with_badge.label"}}</label>
|
||||
<div class="controls">
|
||||
{{badge-selector badgeFinder=badgeFinder badgeNames=searchedTerms.badge single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-category">{{i18n "search.advanced.in_category.label"}}</label>
|
||||
<div class="controls">
|
||||
{{category-chooser value=searchedTerms.category}}
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if siteSettings.tagging_enabled}}
|
||||
<div class="container">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="search-with-tags">{{i18n "search.advanced.with_tags.label"}}</label>
|
||||
<div class="controls">
|
||||
{{tag-chooser tags=searchedTerms.tags blacklist=searchedTerms.tags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="in" valueAttribute="value" content=inOptions value=searchedTerms.in none="user.locale.any"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-status-options">{{i18n "search.advanced.statuses.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- disable these super-advanced searches for now
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-group">{{i18n "search.advanced.in_group.label"}}</label>
|
||||
<div class="controls">
|
||||
{{group-selector groupFinder=groupFinder groupNames=searchedTerms.group single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-with-badge">{{i18n "search.advanced.with_badge.label"}}</label>
|
||||
<div class="controls">
|
||||
{{badge-selector badgeFinder=badgeFinder badgeNames=searchedTerms.badge single="true" canReceiveUpdates="true"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-post-date">{{i18n "search.advanced.post.time.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="postTime" valueAttribute="value" content=postTimeOptions value=searchedTerms.time.when}}
|
||||
{{input type="text" value=searchedTerms.time.days class="input-small" id='search-post-date'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-posts-count">{{i18n "search.advanced.post.count.label"}}</label>
|
||||
<div class="controls">
|
||||
{{input type="number" value=searchedTerms.posts_count class="input-small" id='search-posts-count'}}
|
||||
</div>
|
||||
{{#if siteSettings.tagging_enabled}}
|
||||
<div class="container">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="search-with-tags">{{i18n "search.advanced.with_tags.label"}}</label>
|
||||
<div class="controls">
|
||||
{{tag-chooser tags=searchedTerms.tags blacklist=searchedTerms.tags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="in" valueAttribute="value" content=inOptions value=searchedTerms.in none="user.locale.any"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-status-options">{{i18n "search.advanced.statuses.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-post-date">{{i18n "search.advanced.post.time.label"}}</label>
|
||||
<div class="controls">
|
||||
{{combo-box id="postTime" valueAttribute="value" content=postTimeOptions value=searchedTerms.time.when}}
|
||||
{{input type="text" value=searchedTerms.time.days class="input-small" id='search-post-date'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group pull-left">
|
||||
<label class="control-label" for="search-posts-count">{{i18n "search.advanced.post.count.label"}}</label>
|
||||
<div class="controls">
|
||||
{{input type="number" value=searchedTerms.posts_count class="input-small" id='search-posts-count'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,16 @@
|
|||
{{search-text-field value=searchTerm class="full-page-search input-xxlarge search no-blur" action="search" hasAutofocus=hasAutofocus}}
|
||||
{{d-button action="search" icon="search" class="btn-primary" disabled=searching}}
|
||||
|
||||
{{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
|
||||
<div class='search-advanced'>
|
||||
<button class="search-advanced-btn btn" {{action "toggleAdvancedSearch"}}>
|
||||
{{{searchAdvancedIcon}}}
|
||||
{{i18n "search.advanced.title"}}
|
||||
</button>
|
||||
|
||||
{{#if expanded}}
|
||||
{{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if canCreateTopic}}
|
||||
<span class="new-topic-btn">{{d-button id="create-topic" class="btn-default" action="createTopic" actionParam=searchTerm icon="plus" label="topic.create"}}</span>
|
||||
|
|
|
|||
|
|
@ -100,13 +100,14 @@
|
|||
.search-advanced {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.panel-title {
|
||||
background-color: dark-light-diff($primary, $secondary, 94%, -80%);
|
||||
.search-advanced-btn {
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-options {
|
||||
.search-advanced-options {
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
|
||||
padding: 10px;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,7 @@
|
|||
}
|
||||
|
||||
.search-advanced {
|
||||
h3.panel-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-options {
|
||||
.search-advanced-options {
|
||||
.control-group {
|
||||
padding-bottom: 10px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue