Add view type selector to view editor (#9671)

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

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

src/panels/lovelace/views/hui-panel-view.ts

@@ -71,6 +71,13 @@ export class PanelView extends LitElement implements LovelaceViewElement {
 
   protected render(): TemplateResult {
     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.lovelace?.editMode && this.cards.length === 0
         ? html`
@@ -117,18 +124,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
     card.editMode = true;
     wrapper.appendChild(card);
     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 {

src/translations/en.json

@@ -2950,6 +2950,12 @@
             "tab_visibility": "Visibility",
             "visibility": {
               "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": {
@@ -3243,8 +3249,6 @@
           },
           "view": {
             "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."
             }
           },