From e503c3859a05a592ed566b2fb868e3bc36cf9837 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 19 Feb 2015 14:55:44 -0500 Subject: [PATCH] Allow plugins to change the header to show two rows This allows the discourse-tagging plugin to correctly use two rows in the header if it needs to display tags, or one row if there are no tags. This works in tandem with the same logic for when there is a category badge to display or not. --- .../components/header-extra-info.js.es6 | 47 +++++++++++++++++++ .../discourse/controllers/header.js.es6 | 16 ------- .../components/header-extra-info.hbs | 21 +++++++++ .../discourse/templates/header.hbs | 27 +---------- .../stylesheets/desktop/topic-post.scss | 2 +- 5 files changed, 70 insertions(+), 43 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/header-extra-info.js.es6 create mode 100644 app/assets/javascripts/discourse/templates/components/header-extra-info.hbs diff --git a/app/assets/javascripts/discourse/components/header-extra-info.js.es6 b/app/assets/javascripts/discourse/components/header-extra-info.js.es6 new file mode 100644 index 00000000000..a323d50df56 --- /dev/null +++ b/app/assets/javascripts/discourse/components/header-extra-info.js.es6 @@ -0,0 +1,47 @@ +const TopicCategoryComponent = Ember.Component.extend({ + needsSecondRow: Ember.computed.gt('secondRowItems.length', 0), + secondRowItems: function() { return []; }.property(), + + showPrivateMessageGlyph: function() { + return !this.get('topic.is_warning') && this.get('topic.isPrivateMessage'); + }.property('topic.is_warning', 'topic.isPrivateMessage'), + + actions: { + jumpToTopPost: function () { + var topic = this.get('topic'); + if (topic) { + Discourse.URL.routeTo(topic.get('firstPostUrl')); + } + } + } + +}); + +let id = 0; + +// Allow us (and plugins) to register themselves as needing a second +// row in the header. If there is at least one thing in the second row +// the style changes to accomodate it. +function needsSecondRowIf(prop, cb) { + const rowId = "_second_row_" + (id++), + methodHash = {}; + + methodHash[id] = function() { + const secondRowItems = this.get('secondRowItems'), + propVal = this.get(prop); + if (cb.call(this, propVal)) { + secondRowItems.addObject(rowId); + } else { + secondRowItems.removeObject(rowId); + } + }.observes(prop).on('init'); + + TopicCategoryComponent.reopen(methodHash); +} + +needsSecondRowIf('topic.category', function(cat) { + return cat && (!cat.get('isUncategorizedCategory') || !this.siteSettings.suppress_uncategorized_badge); +}); + +export default TopicCategoryComponent; +export { needsSecondRowIf }; diff --git a/app/assets/javascripts/discourse/controllers/header.js.es6 b/app/assets/javascripts/discourse/controllers/header.js.es6 index 2511aa50088..b40ac3efdad 100644 --- a/app/assets/javascripts/discourse/controllers/header.js.es6 +++ b/app/assets/javascripts/discourse/controllers/header.js.es6 @@ -10,15 +10,6 @@ export default DiscourseController.extend({ loginRequired: Em.computed.alias('controllers.application.loginRequired'), canSignUp: Em.computed.alias('controllers.application.canSignUp'), - hasCategory: function() { - var cat = this.get('topic.category'); - return cat && (!cat.get('isUncategorizedCategory') || !this.siteSettings.suppress_uncategorized_badge); - }.property('topic.category'), - - showPrivateMessageGlyph: function() { - return !this.get('topic.is_warning') && this.get('topic.isPrivateMessage'); - }.property('topic.is_warning', 'topic.isPrivateMessage'), - showSignUpButton: function() { return this.get('canSignUp') && !this.get('showExtraInfo'); }.property('canSignUp', 'showExtraInfo'), @@ -78,13 +69,6 @@ export default DiscourseController.extend({ self.refreshNotifications(); } headerView.showDropdownBySelector("#user-notifications"); - }, - - jumpToTopPost: function () { - var topic = this.get('topic'); - if (topic) { - Discourse.URL.routeTo(topic.get('firstPostUrl')); - } } } diff --git a/app/assets/javascripts/discourse/templates/components/header-extra-info.hbs b/app/assets/javascripts/discourse/templates/components/header-extra-info.hbs new file mode 100644 index 00000000000..c6326286eea --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/header-extra-info.hbs @@ -0,0 +1,21 @@ +
+
+
+

+ {{#if showPrivateMessageGlyph}} + {{fa-icon "envelope"}} + {{/if}} + + {{#if topic.details.loaded}} + {{topic-status topic=topic}} + {{{topic.fancy_title}}} + {{else}} + {{#if topic.errorLoading}} + {{topic.errorTitle}} + {{/if}} + {{/if}} +

+ {{topic-category topic=topic}} +
+
+
diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs index 7eec139b080..0299c69e931 100644 --- a/app/assets/javascripts/discourse/templates/header.hbs +++ b/app/assets/javascripts/discourse/templates/header.hbs @@ -77,9 +77,7 @@ {{#if view.renderDropdowns}} - {{render "search"}} - {{render "notifications" notifications}} {{#if view.renderSiteMap}} @@ -87,34 +85,11 @@ {{/if}} {{render "user-dropdown"}} - {{/if}} - {{#if showExtraInfo}} -
-
-
-

- {{#if showPrivateMessageGlyph}} - {{fa-icon "envelope"}} - {{/if}} - - {{#if topic.details.loaded}} - {{topic-status topic=topic}} - {{{topic.fancy_title}}} - {{else}} - {{#if topic.errorLoading}} - {{topic.errorTitle}} - {{/if}} - {{/if}} -

- {{topic-category topic=topic}} -
-
-
+ {{header-extra-info topic=topic}} {{/if}} - diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index f547ad00f80..6451a4e9b2d 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -577,7 +577,7 @@ video { } /* override docked header CSS for topics with categories */ -.extra-info.has-category { +.extra-info.two-rows { h1 { line-height: 1.1em; margin: 0;