From fa54c0be02df709718ea8e44b25fc6dbfc3ef95b Mon Sep 17 00:00:00 2001 From: Ryan Meek Date: Sat, 16 Mar 2019 13:10:13 -0400 Subject: [PATCH 1/4] Customize color of current tab's icon. --- compact-custom-header.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/compact-custom-header.js b/compact-custom-header.js index 3dc0ea8..d9fbcba 100644 --- a/compact-custom-header.js +++ b/compact-custom-header.js @@ -346,6 +346,7 @@ if (!customElements.get("compact-custom-header")) { header.style.backgroundImage = null; view.style.marginTop = "0px"; view.querySelectorAll("*")[0].style.display = "initial"; + root.querySelector('[id="cch_iron_selected"]').outerHTML = ""; if (header_colors) header_colors.parentNode.removeChild(header_colors); if (Object.keys(this.cchConfig.tab_color).length) { for (let i = 0; i < tabs.length; i++) { @@ -391,6 +392,22 @@ if (!customElements.get("compact-custom-header")) { root.appendChild(style); } } + + if (!root.querySelector('[id="cch_iron_selected"]') && !this.editMode) { + let style = document.createElement("style"); + style.setAttribute("id", "cch_iron_selected"); + style.innerHTML = ` + .iron-selected { + ${this.cchConfig.active_tab_color + ? `color: ${this.cchConfig.active_tab_color + " !important"}` + : "" + } + } + + `; + tabContainer.appendChild(style); + } + if (Object.keys(this.cchConfig.tab_color).length) { let tab_color = this.cchConfig.tab_color; for (let i = 0; i < tabs.length; i++) { From d2b7dd3d5ae95955a4e6d243f710e3cf68fed5a7 Mon Sep 17 00:00:00 2001 From: Ryan Meek Date: Sat, 16 Mar 2019 13:12:18 -0400 Subject: [PATCH 2/4] Update readme.md --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 9beb86b..46ba496 100644 --- a/readme.md +++ b/readme.md @@ -162,6 +162,7 @@ views: |button_color|Set the color of a single tab. See example below. |notify_indicator_color|Sets the color of the new notification indicator. |notify_text_color|Sets the color of the number of new notifications inside the indicator. +|active_tab_color|Sets the color of the current tab's icon. * You may use any [valid CSS for colors](https://www.w3schools.com/cssref/pr_text_color.asp). * If using hex colors (#ffffff) be sure to enclose in quotes ("#ffffff"). From 08a717dd47cb1198bd103c5949da0422f2503961 Mon Sep 17 00:00:00 2001 From: Ryan Meek Date: Sat, 16 Mar 2019 16:12:59 -0400 Subject: [PATCH 3/4] Update readme.md --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index 46ba496..5f3446a 100644 --- a/readme.md +++ b/readme.md @@ -4,6 +4,8 @@ Inspired by [a gist by ciotlosm](https://gist.github.com/ciotlosm/1f09b330aa5bd5 +Buy me a coffeeIf you feel I deserve it, you can buy me a coffee to keep me going. + ## Features: * Per user/device settings using usernames, user agents, and media queries. * Any icon button can be hidden, made into a clock with optional date, or placed in the options menu. From 0b964e387e97d5dac927a21063a683529e2f26c4 Mon Sep 17 00:00:00 2001 From: Ryan Meek Date: Sun, 17 Mar 2019 11:39:52 -0400 Subject: [PATCH 4/4] bump --- compact-custom-header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compact-custom-header.js b/compact-custom-header.js index d9fbcba..f31eecb 100644 --- a/compact-custom-header.js +++ b/compact-custom-header.js @@ -1,4 +1,4 @@ -import "./compact-custom-header-editor.js?v=1.0.1b8"; +import "./compact-custom-header-editor.js?v=1.0.1b9"; export const LitElement = Object.getPrototypeOf( customElements.get("ha-panel-lovelace")