Support icon_height for entity button #2800

timmo001 · 2019-02-19T13:26:00Z

Description

Adds support for icon_height with the entity-button card. This allows the user to tweak the height of the icon in the UI. Also added to config UI and moved the icon and icon_height to a new line.

Screenshots

Checklist

Code is tested and works on my devices

iantrich · 2019-02-19T15:10:37Z

I have no problem with this, I guess, but am planning on doing a big overhaul of this card in the near future which might break this new config option. My initial thought, related to this, is that icon will be an object, i.e.

icon:
  icon: mdi:home
  style:
    height: 100px
  state_filter:
    "on": brightness(110%) saturate(1.2)
    "off": brightness(50%) hue-rotate(45deg)

balloob · 2019-02-19T17:20:01Z

No breaking changes for Lovelace @iantrich. We're out in the wild and people with UI editors should not have to jump into YAML. You would need to come up with a proposal for config migrations first 😉

What I don't like about the icon height for users is that it's not clear that they can't just enter a number, but have to add 100px. I don't want to let CSS leak into our editor.

iantrich · 2019-02-19T17:36:54Z

we have css in all our picture-element elements. it's a necessary evil. that being said, style should be an advanced option with appropriate warnings to users.

config migrations...yuck, but understandable...can we go back to beta?

balloob · 2019-02-19T21:57:06Z

For picture elements it's a necessary evil. I don't want that to be a reason to have something as simple as an entity button get overcomplicated.

For a UI editor of entity button, it should be an input with type=number>, and the code converts it to add px. That way it's user friendly.

However, we end up discussing all the internals without looking at the bigger picture: is this a feature that we want to add?

iantrich · 2019-02-19T22:40:48Z

Just height, honestly, no.

As I mentioned before, I want to overhaul the entity-button and in doing so I planned on using the icon-element which supports style. Same would be true for the button itself using a refactored call-service button element. The idea being that the button element isn't really much different than the button card, except for wrapped in a card; same is true for a button row, but wrapped in a generic row.

The main point I want to emphasize though is that adding single limited tweaks is going to be a lot more work than just allowing a pass-through style object. It would be an advanced feature, hidden by default, and wouldn't add complexity to the element itself as we're already doing it, would just add to advanced features for the objects and would ease a lot of headaches users have.

I understand wanting to keep things simple, I still believe in that too, and in fact think from a code perspective we are still achieving that. But users want to customize, want to tweak beyond just themes, and I think the style object is the easiest way to do this. Hopefully I can convince you 😉

@timmo001 sorry for hi-jacking your PR 😄

balloob · 2019-02-19T22:55:01Z

I thought that for advanced crazy stuff, we would defer to custom things, and for our built-in cards stick to themes

timmo001 · 2019-02-19T22:57:42Z

So make the 100px be 100 for example and stitch on the px after the config value if I read correctly? Yeah CSS can be a bit of a rabbit hole that could cause issues for people on these 'standard' cards so I get it

iantrich · 2019-02-20T00:26:42Z

I thought that for advanced crazy stuff, we would defer to custom things, and for our built-in cards stick to themes

custom things, like @thomasloven card-modder do this at the ha-card level but don't allow for icon customization. Regardless, for now, we can consider the discussion moot, and I'll plan on submitting a POC PR in the future showing the added benefits 😄

timmo001 · 2019-02-22T17:04:16Z

I've changed the icon_height to use numbers instead of allowing CSS to be used

balloob

Looks good!

I think only this change, so our advanced users can still do their thing.

balloob · 2019-02-25T19:18:16Z

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -115,6 +115,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
          style="${styleMap({
            filter: this._computeBrightness(stateObj),
            color: this._computeColor(stateObj),
+            height: this._config.icon_height


The config should contain a valid CSS value, so it should be stored with px already added to it. The UI editor should only support a value that ends in px and should allow editing it as a number, not exposing the px to the user. That way, advanced users can still use a % or other CSS values in their YAML.

I'm not liking this idea. So I have to use the YAML editor in order to use %? And what happens if I use % via the raw config editor and then open the UI editor?

I don't think we should mess with the user's input. Just use what they give us. Perhaps we can do better validation in the future, but I don't think it's necessary.

So I'll add a suffix to the UI side and allow the yaml to edited as the advanced user likes then just pull in the setting as is on the card.

OK I seem to have it working.

To go on @iantrich 's point. I've managed to get it so it leaves this field alone but without messing with the 'advanced' input when you switch back to or save and reopen the config UI.

timmo001 · 2019-05-10T22:05:21Z

OK, I think that's it. Took some finagling, but CSS is now supported with px used in the config UI.

Excuse the long/poor quality testing gif 😄

balloob · 2019-05-13T03:25:43Z

🎉 🎉 🎉

balloob · 2019-05-14T05:04:13Z

Can you open a PR for the docs? I had to do a new release of the frontend to fix a bug, so we are shipping this feature tomorrow 😉

timmo001 · 2019-05-14T08:13:47Z

Can you open a PR for the docs? I had to do a new release of the frontend to fix a bug, so we are shipping this feature tomorrow 😉

Here you go 😺 home-assistant/home-assistant.io#9449

* ✨ Add entity button icon_height docs Further to home-assistant/frontend#2800 (comment) * 🔨 Expand

homeassistant added the cla-signed label Feb 19, 2019

ghost added the in progress label Feb 19, 2019

balloob requested changes Feb 25, 2019

View reviewed changes

balloob mentioned this pull request May 10, 2019

OctoPrint improvements home-assistant/core#23767

Closed

5 tasks

timmo001 added 4 commits May 10, 2019 19:32

🎨 Add support for icon_height

e42c5c0

🎨 Add icon_height to config ui

ffe3768

🔨 Don't expose css for icon_height

7b43fa4

🔨 Post rebase changes and allow advanced css height

e8cbb1d

balloob approved these changes May 13, 2019

View reviewed changes

balloob merged commit 309fecc into home-assistant:dev May 13, 2019

balloob removed the in progress label May 13, 2019

timmo001 deleted the support-icon-height-entity-button branch May 13, 2019 11:44

balloob mentioned this pull request May 14, 2019

20190514.0 #3197

Merged

timmo001 mentioned this pull request May 14, 2019

Add entity button icon_height docs home-assistant/home-assistant.io#9449

Merged

2 tasks

balloob pushed a commit to home-assistant/home-assistant.io that referenced this pull request May 14, 2019

Add entity button icon_height docs (#9449)

edc75ac

* ✨ Add entity button icon_height docs Further to home-assistant/frontend#2800 (comment) * 🔨 Expand

balloob pushed a commit to home-assistant/home-assistant.io that referenced this pull request May 14, 2019

Add entity button icon_height docs (#9449)

5c881bf

* ✨ Add entity button icon_height docs Further to home-assistant/frontend#2800 (comment) * 🔨 Expand

keesschollaart81 mentioned this pull request May 19, 2019

Export typings #3206

Closed

github-actions bot locked and limited conversation to collaborators Jul 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support icon_height for entity button #2800

Support icon_height for entity button #2800

timmo001 commented Feb 19, 2019 •

edited

iantrich commented Feb 19, 2019 •

edited

balloob commented Feb 19, 2019

iantrich commented Feb 19, 2019

balloob commented Feb 19, 2019

iantrich commented Feb 19, 2019

balloob commented Feb 19, 2019

timmo001 commented Feb 19, 2019

iantrich commented Feb 20, 2019

timmo001 commented Feb 22, 2019

balloob left a comment

balloob Feb 25, 2019

iantrich Mar 27, 2019

timmo001 May 10, 2019

timmo001 May 10, 2019

timmo001 commented May 10, 2019 •

edited

balloob commented May 13, 2019

balloob commented May 14, 2019

timmo001 commented May 14, 2019

Support icon_height for entity button #2800

Support icon_height for entity button #2800

Conversation

timmo001 commented Feb 19, 2019 • edited

Description

Screenshots

Checklist

iantrich commented Feb 19, 2019 • edited

balloob commented Feb 19, 2019

iantrich commented Feb 19, 2019

balloob commented Feb 19, 2019

iantrich commented Feb 19, 2019

balloob commented Feb 19, 2019

timmo001 commented Feb 19, 2019

iantrich commented Feb 20, 2019

timmo001 commented Feb 22, 2019

balloob left a comment

Choose a reason for hiding this comment

balloob Feb 25, 2019

Choose a reason for hiding this comment

iantrich Mar 27, 2019

Choose a reason for hiding this comment

timmo001 May 10, 2019

Choose a reason for hiding this comment

timmo001 May 10, 2019

Choose a reason for hiding this comment

timmo001 commented May 10, 2019 • edited

balloob commented May 13, 2019

balloob commented May 14, 2019

timmo001 commented May 14, 2019

timmo001 commented Feb 19, 2019 •

edited

iantrich commented Feb 19, 2019 •

edited

timmo001 commented May 10, 2019 •

edited