Make Dropdown and NotificationsDropdown components more extensible

framework/core/js/forum/src/components/NotificationsDropdown.js

@@ -1,8 +1,18 @@
-import Component from 'flarum/Component';
+import Dropdown from 'flarum/components/Dropdown';
 import icon from 'flarum/helpers/icon';
 import NotificationList from 'flarum/components/NotificationList';
 
-export default class NotificationsDropdown extends Component {
+export default class NotificationsDropdown extends Dropdown {
+  static initProps(props) {
+    props.className = props.className || 'NotificationsDropdown';
+    props.buttonClassName = props.buttonClassName || 'Button Button--flat';
+    props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
+    props.label = props.label || app.trans('core.notifications');
+    props.icon = props.icon || 'bell';
+
+    super.initProps(props);
+  }
+
   constructor(...args) {
     super(...args);
 
@@ -16,35 +26,51 @@ export default class NotificationsDropdown extends Component {
     this.list = new NotificationList();
   }
 
-  view() {
-    const user = app.session.user;
-    const unread = user.unreadNotificationsCount();
+  getButton() {
+    const unread = this.getUnreadCount();
+    const vdom = super.getButton();
 
+    vdom.attrs.className += (unread ? ' unread' : '');
+    vdom.attrs.onclick = this.onclick.bind(this);
+
+    return vdom;
+  }
+
+  getButtonContent() {
+    const unread = this.getUnreadCount();
+
+    return [
+      icon(this.props.icon, {className: 'Button-icon'}),
+      unread ? <span className="NotificationsDropdown-unread">{unread}</span> : '',
+      <span className="Button-label">{this.props.label}</span>
+    ];
+  }
+
+  getMenu() {
     return (
-      <div className="Dropdown NotificationsDropdown">
-        <a href="javascript:;"
-          className={'Dropdown-toggle Button Button--flat NotificationsDropdown-button' + (unread ? ' unread' : '')}
-          data-toggle="dropdown"
-          onclick={this.onclick.bind(this)}>
-          <span className="Button-icon">{unread || icon('bell')}</span>
-          <span className="Button-label">{app.trans('core.notifications')}</span>
-        </a>
-        <div className="Dropdown-menu Dropdown-menu--right" onclick={this.menuClick.bind(this)}>
-          {this.showing ? this.list.render() : ''}
-        </div>
+      <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
+        {this.showing ? this.list.render() : ''}
       </div>
     );
   }
 
   onclick() {
     if (app.drawer.isOpen()) {
-      m.route(app.route('notifications'));
+      this.goToRoute();
     } else {
       this.showing = true;
       this.list.load();
     }
   }
 
+  goToRoute() {
+    m.route(app.route('notifications'));
+  }
+
+  getUnreadCount() {
+    return app.session.user.unreadNotificationsCount();
+  }
+
   menuClick(e) {
     // Don't close the notifications dropdown if the user is opening a link in a
     // new tab or window.

framework/core/js/lib/components/Dropdown.js

@@ -23,20 +23,18 @@ export default class Dropdown extends Component {
 
     props.className = props.className || '';
     props.buttonClassName = props.buttonClassName || '';
-    props.contentClassName = props.contentClassName || '';
+    props.menuClassName = props.menuClassName || '';
     props.label = props.label || app.trans('core.controls');
     props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'caret-down';
   }
 
   view() {
-    const items = listItems(this.props.children);
+    const items = this.props.children ? listItems(this.props.children) : [];
 
     return (
       <div className={'ButtonGroup Dropdown dropdown ' + this.props.className + ' itemCount' + items.length}>
         {this.getButton()}
-        <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>
-          {items}
-        </ul>
+        {this.getMenu(items)}
       </div>
     );
   }
@@ -94,4 +92,12 @@ export default class Dropdown extends Component {
       this.props.caretIcon ? icon(this.props.caretIcon, {className: 'Button-caret'}) : ''
     ];
   }
+
+  getMenu(items) {
+    return (
+      <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>
+        {items}
+      </ul>
+    );
+  }
 }

framework/core/less/forum/NotificationList.less

@@ -76,19 +76,17 @@
   padding: 0;
 }
 .Notification {
-  > a {
-    display: block;
-    padding: 8px 15px 8px 70px;
-    color: @muted-color;
-    overflow: hidden;
+  display: block;
+  padding: 8px 15px 8px 70px;
+  color: @muted-color !important; // required to override .light-contents applied to header
+  overflow: hidden;
 
-    .unread& {
-      background: @control-bg;
-    }
-    &:hover {
-      text-decoration: none;
-      background: @control-bg;
-    }
+  .unread& {
+    background: @control-bg;
+  }
+  &:hover {
+    text-decoration: none;
+    background: @control-bg;
   }
   .Avatar {
     .Avatar--size(24px);

framework/core/less/forum/NotificationsDropdown.less

@@ -24,21 +24,19 @@
   }
 }
 
-.NotificationsDropdown-button.unread .Button-icon {
-  display: inline-block;
-  border-radius: 12px;
-  height: 24px;
-  width: 24px;
-  text-align: center;
-  padding: 2px 0;
-  font-weight: bold;
-  margin: -2px 0;
-  background: @primary-color;
-  color: @body-bg;
-  font-size: 13px;
-  vertical-align: 0;
-
-  & when (@config-colored-header = true) {
-    background: #fff;
-  }
+.NotificationsDropdown .Dropdown-toggle.unread .Button-icon {
+  color: @header-color;
+}
+.NotificationsDropdown-unread {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  background: @header-color;
+  color: @header-bg;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 2px 5px 3px;
+  line-height: 1em;
+  border-radius: 10px;
+  border: 1px solid @header-bg;
 }