Tag Management: Delete Flow

Closes TryGhost#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 TryGhost#4654, but the modal is already a
neat step up from the immediate, warning-less deletion.

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;
     }

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;

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);
         },

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}}

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>