diff --git a/app/assets/javascripts/admin/components/flagged-post.js.es6 b/app/assets/javascripts/admin/components/flagged-post.js.es6 index 3019a1aae01..c8583199b01 100644 --- a/app/assets/javascripts/admin/components/flagged-post.js.es6 +++ b/app/assets/javascripts/admin/components/flagged-post.js.es6 @@ -36,10 +36,6 @@ export default Ember.Component.extend({ this.removeAfter(promise); }, - showDeleteFlagModal() { - this._spawnModal('admin-delete-flag', this.get('flaggedPost'), 'delete-flag-modal'); - }, - disagree() { this.removeAfter(this.get('flaggedPost').disagreeFlags()); }, diff --git a/app/assets/javascripts/admin/controllers/modals/admin-delete-flag.js.es6 b/app/assets/javascripts/admin/controllers/modals/admin-delete-flag.js.es6 deleted file mode 100644 index e8038edbca1..00000000000 --- a/app/assets/javascripts/admin/controllers/modals/admin-delete-flag.js.es6 +++ /dev/null @@ -1,22 +0,0 @@ -import ModalFunctionality from 'discourse/mixins/modal-functionality'; -import DeleteSpammerModal from 'admin/mixins/delete-spammer-modal'; - -export default Ember.Controller.extend(ModalFunctionality, DeleteSpammerModal, { - removeAfter: null, - - actions: { - deletePostDeferFlag() { - let flaggedPost = this.get('model'); - this.removeAfter(flaggedPost.deferFlags(true)).then(() => { - this.send('closeModal'); - }); - }, - - deletePostAgreeFlag() { - let flaggedPost = this.get('model'); - this.removeAfter(flaggedPost.agreeFlags('delete')).then(() => { - this.send('closeModal'); - }); - } - } -}); diff --git a/app/assets/javascripts/admin/mixins/delete-spammer-modal.js.es6 b/app/assets/javascripts/admin/mixins/delete-spammer-modal.js.es6 deleted file mode 100644 index 138fd5422a9..00000000000 --- a/app/assets/javascripts/admin/mixins/delete-spammer-modal.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -export default Ember.Mixin.create({ - adminTools: Ember.inject.service(), - spammerDetails: null, - - onShow() { - let adminTools = this.get('adminTools'); - let spammerDetails = adminTools.spammerDetails(this.get('model.user')); - - this.setProperties({ - spammerDetails, - canDeleteSpammer: spammerDetails.canDelete && this.get('model.flaggedForSpam') - }); - }, - - actions: { - deleteSpammer() { - let spammerDetails = this.get('spammerDetails'); - this.removeAfter(spammerDetails.deleteUser()).then(() => { - this.send('closeModal'); - }); - } - } -}); diff --git a/app/assets/javascripts/admin/templates/components/flagged-post.hbs b/app/assets/javascripts/admin/templates/components/flagged-post.hbs index dc89d3b83ce..29e72131891 100644 --- a/app/assets/javascripts/admin/templates/components/flagged-post.hbs +++ b/app/assets/javascripts/admin/templates/components/flagged-post.hbs @@ -138,12 +138,7 @@ icon="external-link" label="admin.flags.defer_flag"}} - {{d-button - class="btn-danger delete-flag" - title="admin.flags.delete_title" - action="showDeleteFlagModal" - icon="trash-o" - label="admin.flags.delete"}} + {{admin-delete-flag-dropdown post=flaggedPost removeAfter=(action "removeAfter")}} {{#unless suspended}} {{d-button diff --git a/app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs b/app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs deleted file mode 100644 index 571f332dbf0..00000000000 --- a/app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{#d-modal-body title="admin.flags.delete_flag_modal_title"}} - {{d-button - class="delete-defer" - title="admin.flags.delete_post_defer_flag_title" - action="deletePostDeferFlag" - icon="external-link" - label="admin.flags.delete_post_defer_flag"}} - - {{d-button - class="delete-agree" - title="admin.flags.delete_post_agree_flag_title" - action="deletePostAgreeFlag" - icon="thumbs-o-up" - label="admin.flags.delete_post_agree_flag"}} - - {{#if canDeleteSpammer}} - {{d-button - class="btn-danger delete-spammer" - title="admin.flags.delete_spammer_title" - action="deleteSpammer" - icon="exclamation-triangle" - label="admin.flags.delete_spammer"}} - {{/if}} -{{/d-modal-body}} diff --git a/app/assets/javascripts/select-box-kit/components/admin-delete-flag-dropdown.js.es6 b/app/assets/javascripts/select-box-kit/components/admin-delete-flag-dropdown.js.es6 new file mode 100644 index 00000000000..ba63430b1d0 --- /dev/null +++ b/app/assets/javascripts/select-box-kit/components/admin-delete-flag-dropdown.js.es6 @@ -0,0 +1,78 @@ +import { iconHTML } from 'discourse-common/lib/icon-library'; +import DropdownSelectBox from "select-box-kit/components/dropdown-select-box"; +import computed from "ember-addons/ember-computed-decorators"; +import { on } from "ember-addons/ember-computed-decorators"; + +export default DropdownSelectBox.extend({ + headerText: "admin.flags.delete", + classNames: ["delete-flag", "admin-delete-flag-dropdown"], + adminTools: Ember.inject.service(), + nameProperty: "label", + + @on("didReceiveAttrs") + _setAdminDeleteDropdownOptions() { + this.set("headerComponentOptions.selectedName", I18n.t(this.get("headerText"))); + this.set("headerComponentOptions.icon", iconHTML("trash-o")); + }, + + @computed("adminTools", "post.user") + spammerDetails(adminTools, user) { + return adminTools.spammerDetails(user); + }, + + canDeleteSpammer: Ember.computed.and("spammerDetails.canDelete", "post.flaggedForSpam"), + + @computed("post", "canDeleteSpammer") + content(post, canDeleteSpammer) { + const content = []; + + content.push({ + title: I18n.t("admin.flags.delete_post_defer_flag_title"), + icon: "external-link", + id: "delete-defer", + action: () => this.send("deletePostDeferFlag"), + label: I18n.t("admin.flags.delete_post_defer_flag") + }); + + content.push({ + title: I18n.t("admin.flags.delete_post_agree_flag_title"), + icon: "thumbs-o-up", + id: "delete-agree", + action: () => this.send("deletePostAgreeFlag"), + label: I18n.t("admin.flags.delete_post_agree_flag") + }); + + if (canDeleteSpammer) { + content.push({ + title: I18n.t("admin.flags.delete_post_agree_flag_title"), + icon: "exclamation-triangle", + id: "delete-spammer", + action: () => this.send("deleteSpammer"), + label: I18n.t("admin.flags.delete_spammer") + }); + } + + return content; + }, + + selectValueFunction(value) { + Ember.get(this._contentForValue(value), "action")(); + }, + + actions: { + deleteSpammer() { + let spammerDetails = this.get("spammerDetails"); + this.attrs.removeAfter(spammerDetails.deleteUser()); + }, + + deletePostDeferFlag() { + let flaggedPost = this.get('post'); + this.attrs.removeAfter(flaggedPost.deferFlags(true)); + }, + + deletePostAgreeFlag() { + let flaggedPost = this.get('post'); + this.attrs.removeAfter(flaggedPost.agreeFlags('delete')); + } + } +}); diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index eb8eb427d85..838b5c6c0a4 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -218,6 +218,9 @@ $mobile-breakpoint: 700px; .select-box-kit.multi-combo-box { width: 500px; } + .select-box-kit.dropdown-select-box { + width: auto; + } } .admin-container .controls { diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss index f2132ed8931..0bcdd190b26 100644 --- a/app/assets/stylesheets/common/admin/flagging.scss +++ b/app/assets/stylesheets/common/admin/flagging.scss @@ -151,10 +151,12 @@ .flagged-post-controls { display: flex; flex-wrap: wrap; + align-items: center; + justify-content: flex-start; - button { - margin-right: 0.5em; + button, .select-box-kit { margin-bottom: 0.5em; + margin-right: 0.5em; } } } @@ -188,13 +190,6 @@ margin-bottom: 2em; } -.delete-flag-modal { - button { - margin: 10px 0 10px 10px; - padding: 10px 15px; - } -} - .mobile-view { .flagged-posts { .flagged-post { @@ -210,4 +205,3 @@ padding-right: 0.25em; } } - diff --git a/app/assets/stylesheets/common/select-box-kit/admin-delete-flag-dropdown.scss b/app/assets/stylesheets/common/select-box-kit/admin-delete-flag-dropdown.scss new file mode 100644 index 00000000000..ffdf62634b7 --- /dev/null +++ b/app/assets/stylesheets/common/select-box-kit/admin-delete-flag-dropdown.scss @@ -0,0 +1,16 @@ +.select-box-kit { + &.dropdown-select-box { + width: auto; + &.admin-delete-flag-dropdown { + .dropdown-select-box-header .btn { + background: $danger; + color: white; + } + + .select-box-kit-row[data-value="delete-spammer"] .texts .name, + .select-box-kit-row[data-value="delete-spammer"] .icons .d-icon { + color: $danger; + } + } + } +} diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index 06d9484471b..f4ce2021b11 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -220,12 +220,6 @@ margin-bottom: 10px; } -.delete-flag-modal { - .modal-inner-container { - width: 400px; - } -} - .change-timestamp { min-height: 300px; diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss index 0643a007d1b..ebf8f68ca5d 100644 --- a/app/assets/stylesheets/mobile/modal.scss +++ b/app/assets/stylesheets/mobile/modal.scss @@ -169,15 +169,6 @@ } } -.delete-flag-modal { - .modal-inner-container { - width: 300px; - } - .btn { - float: none !important; - } -} - #search-help { max-width: 98%; } diff --git a/test/javascripts/acceptance/admin-flags-test.js.es6 b/test/javascripts/acceptance/admin-flags-test.js.es6 index 80eacf70495..3d448184334 100644 --- a/test/javascripts/acceptance/admin-flags-test.js.es6 +++ b/test/javascripts/acceptance/admin-flags-test.js.es6 @@ -80,40 +80,50 @@ QUnit.test("flagged posts - defer", assert => { QUnit.test("flagged posts - delete + defer", assert => { visit("/admin/flags/active"); - click('.delete-flag'); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 1); + expandSelectBoxKit('.delete-flag'); }); - click('.delete-defer'); + + andThen(() => { + selectBoxKitSelectRow('delete-defer', { selector: '.delete-flag'}); + }); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 0); assert.equal(find('.admin-flags .flagged-post').length, 0); }); }); QUnit.test("flagged posts - delete + agree", assert => { visit("/admin/flags/active"); - click('.delete-flag'); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 1); + expandSelectBoxKit('.delete-flag'); }); - click('.delete-agree'); + + andThen(() => { + selectBoxKitSelectRow('delete-agree', { selector: '.delete-flag'}); + }); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 0); assert.equal(find('.admin-flags .flagged-post').length, 0); }); }); QUnit.test("flagged posts - delete + deleteSpammer", assert => { visit("/admin/flags/active"); - click('.delete-flag'); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 1); + expandSelectBoxKit('.delete-flag'); }); - click('.delete-spammer'); - click('.confirm-delete'); + + andThen(() => { + selectBoxKitSelectRow('delete-spammer', { selector: '.delete-flag'}); + }); + + click('.confirm-delete'); + andThen(() => { - assert.equal(find('.delete-flag-modal:visible').length, 0); assert.equal(find('.admin-flags .flagged-post').length, 0); }); });