Correct badge warning (and use new styling) (#9926)

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

@@ -7,6 +7,7 @@ import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-icon-button";
 import type {
   LovelaceBadgeConfig,
@@ -31,6 +32,11 @@ import {
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import { EditViewDialogParams } from "./show-edit-view-dialog";
+import {
+  DEFAULT_VIEW_LAYOUT,
+  PANEL_VIEW_LAYOUT,
+  VIEWS_NO_BADGE_SUPPORT,
+} from "../../views/const";
 
 @customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
@@ -50,6 +56,15 @@ export class HuiDialogEditView extends LitElement {
 
   private _curTabIndex = 0;
 
+  get _type(): string {
+    if (!this._config) {
+      return DEFAULT_VIEW_LAYOUT;
+    }
+    return this._config.panel
+      ? PANEL_VIEW_LAYOUT
+      : this._config.type || DEFAULT_VIEW_LAYOUT;
+  }
+
   public showDialog(params: EditViewDialogParams): void {
     this._params = params;
 
@@ -107,13 +122,13 @@ export class HuiDialogEditView extends LitElement {
         content = html`
           ${this._badges?.length
             ? html`
-                ${this._config?.panel
+                ${VIEWS_NO_BADGE_SUPPORT.includes(this._type)
                   ? html`
-                      <p class="warning">
+                      <ha-alert alert-type="warning">
                         ${this.hass!.localize(
-                          "ui.panel.lovelace.editor.edit_badges.panel_mode"
+                          "ui.panel.lovelace.editor.edit_badges.view_no_badges"
                         )}
-                      </p>
+                      </ha-alert>
                     `
                   : ""}
                 <div class="preview-badges">
@@ -408,10 +423,6 @@ export class HuiDialogEditView extends LitElement {
           margin: 12px 16px;
           flex-wrap: wrap;
         }
-        .warning {
-          color: var(--warning-color);
-          text-align: center;
-        }
 
         @media all and (min-width: 600px) {
           ha-dialog {

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

@@ -9,6 +9,11 @@ import "../../../../components/ha-switch";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import "../../components/hui-theme-select-editor";
+import {
+  DEFAULT_VIEW_LAYOUT,
+  PANEL_VIEW_LAYOUT,
+  SIDEBAR_VIEW_LAYOUT,
+} from "../../views/const";
 import { configElementStyle } from "../config-elements/config-elements-style";
 import { EditorTarget } from "../types";
 
@@ -60,9 +65,11 @@ export class HuiViewEditor extends LitElement {
 
   get _type(): string {
     if (!this._config) {
-      return "masonry";
+      return DEFAULT_VIEW_LAYOUT;
     }
-    return this._config.panel ? "panel" : this._config.type || "masonry";
+    return this._config.panel
+      ? PANEL_VIEW_LAYOUT
+      : this._config.type || DEFAULT_VIEW_LAYOUT;
   }
 
   set config(config: LovelaceViewConfig) {
@@ -125,7 +132,7 @@ export class HuiViewEditor extends LitElement {
             attr-for-selected="type"
             @iron-select=${this._typeChanged}
           >
-            ${["masonry", "sidebar", "panel"].map(
+            ${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
               (type) => html`<paper-item .type=${type}>
                 ${this.hass.localize(
                   `ui.panel.lovelace.editor.edit_view.types.${type}`

src/panels/lovelace/views/const.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_VIEW_LAYOUT = "masonry";
+export const PANEL_VIEW_LAYOUT = "panel";
+export const SIDEBAR_VIEW_LAYOUT = "sidebar";
+export const VIEWS_NO_BADGE_SUPPORT = [PANEL_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT];

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

@@ -20,9 +20,7 @@ import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"
 import { confDeleteCard } from "../editor/delete-card";
 import { generateLovelaceViewStrategy } from "../strategies/get-strategy";
 import type { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
-
-const DEFAULT_VIEW_LAYOUT = "masonry";
-const PANEL_VIEW_LAYOUT = "panel";
+import { PANEL_VIEW_LAYOUT, DEFAULT_VIEW_LAYOUT } from "./const";
 
 declare global {
   // for fire event
@@ -131,6 +129,18 @@ export class HUIView extends ReactiveElement {
         });
 
         this._layoutElement.hass = this.hass;
+
+        const oldHass = changedProperties.get("hass") as
+          | this["hass"]
+          | undefined;
+
+        if (
+          !oldHass ||
+          this.hass.themes !== oldHass.themes ||
+          this.hass.selectedTheme !== oldHass.selectedTheme
+        ) {
+          applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
+        }
       }
       if (changedProperties.has("narrow")) {
         this._layoutElement.narrow = this.narrow;
@@ -145,17 +155,6 @@ export class HUIView extends ReactiveElement {
         this._layoutElement.badges = this._badges;
       }
     }
-
-    const oldHass = changedProperties.get("hass") as this["hass"] | undefined;
-
-    if (
-      changedProperties.has("hass") &&
-      (!oldHass ||
-        this.hass.themes !== oldHass.themes ||
-        this.hass.selectedTheme !== oldHass.selectedTheme)
-    ) {
-      applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
-    }
   }
 
   private async _initializeConfig() {

src/translations/en.json

@@ -700,7 +700,7 @@
         "control": "Control",
         "related": "Related",
         "dismiss": "Dismiss",
-        "no_unique_id": "This entity (\"{entity_id}\") does not have a unique ID, therefore its settings cannot be managed from the UI. See the {faq_link} for more detail.",
+        "no_unique_id": "This entity (''{entity_id}'') does not have a unique ID, therefore its settings cannot be managed from the UI. See the {faq_link} for more detail.",
         "faq": "documentation",
         "info_customize": "You can overwrite some attributes in the {customize_link} section.",
         "customize_link": "entity customizations",
@@ -873,12 +873,12 @@
       "config": {
         "no_type_provided": "No type provided.",
         "error_detected": "Configuration errors detected",
-        "editor_not_available": "No visual editor available for type \"{type}\".",
+        "editor_not_available": "No visual editor available for type ''{type}''.",
         "editor_not_supported": "Visual editor is not supported for this configuration",
         "edit_in_yaml_supported": "You can still edit your config in YAML.",
-        "key_missing": "Required key \"{key}\" is missing.",
-        "key_not_expected": "Key \"{key}\" is not expected or not supported by the visual editor.",
-        "key_wrong_type": "The provided value for \"{key}\" is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
+        "key_missing": "Required key ''{key}'' is missing.",
+        "key_not_expected": "Key ''{key}'' is not expected or not supported by the visual editor.",
+        "key_wrong_type": "The provided value for ''{key}'' is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
         "no_template_editor_support": "Templates not supported in visual editor"
       },
       "supervisor": {
@@ -1765,7 +1765,7 @@
           },
           "add": {
             "header": "Import a blueprint",
-            "import_header": "Blueprint \"{name}\"",
+            "import_header": "Blueprint ''{name}''",
             "import_introduction_link": "You can import blueprints of other users from Github and the {community_link}. Enter the URL of the blueprint below.",
             "community_forums": "community forums",
             "url": "URL of the blueprint",
@@ -2884,7 +2884,7 @@
         "cards": {
           "confirm_delete": "Are you sure you want to delete this card?",
           "actions": {
-            "action_confirmation": "Are you sure you want to run action \"{action}\"?",
+            "action_confirmation": "Are you sure you want to run action ''{action}''?",
             "no_entity_more_info": "No entity provided for more info dialog",
             "no_entity_toggle": "No entity provided to toggle",
             "no_navigation_path": "No navigation path specified",
@@ -3016,7 +3016,7 @@
             }
           },
           "edit_badges": {
-            "panel_mode": "These badges will not be displayed because this view is in \"Panel Mode\"."
+            "view_no_badges": "Badges are not be supported by the current view type."
           },
           "edit_card": {
             "header": "Card Configuration",