github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-04 06:53:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
420214fc82
discourse/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.hbs

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

64 lines
2.0 KiB
Handlebars
Raw Normal View History

DEV: Add A11Y-friendly dialog addon (#18028) This adds a new framework for accessible dialogs that will eventually replace bootbox. Under the hood, it uses the a11y-dialog package and an in-repo Ember addon. See PR for usage details.
2022-08-30 01:59:57 +08:00
<div
id="dialog-holder"
class="dialog-container {{this.dialog.class}}"
aria-labelledby={{this.dialog.titleElementId}}
aria-hidden="true"
>
<div class="dialog-overlay" data-a11y-dialog-hide></div>
{{#if this.dialog.type}}
<div class="dialog-content" role="document">
{{#if this.dialog.title}}
<div class="dialog-header">
<h3 id={{this.dialog.titleElementId}}>{{this.dialog.title}}</h3>
<DButton
@icon="times"
@action={{action this.dialog.cancel}}
@class="btn-flat dialog-close close"
@title="modal.close"
/>
</div>
{{/if}}
DEV: Support using Ember components in dialog service (#20230) We often have the need to use rich HTML in dialog messages (to show lists, icons, etc.). Previously, our only option was to wrap the message in an `htmlSafe()` call. This PR adds the ability to pass a component name and model to the dialog, which means that we can write the HTML in regular Ember components. Example, whereas previously we would do this: ``` this.dialog.deleteConfirm({ message: htmlSafe(`<li>Some text</li>`), }); ``` instead we can now do this: ```javascript import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase"; ... this.dialog.deleteConfirm({ title: I18n.t("user.second_factor.disable_confirm"), bodyComponent: SecondFactorConfirmPhrase, bodyComponentModel: model, }) ``` The model passed to the component is optional and will be available as `@model` in the Handlebars template.
2023-02-14 02:03:31 +08:00
{{#if (or this.dialog.message this.dialog.bodyComponent)}}
DEV: Add A11Y-friendly dialog addon (#18028) This adds a new framework for accessible dialogs that will eventually replace bootbox. Under the hood, it uses the a11y-dialog package and an in-repo Ember addon. See PR for usage details.
2022-08-30 01:59:57 +08:00
<div class="dialog-body">
DEV: Support using Ember components in dialog service (#20230) We often have the need to use rich HTML in dialog messages (to show lists, icons, etc.). Previously, our only option was to wrap the message in an `htmlSafe()` call. This PR adds the ability to pass a component name and model to the dialog, which means that we can write the HTML in regular Ember components. Example, whereas previously we would do this: ``` this.dialog.deleteConfirm({ message: htmlSafe(`<li>Some text</li>`), }); ``` instead we can now do this: ```javascript import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase"; ... this.dialog.deleteConfirm({ title: I18n.t("user.second_factor.disable_confirm"), bodyComponent: SecondFactorConfirmPhrase, bodyComponentModel: model, }) ``` The model passed to the component is optional and will be available as `@model` in the Handlebars template.
2023-02-14 02:03:31 +08:00
{{#if this.dialog.bodyComponent}}
<this.dialog.bodyComponent
@model={{this.dialog.bodyComponentModel}}
FEATURE: better UI to manage 2fa (#19338) In this PR, we introduced an option, that when all authenticators are disabled, but backup codes still exists, user can authenticate with those backup codes. This was reverted as this is not expected behavior. https://github.com/discourse/discourse/pull/18982 Instead, when the last authenticator is deleted, backup codes should be deleted as well. Because this disables 2fa, user is asked to confirm that action by typing text. In addition, UI for 2fa preferences was refreshed.
2022-12-08 06:41:22 +08:00
/>
DEV: Support using Ember components in dialog service (#20230) We often have the need to use rich HTML in dialog messages (to show lists, icons, etc.). Previously, our only option was to wrap the message in an `htmlSafe()` call. This PR adds the ability to pass a component name and model to the dialog, which means that we can write the HTML in regular Ember components. Example, whereas previously we would do this: ``` this.dialog.deleteConfirm({ message: htmlSafe(`<li>Some text</li>`), }); ``` instead we can now do this: ```javascript import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase"; ... this.dialog.deleteConfirm({ title: I18n.t("user.second_factor.disable_confirm"), bodyComponent: SecondFactorConfirmPhrase, bodyComponentModel: model, }) ``` The model passed to the component is optional and will be available as `@model` in the Handlebars template.
2023-02-14 02:03:31 +08:00
{{else if this.dialog.message}}
<p>{{this.dialog.message}}</p>
FEATURE: better UI to manage 2fa (#19338) In this PR, we introduced an option, that when all authenticators are disabled, but backup codes still exists, user can authenticate with those backup codes. This was reverted as this is not expected behavior. https://github.com/discourse/discourse/pull/18982 Instead, when the last authenticator is deleted, backup codes should be deleted as well. Because this disables 2fa, user is asked to confirm that action by typing text. In addition, UI for 2fa preferences was refreshed.
2022-12-08 06:41:22 +08:00
{{/if}}
DEV: Add A11Y-friendly dialog addon (#18028) This adds a new framework for accessible dialogs that will eventually replace bootbox. Under the hood, it uses the a11y-dialog package and an in-repo Ember addon. See PR for usage details.
2022-08-30 01:59:57 +08:00
</div>
{{/if}}
{{#if (notEq this.dialog.type "notice")}}
<div class="dialog-footer">
{{#each this.dialog.buttons as |button|}}
<DButton
@icon={{button.icon}}
@class={{button.class}}
@action={{action "handleButtonAction" button}}
@translatedLabel={{button.label}}
/>
{{else}}
FEATURE: better UI to manage 2fa (#19338) In this PR, we introduced an option, that when all authenticators are disabled, but backup codes still exists, user can authenticate with those backup codes. This was reverted as this is not expected behavior. https://github.com/discourse/discourse/pull/18982 Instead, when the last authenticator is deleted, backup codes should be deleted as well. Because this disables 2fa, user is asked to confirm that action by typing text. In addition, UI for 2fa preferences was refreshed.
2022-12-08 06:41:22 +08:00
<DButton
@class={{this.dialog.confirmButtonClass}}
@disabled={{this.dialog.confirmButtonDisabled}}
@action={{this.dialog.didConfirmWrapped}}
@icon={{this.dialog.confirmButtonIcon}}
@label={{this.dialog.confirmButtonLabel}}
/>
DEV: Add A11Y-friendly dialog addon (#18028) This adds a new framework for accessible dialogs that will eventually replace bootbox. Under the hood, it uses the a11y-dialog package and an in-repo Ember addon. See PR for usage details.
2022-08-30 01:59:57 +08:00
{{#if this.dialog.shouldDisplayCancel}}
FEATURE: better UI to manage 2fa (#19338) In this PR, we introduced an option, that when all authenticators are disabled, but backup codes still exists, user can authenticate with those backup codes. This was reverted as this is not expected behavior. https://github.com/discourse/discourse/pull/18982 Instead, when the last authenticator is deleted, backup codes should be deleted as well. Because this disables 2fa, user is asked to confirm that action by typing text. In addition, UI for 2fa preferences was refreshed.
2022-12-08 06:41:22 +08:00
<DButton
@class={{this.dialog.cancelButtonClass}}
@action={{this.dialog.cancel}}
@label={{this.dialog.cancelButtonLabel}}
/>
DEV: Add A11Y-friendly dialog addon (#18028) This adds a new framework for accessible dialogs that will eventually replace bootbox. Under the hood, it uses the a11y-dialog package and an in-repo Ember addon. See PR for usage details.
2022-08-30 01:59:57 +08:00
{{/if}}
{{/each}}
</div>
{{/if}}
</div>
{{/if}}
</div>
Reference in New Issue Copy Permalink