Refactor header CSS for composability

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -28,23 +28,23 @@ createWidget('header-notifications', {
   },
 
   html(attrs) {
-    const { currentUser } = this;
+    const { user } = attrs;
 
     const contents = [ avatarImg(this.settings.avatarSize, {
-      template: currentUser.get('avatar_template'),
+      template: user.get('avatar_template'),
-      username: currentUser.get('username')
+      username: user.get('username')
     }) ];
 
-    const unreadNotifications = currentUser.get('unread_notifications');
+    const unreadNotifications = user.get('unread_notifications');
     if (!!unreadNotifications) {
       contents.push(this.attach('link', { action: attrs.action,
                                           className: 'badge-notification unread-notifications',
                                           rawLabel: unreadNotifications }));
     }
 
-    const unreadPMs = currentUser.get('unread_private_messages');
+    const unreadPMs = user.get('unread_private_messages');
     if (!!unreadPMs) {
-      if (!currentUser.get('read_first_notification')) {
+      if (!user.get('read_first_notification')) {
         contents.push(h('span.ring'));
         if (!attrs.active && attrs.ringBackdrop) {
           contents.push(h('span.ring-backdrop-spotlight'));
@@ -72,9 +72,7 @@ createWidget('user-dropdown', jQuery.extend({
   },
 
   html(attrs) {
-    const { currentUser } = this;
+    return h('a.icon', { attributes: { href: attrs.user.get('path'), 'data-auto-route': true } },
-
-    return h('a.icon', { attributes: { href: currentUser.get('path'), 'data-auto-route': true } },
              this.attach('header-notifications', attrs));
   }
 }, dropdown));
@@ -106,7 +104,7 @@ createWidget('header-dropdown', jQuery.extend({
 }, dropdown));
 
 createWidget('header-icons', {
-  tagName: 'ul.icons.clearfix',
+  tagName: 'ul.icons.d-header-icons.clearfix',
 
   buildAttributes() {
     return { role: 'navigation' };
@@ -139,10 +137,13 @@ createWidget('header-icons', {
                    });
 
     const icons = [search, hamburger];
-    if (this.currentUser) {
+    if (attrs.user) {
-      icons.push(this.attach('user-dropdown', { active: attrs.userVisible,
+      icons.push(this.attach('user-dropdown', {
-                                                action: 'toggleUserMenu',
+        active: attrs.userVisible,
-                                                ringBackdrop: attrs.ringBackdrop }));
+        action: 'toggleUserMenu',
+        ringBackdrop: attrs.ringBackdrop,
+        user: attrs.user
+      }));
     }
 
     return icons;
@@ -204,7 +205,8 @@ export default createWidget('header', {
                                                   userVisible: state.userVisible,
                                                   searchVisible: state.searchVisible,
                                                   ringBackdrop: state.ringBackdrop,
-                                                  flagCount: attrs.flagCount })];
+                                                  flagCount: attrs.flagCount,
+                                                  user: this.currentUser })];
 
     if (state.searchVisible) {
       const contextType = this.searchContextType();

app/assets/stylesheets/common/base/header.scss

@@ -46,106 +46,117 @@
     margin-left: 7px;
   }
 
-  .icons {
+  .d-header-icons {
     float: right;
-    text-align: center;
-    margin: 0 0 0 5px;
-    list-style: none;
-
-    > li {
-      float: left;
-    }
-    .icon {
-      display: block;
-      padding: 3px;
-      color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
-      text-decoration: none;
-      cursor: pointer;
-      border-top: 1px solid transparent;
-      border-left: 1px solid transparent;
-      border-right: 1px solid transparent;
-      transition: all linear .15s;
-
-
-      &:hover {
-        color: $primary;
-        background-color:  $primary-low;
-        border-top: 1px solid transparent;
-        border-left: 1px solid transparent;
-        border-right: 1px solid transparent;
-      }
-      &:active {
-        color: $primary;
-        background-color: $primary-low;
-      }
-    }
-    .drop-down-visible & {
-      .active .icon {
-        position: relative;
-        color: #7b7b7b;
-        background-color: $secondary;
-        cursor: default;
-        border-top: 1px solid $primary-low;
-        border-left: 1px solid $primary-low;
-        border-right: 1px solid $primary-low;
-
-        .badge-notification {
-          top: -10px;
-        }
-
-        .flagged-posts {
-          right: 24px;
-        }
-
-        &:after {
-          display: block;
-          position: absolute;
-          top: 100%;
-          left: 0;
-          z-index: 1101;
-          width: 100%;
-          height: 0;
-          content: "";
-          border-top: 1px solid $secondary;
-        }
-        &:hover {
-          border-bottom: none;
-        }
-      }
-    }
-
-    .d-icon {
-      width: 32px;
-      height: 32px;
-      font-size: 1.714em;
-      line-height: 32px;
-      display: inline-block;
-    }
-    .notifications {
-      position: relative;
-    }
-    .badge-notification, .ring {
-      position: absolute;
-      top: -9px;
-      z-index: 1;
-      margin-left: 0;
-    }
-    .unread-notifications {
-      right: 0;
-      background-color: scale-color($tertiary, $lightness: 50%);
-    }
-    .unread-private-messages, .ring {
-      right: 25px;
-    }
-    .flagged-posts {
-      right: 65px;
-    }
-  }
-  .flagged-posts, .queued-posts {
-    background: $danger;
   }
 }
 
+.d-header-icons {
+  text-align: center;
+  margin: 0 0 0 5px;
+  list-style: none;
+
+  .flagged-posts, .queued-posts {
+    background: $danger;
+  }
+
+  > li {
+    float: left;
+  }
+  .icon {
+    display: block;
+    padding: 3px;
+    color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
+    text-decoration: none;
+    cursor: pointer;
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    transition: all linear .15s;
+
+
+    &:hover {
+      color: $primary;
+      background-color:  $primary-low;
+      border-top: 1px solid transparent;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+    }
+    &:active {
+      color: $primary;
+      background-color: $primary-low;
+    }
+  }
+  .drop-down-visible & {
+    .active .icon {
+      position: relative;
+      color: #7b7b7b;
+      background-color: $secondary;
+      cursor: default;
+      border-top: 1px solid $primary-low;
+      border-left: 1px solid $primary-low;
+      border-right: 1px solid $primary-low;
+
+      .badge-notification {
+        top: -10px;
+      }
+
+      .flagged-posts {
+        right: 24px;
+      }
+
+      &:after {
+        display: block;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1101;
+        width: 100%;
+        height: 0;
+        content: "";
+        border-top: 1px solid $secondary;
+      }
+      &:hover {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .d-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 1.714em;
+    line-height: 32px;
+    display: inline-block;
+  }
+  .notifications {
+    position: relative;
+  }
+  .ring {
+    position: absolute;
+    top: -9px;
+    z-index: 1;
+    margin-left: 0;
+  }
+  .header-dropdown-toggle {
+    position: relative;
+  }
+  .badge-notification {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: -9px;
+  }
+  .unread-notifications {
+    left: auto;
+    right: 0;
+    background-color: scale-color($tertiary, $lightness: 50%);
+  }
+  .unread-private-messages, .ring {
+    left: auto;
+    right: 25px;
+  }
+}
 
 .highlight-strong {
   background-color: $highlight-medium;

app/assets/stylesheets/mobile/header.scss

@@ -28,22 +28,22 @@
     }
   }
 
-  .icons {
-    .badge-notification {
-      top: -5px;
-      color: $secondary;
-    }
-
-    .active .icon {
-      &:after { margin-top: -1px; }
-    }
-  }
-
   button.sign-up-button {
     display:none;
   }
 }
 
+.d-header-icons {
+  .badge-notification {
+    top: -5px;
+    color: $secondary;
+  }
+
+  .active .icon {
+    &:after { margin-top: -1px; }
+  }
+}
+
 #main-outlet {
   padding-top: 60px;
 }