UX: better flagging options

app/assets/javascripts/discourse/controllers/flag-action-type.js.es6

@@ -24,6 +24,7 @@ export default Ember.Controller.extend({
 
   showMessageInput: Em.computed.and('model.is_custom_flag', 'selected'),
   showDescription: Em.computed.not('showMessageInput'),
+  isNotifyUser: Em.computed.equal('model.name_key', 'notify_user'),
 
   customMessageLengthClasses: function() {
     return (this.get('message.length') < Discourse.SiteSettings.min_private_message_post_length) ? "too-short" : "ok";
@@ -44,4 +45,3 @@ export default Ember.Controller.extend({
   }.property('message.length')
 
 });
-

app/assets/javascripts/discourse/controllers/flag.js.es6

@@ -14,8 +14,19 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   flagsAvailable: function() {
     if (!this.get('flagTopic')) {
-      return this.get('model.flagsAvailable');
+      // flagging post
+      let flagsAvailable = this.get('model.flagsAvailable');
+
+      // "message user" option should be at the top
+      const notifyUserIndex = flagsAvailable.indexOf(flagsAvailable.filterProperty('name_key', 'notify_user')[0]);
+      if (notifyUserIndex !== -1) {
+        const notifyUser = flagsAvailable[notifyUserIndex];
+        flagsAvailable.splice(notifyUserIndex, 1);
+        flagsAvailable.splice(0, 0, notifyUser);
+      }
+      return flagsAvailable;
     } else {
+      // flagging topic
       const self = this,
           lookup = Em.Object.create();
 
@@ -35,6 +46,10 @@ export default Ember.Controller.extend(ModalFunctionality, {
     }
   }.property('post', 'flagTopic', 'model.actions_summary.@each.can_act'),
 
+  staffFlagsAvailable: function() {
+    return (this.get('model.flagsAvailable').length > 1);
+  }.property('post', 'flagTopic', 'model.actions_summary.@each.can_act'),
+
   submitEnabled: function() {
     const selected = this.get('selected');
     if (!selected) return false;

app/assets/javascripts/discourse/templates/modal/flag.hbs

@@ -2,18 +2,33 @@
 
   <form>
     {{#each f in flagsAvailable itemController="flag-action-type"}}
-      <div class='controls'>
+      {{#if f.isNotifyUser}}
-        <label class='radio'>
+        <h3>{{f.formattedName}}</h3>
-          <input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <strong>{{f.formattedName}}</strong>
+        <div class='controls'>
-          {{#if f.showDescription}}
+          <label class='radio'><input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <div class='description'>{{{f.model.description}}}</div></label>
-            <div class='description'>{{{f.model.description}}}</div>
+          {{#if f.showMessageInput}}
+            {{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
+            <div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
           {{/if}}
-        </label>
+        </div>
-        {{#if f.showMessageInput}}
+        {{#if staffFlagsAvailable}}
-          {{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
+          <hr>
-          <div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
+          <h3>{{i18n 'flagging.notify_staff'}}</h3>
         {{/if}}
-      </div>
+      {{else}}
+        <div class='controls'>
+          <label class='radio'>
+            <input type='radio' id="radio_{{unbound f.model.name_key}}" {{action "changePostActionType" f}} name='post_action_type_index'> <strong>{{f.formattedName}}</strong>
+            {{#if f.showDescription}}
+              <div class='description'>{{{f.model.description}}}</div>
+            {{/if}}
+          </label>
+          {{#if f.showMessageInput}}
+            {{textarea name="message" class="flag-message" placeholder=f.customPlaceholder value=f.message}}
+            <div {{bind-attr class=":custom-message-length f.customMessageLengthClasses"}}>{{f.customMessageLength}}</div>
+          {{/if}}
+        </div>
+      {{/if}}
     {{else}}
       {{i18n 'flagging.cant'}}
     {{/each}}

config/locales/client.en.yml

@@ -1627,6 +1627,7 @@ en:
       submit_tooltip: "Submit the private flag"
       take_action_tooltip: "Reach the flag threshold immediately, rather than waiting for more community flags"
       cant: "Sorry, you can't flag this post at this time."
+      notify_staff: 'Notify Staff'
       formatted_name:
         off_topic: "It's Off-Topic"
         inappropriate: "It's Inappropriate"

config/locales/server.en.yml

@@ -513,7 +513,7 @@ en:
       description: 'This post contains content that a reasonable person would consider offensive, abusive, or a violation of <a href="/guidelines">our community guidelines</a>.'
       long_form: 'flagged this as inappropriate'
     notify_user:
-      title: 'Message @{{username}}'
+      title: 'Contact @{{username}} via private message'
       description: 'This post contains something I want to talk to this person directly and privately about. Does not cast a flag.'
       long_form: 'messaged user'
       email_title: 'Your post in "%{title}"'