From 5bbc477baaacc2c3317c8fd82a1a058502f6d761 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 11 May 2017 14:47:08 -0400
Subject: [PATCH] UX: Better looking bulk actions modal

---
 .../controllers/topic-bulk-actions.js.es6     | 60 +++++++++----------
 .../templates/modal/bulk-actions-buttons.hbs  | 12 ++--
 .../common/components/buttons.scss            |  4 ++
 app/assets/stylesheets/desktop/modal.scss     | 12 ++++
 config/locales/client.en.yml                  |  4 +-
 5 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6 b/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
index af9deb0c216..b2eff265e1e 100644
--- a/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
@@ -2,51 +2,47 @@ import ModalFunctionality from 'discourse/mixins/modal-functionality';
 
 const _buttons = [];
 
-function addBulkButton(action, key) {
-  _buttons.push({ action: action, label: "topics.bulk." + key });
+const alwaysTrue = () => true;
+
+function addBulkButton(action, key, icon, buttonVisible) {
+  _buttons.push({
+    action,
+    label: `topics.bulk.${key}`,
+    icon,
+    buttonVisible: buttonVisible || alwaysTrue
+  });
 }
 
 // Default buttons
-addBulkButton('showChangeCategory', 'change_category');
-addBulkButton('deleteTopics', 'delete');
-addBulkButton('closeTopics', 'close_topics');
-addBulkButton('archiveTopics', 'archive_topics');
-addBulkButton('showNotificationLevel', 'notification_level');
-addBulkButton('resetRead', 'reset_read');
-addBulkButton('unlistTopics', 'unlist_topics');
-addBulkButton('showTagTopics', 'change_tags');
-addBulkButton('showAppendTagTopics', 'append_tags');
+addBulkButton('showChangeCategory', 'change_category', 'pencil');
+addBulkButton('deleteTopics', 'delete', 'trash');
+addBulkButton('closeTopics', 'close_topics', 'lock');
+addBulkButton('archiveTopics', 'archive_topics', 'folder');
+addBulkButton('showNotificationLevel', 'notification_level', 'circle-o');
+addBulkButton('resetRead', 'reset_read', 'backward');
+addBulkButton('unlistTopics', 'unlist_topics', 'eye-slash', topics => {
+  return topics.some(t => t.visible);
+});
+addBulkButton('relistTopics', 'relist_topics', 'eye', topics => {
+  return topics.some(t => !t.visible);
+});
+
+addBulkButton('showTagTopics', 'change_tags', 'tag');
+addBulkButton('showAppendTagTopics', 'append_tags', 'tag');
 
 // Modal for performing bulk actions on topics
 export default Ember.Controller.extend(ModalFunctionality, {
   tags: null,
-  buttonRows: null,
 
   emptyTags: Ember.computed.empty('tags'),
   categoryId: Ember.computed.alias('model.category.id'),
 
   onShow() {
-    const showRelistButton = this.get('model.topics').some(t => !t.visible);
-    const relistButtonIndex = _buttons.findIndex(b => b.action === 'relistTopics');
-    if (showRelistButton && relistButtonIndex === -1) {
-      addBulkButton('relistTopics', 'relist_topics');
-    } else if (!showRelistButton && relistButtonIndex !== -1) {
-      _buttons.splice(relistButtonIndex, 1);
-    }
+    const topics = this.get('model.topics');
+    // const relistButtonIndex = _buttons.findIndex(b => b.action === 'relistTopics');
+
+    this.set('buttons', _buttons.filter(b => b.buttonVisible(topics)));
     this.set('modal.modalClass', 'topic-bulk-actions-modal small');
-
-    const buttonRows = [];
-    let row = [];
-    _buttons.forEach(function(b) {
-      row.push(b);
-      if (row.length === 4) {
-        buttonRows.push(row);
-        row = [];
-      }
-    });
-    if (row.length) { buttonRows.push(row); }
-
-    this.set('buttonRows', buttonRows);
     this.send('changeBulkTemplate', 'modal/bulk-actions-buttons');
   },
 
diff --git a/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs b/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
index 94f87b8074a..34a6774f755 100644
--- a/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
@@ -1,7 +1,5 @@
-{{#each buttonRows as |row|}}
-  <p>
-    {{#each row as |button|}}
-      {{d-button action=button.action label=button.label}}
-    {{/each}}
-  </p>
-{{/each}}
+<div class='bulk-buttons'>
+  {{#each buttons as |button|}}
+    {{d-button action=button.action label=button.label icon=button.icon}}
+  {{/each}}
+</div>
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index aa6bb489c98..8dc70e66442 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -60,6 +60,10 @@
     &:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
     cursor: not-allowed;
   }
+
+  i.fa {
+    opacity: 0.7;
+  }
 }
 
 // Primary button
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index cf751ad717f..c345acd0cd1 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -146,6 +146,18 @@
     height: 400px;
     max-height: 400px;
   }
+
+  .bulk-buttons {
+    display: flex;
+    flex-wrap: wrap;
+
+    .btn {
+      width: 22%;
+      margin-bottom: 1em;
+      margin-right: 1em;
+    }
+  }
+
 }
 .tabbed-modal {
   .modal-body {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 18f4ef79adb..e431d969cec 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1376,10 +1376,10 @@ en:
         dismiss_new: "Dismiss New"
         toggle: "toggle bulk selection of topics"
         actions: "Bulk Actions"
-        change_category: "Change Category"
+        change_category: "Set Category"
         close_topics: "Close Topics"
         archive_topics: "Archive Topics"
-        notification_level: "Change Notification Level"
+        notification_level: "Notifications"
         choose_new_category: "Choose the new category for the topics:"
         selected:
           one: "You have selected <b>1</b> topic."