Compact Custom Header

darkkatarsis · May 14, 2019, 12:25pm

I understand. So what is the way to not change the look of the current header but hide item from menu for user? I can only do it with header title hidden.

mayker · May 14, 2019, 12:33pm

There is no way to use the functionality of the card while keeping the default header at the moment. The original function of this project was to just compact the header and it kind of exploded from there, so all features added from that point on are based on that original styling. I’ll definitely consider adding a feature to use the functionality of the card while using the default header, but it’s not an easy feat at this point.

klogg · May 14, 2019, 1:35pm

No kidding!

There are a couple of cards out there that have done this and I’m conflicted between the awesomeness of those cards (and they are awesome, this is not a complaint, more of a compliment!!!) and the desire for more functionality in the core.

mayker · May 14, 2019, 2:48pm

@Mariusthvdb To expand on this a bit more with an example using your code, this is how I see it working:

conditional_styles:
- template:
    tab:
      3:
        icon: >
          if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
          else if (entity['sensor.family_home'].state == '1') 'mdi:account';
          else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
          else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
          else 'mdi:account-group';

Mariusthvdb · May 14, 2019, 3:15pm

me too !

mayker · May 15, 2019, 3:49pm

Update:

Handful of new features in this one. I will be less active for a bit after this update and won’t be adding any new features for a while. I will still pop in for support and fixes as needed. Thanks for all the feature suggestions and finding pesky bugs/issues.

New features:

Conditional Styling Templates: You can now make advanced conditional styling configs using JavaScript (conditionally hiding/showing tabs is now availble using this).
Swipe navigation: Added the swipe navigation features from lovelace-swipe-navigation
default_tab: You can now set a default tab to start on when first navigating to /lovelace/
Ranges: You can now use ranges in hide_tabs, show_tabs, and swipe_skip.
e.g., 5, 6, 7, 8, 9, 13, 16 can be abbreviated to 5 to 9, 13, 16

https://github.com/maykar/compact-custom-header

apop · May 15, 2019, 4:03pm

Awesome!

One question: is swipe navigation only configurable globally or is it available as part of the Exception config?

mayker · May 15, 2019, 4:04pm

You can use it in exception config as well, pretty much everything in config can.

jimz011 · May 15, 2019, 5:07pm

Are there any breaking changes I need to know of? Couldn’t find it. For some reason after the last update it doesn’t work anymore for me.

mayker · May 15, 2019, 5:09pm

No breaking changes, just added features. What doesn’t work? Any errors in chrome dev tools or ha logs? Have you done a full refresh, clear cache?

mightydread · May 15, 2019, 5:15pm

It’s broken for me too. In the ha logs I only see this that could be related:

2019-05-15 19:13:51 ERROR (MainThread) [frontend.js.latest.201904270] XXXX/customcards/github/maykar/compact-custom-header.js?track=true:1057:4 SyntaxError: fields are not currently supported

klogg · May 15, 2019, 5:15pm

Ahem…
My menu is in the same place as Tab 0

I have got this but is it related?

Tried to serve up '/config/www/github/custom-cards/button-card.js.map' but it does not exist

mayker · May 15, 2019, 5:21pm

@klogg @mightydread @jimz011

Try the latest version and please provide troubleshooting info for me:

Errors in HA logs and Chrome Dev Tools (F12), browser you are using, config for card, and confirm that you have cleared your cache and refreshed.

mayker · May 15, 2019, 5:22pm

That error wouldn’t be related

jimz011 · May 15, 2019, 5:31pm

I use customcards so usually it shouldn’t be cached. Though I get this:

Edit: picture removed

I did this on a new browser (incognito mode and never opened before on this browser). But it has the same error as the app. Though, there are no errors in the logs!

Edit: I don’t have access to a computer now, will check that later!

Abeksis · May 15, 2019, 5:46pm

You can explain or share - how you added the amount of emails to each of you.

mightydread · May 15, 2019, 5:46pm

I use Firefox version 66.0.5 and cleared cache cookies and restarted the browser still same error.
Frontend JavaScript version: latest

card config:

      - type: 'custom:compact-custom-header'
        clock_am_pm: false
        clock_date: true
        clock_format: '24'
        exceptions:
          - conditions:
              user: Mighty
            config:
              clock_format: '12'
              hide_tabs: '10'
              menu: show
              options: show
              show_tabs: '1,2'
        hide_tabs: '1,2'
        main_config: true
        menu: hide
        options: clock

HA log:

2019-05-15 19:39:53 ERROR (MainThread) [frontend.js.latest.201904270] https://hassio.fritz.box:8123/customcards/github/maykar/compact-custom-header.js?track=true:1057:4 SyntaxError: fields are not currently supported

Firefox console has the same error:

SyntaxError: fields are not currently supported compact-custom-header.js:1057:4

jimz011 · May 15, 2019, 5:51pm

Sure, you can check my thread/repo here:

I will be releasing my new lovelace setup tomorrow, but you can find all of my previous setup here now, it includes the mail sensor!

mayker · May 15, 2019, 5:59pm

Just pushed a release to address “SyntaxError: fields are not currently supported”

1.0.3b4

jimz011 · May 15, 2019, 6:20pm

Ok, after some more testing, it seems that /customcards/ do not work with this card, changing the version number in ui-lovelace.yaml solved it for me. Thnx for the new updates btw!