jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow edit card dialog to be made wider (#7492)

Browse Source
This commit is contained in:
Nathan Orick 2020-10-27 10:59:32 -04:00 committed by GitHub
parent a19477d179
commit 40191a88d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -54,6 +54,8 @@ export class HuiDialogEditCard extends LitElement
implements HassDialog<EditCardDialogParams> {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean, reflect: true }) public large = false;
@internalProperty() private _params?: EditCardDialogParams;
@internalProperty() private _cardConfig?: LovelaceCardConfig;
@ -82,6 +84,7 @@ export class HuiDialogEditCard extends LitElement
this._viewConfig = params.lovelaceConfig.views[view];
this._cardConfig =
card !== undefined ? this._viewConfig.cards![card] : params.cardConfig;
this.large = false;
if (this._cardConfig && !Object.isFrozen(this._cardConfig)) {
this._cardConfig = deepFreeze(this._cardConfig);
}
@ -162,7 +165,7 @@ export class HuiDialogEditCard extends LitElement
>
<div slot="heading">
<ha-header-bar>
<div slot="title">${heading}</div>
<div slot="title" @click=${this._enlarge}>${heading}</div>
${this._documentationURL !== undefined
? html`
<a
@ -254,6 +257,10 @@ export class HuiDialogEditCard extends LitElement
`;
}
private _enlarge() {
this.large = !this.large;
}
private _ignoreKeydown(ev: KeyboardEvent) {
ev.stopPropagation();
}
@ -374,6 +381,15 @@ export class HuiDialogEditCard extends LitElement
--dialog-z-index: 5;
}
@media all and (min-width: 451px) and (min-height: 501px) {
ha-dialog {
--mdc-dialog-max-width: 90vw;
}
:host([large]) .content {
width: calc(90vw - 48px);
}
}
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);