Show login modal if replying as guest; disable button if no permission

Also hide the first item in dropdown-split menus

framework/core/js/lib/components/dropdown-split.js

@@ -13,10 +13,11 @@ export default class DropdownSplit extends Component {
     var firstItem = this.props.items[0];
     var items = listItems(this.props.items);
 
-    var buttonProps = { className: this.props.buttonClass || 'btn btn-default' };
+    var buttonProps = {};
     for (var i in firstItem.props) {
       buttonProps[i] = firstItem.props[i];
     }
+    buttonProps.className = (buttonProps.className || '')+' '+(this.props.buttonClass || 'btn btn-default');
 
     return m('div', {className: 'dropdown dropdown-split btn-group item-count-'+(items.length)+' '+this.props.className}, [
       ActionButton.component(buttonProps),

framework/core/js/lib/models/discussion.js

@@ -5,6 +5,7 @@ import DiscussionPage from 'flarum/components/discussion-page';
 import ActionButton from 'flarum/components/action-button';
 import Separator from 'flarum/components/separator';
 import ComposerReply from 'flarum/components/composer-reply';
+import LoginModal from 'flarum/components/login-modal';
 
 class Discussion extends Model {
   unreadCount() {
@@ -23,7 +24,10 @@ class Discussion extends Model {
     var items = new ItemList();
 
     if (context instanceof DiscussionPage) {
-      items.add('reply', ActionButton.component({ icon: 'reply', label: 'Reply', onclick: this.replyAction.bind(this) }));
+      items.add('reply', !app.session.user() || this.canReply()
+        ? ActionButton.component({ icon: 'reply', label: app.session.user() ? 'Reply' : 'Log In to Reply', onclick: this.replyAction.bind(this) })
+        : ActionButton.component({ icon: 'reply', label: 'Can\'t Reply', className: 'disabled', title: 'You don\'t have permission to reply to this discussion.' })
+      );
 
       items.add('separator', Separator.component());
     }
@@ -40,7 +44,7 @@ class Discussion extends Model {
   }
 
   replyAction() {
-    if (app.session.user()) {
+    if (app.session.user() && this.canReply()) {
       if (app.current.discussion && app.current.discussion().id() === this.id()) {
         app.current.streamContent.goToLast();
       }
@@ -49,8 +53,11 @@ class Discussion extends Model {
         discussion: this
       }));
       app.composer.show();
-    } else {
-      // signup
+    } else if (!app.session.user()) {
+      app.modal.show(new LoginModal({
+        message: 'You must be logged in to do that.',
+        callback: this.replyAction.bind(this)
+      }));
     }
   }
 

framework/core/less/lib/dropdowns.less

@@ -14,6 +14,15 @@
       color: @fl-body-color;
       background-color: @fl-body-control-bg;
     }
+    &.disabled {
+      color: #aaa;
+      cursor: default;
+
+      &:hover, &:focus {
+        color: #aaa;
+        background: none;
+      }
+    }
     & .icon {
       float: left;
       margin-left: -25px;
@@ -31,12 +40,22 @@
     background-color: @fl-body-control-bg;
   }
 }
-.dropdown-split.item-count-1 {
-  & .btn {
-    border-radius: @border-radius-base !important;
-  }
-  & .dropdown-toggle {
-    display: none;
+@media @tablet, @desktop, @desktop-hd {
+  .dropdown-split {
+    &.item-count-1 {
+      & .btn {
+        border-radius: @border-radius-base !important;
+      }
+      & .dropdown-toggle {
+        display: none;
+      }
+    }
+
+    & .dropdown-menu li:first-child {
+      &, & + li.divider {
+        display: none;
+      }
+    }
   }
 }