github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-06 23:07:28 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Battersby
2024-04-26 16:49:58 +08:00
committed by GitHub
parent 5dad583442
commit dad6912566
2 changed files with 13 additions and 0 deletions
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}} {{on "click" this.toggleAutoClose}}
/> />
</Styleguide::Controls::Row> </Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="[@options.showProgressBar]">
<DToggleSwitch
@state={{this.showProgressBar}}
{{on "click" this.toggleShowProgressBar}}
/>
</Styleguide::Controls::Row>
{{#if this.autoClose}} {{#if this.autoClose}}
<Styleguide::Controls::Row @name="[@options.duration] ms"> <Styleguide::Controls::Row @name="[@options.duration] ms">
<Input @value={{this.duration}} @type="number" /> <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 message = "Message";
@tracked duration = TOAST.options.duration; @tracked duration = TOAST.options.duration;
@tracked autoClose = TOAST.options.autoClose; @tracked autoClose = TOAST.options.autoClose;
@tracked showProgressBar = TOAST.options.showProgressBar;
@tracked class; @tracked class;
@tracked action = true; @tracked action = true;
@tracked icon; @tracked icon;
@ -48,6 +49,7 @@ export default class Toasts extends Component {
this.toasts[theme]({ this.toasts[theme]({
duration: this.duration, duration: this.duration,
autoClose: this.autoClose, autoClose: this.autoClose,
showProgressBar: this.showProgressBar,
class: this.class, class: this.class,
data: { data: {
title: this.title, title: this.title,
@ -67,4 +69,9 @@ export default class Toasts extends Component {
toggleAutoClose() { toggleAutoClose() {
this.autoClose = !this.autoClose; this.autoClose = !this.autoClose;
} }
@action
toggleShowProgressBar() {
this.showProgressBar = !this.showProgressBar;
}
} }