From edf54979e4df85f8821475ee906b217fe412a658 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Mon, 14 Sep 2015 21:54:39 +0200 Subject: [PATCH] UX: don't show the top period in the navigation bar since it has its own dropdown --- .../discourse/components/nav-item.js.es6 | 20 ++++++---- .../components/navigation-bar.js.es6 | 40 +++++++++---------- .../components/navigation-item.js.es6 | 22 +++++----- .../controllers/navigation/category.js.es6 | 10 +++-- .../controllers/navigation/default.js.es6 | 16 +++++--- .../discourse/models/nav-item.js.es6 | 14 +++---- 6 files changed, 64 insertions(+), 58 deletions(-) diff --git a/app/assets/javascripts/discourse/components/nav-item.js.es6 b/app/assets/javascripts/discourse/components/nav-item.js.es6 index 87ab1007a82..69c797bd309 100644 --- a/app/assets/javascripts/discourse/components/nav-item.js.es6 +++ b/app/assets/javascripts/discourse/components/nav-item.js.es6 @@ -1,24 +1,28 @@ /* You might be looking for navigation-item. */ +import computed from "ember-addons/ember-computed-decorators"; + export default Ember.Component.extend({ tagName: 'li', classNameBindings: ['active'], - router: function() { + @computed() + router() { return this.container.lookup('router:main'); - }.property(), + }, - fullPath: function() { - return Discourse.getURL(this.get('path')); - }.property('path'), + @computed("path") + fullPath(path) { + return Discourse.getURL(path); + }, - active: function() { - const route = this.get('route'); + @computed("route", "router.url") + active(route) { if (!route) { return; } const routeParam = this.get('routeParam'), router = this.get('router'); return routeParam ? router.isActive(route, routeParam) : router.isActive(route); - }.property('router.url', 'route') + } }); diff --git a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 b/app/assets/javascripts/discourse/components/navigation-bar.js.es6 index 46fc846dbe8..7bc237c9005 100644 --- a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 +++ b/app/assets/javascripts/discourse/components/navigation-bar.js.es6 @@ -1,27 +1,25 @@ +import { default as computed, observes } from "ember-addons/ember-computed-decorators"; import DiscourseURL from 'discourse/lib/url'; export default Ember.Component.extend({ tagName: 'ul', classNameBindings: [':nav', ':nav-pills'], id: 'navigation-bar', - selectedNavItem: function(){ - const filterMode = this.get('filterMode'), - navItems = this.get('navItems'); - - var item = navItems.find(function(i){ - return i.get('filterMode').indexOf(filterMode) === 0; - }); + @computed("filterMode", "navItems") + selectedNavItem(filterMode, navItems){ + var item = navItems.find(i => i.get('filterMode').indexOf(filterMode) === 0); return item || navItems[0]; - }.property('filterMode'), + }, - closedNav: function(){ + @observes("expanded") + closedNav() { if (!this.get('expanded')) { this.ensureDropClosed(); } - }.observes('expanded'), + }, - ensureDropClosed: function(){ + ensureDropClosed() { if (!this.get('expanded')) { this.set('expanded',false); } @@ -30,25 +28,23 @@ export default Ember.Component.extend({ }, actions: { - toggleDrop: function(){ + toggleDrop() { this.set('expanded', !this.get('expanded')); - var self = this; - if (this.get('expanded')) { + if (this.get('expanded')) { DiscourseURL.appEvents.on('dom:clean', this, this.ensureDropClosed); - Em.run.next(function() { + Em.run.next(() => { + if (!this.get('expanded')) { return; } - if (!self.get('expanded')) { return; } - - self.$('.drop a').on('click', function(){ - self.$('.drop').hide(); - self.set('expanded', false); + this.$('.drop a').on('click', () => { + this.$('.drop').hide(); + this.set('expanded', false); return true; }); - $(window).on('click.navigation-bar', function() { - self.set('expanded', false); + $(window).on('click.navigation-bar', () => { + this.set('expanded', false); return true; }); }); diff --git a/app/assets/javascripts/discourse/components/navigation-item.js.es6 b/app/assets/javascripts/discourse/components/navigation-item.js.es6 index 075919ca742..758e4a385cd 100644 --- a/app/assets/javascripts/discourse/components/navigation-item.js.es6 +++ b/app/assets/javascripts/discourse/components/navigation-item.js.es6 @@ -1,3 +1,4 @@ +import computed from "ember-addons/ember-computed-decorators"; import StringBuffer from 'discourse/mixins/string-buffer'; export default Ember.Component.extend(StringBuffer, { @@ -7,22 +8,23 @@ export default Ember.Component.extend(StringBuffer, { hidden: Em.computed.not('content.visible'), rerenderTriggers: ['content.count'], - title: function() { - var categoryName = this.get('content.categoryName'), - name = this.get('content.name'), - extra = {}; + @computed("content.categoryName", "content.name") + title(categoryName, name) { + const extra = {}; if (categoryName) { name = "category"; extra.categoryName = categoryName; } - return I18n.t("filters." + name.replace("/", ".") + ".help", extra); - }.property("content.{categoryName,name}"), - active: function() { - return this.get('content.filterMode') === this.get('filterMode') || - this.get('filterMode').indexOf(this.get('content.filterMode')) === 0; - }.property('content.filterMode', 'filterMode'), + return I18n.t("filters." + name.replace("/", ".") + ".help", extra); + }, + + @computed("content.filterMode", "filterMode") + active(contentFilterMode, filterMode) { + return contentFilterMode === filterMode || + filterMode.indexOf(contentFilterMode) === 0; + }, renderString(buffer) { const content = this.get('content'); diff --git a/app/assets/javascripts/discourse/controllers/navigation/category.js.es6 b/app/assets/javascripts/discourse/controllers/navigation/category.js.es6 index c21ed81341e..35b11cd3045 100644 --- a/app/assets/javascripts/discourse/controllers/navigation/category.js.es6 +++ b/app/assets/javascripts/discourse/controllers/navigation/category.js.es6 @@ -1,3 +1,4 @@ +import computed from "ember-addons/ember-computed-decorators"; import NavigationDefaultController from 'discourse/controllers/navigation/default'; import { setting } from 'discourse/lib/computed'; @@ -6,8 +7,9 @@ export default NavigationDefaultController.extend({ showingParentCategory: Em.computed.none('category.parentCategory'), showingSubcategoryList: Em.computed.and('subcategoryListSetting', 'showingParentCategory'), - navItems: function() { - if (this.get('showingSubcategoryList')) { return []; } - return Discourse.NavItem.buildList(this.get('category'), { noSubcategories: this.get('noSubcategories') }); - }.property('category', 'noSubcategories') + @computed("showingSubcategoryList", "category", "noSubcategories") + navItems(showingSubcategoryList, category, noSubcategories) { + if (showingSubcategoryList) { return []; } + return Discourse.NavItem.buildList(category, { noSubcategories }); + } }); diff --git a/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 b/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 index c2a48c4b7a9..1d23c1fb2b1 100644 --- a/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 +++ b/app/assets/javascripts/discourse/controllers/navigation/default.js.es6 @@ -1,12 +1,18 @@ +import computed from "ember-addons/ember-computed-decorators"; + export default Ember.Controller.extend({ needs: ['discovery', 'discovery/topics'], - categories: function() { + @computed() + categories() { return Discourse.Category.list(); - }.property(), + }, - navItems: function() { - return Discourse.NavItem.buildList(null, {filterMode: this.get('filterMode')}); - }.property('filterMode') + @computed("filterMode") + navItems(filterMode) { + // we don't want to show the period in the navigation bar since it's in a dropdown + if (filterMode.indexOf("top/") === 0) { filterMode = filterMode.replace("top/", ""); } + return Discourse.NavItem.buildList(null, { filterMode }); + } }); diff --git a/app/assets/javascripts/discourse/models/nav-item.js.es6 b/app/assets/javascripts/discourse/models/nav-item.js.es6 index 2a424c64f95..ee81b705ec3 100644 --- a/app/assets/javascripts/discourse/models/nav-item.js.es6 +++ b/app/assets/javascripts/discourse/models/nav-item.js.es6 @@ -103,21 +103,17 @@ NavItem.reopenClass({ buildList(category, args) { args = args || {}; + if (category) { args.category = category } - var items = Discourse.SiteSettings.top_menu.split("|"); + let items = Discourse.SiteSettings.top_menu.split("|"); - if (args.filterMode && !_.some(items, function(i){ - return i.indexOf(args.filterMode) !== -1; - })) { + if (args.filterMode && !_.some(items, i => i.indexOf(args.filterMode) !== -1)) { items.push(args.filterMode); } - return items.map(function(i) { - return Discourse.NavItem.fromText(i, args); - }).filter(function(i) { - return i !== null && !(category && i.get("name").indexOf("categor") === 0); - }); + return items.map(i => Discourse.NavItem.fromText(i, args)) + .filter(i => i !== null && !(category && i.get("name").indexOf("categor") === 0)); } });