From 2debf7d97d50b988091f7660f380833445fcf86e Mon Sep 17 00:00:00 2001 From: Sam <sam.saffron@gmail.com> Date: Thu, 24 Apr 2014 10:48:04 +1000 Subject: [PATCH] Correct colors for tracking glyph in notification area --- .../views/buttons/notifications_button.js | 20 ++++++++++++------- .../stylesheets/common/base/discourse.scss | 3 ++- .../common/base/notification-options.scss | 7 +++++++ 3 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/common/base/notification-options.scss diff --git a/app/assets/javascripts/discourse/views/buttons/notifications_button.js b/app/assets/javascripts/discourse/views/buttons/notifications_button.js index 825c2acbb..3bcd2eb07 100644 --- a/app/assets/javascripts/discourse/views/buttons/notifications_button.js +++ b/app/assets/javascripts/discourse/views/buttons/notifications_button.js @@ -15,16 +15,20 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({ isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'), activeItem: Em.computed.alias('topic.details.notification_level'), + watchingClasses: 'fa fa-exclamation-circle watching', + trackingClasses: 'fa fa-circle tracking', + mutedClasses: 'fa fa-times-circle muted', + dropDownContent: function() { var contents = [], postfix = ''; if (this.get('isPrivateMessage')) { postfix = '_pm'; } _.each([ - ['WATCHING', 'watching', 'fa fa-circle heatmap-high'], - ['TRACKING', 'tracking', 'fa fa-circle heatmap-low'], - ['REGULAR', 'regular', ''], - ['MUTED', 'muted', 'fa fa-times-circle'] + ['WATCHING', 'watching', this.watchingClasses], + ['TRACKING', 'tracking', this.trackingClasses], + ['REGULAR', 'regular', 'tracking'], + ['MUTED', 'muted', this.mutedClasses] ], function(pair) { if (postfix === '_pm' && pair[1] === 'regular') { return; } @@ -40,6 +44,8 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({ }.property(), text: function() { + var self = this; + var key = (function() { switch (this.get('topic.details.notification_level')) { case Discourse.Topic.NotificationLevel.WATCHING: return 'watching'; @@ -51,9 +57,9 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({ var icon = (function() { switch (key) { - case 'watching': return '<i class="fa fa-circle heatmap-high"></i> '; - case 'tracking': return '<i class="fa fa-circle heatmap-low"></i> '; - case 'muted': return '<i class="fa fa-times-circle"></i> '; + case 'watching': return '<i class="' + self.watchingClasses + '"></i> '; + case 'tracking': return '<i class="' + self.trackingClasses + '"></i> '; + case 'muted': return '<i class="' + self.mutedClasses + '"></i> '; default: return ''; } })(); diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index eb2aa2126..e6322e167 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -19,7 +19,8 @@ body { color: $tertiary_text_color; } } - .coldmap-high { + + .coldmap-high { color: $coldmap-high !important; } .coldmap-med { diff --git a/app/assets/stylesheets/common/base/notification-options.scss b/app/assets/stylesheets/common/base/notification-options.scss new file mode 100644 index 000000000..4e8b834bd --- /dev/null +++ b/app/assets/stylesheets/common/base/notification-options.scss @@ -0,0 +1,7 @@ +.fa.muted { + color: $notification_badge_background_color; +} +.fa.tracking, .fa.watching { + color: lighten($emphasis_text_color, 20%); + font-weight: normal; +}