From ef1918662ca0d4bd43741e5face98e0516af4597 Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Thu, 13 Oct 2016 14:45:17 +0800 Subject: [PATCH] PERF: Don't render advanced search options when not expanded. * Debounce options update as well. --- .../components/search-advanced-options.js.es6 | 26 ++-- .../controllers/full-page-search.js.es6 | 10 ++ .../components/search-advanced-options.hbs | 135 +++++++++--------- .../discourse/templates/full-page-search.hbs | 11 +- .../stylesheets/common/base/search.scss | 9 +- app/assets/stylesheets/mobile/search.scss | 6 +- 6 files changed, 100 insertions(+), 97 deletions(-) diff --git a/app/assets/javascripts/discourse/components/search-advanced-options.js.es6 b/app/assets/javascripts/discourse/components/search-advanced-options.js.es6 index 7d225e6b367..3cc54a2f2e2 100644 --- a/app/assets/javascripts/discourse/components/search-advanced-options.js.es6 +++ b/app/assets/javascripts/discourse/components/search-advanced-options.js.es6 @@ -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(); - } } }); diff --git a/app/assets/javascripts/discourse/controllers/full-page-search.js.es6 b/app/assets/javascripts/discourse/controllers/full-page-search.js.es6 index 46ce5c6ab89..d6998661269 100644 --- a/app/assets/javascripts/discourse/controllers/full-page-search.js.es6 +++ b/app/assets/javascripts/discourse/controllers/full-page-search.js.es6 @@ -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'); } } }); diff --git a/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs b/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs index 8d0356ac73b..eb8b17400b1 100644 --- a/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs +++ b/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs @@ -1,80 +1,73 @@ -

- {{i18n "search.advanced.title"}} -

-{{#if isExpanded}} -
-
-
- -
- {{user-selector excludeCurrentUser=false usernames=searchedTerms.username class="user-selector" single="true" canReceiveUpdates="true"}} -
-
-
- -
- {{category-chooser value=searchedTerms.category}} -
-
+
+
+ +
+ {{user-selector excludeCurrentUser=false usernames=searchedTerms.username class="user-selector" single="true" canReceiveUpdates="true"}}
- - +
+
- {{#if siteSettings.tagging_enabled}} -
-
- -
- {{tag-chooser tags=searchedTerms.tags blacklist=searchedTerms.tags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}} -
-
-
- {{/if}} - -
-
- -
- {{combo-box id="in" valueAttribute="value" content=inOptions value=searchedTerms.in none="user.locale.any"}} -
-
-
- -
- {{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}} -
-
+ -
-
- -
- {{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'}} -
-
-
- -
- {{input type="number" value=searchedTerms.posts_count class="input-small" id='search-posts-count'}} -
+{{#if siteSettings.tagging_enabled}} +
+
+ +
+ {{tag-chooser tags=searchedTerms.tags blacklist=searchedTerms.tags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
{{/if}} + +
+
+ +
+ {{combo-box id="in" valueAttribute="value" content=inOptions value=searchedTerms.in none="user.locale.any"}} +
+
+
+ +
+ {{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}} +
+
+
+ +
+
+ +
+ {{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'}} +
+
+
+ +
+ {{input type="number" value=searchedTerms.posts_count class="input-small" id='search-posts-count'}} +
+
+
diff --git a/app/assets/javascripts/discourse/templates/full-page-search.hbs b/app/assets/javascripts/discourse/templates/full-page-search.hbs index 31501744df9..7b45cd1335a 100644 --- a/app/assets/javascripts/discourse/templates/full-page-search.hbs +++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs @@ -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}} +
+ + + {{#if expanded}} + {{search-advanced-options searchTerm=searchTerm isExpanded=expanded}} + {{/if}} +
{{#if canCreateTopic}} {{d-button id="create-topic" class="btn-default" action="createTopic" actionParam=searchTerm icon="plus" label="topic.create"}} diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index c307b9d6918..ba279d4718b 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/app/assets/stylesheets/common/base/search.scss @@ -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; diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss index 8852e81f640..1dbce919d8a 100644 --- a/app/assets/stylesheets/mobile/search.scss +++ b/app/assets/stylesheets/mobile/search.scss @@ -3,11 +3,7 @@ } .search-advanced { - h3.panel-title { - margin: 0; - } - - .search-options { + .search-advanced-options { .control-group { padding-bottom: 10px;