f462d7d1c2
This closes #8744 and #9826. It necessitated some customisation options for TwoStepButton. One is inlineText, which puts the confirmation text in the same line as the buttons. Also, there was a single-use configuration option named isInfoAction that I removed in favour of passing a set of class configuration options like this: @classes={{hash idleButton="is-warning" confirmationMessage="inherit-color" cancelButton="is-danger is-important" confirmButton="is-warning"}}
36 lines
1.2 KiB
Handlebars
36 lines
1.2 KiB
Handlebars
{{#if this.isIdle}}
|
|
<button
|
|
data-test-idle-button
|
|
type="button"
|
|
class="button {{if this.classes.idleButton this.classes.idleButton "is-danger is-outlined"}} is-important is-small"
|
|
disabled={{this.disabled}}
|
|
onclick={{action "promptForConfirmation"}}>
|
|
{{this.idleText}}
|
|
</button>
|
|
{{else if this.isPendingConfirmation}}
|
|
<span
|
|
data-test-confirmation-message
|
|
class="confirmation-text {{this.classes.confirmationMessage}} {{if this.alignRight "is-right-aligned"}} {{if this.inlineText "has-text-inline"}}">
|
|
{{this.confirmationMessage}}
|
|
</span>
|
|
<button
|
|
data-test-cancel-button
|
|
type="button"
|
|
class="button is-outlined is-small {{if this.classes.cancelButton this.classes.cancelButton "is-dark"}}"
|
|
disabled={{this.awaitingConfirmation}}
|
|
onclick={{action (queue
|
|
(action "setToIdle")
|
|
(action this.onCancel)
|
|
)}}>
|
|
{{this.cancelText}}
|
|
</button>
|
|
<button
|
|
data-test-confirm-button
|
|
class="button is-small {{if this.awaitingConfirmation "is-loading"}} {{if this.classes.confirmButton this.classes.confirmButton "is-danger"}}"
|
|
disabled={{this.awaitingConfirmation}}
|
|
onclick={{action "confirm"}}
|
|
type="button">
|
|
{{this.confirmText}}
|
|
</button>
|
|
{{/if}}
|