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

DEV: add toast progress bar to styleguide (#26767)

This commit is contained in:
David Battersby 2024-04-26 16:49:58 +08:00 committed by GitHub
parent 5dad583442
commit dad6912566
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.hbs
View File

@ -61,6 +61,12 @@
{{on "click" this.toggleAutoClose}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@options.showProgressBar]">
<DToggleSwitch
@state={{this.showProgressBar}}
{{on "click" this.toggleShowProgressBar}}
/>
</Styleguide::Controls::Row>
{{#if this.autoClose}}
<Styleguide::Controls::Row @name="[@options.duration] ms">
<Input @value={{this.duration}} @type="number" />

7
plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
View File

@ -12,6 +12,7 @@ export default class Toasts extends Component {
@tracked message = "Message";
@tracked duration = TOAST.options.duration;
@tracked autoClose = TOAST.options.autoClose;
@tracked showProgressBar = TOAST.options.showProgressBar;
@tracked class;
@tracked action = true;
@tracked icon;
@ -48,6 +49,7 @@ export default class Toasts extends Component {
this.toasts[theme]({
duration: this.duration,
autoClose: this.autoClose,
showProgressBar: this.showProgressBar,
class: this.class,
data: {
title: this.title,
@ -67,4 +69,9 @@ export default class Toasts extends Component {
toggleAutoClose() {
this.autoClose = !this.autoClose;
}
@action
toggleShowProgressBar() {
this.showProgressBar = !this.showProgressBar;
}
}