Add iconColor to ha-config-navigation entries (#10658)

This commit is contained in:
Joakim Sørensen 2021-11-21 18:52:58 +01:00 committed by GitHub
parent 6335b13c5e
commit a430142296
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 4 deletions

View File

@ -28,6 +28,8 @@ export interface PageNavigation {
core?: boolean;
advancedOnly?: boolean;
iconPath?: string;
description?: string;
iconColor?: string;
info?: any;
}

View File

@ -59,6 +59,7 @@ class HaConfigDashboard extends LitElement {
name: "Home Assistant Cloud",
info: this.cloudStatus,
iconPath: mdiCloudLock,
iconColor: "#174B62",
},
]}
></ha-config-navigation>

View File

@ -24,10 +24,13 @@ class HaConfigNavigation extends LitElement {
? html`
<a href=${page.path} aria-role="option" tabindex="-1">
<paper-icon-item>
<ha-svg-icon
.path=${page.iconPath}
<div
class=${page.iconColor ? "icon-background" : ""}
slot="item-icon"
></ha-svg-icon>
.style="background-color: ${page.iconColor || "undefined"}"
>
<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
</div>
<paper-item-body two-line>
${page.name ||
this.hass.localize(
@ -54,7 +57,8 @@ class HaConfigNavigation extends LitElement {
`
: html`
<div secondary>
${this.hass.localize(
${page.description ||
this.hass.localize(
`ui.panel.config.${page.component}.description`
)}
</div>
@ -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);
}
`;
}
}

View File

@ -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,
},
],