diff --git a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 b/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 index 4b3110bc29..a96595a84a 100644 --- a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 +++ b/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 @@ -40,7 +40,7 @@ export default Ember.Component.extend( } let autoCloseHours = this.duration || 0; - buffer.push(`

${iconHTML("far-clock")} `); + buffer.push(`

`); let options = { timeLeft: duration.humanize(true), @@ -61,11 +61,17 @@ export default Ember.Component.extend( } buffer.push( - `${I18n.t( - this._noticeKey(), - options - )}` + `${iconHTML( + "far-clock" + )} ${I18n.t(this._noticeKey(), options)}` ); + if (this.removeTopicTimer) { + buffer.push( + `` + ); + } buffer.push("

"); // TODO Sam: concerned this can cause a heavy rerender loop @@ -79,7 +85,21 @@ export default Ember.Component.extend( } }, + didInsertElement() { + this._super(...arguments); + + if (this.removeTopicTimer) { + $(this.element).on( + "click.topic-timer-remove", + "button", + this.removeTopicTimer + ); + } + }, + willDestroyElement() { + $(this.element).off("click.topic-timer-remove", this.removeTopicTimer); + if (this._delayedRerender) { Ember.run.cancel(this._delayedRerender); } diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6 index 95290fba5b..41fc658321 100644 --- a/app/assets/javascripts/discourse/controllers/topic.js.es6 +++ b/app/assets/javascripts/discourse/controllers/topic.js.es6 @@ -17,6 +17,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error"; import { spinnerHTML } from "discourse/helpers/loading-spinner"; import { userPath } from "discourse/lib/url"; import showModal from "discourse/lib/show-modal"; +import TopicTimer from "discourse/models/topic-timer"; let customPostMessageCallbacks = {}; @@ -1035,6 +1036,18 @@ export default Ember.Controller.extend(bufferedProperty("model"), { resetBumpDate() { this.model.resetBumpDate(); + }, + + removeTopicTimer(statusType, topicTimer) { + TopicTimer.updateStatus( + this.get("model.id"), + null, + null, + statusType, + null + ) + .then(() => this.set(`model.${topicTimer}`, Ember.Object.create({}))) + .catch(error => popupAjaxError(error)); } }, diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs index f58cc7fd56..18ba28bb2a 100644 --- a/app/assets/javascripts/discourse/templates/topic.hbs +++ b/app/assets/javascripts/discourse/templates/topic.hbs @@ -264,7 +264,8 @@ topicClosed=model.closed statusType=model.private_topic_timer.status_type executeAt=model.private_topic_timer.execute_at - duration=model.private_topic_timer.duration}} + duration=model.private_topic_timer.duration + removeTopicTimer=(action "removeTopicTimer" model.private_topic_timer.status_type "private_topic_timer")}} {{/if}} {{topic-timer-info @@ -273,7 +274,8 @@ executeAt=model.topic_timer.execute_at basedOnLastPost=model.topic_timer.based_on_last_post duration=model.topic_timer.duration - categoryId=model.topic_timer.category_id}} + categoryId=model.topic_timer.category_id + removeTopicTimer=(action "removeTopicTimer" model.topic_timer.status_type "topic_timer")}} {{#if session.showSignupCta}} {{! replace "Log In to Reply" with the infobox }} diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index a3ce6554e7..58183a1d33 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -72,8 +72,17 @@ .topic-status-info { border-top: 1px solid $primary-low; padding: 10px 0; - height: 20px; max-width: 758px; + .topic-timer-heading { + display: flex; + align-items: center; + margin: 0px; + } + .topic-timer-remove { + font-size: $font-down-2; + background: transparent; + margin-left: auto; + } } #topic-progress-wrapper { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 414244e40c..710d614a51 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2423,6 +2423,7 @@ en: delete_topic: "delete topic" add_post_notice: "Add Staff Notice" remove_post_notice: "Remove Staff Notice" + remove_timer: "remove timer" actions: flag: "Flag" diff --git a/test/javascripts/acceptance/topic-edit-timer-test.js.es6 b/test/javascripts/acceptance/topic-edit-timer-test.js.es6 index feeee9cf41..2fc145ebfc 100644 --- a/test/javascripts/acceptance/topic-edit-timer-test.js.es6 +++ b/test/javascripts/acceptance/topic-edit-timer-test.js.es6 @@ -263,3 +263,22 @@ QUnit.test( assert.notOk(regex.test(newTopicStatusInfo)); } ); + +QUnit.test("Inline delete timer", async assert => { + updateCurrentUser({ admin: true, staff: true, canManageTopic: true }); + const futureDateInputSelector = selectKit(".future-date-input-selector"); + + await visit("/t/internationalization-localization"); + await click(".toggle-admin-menu"); + await click(".topic-admin-status-update button"); + await futureDateInputSelector.expand(); + await futureDateInputSelector.selectRowByValue("next_week"); + await click(".modal-footer button.btn-primary"); + + const removeTimerButton = find(".topic-status-info .topic-timer-remove"); + assert.equal(removeTimerButton.attr("title"), "remove timer"); + + await click(".topic-status-info .topic-timer-remove"); + const topicStatusInfo = find(".topic-status-info .topic-timer-remove"); + assert.equal(topicStatusInfo.length, 0); +});