Add view type selector to view editor (#9671)

This commit is contained in:
Bram Kragten 2021-08-01 22:55:51 +02:00 committed by GitHub
parent b6055062c6
commit 044d6a15d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 32 deletions

View File

@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { slugify } from "../../../../common/string/slugify"; import { slugify } from "../../../../common/string/slugify";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input"; import "../../../../components/ha-icon-input";
import "../../../../components/ha-switch"; import "../../../../components/ha-switch";
@ -59,11 +58,11 @@ export class HuiViewEditor extends LitElement {
return this._config.theme || "Backend-selected"; return this._config.theme || "Backend-selected";
} }
get _panel(): boolean { get _type(): string {
if (!this._config) { if (!this._config) {
return false; return "masonary";
} }
return this._config.panel || false; return this._config.panel ? "panel" : this._config.type || "masonary";
} }
set config(config: LovelaceViewConfig) { set config(config: LovelaceViewConfig) {
@ -115,23 +114,26 @@ export class HuiViewEditor extends LitElement {
.configValue=${"theme"} .configValue=${"theme"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></hui-theme-select-editor> ></hui-theme-select-editor>
<ha-formfield <paper-dropdown-menu
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.view.panel_mode.title" "ui.panel.lovelace.editor.edit_view.type"
)} )}
.dir=${computeRTLDirection(this.hass)}
> >
<ha-switch <paper-listbox
.checked=${this._panel !== false} slot="dropdown-content"
.configValue=${"panel"} .selected=${this._type}
@change=${this._valueChanged} attr-for-selected="type"
></ha-switch @iron-select=${this._typeChanged}
></ha-formfield> >
<span class="panel"> ${["masonary", "sidebar", "panel"].map(
${this.hass.localize( (type) => html`<paper-item .type=${type}>
"ui.panel.lovelace.editor.view.panel_mode.description" ${this.hass.localize(
)} `ui.panel.lovelace.editor.edit_view.types.${type}`
</span> )}
</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu>
</div> </div>
`; `;
} }
@ -156,6 +158,23 @@ export class HuiViewEditor extends LitElement {
fireEvent(this, "view-config-changed", { config: newConfig }); fireEvent(this, "view-config-changed", { config: newConfig });
} }
private _typeChanged(ev): void {
const selected = ev.target.selected;
if (selected === "") {
return;
}
const newConfig = {
...this._config,
};
delete newConfig.panel;
if (selected === "masonary") {
delete newConfig.type;
} else {
newConfig.type = selected;
}
fireEvent(this, "view-config-changed", { config: newConfig });
}
private _handleTitleBlur(ev) { private _handleTitleBlur(ev) {
if ( if (
!this.isNew || !this.isNew ||

View File

@ -71,6 +71,13 @@ export class PanelView extends LitElement implements LovelaceViewElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
${this.cards!.length > 1
? html`<hui-warning>
${this.hass!.localize(
"ui.panel.lovelace.editor.view.panel_mode.warning_multiple_cards"
)}
</hui-warning>`
: ""}
${this._card} ${this._card}
${this.lovelace?.editMode && this.cards.length === 0 ${this.lovelace?.editMode && this.cards.length === 0
? html` ? html`
@ -117,18 +124,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
card.editMode = true; card.editMode = true;
wrapper.appendChild(card); wrapper.appendChild(card);
this._card = wrapper; this._card = wrapper;
if (this.cards!.length > 1) {
const warning = document.createElement("hui-warning");
warning.setAttribute(
"style",
"position: absolute; top: 0; width: 100%; box-sizing: border-box;"
);
warning.innerText = this.hass!.localize(
"ui.panel.lovelace.editor.view.panel_mode.warning_multiple_cards"
);
this._card = warning;
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

View File

@ -2950,6 +2950,12 @@
"tab_visibility": "Visibility", "tab_visibility": "Visibility",
"visibility": { "visibility": {
"select_users": "Select which users should see this view in the navigation" "select_users": "Select which users should see this view in the navigation"
},
"type": "View type",
"types": {
"masonary": "Masonary (default)",
"sidebar": "Sidebar",
"panel": "Panel (1 card)"
} }
}, },
"edit_badges": { "edit_badges": {
@ -3243,8 +3249,6 @@
}, },
"view": { "view": {
"panel_mode": { "panel_mode": {
"title": "Panel Mode?",
"description": "This renders the first card at full width. Other cards in this view as well as badges will not be rendered.",
"warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card." "warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card."
} }
}, },