mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 08:46:35 +00:00
Add view type selector to view editor (#9671)
This commit is contained in:
parent
b6055062c6
commit
044d6a15d9
@ -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 ||
|
||||||
|
@ -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 {
|
||||||
|
@ -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."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user