Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Convert do-not-disturb modal to component-based API (#22394) 

This PR converts the `do-not-disturb` modal to make use of the new component-based API
This commit is contained in:
Isaac Janzen 2023-07-04 15:27:41 -05:00 committed by GitHub
parent aaccb774de
commit 3f91656c2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/assets/javascripts/discourse/app/components/modal/do-not-disturb.hbs Normal file
View File

@ -0,0 +1,48 @@
<DModal
@title={{i18n "pause_notifications.title"}}
@closeModal={{@closeModal}}
@flash={{this.flash}}
class="do-not-disturb-modal"
>
<:body>
<TapTileGrid as |grid|>
<TapTile
@class="do-not-disturb-tile"
@tileId="30"
@activeTile={{grid.activeTile}}
@onChange={{this.saveDuration}}
>
{{i18n "pause_notifications.options.half_hour"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="60"
@activeTile={{grid.activeTile}}
@onChange={{this.saveDuration}}
>
{{i18n "pause_notifications.options.one_hour"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="120"
@activeTile={{grid.activeTile}}
@onChange={{this.saveDuration}}
>
{{i18n "pause_notifications.options.two_hours"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="tomorrow"
@activeTile={{grid.activeTile}}
@onChange={{this.saveDuration}}
>
{{i18n "pause_notifications.options.tomorrow"}}
</TapTile>
</TapTileGrid>
<DButton
@action={{this.navigateToNotificationSchedule}}
@label="pause_notifications.set_schedule"
/>
</:body>
</DModal>

27
app/assets/javascripts/discourse/app/components/modal/do-not-disturb.js Normal file
View File

@ -0,0 +1,27 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import { inject as service } from "@ember/service";
export default class DoNotDisturb extends Component {
@service currentUser;
@service router;
@tracked flash;
@action
async saveDuration(duration) {
try {
await this.currentUser.enterDoNotDisturbFor(duration);
this.args.closeModal();
} catch (e) {
this.flash = e;
}
}
@action
navigateToNotificationSchedule() {
this.router.transitionTo("preferences.notifications", this.currentUser);
this.args.closeModal();
}
}

4
app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js
View File

@ -3,6 +3,7 @@ import { inject as service } from "@ember/service";
import { action } from "@ember/object";
import showModal from "discourse/lib/show-modal";
import DoNotDisturb from "discourse/lib/do-not-disturb";
import DoNotDisturbModal from "discourse/components/modal/do-not-disturb";
const _extraItems = [];
@ -18,6 +19,7 @@ export default class UserMenuProfileTabContent extends Component {
@service currentUser;
@service siteSettings;
@service userStatus;
@service modal;
saving = false;
@ -72,7 +74,7 @@ export default class UserMenuProfileTabContent extends Component {
} else {
this.saving = false;
this.args.closeUserMenu();
showModal("do-not-disturb");
this.modal.show(DoNotDisturbModal);
}
}

29
app/assets/javascripts/discourse/app/controllers/do-not-disturb.js
View File

@ -1,29 +0,0 @@
import Controller from "@ember/controller";
import ModalFunctionality from "discourse/mixins/modal-functionality";
import { action } from "@ember/object";
import { flashAjaxError } from "discourse/lib/ajax-error";
export default Controller.extend(ModalFunctionality, {
duration: null,
@action
setDuration(duration) {
this.set("duration", duration);
this.save();
},
save() {
this.currentUser
.enterDoNotDisturbFor(this.duration)
.then(() => {
this.send("closeModal");
})
.catch(flashAjaxError(this));
},
@action
navigateToNotificationSchedule() {
this.transitionToRoute("preferences.notifications", this.currentUser);
this.send("closeModal");
},
});

42
app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
View File

@ -1,42 +0,0 @@
<DModalBody @title="pause_notifications.title">
<TapTileGrid @activeTile={{this.duration}} as |grid|>
<TapTile
@class="do-not-disturb-tile"
@tileId="30"
@activeTile={{grid.activeTile}}
@onChange={{action "setDuration"}}
>
{{i18n "pause_notifications.options.half_hour"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="60"
@activeTile={{grid.activeTile}}
@onChange={{action "setDuration"}}
>
{{i18n "pause_notifications.options.one_hour"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="120"
@activeTile={{grid.activeTile}}
@onChange={{action "setDuration"}}
>
{{i18n "pause_notifications.options.two_hours"}}
</TapTile>
<TapTile
@class="do-not-disturb-tile"
@tileId="tomorrow"
@activeTile={{grid.activeTile}}
@onChange={{action "setDuration"}}
>
{{i18n "pause_notifications.options.tomorrow"}}
</TapTile>
</TapTileGrid>
<DButton
@action={{action "navigateToNotificationSchedule"}}
@label="pause_notifications.set_schedule"
/>
</DModalBody>

6
app/assets/javascripts/discourse/app/widgets/do-not-disturb.js
View File

@ -3,11 +3,13 @@ import { createWidget } from "discourse/widgets/widget";
import { dateNode } from "discourse/helpers/node";
import { h } from "virtual-dom";
import { iconNode } from "discourse-common/lib/icon-library";
import showModal from "discourse/lib/show-modal";
import DoNotDisturb from "discourse/lib/do-not-disturb";
import DoNotDisturbModal from "discourse/components/modal/do-not-disturb";
export default createWidget("do-not-disturb", {
tagName: "li.do-not-disturb",
services: ["modal"],
saving: false,
html() {
@ -27,7 +29,7 @@ export default createWidget("do-not-disturb", {
});
} else {
this.saving = false;
return showModal("do-not-disturb");
return this.modal.show(DoNotDisturbModal);
}
},