mirror of
https://github.com/discourse/discourse.git
synced 2024-12-03 11:33:41 +08:00
4072786f5b
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.
64 lines
2.0 KiB
Handlebars
64 lines
2.0 KiB
Handlebars
<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}}
|
|
|
|
{{#if (or this.dialog.message this.dialog.bodyComponent)}}
|
|
<div class="dialog-body">
|
|
{{#if this.dialog.bodyComponent}}
|
|
<this.dialog.bodyComponent
|
|
@model={{this.dialog.bodyComponentModel}}
|
|
/>
|
|
{{else if this.dialog.message}}
|
|
<p>{{this.dialog.message}}</p>
|
|
{{/if}}
|
|
</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}}
|
|
<DButton
|
|
@class={{this.dialog.confirmButtonClass}}
|
|
@disabled={{this.dialog.confirmButtonDisabled}}
|
|
@action={{this.dialog.didConfirmWrapped}}
|
|
@icon={{this.dialog.confirmButtonIcon}}
|
|
@label={{this.dialog.confirmButtonLabel}}
|
|
/>
|
|
{{#if this.dialog.shouldDisplayCancel}}
|
|
<DButton
|
|
@class={{this.dialog.cancelButtonClass}}
|
|
@action={{this.dialog.cancel}}
|
|
@label={{this.dialog.cancelButtonLabel}}
|
|
/>
|
|
{{/if}}
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div> |