finity69x2 / fan-control-entity-row

Provides a means to show a compact graphical control row for 2 or 3 speed fans in Home Assistant
68 stars 27 forks source link

shrink excess gap when used in places that aren't an entities card + option to hide name altogether #27

Closed ktownsend-personal closed 4 years ago

ktownsend-personal commented 4 years ago

Is it feasible to shrink the name area so there isn't a big gap when this element is used in places other than an entities card? Might it also be feasible to hide the name area entirely if name=false?

My use cases are in the picture elements card and in the custom banner-card. I'm going for a fairly tight layout on my dashboards and without the extra gap I could put 2 of these in the space 1 normally requires. The gap also makes the buttons seem unrelated to the icon and name on a picture elements card.

These adjustments would be handy as a consistent feature across all your custom elements.

finity69x2 commented 4 years ago

I didn't realize you could use these elements anywhere other than in an entities-type card.

would you mind posting a screenshot of how yours looks in the two cards you mentioned and the code required to achieve it?

I can't make any promises but I can look into it. It might (probably will...?) end up being something that would be required to modify in those cards themselves instead of my elements since my stuff doesn't deal with the icon or entity names at all.

ktownsend-personal commented 4 years ago

banner-card full width

# only showing config for the top card of the 3 displayed
background: '#90DBFF'
color: darkred
entities:
  - entity: light.ge_14294_in_wall_smart_dimmer_level_2
    name: Ceiling Light
  - entity: light.master_bath_light
    name: Bath Light
  - attribute: current_position
    entity: cover.master_bath_blinds
    name: Bath Blinds
    unit: '%'
  - entity: fan.ge_12730_fan_control_switch_level
    toggle: true
    type: 'custom:fan-control-entity-row'
heading: "\U0001F6CC Master Suite \U0001F6C1"
type: 'custom:banner-card'

banner-card half-width overflows right and has gap where name was

# only showing config for the top card of the 3 displayed
background: '#90DBFF'
color: darkred
entities:
  - entity: light.ge_14294_in_wall_smart_dimmer_level_2
    name: Ceiling Light
    size: 2
  - entity: light.master_bath_light
    name: Bath Light
    size: 2
  - attribute: current_position
    entity: cover.master_bath_blinds
    name: Bath Blinds
    size: 2
    unit: '%'
  - entity: fan.ge_12730_fan_control_switch_level
    toggle: true
    name: ' '
    size: 3
    type: 'custom:fan-control-entity-row'
  - entity: fan.ge_12730_fan_control_switch_level
    toggle: true
    name: ' '
    size: 3
    type: 'custom:fan-control-entity-row'
heading: "\U0001F6CC Master Suite \U0001F6C1"
row_size: 6
type: 'custom:banner-card'

picture entities card, has gap where name was and overflows container

# only showing basic config for above without all the other elements
# you'll need to point to a real picture on your system
elements:
  - entity: fan.ge_12730_fan_control_switch_level
    toggle: true
    name: ' '
    type: 'custom:fan-control-entity-row'
    style:
      transform: none
      top: 100px
      left: 0
      background-color: 'rgba(0,0,0,0.8)'
  - entity: fan.ge_12730_fan_control_switch_level
    toggle: true
    type: 'custom:fan-control-entity-row'
    style:
      transform: none
      top: 150px
      left: 0
      background-color: 'rgba(0,0,0,0.8)'
image: /local/pictures/pool.jpg
type: picture-elements
ktownsend-personal commented 4 years ago

I should be clear, I totally understand your element wasn't designed for these cases and I don't want to imply there is anything wrong with your implementation. I am just hoping it's feasible without a ton of work to make it work more fluidly in these circumstances.

ktownsend-personal commented 4 years ago

I finally got a chance to look your code. I see what you mean about not having control over what I'm wanting to change. You are inheriting all of that layout from hui-generic-entity-row as your container and just defining your additional buttons inside it. I would say it's not easily feasible, so I'll close this request. Maybe someday I'll get around to learning how to make my own element and see what I can come up with.