From 6e48884274a77d8e6cc9ef0ff3449c7f08ba959e Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 13 Sep 2017 13:23:19 -0400
Subject: [PATCH] Extract out common "cancel" link functionality from modals

---
 .../javascripts/admin/models/admin-user.js.es6  |  2 +-
 .../admin/services/admin-tools.js.es6           |  2 +-
 .../admin/templates/modal/admin-add-upload.hbs  |  2 +-
 .../modal/admin-edit-badge-groupings.hbs        |  2 +-
 .../templates/modal/admin-import-theme.hbs      |  2 +-
 .../templates/modal/admin-suspend-user.hbs      |  2 +-
 .../discourse/components/d-modal-cancel.js.es6  |  3 +++
 .../controllers/preferences/account.js.es6      |  2 +-
 .../templates/components/d-modal-cancel.hbs     |  1 +
 .../templates/modal/avatar-selector.hbs         |  2 +-
 .../templates/modal/edit-topic-timer.hbs        |  2 +-
 .../discourse/templates/modal/feature-topic.hbs |  2 +-
 .../discourse/templates/modal/jump-to-post.hbs  |  2 +-
 .../modal/request-group-membership-form.hbs     |  2 +-
 .../templates/modal/upload-selector.hbs         |  2 +-
 .../stylesheets/common/admin/suspend.scss       |  2 --
 app/assets/stylesheets/common/base/modal.scss   | 17 ++++-------------
 .../acceptance/admin-suspend-user-test.js.es6   |  2 +-
 18 files changed, 22 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/d-modal-cancel.js.es6
 create mode 100644 app/assets/javascripts/discourse/templates/components/d-modal-cancel.hbs

diff --git a/app/assets/javascripts/admin/models/admin-user.js.es6 b/app/assets/javascripts/admin/models/admin-user.js.es6
index b31bf125654..1677d3add40 100644
--- a/app/assets/javascripts/admin/models/admin-user.js.es6
+++ b/app/assets/javascripts/admin/models/admin-user.js.es6
@@ -106,7 +106,7 @@ const AdminUser = Discourse.User.extend({
           message = I18n.messageFormat('admin.user.delete_all_posts_confirm_MF', { "POSTS": user.get('post_count'), "TOPICS": user.get('topic_count') }),
           buttons = [{
             "label": I18n.t("composer.cancel"),
-            "class": "cancel-inline",
+            "class": "d-modal-cancel",
             "link":  true
           }, {
             "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("admin.user.delete_all_posts"),
diff --git a/app/assets/javascripts/admin/services/admin-tools.js.es6 b/app/assets/javascripts/admin/services/admin-tools.js.es6
index aa16a67495b..ce7a6e3b793 100644
--- a/app/assets/javascripts/admin/services/admin-tools.js.es6
+++ b/app/assets/javascripts/admin/services/admin-tools.js.es6
@@ -44,7 +44,7 @@ export default Ember.Service.extend({
         const buttons = [
           {
             label: I18n.t("composer.cancel"),
-            class: "cancel-inline",
+            class: "d-modal-cancel",
             link:  true
           },
           {
diff --git a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
index 5023927af2d..2bd1691a325 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
@@ -10,5 +10,5 @@
 
 <div class="modal-footer">
   {{d-button action="upload" disabled=disabled class='btn btn-primary' icon='upload' label='admin.customize.theme.upload'}}
-  <a href {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
index f37c1f414d1..22a87af0df1 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
@@ -24,5 +24,5 @@
 
 <div class="modal-footer">
   <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
-  <a {{action "cancel"}}>{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs b/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
index 7c4058d52da..19d7065db61 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
@@ -23,5 +23,5 @@
 
 <div class="modal-footer">
   {{d-button action="importTheme" disabled=loading class='btn btn-primary' icon='upload' label='admin.customize.import'}}
-  <a href {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
index 6b51faf46d4..8f7ca5b8c12 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
@@ -43,5 +43,5 @@
     disabled=submitDisabled
     icon="ban"
     label="admin.user.suspend"}}
-  <a {{action "closeModal"}} class="cancel-suspend">{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/discourse/components/d-modal-cancel.js.es6 b/app/assets/javascripts/discourse/components/d-modal-cancel.js.es6
new file mode 100644
index 00000000000..9250c1ae73b
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/d-modal-cancel.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+});
diff --git a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
index 01996f3583e..00aeb2f8f00 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
@@ -78,7 +78,7 @@ export default Ember.Controller.extend(CanCheckEmails, PreferencesTabController,
         model = this.get('model'),
         buttons = [
           { label: I18n.t("cancel"),
-            class: "cancel-inline",
+            class: "d-modal-cancel",
             link:  true,
             callback: () => { this.set('deleting', false); }
           },
diff --git a/app/assets/javascripts/discourse/templates/components/d-modal-cancel.hbs b/app/assets/javascripts/discourse/templates/components/d-modal-cancel.hbs
new file mode 100644
index 00000000000..e4fc5950d95
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/d-modal-cancel.hbs
@@ -0,0 +1 @@
+<a {{action close}} class='d-modal-cancel'>{{i18n 'cancel'}}</a>
diff --git a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
index 7a7470f391d..a01f45c76bb 100644
--- a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
@@ -32,5 +32,5 @@
 
 <div class="modal-footer">
   {{d-button action="saveAvatarSelection" class="btn-primary" disabled=uploading label="save"}}
-  <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs b/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
index 99e067de197..83a8913ab05 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
@@ -39,7 +39,7 @@
         label="topic.topic_status_update.save"
         action="saveTimer"}}
 
-    <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+    {{d-modal-cancel close=(action "closeModal")}}
     {{conditional-loading-spinner size="small" condition=loading}}
 
     {{#if topicTimer.execute_at}}
diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
index 1a15dbd88b7..36146e7ee49 100644
--- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
@@ -107,5 +107,5 @@
   </div>
 {{/d-modal-body}}
 <div class="modal-footer">
-  <a class="pull-right" {{action "closeModal"}}>{{i18n "cancel"}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/modal/jump-to-post.hbs b/app/assets/javascripts/discourse/templates/modal/jump-to-post.hbs
index 7c5b9b171a1..73e6bf0ca4e 100644
--- a/app/assets/javascripts/discourse/templates/modal/jump-to-post.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/jump-to-post.hbs
@@ -7,5 +7,5 @@
 
 <div class='modal-footer'>
   {{d-button class="btn-primary" action="jump" label="composer.modal_ok"}}
-  {{d-button class="btn-danger" action="closeModal" label="composer.modal_cancel"}}
+  {{d-modal-cancel close=(action "closeModal")}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/modal/request-group-membership-form.hbs b/app/assets/javascripts/discourse/templates/modal/request-group-membership-form.hbs
index 53bf6f98b8b..7455c62be3d 100644
--- a/app/assets/javascripts/discourse/templates/modal/request-group-membership-form.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/request-group-membership-form.hbs
@@ -15,7 +15,7 @@
         label="groups.membership_request.submit"
         action="requestMember"}}
 
-    <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+    {{d-modal-cancel close=(action "closeModal")}}
     {{conditional-loading-spinner size="small" condition=loading}}
   </div>
 </form>
diff --git a/app/assets/javascripts/discourse/templates/modal/upload-selector.hbs b/app/assets/javascripts/discourse/templates/modal/upload-selector.hbs
index e0cd9a31349..532f3770d1e 100644
--- a/app/assets/javascripts/discourse/templates/modal/upload-selector.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/upload-selector.hbs
@@ -42,6 +42,6 @@
 
 <div class="modal-footer">
   {{d-button action="upload" class='btn-primary' icon=uploadIcon label='upload'}}
-  <a href {{action "closeModal"}}>{{i18n 'cancel'}}</a>
+  {{d-modal-cancel close=(action "closeModal")}}
   {{#if remote}}<a {{action "toggleShowMore"}} class="pull-right">{{i18n 'show_more'}}</a>{{/if}}
 </div>
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
index 5f6da525a3a..93e22daae7a 100644
--- a/app/assets/stylesheets/common/admin/suspend.scss
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -1,5 +1,4 @@
 .suspend-user-modal {
-  font-size: 1.1em;
 
   .duration-controls {
     margin-bottom: 1em;
@@ -17,5 +16,4 @@
     box-sizing: border-box;
     height: 2.5em;
   }
-
 }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 12ba90f5e87..857c4e9e04b 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -246,13 +246,12 @@
         color: $primary;
       }
     }
-    .cancel {
-      float: right;
-      margin-right: 5px;
-    }
   }
 }
-
+.d-modal-cancel {
+  margin-left: 5px;
+  color: $primary-medium;
+}
 
 .delete-user-modal {
   .modal-footer {
@@ -265,17 +264,9 @@
       display: inline-block;
       margin-left: 0;
     }
-    .cancel {
-      display: block;
-      margin-right: 5px;
-    }
   }
 }
 
-.modal-footer .cancel-inline {
-  margin-left: 10px;
-}
-
 .invite-modal {
   overflow: visible;
   .ember-text-field {
diff --git a/test/javascripts/acceptance/admin-suspend-user-test.js.es6 b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
index 277b9f1bb70..66463727024 100644
--- a/test/javascripts/acceptance/admin-suspend-user-test.js.es6
+++ b/test/javascripts/acceptance/admin-suspend-user-test.js.es6
@@ -10,7 +10,7 @@ QUnit.test("suspend a user - cancel", assert => {
     assert.equal(find('.suspend-user-modal:visible').length, 1);
   });
 
-  click('.cancel-suspend');
+  click('.d-modal-cancel');
   andThen(() => {
     assert.equal(find('.suspend-user-modal:visible').length, 0);
   });