FEATURE: Add ability to hide modal header (#24290)

This commit is contained in:
Jordan Vidrine 2023-11-08 12:15:35 -06:00 committed by GitHub
parent 670692cfa9
commit 9d1e8265da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 6 deletions

View File

@ -25,13 +25,15 @@
<div class="modal-middle-container"> <div class="modal-middle-container">
<div class="modal-inner-container"> <div class="modal-inner-container">
{{yield to="aboveHeader"}} {{yield to="aboveHeader"}}
{{#if {{#if
(or (and
this.dismissable (not @hideHeader)
@title (or
(has-block "headerBelowTitle") this.dismissable
(has-block "headerAboveTitle") @title
(has-block "headerBelowTitle")
(has-block "headerAboveTitle")
)
) )
}} }}
<div class={{concat-class "modal-header" @headerClass}}> <div class={{concat-class "modal-header" @headerClass}}>

View File

@ -4,6 +4,7 @@
<Styleguide::Component> <Styleguide::Component>
<DModal <DModal
@closeModal={{fn (mut this.inline) true}} @closeModal={{fn (mut this.inline) true}}
@hideHeader={{this.hideHeader}}
@inline={{this.inline}} @inline={{this.inline}}
@title={{this.title}} @title={{this.title}}
@subtitle={{this.subtitle}} @subtitle={{this.subtitle}}
@ -23,6 +24,12 @@
</Styleguide::Component> </Styleguide::Component>
<Styleguide::Controls> <Styleguide::Controls>
<Styleguide::Controls::Row @name="@hideHeader">
<DToggleSwitch
@state={{this.hideHeader}}
{{on "click" this.toggleHeader}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="@inline"> <Styleguide::Controls::Row @name="@inline">
<DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} /> <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
</Styleguide::Controls::Row> </Styleguide::Controls::Row>

View File

@ -5,6 +5,7 @@ import I18n from "discourse-i18n";
export default class extends Component { export default class extends Component {
@tracked inline = true; @tracked inline = true;
@tracked hideHeader = false;
@tracked dismissable = true; @tracked dismissable = true;
@tracked modalTagName = "div"; @tracked modalTagName = "div";
@tracked title = I18n.t("styleguide.sections.modal.header"); @tracked title = I18n.t("styleguide.sections.modal.header");
@ -16,6 +17,11 @@ export default class extends Component {
flashTypes = ["success", "info", "warning", "error"]; flashTypes = ["success", "info", "warning", "error"];
modalTagNames = ["div", "form"]; modalTagNames = ["div", "form"];
@action
toggleHeader() {
this.hideHeader = !this.hideHeader;
}
@action @action
toggleInline() { toggleInline() {
this.inline = !this.inline; this.inline = !this.inline;