Compact Custom Header

mayker · August 3, 2019, 11:41pm

You have a couple of options. You could use the new option compact_header: false to use the larger default header while keeping all other functions of CCH or you could edit CCH’s code manually. I can’t really offer support with the latter, but I can give you a head start if you are determined.

When I made the comment above it was far easier to find the values you needed to change, since then there have been many changes that effect the position of elements in the header and they are very likely to change with versions to come (I have to update elements and add exceptions for just about every major version of HA).

CCH doesn’t change the size of any icon, so if you’re looking to make them larger as well you would have to write that portion.

The three values that are going to change the amount of space the header takes up & move elements around are:

-64px this is the amount the default header is shifted above the screen to hide it.
111px this is the margin added to the top of the buttons to shift them down, back on screen.
48.5px this is for the view’s margin and padding. This will need adjusted depending on how tall the header is in order to keep cards etc. aligned.

These values can be found multiple times throughout the project and when/where these values are used is important as well. Depending on config options, HA version, and existance of other elements these variables change. If you do end up changing the size of objects you’ll need to adjust left/right margins and padding as well.

If you’re up to the challenge, more power to you. All I can say is good luck and godspeed.

greengolfer · August 4, 2019, 9:06am

Thanks for your quick answer. I was hoping it would be (almost) as easy when you posted the other message. I can see it is not!!! Changing the code is probably doable but maintaining the changes version after version is not. So, I will stay like this.
GV

cameron · August 4, 2019, 4:51pm

Hi I have just upgraded to 1.3.4 and theses have stopped been hidden.

  hide_help: true
  hide_config: true
  hide_unused: true

Any help to hide them again.

mayker · August 4, 2019, 6:28pm

Give 1.3.5 a try

Mariusthvdb · August 4, 2019, 6:40pm

just did with this error as a result:

2019-08-04 20:37:05 ERROR (MainThread) [frontend.js.latest.201907211] https://redacted/local/lovelace/resources/compact-custom-header/compact-custom-header.js?v=1.3.5:1575:22 NotSupportedError: Cannot define multiple custom elements with the same tag name

would that be a cache issue? or config error…

config:

header: true
menu: show
options: show
swipe: true
swipe_animate: none
chevrons: true
exceptions:
  - conditions:
      user_agent: iPhone
    config:
      menu: hide
      notifications: hide
      header: true
      options: hide
conditional_styles:
      - tab:
          'alarm':
            icon: >
              var alarm = entity['alarm_control_panel.ha_main_alarm'].state;
              if (alarm == 'disarmed') 'mdi:shield-check';
              else if (alarm == 'armed_away') 'mdi:shield-lock';
              else if (alarm == 'armed_custom_bypass') 'mdi:security';
              else if (alarm == 'armed_home') 'mdi:shield-home';
              else if (alarm == 'armed_night') 'mdi:shield-home';
              else if (alarm == 'pending') 'mdi:shield-outline';
              else if (alarm == 'triggered') 'mdi:bell-alert';
              else 'mdi:shield-check';
      - tab:
          'phones_tablets':
            icon: >
              var family = entity['sensor.family_home'].state;
              if (family == '0') 'mdi:account-off';
              else if (family == '1') 'mdi:account';
              else if (family == '2') 'mdi:account-multiple';
              else if (family == '3') 'mdi:account-multiple-check';
              else 'mdi:account-group';
  - entity: notifications
    condition:
      state: false      # When there are no notifications...
    button:             # hide notifications button.
      notifications:
        hide: true

btw and fyi:

Ive found out that

conditional_styles:
  - template:
      - tab:
          'alarm':
            icon: >
              var alarm = entity['alarm_control_panel.ha_main_alarm'].state;
              if (alarm == 'disarmed') 'mdi:shield-check';
              if (alarm == 'armed_away') 'mdi:shield-lock';
              if (alarm == 'armed_custom_bypass') 'mdi:security';
              if (alarm == 'armed_home') 'mdi:shield-home';
              if (alarm == 'armed_night') 'mdi:shield-home';
              if (alarm == 'pending') 'mdi:shield-outline';
              if (alarm == 'triggered') 'mdi:bell-alert';
              'mdi:shield-check';

works perfectly
cool.

update

just as a warning: the above template for icon doesn’t work perfectly. At least not always. So Ive reverted to the one using the else statements…
sorry for the misinformation…

HellfireZA · August 4, 2019, 7:19pm

@mayker

Does Compact Custom Header allow me to limit what History entities a user can see?

PS: Thanks for such a great add-on!

jimz011 · August 4, 2019, 9:16pm

@mayker When I use the hide_tabs configuration. The default_tab function no longer works. It will always load up the first page. I have hidden view 5 to 25. But it still won’t default to the second view. When I turn the hide tabs feature off. It does work without a problem.
Any ideas?

Edit: weird, it seems to work when I try to default to any other tab but 2. Weird.

cameron · August 4, 2019, 10:34pm

Yes that has worked just fine thank you.

frederik.vancoillie · August 4, 2019, 11:50pm

I think I did something stupid. I hid the 3 dots menu from within the CCH ui. Is there any way I can get it back cause I can’t get to that UI now.

tom_l · August 5, 2019, 12:02am

You can disable CCH by adding “?disable_cch” to the end of your URL.

frederik.vancoillie · August 5, 2019, 12:12am

Thank you!!!

ariel · August 5, 2019, 4:17pm

Some feedback RE name change, my 0.02c. While it’s true that the main use case may have shifted (e.g. for me it has always been about both compacting for Mobile + restricting views for non-admins), and that in addition to shrinking the header there are many more use cases covered, customizing the header continues to be the single flagship use case and still fits the purpose, methinks.

In addition, if changing the name breaks people’s configuration, then is that really worth it. Not all cch users are following this thread, and not all HA/HACS users read the fine print before hitting upgrade-all. Just saying.

atomicpapa · August 5, 2019, 8:51pm

If someone is hitting upgrade all before they read about any changes, they deserve what they get lol

davefi · August 6, 2019, 9:27am

Would it be possible to add a vertical divider function? For example, in cch: you would have an entry like

divider_tabs: ‘2,6,9’

and CCH would render a vertical divider e.g. | in position 2, 6 and 9 in the header? The idea is to group the tabs with some visual separation.

1 | 3 4 5 | 7 8 | 10

Another alternative would be a > which when click would expand or colapse the tabs to the right of it (up to the next divider) - but I guess that would be significantly more work!

1 > 3 4 5 > 7 8 > 10

Hope that makes sense!

apop · August 6, 2019, 2:51pm

@davefi, I logged a similar feature request on GitHub a little while back. Would something like this work for you?

mayker · August 6, 2019, 4:21pm

@HellfireZA No, that is all handled in the backend. CCH operates only in the frontend/Lovelace.

@jimz011 That is very odd, will look into it.

@ariel Thanks, thinking about it CCH is fine as is. Less work for me and no breaking change or having to install a new project. Probably not worth the hassle or added support.

@davefi @apop I think it would be better to just add a CSS property to certain elements where users can just insert their own css. Something like:

cch:
  button_css:
    menu: "box-shadow: 5px 10px #888888;"
  tab_css:
    0: "border-left: 2px solid red;"

apop · August 6, 2019, 5:26pm

This sounds good to me, I like the flexibility.

davefi · August 6, 2019, 9:57pm

@mayker yep, agree with @apop! Thanks for the consideration

jimz011 · August 8, 2019, 1:04am

I have a crazy question, but I use cch to hide tabs. The first 5 views I have can be swiped through and all the hidden ones can not. This is what is supposed to happen.

However say I would like page 1-5 be swipable and 8-12 as well this is currently possible. But it would then swipe from page 5 to page 8.

What I’d like to do is, that page 1-5 be swipable and page 8-12 as well. But that you can not swipe from 5 to 8 and vice versa. Meaning you can only swipe on pages that you are on and are allowed to swipe. In this example if I land on page 6 or 7 I don’t want it to be able to swipe.

(Sorry for the complicated explanation).

Anyways would something like this be possible?

mayker · August 8, 2019, 1:26am

Interesting & definitely possible. I will think on the best way to add it. Found your default_tab: 2 issue as well, it will be fixed in the next release.