mirror of
https://github.com/discourse/discourse.git
synced 2025-03-02 17:29:25 +00:00
DEV: Convert dialog-holder to gjs (#26869)
This commit is contained in:
Jarek Radosz
GitHub
parent
7896d00a7a
commit
5d7aff12a7
@ -0,0 +1,87 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { fn } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { notEq, or } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
|
||||
export default class DialogHolder extends Component {
|
||||
@service dialog;
|
||||
|
||||
@action
|
||||
async handleButtonAction(btn) {
|
||||
if (typeof btn.action === "function") {
|
||||
await btn.action();
|
||||
}
|
||||
|
||||
this.dialog.cancel();
|
||||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
aria-labelledby={{this.dialog.titleElementId}}
|
||||
aria-hidden="true"
|
||||
id="dialog-holder"
|
||||
class="dialog-container {{this.dialog.class}}"
|
||||
>
|
||||
<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
|
||||
@action={{this.dialog.cancel}}
|
||||
@title="modal.close"
|
||||
@icon="times"
|
||||
class="btn-flat dialog-close 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>{{htmlSafe this.dialog.message}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (notEq this.dialog.type "notice")}}
|
||||
<div class="dialog-footer">
|
||||
{{#each this.dialog.buttons as |button|}}
|
||||
<DButton
|
||||
@action={{fn this.handleButtonAction button}}
|
||||
@translatedLabel={{button.label}}
|
||||
@icon={{button.icon}}
|
||||
class={{button.class}}
|
||||
/>
|
||||
{{else}}
|
||||
<DButton
|
||||
@action={{this.dialog.didConfirmWrapped}}
|
||||
@icon={{this.dialog.confirmButtonIcon}}
|
||||
@label={{this.dialog.confirmButtonLabel}}
|
||||
@disabled={{this.dialog.confirmButtonDisabled}}
|
||||
class={{this.dialog.confirmButtonClass}}
|
||||
/>
|
||||
{{#if this.dialog.shouldDisplayCancel}}
|
||||
<DButton
|
||||
@action={{this.dialog.cancel}}
|
||||
@label={{this.dialog.cancelButtonLabel}}
|
||||
class={{this.dialog.cancelButtonClass}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
<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}}
|
||||
@title="modal.close"
|
||||
class="btn-flat dialog-close 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>{{html-safe 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}}
|
||||
@action={{fn this.handleButtonAction button}}
|
||||
@translatedLabel={{button.label}}
|
||||
class={{button.class}}
|
||||
/>
|
||||
{{else}}
|
||||
<DButton
|
||||
@disabled={{this.dialog.confirmButtonDisabled}}
|
||||
@action={{this.dialog.didConfirmWrapped}}
|
||||
@icon={{this.dialog.confirmButtonIcon}}
|
||||
@label={{this.dialog.confirmButtonLabel}}
|
||||
class={{this.dialog.confirmButtonClass}}
|
||||
/>
|
||||
{{#if this.dialog.shouldDisplayCancel}}
|
||||
<DButton
|
||||
@action={{this.dialog.cancel}}
|
||||
@label={{this.dialog.cancelButtonLabel}}
|
||||
class={{this.dialog.cancelButtonClass}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
|
||||
export default class DialogHolder extends Component {
|
||||
@service dialog;
|
||||
|
||||
@action
|
||||
async handleButtonAction(btn) {
|
||||
if (btn.action && typeof btn.action === "function") {
|
||||
await btn.action();
|
||||
}
|
||||
|
||||
this.dialog.cancel();
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,8 @@
|
||||
"a11y-dialog": "8.0.4",
|
||||
"ember-auto-import": "^2.7.2",
|
||||
"ember-cli-babel": "^8.2.0",
|
||||
"ember-cli-htmlbars": "^6.3.0"
|
||||
"ember-cli-htmlbars": "^6.3.0",
|
||||
"ember-template-imports": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jquery": "^3.5.30",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user