From ea0ecb67f3a22ba6fc3c883dbd9c333d595c1953 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 11 May 2017 15:09:23 -0400
Subject: [PATCH] UX: Move delete button to end and mark it as dangerous

---
 .../controllers/topic-bulk-actions.js.es6     | 42 +++++++++++--------
 .../templates/modal/bulk-actions-buttons.hbs  |  2 +-
 2 files changed, 25 insertions(+), 19 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 b2eff265e1e..ac84cf19683 100644
--- a/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic-bulk-actions.js.es6
@@ -4,31 +4,37 @@ const _buttons = [];
 
 const alwaysTrue = () => true;
 
-function addBulkButton(action, key, icon, buttonVisible) {
-  _buttons.push({
+function addBulkButton(action, key, opts) {
+  opts = opts || {};
+
+  const btn = {
     action,
     label: `topics.bulk.${key}`,
-    icon,
-    buttonVisible: buttonVisible || alwaysTrue
-  });
+    icon: opts.icon,
+    buttonVisible: opts.buttonVisible || alwaysTrue,
+    class: opts.class
+  };
+
+  _buttons.push(btn);
 }
 
 // Default buttons
-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('showChangeCategory', 'change_category', {icon: 'pencil'});
+addBulkButton('closeTopics', 'close_topics', {icon: 'lock'});
+addBulkButton('archiveTopics', 'archive_topics', {icon: 'folder'});
+addBulkButton('showNotificationLevel', 'notification_level', {icon: 'circle-o'});
+addBulkButton('resetRead', 'reset_read', {icon: 'backward'});
+addBulkButton('unlistTopics', 'unlist_topics', {
+  icon: 'eye-slash',
+  buttonVisible: topics => topics.some(t => t.visible)
 });
-addBulkButton('relistTopics', 'relist_topics', 'eye', topics => {
-  return topics.some(t => !t.visible);
+addBulkButton('relistTopics', 'relist_topics', {
+  icon: 'eye',
+  buttonVisible: topics => topics.some(t => !t.visible)
 });
-
-addBulkButton('showTagTopics', 'change_tags', 'tag');
-addBulkButton('showAppendTagTopics', 'append_tags', 'tag');
+addBulkButton('showTagTopics', 'change_tags', {icon: 'tag'});
+addBulkButton('showAppendTagTopics', 'append_tags', {icon: 'tag'});
+addBulkButton('deleteTopics', 'delete', {icon: 'trash', class: 'btn-danger'});
 
 // Modal for performing bulk actions on topics
 export default Ember.Controller.extend(ModalFunctionality, {
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 34a6774f755..11311ccc27e 100644
--- a/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bulk-actions-buttons.hbs
@@ -1,5 +1,5 @@
 <div class='bulk-buttons'>
   {{#each buttons as |button|}}
-    {{d-button action=button.action label=button.label icon=button.icon}}
+    {{d-button action=button.action label=button.label icon=button.icon class=button.class}}
   {{/each}}
 </div>