From 1d1e65b1cb21acbc5139c2422740659952d135c8 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 13 Oct 2020 11:13:54 +0200
Subject: [PATCH 1/2] Add warning to badge preview in "Panel Mode"

---
 .../editor/view-editor/hui-dialog-edit-view.ts      | 13 +++++++++++++
 src/translations/en.json                            |  5 ++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 0c0e38cb7077..147618e265d7 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -127,6 +127,15 @@ export class HuiDialogEditView extends LitElement {
                     `;
                   })}
                 </div>
+                ${this._config?.panel
+                  ? html`
+                      <p class="warning">
+                        ${this.hass!.localize(
+                          "ui.panel.lovelace.editor.edit_badges.panel_mode"
+                        )}
+                      </p>
+                    `
+                  : ""}
               `
             : ""}
           <hui-entity-editor
@@ -411,6 +420,10 @@ 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 {
diff --git a/src/translations/en.json b/src/translations/en.json
index 62296bbafc19..8316168abbbd 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2292,6 +2292,9 @@
               "select_users": "Select which users should see this view in the navigation"
             }
           },
+          "edit_badges": {
+            "panel_mode": "These badges will not be displayed because this view is in \"Panel Mode\"."
+          },
           "edit_card": {
             "header": "Card Configuration",
             "typed_header": "{type} Card Configuration",
@@ -2564,7 +2567,7 @@
           "view": {
             "panel_mode": {
               "title": "Panel Mode?",
-              "description": "This renders the first card at full width; other cards in this view will not be rendered.",
+              "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."
             }
           },

From 5c19c8d41667d7f73fc2013121bb3cf5d7b0e6d2 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 13 Oct 2020 13:02:00 +0200
Subject: [PATCH 2/2] Move warning to the top

---
 .../editor/view-editor/hui-dialog-edit-view.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 147618e265d7..d4b1eafcedb6 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -117,6 +117,15 @@ export class HuiDialogEditView extends LitElement {
         content = html`
           ${this._badges?.length
             ? html`
+                ${this._config?.panel
+                  ? html`
+                      <p class="warning">
+                        ${this.hass!.localize(
+                          "ui.panel.lovelace.editor.edit_badges.panel_mode"
+                        )}
+                      </p>
+                    `
+                  : ""}
                 <div class="preview-badges">
                   ${this._badges.map((badgeConfig) => {
                     return html`
@@ -127,15 +136,6 @@ export class HuiDialogEditView extends LitElement {
                     `;
                   })}
                 </div>
-                ${this._config?.panel
-                  ? html`
-                      <p class="warning">
-                        ${this.hass!.localize(
-                          "ui.panel.lovelace.editor.edit_badges.panel_mode"
-                        )}
-                      </p>
-                    `
-                  : ""}
               `
             : ""}
           <hui-entity-editor