REFACTOR: minor tweaks to user's notifications-filter (#9623)

app/assets/javascripts/discourse/app/components/user-notifications-large.js

@@ -1,20 +1,19 @@
 import MountWidget from "discourse/components/mount-widget";
-import { observes } from "discourse-common/utils/decorators";
 
 export default MountWidget.extend({
   widget: "user-notifications-large",
+  notifications: null,
+  filter: null,
+  args: null,
 
-  init() {
+  didReceiveAttrs() {
     this._super(...arguments);
-    this.args = { notifications: this.notifications, filter: this.filter };
-  },
 
-  @observes("notifications.length", "notifications.@each.read", "filter")
-  _triggerRefresh() {
     this.set("args", {
       notifications: this.notifications,
       filter: this.filter
     });
+
     this.queueRerender();
   }
 });

app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs

@@ -8,10 +8,9 @@
   </div>
 {{/if}}
 
-{{notifications-filter value=filter onChange=(action "filterNotifications")}}
-<span class="user-notifications-filter-separator"></span>
-
 {{#if hasNotifications}}
+  {{notifications-filter value=filter onChange=(action "filterNotifications")}}
+  <span class="user-notifications-filter-separator"></span>
   {{user-notifications-large notifications=model filter=filter}}
   {{conditional-loading-spinner condition=loading}}
 {{else}}

app/assets/javascripts/select-kit/components/notifications-filter.js

@@ -3,6 +3,7 @@ import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["notifications-filter"],
+
   content: computed(function() {
     return [
       {
@@ -19,6 +20,7 @@ export default DropdownSelectBoxComponent.extend({
       }
     ];
   }),
+
   selectKitOptions: {
     headerComponent: "notifications-filter/notifications-filter-header"
   }

app/assets/javascripts/select-kit/components/notifications-filter/notifications-filter-header.js

@@ -1,15 +1,14 @@
 import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
 import discourseComputed from "discourse-common/utils/decorators";
+import { fmt } from "discourse/lib/computed";
 
 export default DropdownSelectBoxHeaderComponent.extend({
   layoutName:
     "select-kit/templates/components/notifications-filter/notifications-filter-header",
+
   classNames: ["notifications-filter-header"],
 
-  @discourseComputed("value")
-  label(value) {
-    return `user.user_notifications.filters.${value}`;
-  },
+  label: fmt("value", "user.user_notifications.filters.%@"),
 
   @discourseComputed("selectKit.isExpanded")
   caretIcon(isExpanded) {

app/assets/stylesheets/common/select-kit/notifications-filter.scss

@@ -5,37 +5,33 @@
       position: relative;
 
       .select-kit-collection {
-        padding: 5px;
+        padding: 0.25em;
       }
 
       .notifications-filter-header {
-        padding: 0 0.5em 0 0.5em;
+        padding: 0.5em;
         background: none;
         border: none;
-        justify-content: flex-start;
-        width: auto;
-        height: auto;
-        label.filter-text {
-          margin-right: 15px;
+        outline: none;
+        cursor: pointer;
+
+        .filter-text {
+          margin-right: 0.5em;
           color: $primary-medium;
+          cursor: pointer;
+          margin-bottom: 0;
         }
 
-        label.header-text {
+        .header-text {
           color: dark-light-choose($tertiary, $tertiary);
+          cursor: pointer;
+          margin-bottom: 0;
         }
 
         .d-icon {
           color: $primary-medium;
-          opacity: 1;
-          margin: 5px 0 10px 5px;
-          font-size: $font-up-3;
-        }
-
-        &.is-focused,
-        &:hover {
-          background: none;
-          border: none;
-          outline: none;
+          margin: 0 0 0 0.25em;
+          font-size: $font-up-2;
         }
       }
     }