mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +00:00
Add iconColor to ha-config-navigation entries (#10658)
This commit is contained in:
parent
6335b13c5e
commit
a430142296
@ -28,6 +28,8 @@ export interface PageNavigation {
|
||||
core?: boolean;
|
||||
advancedOnly?: boolean;
|
||||
iconPath?: string;
|
||||
description?: string;
|
||||
iconColor?: string;
|
||||
info?: any;
|
||||
}
|
||||
|
||||
|
@ -59,6 +59,7 @@ class HaConfigDashboard extends LitElement {
|
||||
name: "Home Assistant Cloud",
|
||||
info: this.cloudStatus,
|
||||
iconPath: mdiCloudLock,
|
||||
iconColor: "#174B62",
|
||||
},
|
||||
]}
|
||||
></ha-config-navigation>
|
||||
|
@ -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);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
Loading…
x
Reference in New Issue
Block a user