Compact Custom Header

DavidFW1960 · March 16, 2019, 12:39am

0.90.0b2 has broken CCH Card

CARD-TOOLS IS INSTALLEDDeviceID: 624e9611-1586b55e
compact-custom-header.js?track=true:262 Can't find 'hui-root', going to walk the DOM to find it.
compact-custom-header.js?track=true:195 Uncaught (in promise) TypeError: Cannot read property 'querySelector' of undefined
    at HTMLElement.run (compact-custom-header.js?track=true:195)
    at HTMLElement.buildConfig (compact-custom-header.js?track=true:166)
    at HTMLElement.updated (compact-custom-header.js?track=true:69)
    at HTMLElement.performUpdate (app-fa09e639.js:2)
    at HTMLElement._enqueueUpdate (app-fa09e639.js:2)
run @ compact-custom-header.js?track=true:195
buildConfig @ compact-custom-header.js?track=true:166
updated @ compact-custom-header.js?track=true:69
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
CompactCustomHeader @ compact-custom-header.js?track=true:52
di @ 1036b31d59d6316c06b9.chunk.js:4543
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
_rebuildCard @ 1036b31d59d6316c06b9.chunk.js:5423
t.addEventListener.r @ 1036b31d59d6316c06b9.chunk.js:5344
i @ app-fa09e639.js:650
customElements.whenDefined.then @ 1036b31d59d6316c06b9.chunk.js:4543
Promise.then (async)
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
e.cards.forEach @ 1036b31d59d6316c06b9.chunk.js:5423
_createCards @ 1036b31d59d6316c06b9.chunk.js:5423
updated @ 1036b31d59d6316c06b9.chunk.js:5423
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5344
value @ 1036b31d59d6316c06b9.chunk.js:5640
async function (async)
value @ 1036b31d59d6316c06b9.chunk.js:5640
value @ 1036b31d59d6316c06b9.chunk.js:5640
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
initializer @ app-fa09e639.js:2
defineClassElement @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
initializeInstanceElements @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
i @ 1036b31d59d6316c06b9.chunk.js:5423
_clone @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
async function (async)
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
firstUpdated @ 1036b31d59d6316c06b9.chunk.js:5660
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5640
value @ app-fa09e639.js:874
c.then @ app-fa09e639.js:874
Promise.then (async)
value @ app-fa09e639.js:874
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
value @ app-fa09e639.js:1360
e @ app-fa09e639.js:1360
n @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
Promise.then (async)
c @ core-c8c933d4.js:1
subscribe @ core-c8c933d4.js:1
S @ core-c8c933d4.js:1
window.hassConnection.then @ core-c8c933d4.js:1
Promise.then (async)
153 @ core-c8c933d4.js:1
s @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1

And not showing?

mayker · March 16, 2019, 2:05am

Will check it out when I can get on 0.90.0b2. I’m on 0.90.0b1 now and all is well. Looks like something was moved or renamed.

DavidFW1960 · March 16, 2019, 2:09am

Yes it worked fine with 0.90.0b1… just b2

DavidFW1960 · March 16, 2019, 2:37am

Balloob has opened a PR to fix this… FWIW.

mayker · March 16, 2019, 2:39am

Just saw that, adjusting it to make it backwards compatible.

mayker · March 16, 2019, 3:21am

Update!

1.0.1b7

Toggle hidden tab redirect
Toggle chevrons (tab scroll arrows)
Customize header background with color or image
Customize the color of every header item. Every tab and button can be a different color.
Few misc. fixes and style changes.

I apologize for the multiple releases in one day. Will keep them to a minimum from now on.

This one is for the heavy themers out there. You can now customize the color of everything in the header, including its background color, background image, or both. Styling config at the end of the github readme. Works with exceptions as well, everyone can have a different theme!

Check out this super ugly example with a transparent png for a background:

VDRainer · March 16, 2019, 8:47am

Thanks @mayker, the customizing options are awesome.

Looks like there’s a problem with views panel: true

Reloading them (CTRL-F5) shows the full header.
Auswahl_185

Switching from a normal view, the cards are under the header.
Auswahl_186

No errors in HA log or the console.

mayker · March 16, 2019, 12:59pm

Thank you. Found the issue. Working on a fix now.

mayker · March 16, 2019, 1:21pm

Just released 1.0.1b8 to fix panel view.

lubbertkramer · March 16, 2019, 10:55pm

Thanks, that was indeed what i was meaning, to theme the style by user/device just like i can hide things by user/device Great work!

capstan1 · March 17, 2019, 12:32am

Thanks for this update. Thought about requesting a theming option, but you make wishes come true before I even tell them
Makes my theme look way better!

Valiceemo · March 17, 2019, 10:12am

I don’t seem to be able to hide the am/pm indicator on the clock?

      - type: custom:compact-custom-header
        main_config: true
        menu: hide
        options: clock
        voice: overflow
        notifications: overflow
        header: true
        clock_format: 24
        clock_am_pm: false

Even if I keep it to 12hr format I still see it
The indicator has in the last day moved to a second line:

mayker · March 17, 2019, 1:34pm

Any errors in HA or in your browsers dev-tools (F12)?
What version of HA and what browser are you using?
Have you tried a hard refresh?

Valiceemo · March 17, 2019, 3:05pm

No errors that I can see.
Seems it was a caching issue though, few browser restarts and it works as expected. Apologies

mayker · March 17, 2019, 3:43pm

Small update to add custom color for current/active tab’s icon. 1.0.1b9

active_tab_color:

mayker · March 19, 2019, 3:45pm

Update

1.0.2b0

This update adds the ability to use your HA theme to style CCH. This will make it so that when sharing a theme to the community you’ll be able to include CCH styling easily. This will also lighten your lovelace config a bit. Values set in config will override ones set in the theme. The only styles not available while doing this are individual tab colors. Check the end of the github readme for more.

VDRainer · March 19, 2019, 4:35pm

If no background_color is configured, the default is transparent?

mayker · March 19, 2019, 4:36pm

No sorry, I should have been more apparent. Those values are just examples. Will add that to the readme. Default is just HA’s default colors, etc.

VDRainer · March 19, 2019, 4:44pm

Sorry, should be more precise.
I have no CCH variables in my theme and all i have in LL config is:

- type: custom:compact-custom-header
  menu: overflow
  exceptions:
    ...

But the header is transparent.
Auswahl_021

mayker · March 19, 2019, 4:45pm

Ah okay, will look into it.