From a430142296a16f1020dcecaeb5f0d2b589a395f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Sun, 21 Nov 2021 18:52:58 +0100 Subject: [PATCH] Add iconColor to ha-config-navigation entries (#10658) --- src/layouts/hass-tabs-subpage.ts | 2 ++ .../config/dashboard/ha-config-dashboard.ts | 1 + .../config/dashboard/ha-config-navigation.ts | 23 +++++++++++++++---- src/panels/config/ha-panel-config.ts | 19 +++++++++++++++ 4 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 562374fd71..d325e2d044 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -28,6 +28,8 @@ export interface PageNavigation { core?: boolean; advancedOnly?: boolean; iconPath?: string; + description?: string; + iconColor?: string; info?: any; } diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 2fb5e219aa..5f0138dc48 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -59,6 +59,7 @@ class HaConfigDashboard extends LitElement { name: "Home Assistant Cloud", info: this.cloudStatus, iconPath: mdiCloudLock, + iconColor: "#174B62", }, ]} > diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index ee08290b06..0e71eeebd0 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -24,10 +24,13 @@ class HaConfigNavigation extends LitElement { ? html` - + .style="background-color: ${page.iconColor || "undefined"}" + > + + ${page.name || this.hass.localize( @@ -54,7 +57,8 @@ class HaConfigNavigation extends LitElement { ` : html`
- ${this.hass.localize( + ${page.description || + this.hass.localize( `ui.panel.config.${page.component}.description` )}
@@ -81,6 +85,11 @@ class HaConfigNavigation extends LitElement { ha-svg-icon, ha-icon-next { color: var(--secondary-text-color); + height: 24px; + width: 24px; + } + ha-svg-icon { + padding: 8px; } .iron-selected paper-item::before, a:not(.iron-selected):focus::before { @@ -102,6 +111,12 @@ class HaConfigNavigation extends LitElement { .iron-selected:focus paper-item::before { opacity: 0.2; } + .icon-background { + border-radius: 50%; + } + .icon-background ha-svg-icon { + color: var(--card-background-color); + } `; } } diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 54ef2ac080..1a7b21f334 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -46,6 +46,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/integrations", translationKey: "ui.panel.config.integrations.caption", iconPath: mdiPuzzle, + iconColor: "#004E98", core: true, }, { @@ -53,6 +54,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/devices", translationKey: "ui.panel.config.devices.caption", iconPath: mdiDevices, + iconColor: "#004E98", core: true, }, { @@ -60,6 +62,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/entities", translationKey: "ui.panel.config.entities.caption", iconPath: mdiShape, + iconColor: "#004E98", core: true, }, { @@ -67,6 +70,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/areas", translationKey: "ui.panel.config.areas.caption", iconPath: mdiSofa, + iconColor: "#004E98", core: true, }, ], @@ -76,24 +80,28 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/blueprint", translationKey: "ui.panel.config.blueprint.caption", iconPath: mdiPaletteSwatch, + iconColor: "#2A850E", }, { component: "automation", path: "/config/automation", translationKey: "ui.panel.config.automation.caption", iconPath: mdiRobot, + iconColor: "#2A850E", }, { component: "scene", path: "/config/scene", translationKey: "ui.panel.config.scene.caption", iconPath: mdiPalette, + iconColor: "#2A850E", }, { component: "script", path: "/config/script", translationKey: "ui.panel.config.script.caption", iconPath: mdiScriptText, + iconColor: "#2A850E", }, ], helpers: [ @@ -102,6 +110,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/helpers", translationKey: "ui.panel.config.helpers.caption", iconPath: mdiTools, + iconColor: "#7209EB", core: true, }, ], @@ -111,12 +120,14 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/tags", translationKey: "ui.panel.config.tag.caption", iconPath: mdiNfcVariant, + iconColor: "#DF8E44", }, { component: "energy", path: "/config/energy", translationKey: "ui.panel.config.energy.caption", iconPath: mdiLightningBolt, + iconColor: "#578681", }, ], lovelace: [ @@ -125,6 +136,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/lovelace/dashboards", translationKey: "ui.panel.config.lovelace.caption", iconPath: mdiViewDashboard, + iconColor: "#D81159", }, ], persons: [ @@ -133,18 +145,21 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/person", translationKey: "ui.panel.config.person.caption", iconPath: mdiAccount, + iconColor: "#0A4BF0", }, { component: "zone", path: "/config/zone", translationKey: "ui.panel.config.zone.caption", iconPath: mdiMapMarkerRadius, + iconColor: "#0A4BF0", }, { component: "users", path: "/config/users", translationKey: "ui.panel.config.users.caption", iconPath: mdiBadgeAccountHorizontal, + iconColor: "#0A4BF0", core: true, advancedOnly: true, }, @@ -155,6 +170,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/core", translationKey: "ui.panel.config.core.caption", iconPath: mdiHomeAssistant, + iconColor: "#8F2D56", core: true, }, { @@ -162,6 +178,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/server_control", translationKey: "ui.panel.config.server_control.caption", iconPath: mdiServer, + iconColor: "#8F2D56", core: true, }, { @@ -169,6 +186,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/logs", translationKey: "ui.panel.config.logs.caption", iconPath: mdiMathLog, + iconColor: "#8F2D56", core: true, }, { @@ -176,6 +194,7 @@ export const configSections: { [name: string]: PageNavigation[] } = { path: "/config/info", translationKey: "ui.panel.config.info.caption", iconPath: mdiInformation, + iconColor: "#8F2D56", core: true, }, ],