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'),
-      username: currentUser.get('username')
+      template: user.get('avatar_template'),
+      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: currentUser.get('path'), 'data-auto-route': true } },
+    return h('a.icon', { attributes: { href: attrs.user.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) {
-      icons.push(this.attach('user-dropdown', { active: attrs.userVisible,
+    if (attrs.user) {
+      icons.push(this.attach('user-dropdown', {
+        active: attrs.userVisible,
         action: 'toggleUserMenu',
-                                                ringBackdrop: attrs.ringBackdrop }));
+        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,12 +46,20 @@
     margin-left: 7px;
   }
 
-  .icons {
+  .d-header-icons {
     float: right;
+  }
+}
+
+.d-header-icons {
   text-align: center;
   margin: 0 0 0 5px;
   list-style: none;
 
+  .flagged-posts, .queued-posts {
+    background: $danger;
+  }
+
   > li {
     float: left;
   }
@@ -124,29 +132,32 @@
   .notifications {
     position: relative;
   }
-    .badge-notification, .ring {
+  .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;
   }
-    .flagged-posts {
-      right: 65px;
-    }
-  }
-  .flagged-posts, .queued-posts {
-    background: $danger;
-  }
 }
 
-
 .highlight-strong {
   background-color: $highlight-medium;
 }

app/assets/stylesheets/mobile/header.scss

@@ -28,7 +28,12 @@
     }
   }
 
-  .icons {
+  button.sign-up-button {
+    display:none;
+  }
+}
+
+.d-header-icons {
   .badge-notification {
     top: -5px;
     color: $secondary;
@@ -37,11 +42,6 @@
   .active .icon {
     &:after { margin-top: -1px; }
   }
-  }
-
-  button.sign-up-button {
-    display:none;
-  }
 }
 
 #main-outlet {