UX: Make flag dropdown actions more clear

app/assets/javascripts/select-box-kit/components/admin-agree-flag-dropdown.js.es6

@@ -12,8 +12,10 @@ export default DropdownSelectBox.extend({
 
   @on("didReceiveAttrs")
   _setAdminAgreeDropdownOptions() {
-    this.set("headerComponentOptions.selectedName", `${I18n.t(this.get("headerText"))}...`);
+    this.get('headerComponentOptions').setProperties({
-    this.set("headerComponentOptions.icon", iconHTML("thumbs-o-up"));
+      selectedName: `${I18n.t(this.get("headerText"))} ...`,
+      icon: iconHTML("thumbs-o-up")
+    });
   },
 
   @computed("adminTools", "post.user")
@@ -27,30 +29,30 @@ export default DropdownSelectBox.extend({
   content(post, canDeleteSpammer) {
     const content = [];
 
-    if (post.user_deleted === true) {
+    if (post.user_deleted) {
       content.push({
-        title:  I18n.t("admin.flags.agree_flag_restore_post_title"),
         icon: "eye",
         id: "confirm-agree-restore",
         action: () => this.send("perform", "restore"),
         label:  I18n.t("admin.flags.agree_flag_restore_post"),
+        description:  I18n.t("admin.flags.agree_flag_restore_post_title")
       });
     } else {
-      if (post.get("postHidden") !== true) {
+      if (!post.get("postHidden")) {
         content.push({
-          title:  I18n.t("admin.flags.agree_flag_hide_post_title"),
           icon: "eye-slash",
           action: () => this.send("perform", "hide"),
           id: "confirm-agree-hide",
           label: I18n.t("admin.flags.agree_flag_hide_post"),
+          description: I18n.t("admin.flags.agree_flag_hide_post_title")
         });
       }
     }
 
     content.push({
-      title:  I18n.t("admin.flags.agree_flag_title"),
       icon: "thumbs-o-up",
       id: "confirm-agree-keep",
+      description: I18n.t('admin.flags.agree_flag_title'),
       action: () => this.send("perform", "keep"),
       label:  I18n.t("admin.flags.agree_flag"),
     });

app/assets/javascripts/select-box-kit/components/admin-delete-flag-dropdown.js.es6

@@ -11,8 +11,10 @@ export default DropdownSelectBox.extend({
 
   @on("didReceiveAttrs")
   _setAdminDeleteDropdownOptions() {
-    this.set("headerComponentOptions.selectedName", I18n.t(this.get("headerText")));
+    this.get('headerComponentOptions').setProperties({
-    this.set("headerComponentOptions.icon", iconHTML("trash-o"));
+      selectedName: `${I18n.t(this.get("headerText"))} ...`,
+      icon: iconHTML("trash-o")
+    });
   },
 
   @computed("adminTools", "post.user")
@@ -27,19 +29,19 @@ export default DropdownSelectBox.extend({
     const content = [];
 
     content.push({
-      title:  I18n.t("admin.flags.delete_post_defer_flag_title"),
       icon: "external-link",
       id: "delete-defer",
       action: () => this.send("deletePostDeferFlag"),
-      label: I18n.t("admin.flags.delete_post_defer_flag")
+      label: I18n.t("admin.flags.delete_post_defer_flag"),
+      description:  I18n.t("admin.flags.delete_post_defer_flag_title"),
     });
 
     content.push({
-      title:  I18n.t("admin.flags.delete_post_agree_flag_title"),
       icon: "thumbs-o-up",
       id: "delete-agree",
       action: () => this.send("deletePostAgreeFlag"),
-      label: I18n.t("admin.flags.delete_post_agree_flag")
+      label: I18n.t("admin.flags.delete_post_agree_flag"),
+      description:  I18n.t("admin.flags.delete_post_agree_flag_title"),
     });
 
     if (canDeleteSpammer) {

app/assets/javascripts/select-box-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs

@@ -14,4 +14,5 @@
       {{selectedName}}
     </span>
   {{/if}}
+
 </button>

app/assets/stylesheets/common/select-box-kit/admin-agree-flag-dropdown.scss

@@ -1,6 +1,11 @@
 .select-box-kit {
   &.dropdown-select-box {
+
     &.admin-agree-flag-dropdown {
+      .select-box-kit-body {
+        width: 485px;
+        max-width: 485px;
+      }
       .select-box-kit-row[data-value="delete-spammer"] .texts .name,
       .select-box-kit-row[data-value="delete-spammer"] .icons .d-icon {
         color: $danger;

config/locales/client.en.yml

@@ -2617,20 +2617,19 @@ en:
 
         agree: "Agree"
         agree_title: "Confirm this flag as valid and correct"
-        agree_flag_modal_title: "Agree and..."
+        agree_flag_hide_post: "Agree and Hide Post"
-        agree_flag_hide_post: "Agree (hide post + send PM)"
+        agree_flag_hide_post_title: "Hide this post and automatically send the user a message urging them to edit it."
-        agree_flag_hide_post_title: "Hide this post and automatically send the user a message urging them to edit it"
+        agree_flag_restore_post: "Agree and Restore Post"
-        agree_flag_restore_post: "Agree (restore post)"
+        agree_flag_restore_post_title: "Restore the post so that all users can see it."
-        agree_flag_restore_post_title: "Restore this post"
+        agree_flag: "Agree and Keep Post"
-        agree_flag: "Agree with flag"
+        agree_flag_title: "Agree with flag and keep the post unchanged."
-        agree_flag_title: "Agree with flag and keep the post unchanged"
         defer_flag: "Ignore"
         defer_flag_title: "Remove this flag; it requires no action at this time."
         delete: "Delete"
         delete_title: "Delete the post this flag refers to."
-        delete_post_defer_flag: "Delete post and Ignore flag"
+        delete_post_defer_flag: "Delete Post and Ignore flag"
         delete_post_defer_flag_title: "Delete post; if the first post, delete the topic"
-        delete_post_agree_flag: "Delete post and Agree with flag"
+        delete_post_agree_flag: "Delete Post and Agree with flag"
         delete_post_agree_flag_title: "Delete post; if the first post, delete the topic"
         delete_flag_modal_title: "Delete and..."
         delete_spammer: "Delete Spammer"