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.
This commit is contained in:
Robin Ward 2015-02-19 14:55:44 -05:00
parent 8fd69fd3cf
commit e503c3859a
5 changed files with 70 additions and 43 deletions

View File

@ -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 };

View File

@ -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'));
}
}
}

View File

@ -0,0 +1,21 @@
<div class="extra-info-wrapper">
<div {{bind-attr class=":extra-info needsSecondRow:two-rows"}}>
<div class="title-wrapper">
<h1>
{{#if showPrivateMessageGlyph}}
<span class="private-message-glyph">{{fa-icon "envelope"}}</span>
{{/if}}
{{#if topic.details.loaded}}
{{topic-status topic=topic}}
<a class='topic-link' href='{{unbound topic.url}}' {{action "jumpToTopPost"}}>{{{topic.fancy_title}}}</a>
{{else}}
{{#if topic.errorLoading}}
<span class="error">{{topic.errorTitle}}</span>
{{/if}}
{{/if}}
</h1>
{{topic-category topic=topic}}
</div>
</div>
</div>

View File

@ -77,9 +77,7 @@
</ul>
{{#if view.renderDropdowns}}
{{render "search"}}
{{render "notifications" notifications}}
{{#if view.renderSiteMap}}
@ -87,34 +85,11 @@
{{/if}}
{{render "user-dropdown"}}
{{/if}}
</div>
{{#if showExtraInfo}}
<div class="extra-info-wrapper">
<div {{bind-attr class=":extra-info hasCategory"}}>
<div class="title-wrapper">
<h1>
{{#if showPrivateMessageGlyph}}
<span class="private-message-glyph">{{fa-icon "envelope"}}</span>
{{header-extra-info topic=topic}}
{{/if}}
{{#if topic.details.loaded}}
{{topic-status topic=topic}}
<a class='topic-link' href='{{unbound topic.url}}' {{action "jumpToTopPost"}}>{{{topic.fancy_title}}}</a>
{{else}}
{{#if topic.errorLoading}}
<span class="error">{{topic.errorTitle}}</span>
{{/if}}
{{/if}}
</h1>
{{topic-category topic=topic}}
</div>
</div>
</div>
{{/if}}
</div>
</div>

View File

@ -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;