From 489e7f220d5ac6dcf3c5065476db1ecd8b2bd1e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Wed, 16 May 2018 15:37:40 +0200 Subject: [PATCH] UX: show a message when more than 30 site settings matches the current filter UX: show the counts when displaying only overridden settings UX: show 30+ count when more than 30 site settings matches the current filter --- .../admin-site-settings-category.js.es6 | 20 ++++++++-------- .../controllers/admin-site-settings.js.es6 | 24 +++++++++---------- .../templates/site-settings-category.hbs | 3 +++ .../admin/templates/site-settings.hbs | 4 +--- .../stylesheets/common/admin/admin_base.scss | 18 ++++++++------ config/locales/client.en.yml | 1 + 6 files changed, 38 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/admin/controllers/admin-site-settings-category.js.es6 b/app/assets/javascripts/admin/controllers/admin-site-settings-category.js.es6 index df0738bed18..c2d96201bd4 100644 --- a/app/assets/javascripts/admin/controllers/admin-site-settings-category.js.es6 +++ b/app/assets/javascripts/admin/controllers/admin-site-settings-category.js.es6 @@ -1,16 +1,16 @@ +import computed from "ember-addons/ember-computed-decorators"; + export default Ember.Controller.extend({ categoryNameKey: null, adminSiteSettings: Ember.inject.controller(), - filteredContent: function() { - if (!this.get('categoryNameKey')) { return []; } - - const category = (this.get('adminSiteSettings.model') || []).findBy('nameKey', this.get('categoryNameKey')); - if (category) { - return category.siteSettings; - } else { - return []; - } - }.property('adminSiteSettings.model', 'categoryNameKey') + @computed("adminSiteSettings.model", "categoryNameKey") + category(categories, nameKey) { + return (categories || []).findBy("nameKey", nameKey); + }, + @computed("category") + filteredContent(category) { + return category ? category.siteSettings : []; + } }); diff --git a/app/assets/javascripts/admin/controllers/admin-site-settings.js.es6 b/app/assets/javascripts/admin/controllers/admin-site-settings.js.es6 index 6edbe9e01fe..6469efa6ccf 100644 --- a/app/assets/javascripts/admin/controllers/admin-site-settings.js.es6 +++ b/app/assets/javascripts/admin/controllers/admin-site-settings.js.es6 @@ -3,7 +3,6 @@ import debounce from 'discourse/lib/debounce'; export default Ember.Controller.extend({ filter: null, onlyOverridden: false, - filtered: Ember.computed.notEmpty('filter'), filterContentNow(category) { // If we have no content, don't bother filtering anything @@ -14,9 +13,9 @@ export default Ember.Controller.extend({ filter = this.get('filter').toLowerCase(); } - if ((filter === undefined || filter.length < 1) && !this.get('onlyOverridden')) { + if ((!filter || 0 === filter.length) && !this.get('onlyOverridden')) { this.set('model', this.get('allSiteSettings')); - this.transitionToRoute("adminSiteSettings"); + this.transitionToRoute('adminSiteSettings'); return; } @@ -28,11 +27,11 @@ export default Ember.Controller.extend({ const siteSettings = settingsCategory.siteSettings.filter(item => { if (this.get('onlyOverridden') && !item.get('overridden')) return false; if (filter) { - if (item.get('setting').toLowerCase().indexOf(filter) > -1) return true; - if (item.get('setting').toLowerCase().replace(/_/g, ' ').indexOf(filter) > -1) return true; - if (item.get('description').toLowerCase().indexOf(filter) > -1) return true; - if ((item.get('value') || '').toLowerCase().indexOf(filter) > -1) return true; - return false; + const setting = item.get('setting').toLowerCase(); + return setting.includes(filter) || + setting.replace(/_/g, ' ').includes(filter) || + item.get('description').toLowerCase().includes(filter) || + (item.get('value') || '').toLowerCase().includes(filter); } else { return true; } @@ -49,15 +48,16 @@ export default Ember.Controller.extend({ }); all.siteSettings.pushObjects(matches.slice(0, 30)); - all.count = matches.length; + all.hasMore = matches.length > 30; + all.count = all.hasMore ? '30+' : matches.length; this.set('model', matchesGroupedByCategory); - this.transitionToRoute("adminSiteSettingsCategory", category || "all_results"); + this.transitionToRoute('adminSiteSettingsCategory', category || 'all_results'); }, filterContent: debounce(function() { - if (this.get("_skipBounce")) { - this.set("_skipBounce", false); + if (this.get('_skipBounce')) { + this.set('_skipBounce', false); } else { this.filterContentNow(); } diff --git a/app/assets/javascripts/admin/templates/site-settings-category.hbs b/app/assets/javascripts/admin/templates/site-settings-category.hbs index 1af19ed7b61..5f612419326 100644 --- a/app/assets/javascripts/admin/templates/site-settings-category.hbs +++ b/app/assets/javascripts/admin/templates/site-settings-category.hbs @@ -3,6 +3,9 @@ {{#each filteredContent as |setting|}} {{site-setting setting=setting}} {{/each}} + {{#if category.hasMore}} +

{{i18n 'admin.site_settings.more_than_30_results'}}

+ {{/if}} {{/d-section}} {{else}}
diff --git a/app/assets/javascripts/admin/templates/site-settings.hbs b/app/assets/javascripts/admin/templates/site-settings.hbs index e3d9f4d8756..9f455b01e92 100644 --- a/app/assets/javascripts/admin/templates/site-settings.hbs +++ b/app/assets/javascripts/admin/templates/site-settings.hbs @@ -18,9 +18,7 @@
  • {{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}} {{category.name}} - {{#if filtered}} - {{#if category.count}}({{category.count}}){{/if}} - {{/if}} + {{#if category.count}}({{category.count}}){{/if}} {{/link-to}}
    • {{/each}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 97a863d70cc..e5ccbb0b67f 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -578,6 +578,10 @@ $mobile-breakpoint: 700px; background-color: $highlight-medium; } } + + .warning { + color: $danger; + } } section.details { @@ -856,7 +860,7 @@ section.details { .version-checks { display: flex; - flex-wrap: wrap; + flex-wrap: wrap; h2 { flex: 1 1 100%; @@ -879,7 +883,7 @@ section.details { margin: .25em 0 1em 0; @media screen and (max-width: 650px) { margin: 0; - } + } tr { border: none; } @@ -901,13 +905,13 @@ section.details { font-weight: bold; margin: 0 0 1em 0; padding-right: 20px; - flex: 1 1 33.33%; + flex: 1 1 33.33%; h3 { flex: 1 0 auto; white-space: nowrap; } h4 { - font-size: $font-down-2; + font-size: $font-down-2; margin-bottom: 0; } } @@ -917,8 +921,8 @@ section.details { align-items: center; margin: 0 0 1em 0; flex: 1 1 33.33%; - box-sizing: border-box; - padding-right: 20px; + box-sizing: border-box; + padding-right: 20px; min-width: 250px; @include small-width { max-width: unset; @@ -1063,7 +1067,7 @@ table.api-keys { } &.detected-problems { - display: flex; + display: flex; margin-bottom: 30px; .look-here { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index cac1c76f2cd..249d491d1b2 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -3749,6 +3749,7 @@ en: site_settings: title: 'Settings' no_results: "No results found." + more_than_30_results: "There are more than 30 results. Please refine your search or select a category." clear_filter: "Clear" add_url: "add URL" add_host: "add host"