github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-04 02:04:10 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Category notification settings dropdown: use common code with topic notification and pin/unpin dropdowns

Browse Source
This commit is contained in:
Neil Lalonde 2014-05-29 14:15:56 -04:00
parent 71a7ce1fee
commit 98deb5ff41
10 changed files with 102 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/assets/javascripts/discourse/views/buttons/category_notifications_button.js
View File

@ -6,68 +6,19 @@
@namespace Discourse
@module Discourse
**/
Discourse.CategoryNotificationsButton = Discourse.View.extend({
classNames: ['notification-options'],
Discourse.CategoryNotificationsButton = Discourse.NotificationsButton.extend({
classNames: ['notification-options', 'category-notification-menu'],
buttonIncludesText: false,
longDescriptionBinding: null,
category: Em.computed.alias('controller.model'),
target: Em.computed.alias('category'),
hidden: Em.computed.alias('category.deleted'),
templateName: 'category_notification_dropdown',
notificationLevels: Discourse.Category.NotificationLevel,
notificationLevel: Em.computed.alias('category.notification_level'),
i18nPrefix: 'category.notifications',
i18nPostfix: '',
watchingClasses: 'fa fa-exclamation-circle watching',
trackingClasses: 'fa fa-circle tracking',
mutedClasses: 'fa fa-times-circle muted',
regularClasses: 'fa fa-circle-o regular',
init: function() {
this.display();
this._super();
},
dropDownContent: function() {
var contents = [];
_.each([
['WATCHING', 'watching', this.watchingClasses],
['TRACKING', 'tracking', this.trackingClasses],
['REGULAR', 'regular', ''],
['MUTED', 'muted', this.mutedClasses]
], function(pair) {
contents.push({
id: Discourse.Category.NotificationLevel[pair[0]],
title: I18n.t('category.notifications.' + pair[1] + '.title'),
description: I18n.t('category.notifications.' + pair[1] + '.description'),
styleClasses: pair[2]
clicked: function(id) {
this.get('category').setNotification(id);
}
);
});
return contents;
}.property(),
// displayed Button
display: function() {
var icon = "";
switch (this.get('category').notification_level) {
case Discourse.Category.NotificationLevel.WATCHING:
icon = this.watchingClasses;
break;
case Discourse.Category.NotificationLevel.TRACKING:
icon = this.trackingClasses;
break;
case Discourse.Category.NotificationLevel.MUTED:
icon = this.mutedClasses;
break;
default:
icon = this.regularClasses;
break;
}
this.set("icon", icon);
},
changeDisplay: function() {
this.display();
}.observes('category.notification_level')
});

10
app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js
View File

@ -29,7 +29,6 @@ Discourse.DropdownButtonView = Discourse.View.extend({
render: function(buffer) {
var self = this;
var descriptionKey = self.get('descriptionKey') || 'description';
buffer.push("<h4 class='title'>" + self.get('title') + "</h4>");
buffer.push("<button class='btn standard dropdown-toggle' data-toggle='dropdown'>");
@ -38,11 +37,10 @@ Discourse.DropdownButtonView = Discourse.View.extend({
buffer.push("<ul class='dropdown-menu'>");
_.each(self.get('dropDownContent'), function(row) {
var id = row[0],
textKey = row[1],
iconClass = row[2],
title = I18n.t(textKey + ".title"),
description = I18n.t(textKey + "." + descriptionKey),
var id = row.id,
title = row.title,
iconClass = row.styleClasses,
description = row.description,
className = (self.get('activeItem') === id? 'disabled': '');
buffer.push("<li data-id=\"" + id + "\" class=\"" + className + "\"><a href='#'>");

69
app/assets/javascripts/discourse/views/buttons/notifications_button.js
View File

@ -9,48 +9,53 @@
Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
classNames: ['notification-options'],
title: '',
longDescriptionBinding: 'topic.details.notificationReasonText',
topic: Em.computed.alias('controller.model'),
hidden: Em.computed.alias('topic.deleted'),
isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'),
activeItem: Em.computed.alias('topic.details.notification_level'),
buttonIncludesText: true,
activeItem: Em.computed.alias('notificationLevel'),
notificationLevels: [],
i18nPrefix: '',
i18nPostfix: '',
watchingClasses: 'fa fa-exclamation-circle watching',
trackingClasses: 'fa fa-circle tracking',
mutedClasses: 'fa fa-times-circle muted',
regularClasses: 'fa fa-circle-o regular',
options: function() {
return [['WATCHING', 'watching', this.watchingClasses],
['TRACKING', 'tracking', this.trackingClasses],
['REGULAR', 'regular', this.regularClasses],
['MUTED', 'muted', this.mutedClasses]];
}.property(),
dropDownContent: function() {
var contents = [], postfix = '';
if (this.get('isPrivateMessage')) { postfix = '_pm'; }
_.each([
['WATCHING', 'watching', this.watchingClasses],
['TRACKING', 'tracking', this.trackingClasses],
['REGULAR', 'regular', 'tracking'],
['MUTED', 'muted', this.mutedClasses]
], function(pair) {
var contents = [],
prefix = this.get('i18nPrefix'),
postfix = this.get('i18nPostfix'),
levels = this.get('notificationLevels');
_.each(this.get('options'), function(pair) {
if (postfix === '_pm' && pair[1] === 'regular') { return; }
contents.push([
Discourse.Topic.NotificationLevel[pair[0]],
'topic.notifications.' + pair[1] + postfix,
pair[2]
]);
contents.push({
id: levels[pair[0]],
title: I18n.t(prefix + '.' + pair[1] + postfix + '.title'),
description: I18n.t(prefix + '.' + pair[1] + postfix + '.description'),
styleClasses: pair[2]
});
});
return contents;
}.property(),
text: function() {
var self = this;
var self = this,
prefix = this.get('i18nPrefix'),
postfix = this.get('i18nPostfix'),
levels = this.get('notificationLevels');
var key = (function() {
switch (this.get('topic.details.notification_level')) {
case Discourse.Topic.NotificationLevel.WATCHING: return 'watching';
case Discourse.Topic.NotificationLevel.TRACKING: return 'tracking';
case Discourse.Topic.NotificationLevel.MUTED: return 'muted';
switch (this.get('notificationLevel')) {
case levels.WATCHING: return 'watching';
case levels.TRACKING: return 'tracking';
case levels.MUTED: return 'muted';
default: return 'regular';
}
}).call(this);
@ -60,14 +65,14 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
case 'watching': return '<i class="' + self.watchingClasses + '"></i>&nbsp;';
case 'tracking': return '<i class="' + self.trackingClasses + '"></i>&nbsp;';
case 'muted': return '<i class="' + self.mutedClasses + '"></i>&nbsp;';
default: return '';
default: return '<i class="' + self.regularClasses + '"></i>&nbsp;';
}
})();
return icon + (I18n.t("topic.notifications." + key + ".title")) + "<span class='caret'></span>";
}.property('topic.details.notification_level'),
return icon + ( this.get('buttonIncludesText') ? I18n.t(prefix + '.' + key + postfix + ".title") : '') + "<span class='caret'></span>";
}.property('notificationLevel'),
clicked: function(id) {
return this.get('topic.details').updateNotifications(id);
clicked: function(/* id */) {
// sub-class needs to implement this
}
});

11
app/assets/javascripts/discourse/views/buttons/pinned_button.js
View File

@ -19,6 +19,7 @@ Discourse.PinnedButton = Discourse.DropdownButtonView.extend({
}.property('topic.pinned'),
topic: Em.computed.alias('controller.model'),
target: Em.computed.alias('topic'),
hidden: function(){
var topic = this.get('topic');
@ -32,8 +33,14 @@ Discourse.PinnedButton = Discourse.DropdownButtonView.extend({
dropDownContent: function() {
var globally = this.get('topic.pinned_globally') ? '_globally' : '';
return [
['pinned', 'topic_statuses.pinned' + globally, 'fa fa-thumb-tack'],
['unpinned', 'topic_statuses.unpinned', 'fa fa-thumb-tack unpinned']
{id: 'pinned',
title: I18n.t('topic_statuses.pinned' + globally + '.title'),
description: I18n.t('topic_statuses.pinned' + globally + '.help'),
styleClasses: 'fa fa-thumb-tack' },
{id: 'unpinned',
title: I18n.t('topic_statuses.unpinned.title'),
description: I18n.t('topic_statuses.unpinned.help'),
styleClasses: 'fa fa-thumb-tack unpinned' }
];
}.property(),

27
app/assets/javascripts/discourse/views/buttons/topic_notifications_button.js Normal file
View File

@ -0,0 +1,27 @@
/**
A button to display topic notification options.
@class TopicNotificationsButton
@extends Discourse.NotificationsButton
@namespace Discourse
@module Discourse
**/
Discourse.TopicNotificationsButton = Discourse.NotificationsButton.extend({
longDescriptionBinding: 'topic.details.notificationReasonText',
topic: Em.computed.alias('controller.model'),
target: Em.computed.alias('topic'),
hidden: Em.computed.alias('topic.deleted'),
notificationLevels: Discourse.Topic.NotificationLevel,
notificationLevel: Em.computed.alias('topic.details.notification_level'),
isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'),
i18nPrefix: 'topic.notifications',
i18nPostfix: function() {
return this.get('isPrivateMessage') ? '_pm' : '';
}.property('isPrivateMessage'),
clicked: function(id) {
this.get('topic.details').updateNotifications(id);
}
});

2
app/assets/javascripts/discourse/views/topic_footer_buttons_view.js
View File

@ -34,7 +34,7 @@ Discourse.TopicFooterButtonsView = Discourse.ContainerView.extend({
this.attachViewClass(Discourse.ReplyButton);
}
this.attachViewClass(Discourse.PinnedButton);
this.attachViewClass(Discourse.NotificationsButton);
this.attachViewClass(Discourse.TopicNotificationsButton);
this.trigger('additionalButtons', this);
} else {

1
app/assets/javascripts/main_include.js
View File

@ -24,6 +24,7 @@
//= require ./discourse/views/combobox_view
//= require ./discourse/views/buttons/button_view
//= require ./discourse/views/buttons/dropdown_button_view
//= require ./discourse/views/buttons/notifications_button
//= require ./discourse/routes/discourse_route
//= require ./discourse/routes/discourse_restricted_user_route

39
app/assets/stylesheets/desktop/category-notification.scss
View File

@ -1,39 +0,0 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
.notification-dropdown-menu {
position: absolute;
z-index: 100;
display: none;
width: 550px;
padding: 4px 0;
margin: 32px 560px;
list-style: none;
background-color: $secondary;
border: 1px solid $primary;
box-shadow: 0 1px 5px rgba($primary, .4);
background-clip: padding-box;
span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;}
a {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: $primary;
}
}
.notification-dropdown-menu li > a:hover,
.notification-dropdown-menu .active > a,
.notification-dropdown-menu .active > a:hover {
color: $secondary;
text-decoration: none;
background-color: scale-color($tertiary, $lightness: 50%);
}
.open > .notification-dropdown-menu {
display: block;
clear: both;
}

7
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -522,3 +522,10 @@ button.dismiss-read {
float: right;
margin-bottom: 5px;
}
.category-notification-menu .dropdown-menu {
right: 0;
top: 30px;
bottom: auto;
left: auto;
}

4
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -474,3 +474,7 @@ ol.category-breadcrumb {
margin: 20px 0 0 0;
}
}
.category-notification-menu {
display: none;
}