Compact Custom Header

Mariusthvdb · May 10, 2019, 2:25pm

will try, good idea, could have thought of that myself… sorry.

just to be sure, the user_agent needs only a unique phrase from the full user_agent?

also, I notice this error in the logs:

duckdns.org:8123/frontend_latest/app.7bd99ba1.js?__WB_REVISION__=7bd99ba128ed85e3303e:2:60395 TypeError: undefined is not an object (evaluating 'Object.keys(this._keyBindings)')

could that be CCH related, or maybe the mobile_app: setting I needed to add for the new beta App to load.

update

changed to:

    exceptions:
      - conditions:
          user_agent: iPhone
        config:
          menu: hide
          notifications: hide
          header: true
          options: hide

and now have a view again;-)

mayker · May 10, 2019, 2:33pm

Yup, so user_agent: iPhone should work fine as long as “iPhone” is contained anywhere in your user agent. Give it a full refresh to be sure it’s not a caching issue.

This is not related to CCH.

darkkatarsis · May 12, 2019, 7:53pm

Hi, i see there is a problem with “header” attribute. When we use exceptions / conditions, it is not possible to force the header title to be visible. Everything else works

Mariusthvdb · May 13, 2019, 8:39pm

not to push at all, but would you have given some thought to this already? Your custom header seems to be very stable right now, this would be the edge kicking…

btw, I dont have tab numbers, nor view number, but simply the title: and path: . could we use these in the exceptions for the tabs also?

- type: custom:compact-custom-header
  main_config: true
  conditional_styles:
    -   tab:       
          personal:
            icon: >
              if (entities['sensor.family_home'].state === '0') return 'mdi:account-off';
              if (entities['sensor.family_home'].state === '1') return 'mdi:account';
              if (entities['sensor.family_home'].state === '2') return 'mdi:account-multiple';
              if (entities['sensor.family_home'].state === '3') return 'mdi:account-multiple-check';
              return 'mdi:account-group';

JS custom-ui templating would be needed? Or would it have to be in Jinja.

{% set mapper = {'0': 'mdi:account-off',
                 '1': 'mdi:account',
                 '2': 'mdi:account-multiple',
                 '3': 'mdi:account-multiple-check'} %}
{% set state = states('sensor.family_home') %}
{{ mapper[state] if state in mapper else 'mdi:account-group' }}

Igor_Jurisic · May 14, 2019, 11:05am

Hi guys,

I have an issue on mobile, specifically any tab other then the first one ( I’ve only added the config on the home tab).
Menu bar hides a part of the content. Screenshot below.

Here is my config:

  - type: custom:compact-custom-header
    main_config: true
    disable: true
    exceptions:
      - conditions:
          user_agent: Mobile
        config:
          disable: false
          voice: hide
          notifications: hide
          options: hide

mayker · May 14, 2019, 11:38am

@darkkatarsis header: false will hide the entire header for a “kiosk mode” look and there is no way to show part of the header in that mode. Removing the header title is what makes the header compact and unfortunately having a mode that only displays the title is not something I will add.

@Mariusthvdb I will be adding complex conditions much like template-card does it with JS. Config for tabs will need to stay number based.

@Igor_Jurisic This usually happens when CCH isn’t added to every view.

Igor_Jurisic · May 14, 2019, 12:09pm

So I should just repeat the same config for every view?

mayker · May 14, 2019, 12:13pm

Check out the config caching section of the wiki, but essentially you set the first view as main_config: true and do all of your config on that view, then just have - type: custom:compact-custom-header in every other view with no config added.

Igor_Jurisic · May 14, 2019, 12:21pm

Awesome, thanks!

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