From fb348fb30a783b8dbf45093c878ea5fe39e3eb07 Mon Sep 17 00:00:00 2001
From: Felix Rieseberg <felix@felixrieseberg.com>
Date: Mon, 15 Dec 2014 09:06:35 -0800
Subject: [PATCH] Tag Management: Delete Flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #4633
- The ‘delete’ button is now a smaller plain text link, opening a
confirmation modal analog to the delete user/post flow
- Adding a post count is dependent on #4654, but the modal is already a
neat step up from the immediate, warning-less deletion.
---
 .../assets/sass/components/settings-menu.scss | 17 ++++++++++
 core/client/controllers/modals/delete-tag.js  | 34 +++++++++++++++++++
 core/client/controllers/settings/tags.js      | 13 -------
 core/client/templates/modals/delete-tag.hbs   |  6 ++++
 .../templates/settings/tags/settings-menu.hbs |  2 +-
 5 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 core/client/controllers/modals/delete-tag.js
 create mode 100644 core/client/templates/modals/delete-tag.hbs

diff --git a/core/client/assets/sass/components/settings-menu.scss b/core/client/assets/sass/components/settings-menu.scss
index 084570ca08..ab6504e038 100644
--- a/core/client/assets/sass/components/settings-menu.scss
+++ b/core/client/assets/sass/components/settings-menu.scss
@@ -143,6 +143,23 @@
         height: 108px;
     }
 
+    .tag-delete-button {
+        padding: 0;
+        color: $red;
+
+        &:before {
+            margin-right: 4px;
+            top: -1px;
+            position: relative;
+        }
+
+        &:hover {
+            &, &:before {
+                color: darken($red, 10%);
+            }
+        }
+    }
+
     .nav-list {
         margin-top: 3rem;
     }
diff --git a/core/client/controllers/modals/delete-tag.js b/core/client/controllers/modals/delete-tag.js
new file mode 100644
index 0000000000..60b4fb8648
--- /dev/null
+++ b/core/client/controllers/modals/delete-tag.js
@@ -0,0 +1,34 @@
+var DeleteTagController = Ember.Controller.extend({
+    actions: {
+        confirmAccept: function () {
+            var tag = this.get('model'),
+                name = tag.get('name'),
+                self = this;
+
+            this.send('closeSettingsMenu');
+
+            tag.destroyRecord().then(function () {
+                self.notifications.showSuccess('Deleted ' + name);
+            }).catch(function (error) {
+                self.notifications.showAPIError(error);
+            });
+        },
+
+        confirmReject: function () {
+            return false;
+        }
+    },
+
+    confirm: {
+        accept: {
+            text: 'Delete',
+            buttonClass: 'btn btn-red'
+        },
+        reject: {
+            text: 'Cancel',
+            buttonClass: 'btn btn-default btn-minor'
+        }
+    }
+});
+
+export default DeleteTagController;
diff --git a/core/client/controllers/settings/tags.js b/core/client/controllers/settings/tags.js
index ea6239cf82..606cfdd440 100644
--- a/core/client/controllers/settings/tags.js
+++ b/core/client/controllers/settings/tags.js
@@ -114,19 +114,6 @@ var TagsController = Ember.ArrayController.extend(PaginationMixin, {
             this.send('openSettingsMenu');
         },
 
-        deleteTag: function (tag) {
-            var name = tag.get('name'),
-                self = this;
-
-            this.send('closeSettingsMenu');
-
-            tag.destroyRecord().then(function () {
-                self.notifications.showSuccess('Deleted ' + name);
-            }).catch(function (error) {
-                self.notifications.showAPIError(error);
-            });
-        },
-
         saveActiveTagName: function (name) {
             this.saveActiveTagProperty('name', name);
         },
diff --git a/core/client/templates/modals/delete-tag.hbs b/core/client/templates/modals/delete-tag.hbs
new file mode 100644
index 0000000000..240cb0516c
--- /dev/null
+++ b/core/client/templates/modals/delete-tag.hbs
@@ -0,0 +1,6 @@
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+    title="Are you sure you want to delete this tag?" confirm=confirm}}
+
+    <p>You're about to delete "<strong>{{model.name}}</strong>".<br />This is permanent! No backups, no restores, no magic undo button. <br /> We warned you, ok?</p>
+
+{{/gh-modal-dialog}}
\ No newline at end of file
diff --git a/core/client/templates/settings/tags/settings-menu.hbs b/core/client/templates/settings/tags/settings-menu.hbs
index 8aaac494d2..165ae74ada 100644
--- a/core/client/templates/settings/tags/settings-menu.hbs
+++ b/core/client/templates/settings/tags/settings-menu.hbs
@@ -35,7 +35,7 @@
                 </ul>
 
                 {{#unless activeTag.isNew}}
-                    <button type="button" class="btn btn-red icon-trash" {{action "deleteTag" activeTag}}>Delete Tag</button>
+                    <button type="button" class="btn btn-link btn-sm tag-delete-button icon-trash" {{action "openModal" "delete-tag" activeTag}}>Delete Tag</button>
                 {{/unless}}
             </form>
         </div>