From 078209d154d3938859014c4528447647ed0822b1 Mon Sep 17 00:00:00 2001
From: Johannes Hager <18686636+zwif@users.noreply.github.com>
Date: Thu, 24 Apr 2025 17:04:09 +0200
Subject: [PATCH] Add Option to wrap or scroll section header badges (#24709)
---
.../form/view_header_badges_wrap_scroll.svg | 17 ++++++++
.../view_header_badges_wrap_scroll_dark.svg | 17 ++++++++
.../form/view_header_badges_wrap_wrap.svg | 11 +++++
.../view_header_badges_wrap_wrap_dark.svg | 11 +++++
src/data/lovelace/config/view.ts | 1 +
src/panels/lovelace/badges/hui-view-badges.ts | 8 ++++
.../hui-view-header-settings-editor.ts | 27 ++++++++++++
src/panels/lovelace/views/hui-view-header.ts | 42 ++++++++++++++++++-
src/translations/en.json | 6 +++
9 files changed, 139 insertions(+), 1 deletion(-)
create mode 100644 public/static/images/form/view_header_badges_wrap_scroll.svg
create mode 100644 public/static/images/form/view_header_badges_wrap_scroll_dark.svg
create mode 100644 public/static/images/form/view_header_badges_wrap_wrap.svg
create mode 100644 public/static/images/form/view_header_badges_wrap_wrap_dark.svg
diff --git a/public/static/images/form/view_header_badges_wrap_scroll.svg b/public/static/images/form/view_header_badges_wrap_scroll.svg
new file mode 100644
index 0000000000..178bd41190
--- /dev/null
+++ b/public/static/images/form/view_header_badges_wrap_scroll.svg
@@ -0,0 +1,17 @@
+
diff --git a/public/static/images/form/view_header_badges_wrap_scroll_dark.svg b/public/static/images/form/view_header_badges_wrap_scroll_dark.svg
new file mode 100644
index 0000000000..7b37ae44d7
--- /dev/null
+++ b/public/static/images/form/view_header_badges_wrap_scroll_dark.svg
@@ -0,0 +1,17 @@
+
diff --git a/public/static/images/form/view_header_badges_wrap_wrap.svg b/public/static/images/form/view_header_badges_wrap_wrap.svg
new file mode 100644
index 0000000000..0e3e524740
--- /dev/null
+++ b/public/static/images/form/view_header_badges_wrap_wrap.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/static/images/form/view_header_badges_wrap_wrap_dark.svg b/public/static/images/form/view_header_badges_wrap_wrap_dark.svg
new file mode 100644
index 0000000000..3d000ef312
--- /dev/null
+++ b/public/static/images/form/view_header_badges_wrap_wrap_dark.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/data/lovelace/config/view.ts b/src/data/lovelace/config/view.ts
index f4d8eec1af..8ab70b06f8 100644
--- a/src/data/lovelace/config/view.ts
+++ b/src/data/lovelace/config/view.ts
@@ -29,6 +29,7 @@ export interface LovelaceViewHeaderConfig {
card?: LovelaceCardConfig;
layout?: "start" | "center" | "responsive";
badges_position?: "bottom" | "top";
+ badges_wrap?: "wrap" | "scroll";
}
export interface LovelaceBaseViewConfig {
diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index 312e953597..f04d33a59c 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -206,6 +206,14 @@ export class HuiViewBadges extends LitElement {
margin: 0;
}
+ .badges > * {
+ min-width: fit-content;
+ }
+
+ .badges > *:last-child:not(.add) {
+ padding-right: var(--badges-padding-right, 0);
+ }
+
hui-badge-edit-mode {
display: block;
position: relative;
diff --git a/src/panels/lovelace/editor/view-header/hui-view-header-settings-editor.ts b/src/panels/lovelace/editor/view-header/hui-view-header-settings-editor.ts
index defde66bc9..6cf8c51930 100644
--- a/src/panels/lovelace/editor/view-header/hui-view-header-settings-editor.ts
+++ b/src/panels/lovelace/editor/view-header/hui-view-header-settings-editor.ts
@@ -16,6 +16,7 @@ import type {
import type { HomeAssistant } from "../../../../types";
import {
DEFAULT_VIEW_HEADER_BADGES_POSITION,
+ DEFAULT_VIEW_HEADER_BADGES_WRAP,
DEFAULT_VIEW_HEADER_LAYOUT,
} from "../../views/hui-view-header";
import { listenMediaQuery } from "../../../../common/dom/media_query";
@@ -92,6 +93,30 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
},
},
},
+ {
+ name: "badges_wrap",
+ selector: {
+ select: {
+ mode: "box",
+ options: ["wrap", "scroll"].map((value) => ({
+ value,
+ label: localize(
+ `ui.panel.lovelace.editor.edit_view_header.settings.badges_wrap_options.${value}`
+ ),
+ ...(value === "scroll" && {
+ description: localize(
+ `ui.panel.lovelace.editor.edit_view_header.settings.badges_wrap_options.${value}_description`
+ ),
+ }),
+ image: {
+ src: `/static/images/form/view_header_badges_wrap_${value}.svg`,
+ src_dark: `/static/images/form/view_header_badges_wrap_${value}_dark.svg`,
+ flip_rtl: true,
+ },
+ })),
+ },
+ },
+ },
] as const satisfies HaFormSchema[]
);
@@ -104,6 +129,7 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
layout: this.config?.layout || DEFAULT_VIEW_HEADER_LAYOUT,
badges_position:
this.config?.badges_position || DEFAULT_VIEW_HEADER_BADGES_POSITION,
+ badges_wrap: this.config?.badges_wrap || DEFAULT_VIEW_HEADER_BADGES_WRAP,
};
const narrow = this.narrow;
@@ -139,6 +165,7 @@ export class HuiViewHeaderSettingsEditor extends LitElement {
switch (schema.name) {
case "layout":
case "badges_position":
+ case "badges_wrap":
return this.hass.localize(
`ui.panel.lovelace.editor.edit_view_header.settings.${schema.name}`
);
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index cf1e751a41..e4fd00c847 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -23,6 +23,7 @@ import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"
export const DEFAULT_VIEW_HEADER_LAYOUT = "center";
export const DEFAULT_VIEW_HEADER_BADGES_POSITION = "bottom";
+export const DEFAULT_VIEW_HEADER_BADGES_WRAP = "wrap";
@customElement("hui-view-header")
export class HuiViewHeader extends LitElement {
@@ -188,6 +189,8 @@ export class HuiViewHeader extends LitElement {
const layout = this.config?.layout ?? DEFAULT_VIEW_HEADER_LAYOUT;
const badgesPosition =
this.config?.badges_position ?? DEFAULT_VIEW_HEADER_BADGES_POSITION;
+ const badgesWrap =
+ this.config?.badges_wrap ?? DEFAULT_VIEW_HEADER_BADGES_WRAP;
const hasHeading = card !== undefined;
const hasBadges = this.badges.length > 0;
@@ -211,6 +214,7 @@ export class HuiViewHeader extends LitElement {
class="layout ${classMap({
[layout]: true,
[`badges-${badgesPosition}`]: true,
+ [`badges-${badgesWrap}`]: true,
"has-heading": hasHeading,
"has-badges": hasBadges,
})}"
@@ -248,7 +252,7 @@ export class HuiViewHeader extends LitElement {
: nothing}
${this.lovelace && (editMode || this.badges.length > 0)
? html`
-