thomasloven / lovelace-slider-entity-row

🔹 Add sliders to entity cards
MIT License
821 stars 130 forks source link

Resize to preserve name over slider size #11

Closed decairn closed 5 years ago

decairn commented 5 years ago

The size of the slider when on the same line as the light name is static (see. toggle = true option). This causes a readability issue on longer names (e.g. Master Bedroom Lamp 1) that end up being truncated. Can that be more flexible to prefer full print of name over slider size, with a reasonable minimum slider length observed?

staticslidercapture

thomasloven commented 5 years ago

I think the current default size is a reasonable minimum length (Also, it's the same behavior as for a default input_number entity). You could try using the full_row option to put the slider on a single row by its own.

hulkhaugen commented 5 years ago

I want to 2nd this, as the title becomes very short on mobile. Could we have the option to hide the toggle, and push the slider further to the right? I really like the idea of a dimmer slider and the toggle is not interesting in most cases. It's not very useful when the names are truncated this much imo.

thomasloven commented 5 years ago

An option to hide the toggle that's not visible by default? Sure! Here you go! 😜

hulkhaugen commented 5 years ago

Yes, but the space of the toggle is replaced by a number. I would like to have that <div> hidden, so the slider moves all the way to the right, and there is more room for the entity name. See downlights example below: lovelace-slider-entity-row

hulkhaugen commented 5 years ago

If it's possible to get it like the "downlights" example above, and ideally with the percent value as secondary info, I would be super happy. If you're not interested in adding that feature to your card, I would appreciate if you could point me in the right direction to modify it myself. I spent a full evening trying to modify it, but I honestly don't know exactly what i'm doing and did not achieve any success.

thomasloven commented 5 years ago

I'll see what I can do.

hulkhaugen commented 5 years ago

The size of the slider when on the same line as the light name is static (see. toggle = true option). This causes a readability issue on longer names (e.g. Master Bedroom Lamp 1) that end up being truncated. Can that be more flexible to prefer full print of name over slider size, with a reasonable minimum slider length observed?

staticslidercapture

If you're still interested, you can hack reduce the max length of the slider by adding the following line in the .js file between the <style>-tags under const style = Polymer.html: ha-slider {width: 160px;}. The default value is 200px. If you also want to hide the toggle, you can remove or comment out the <template is="dom-if" if="{{displayToggle}}"> part under const input = Polymer.html. This will only hide it if you use the option toggle: true. If you want this for the default option, you can delete/comment out <template is="dom-if" if="{{displayValue}}"> instead. Just remember to clear your cache for the changes to apply.

I'm still working on how to apply the #sliderContainer {margin-right:0;} to make the slider align fully to the right side if the toggle is hidden, but haven't figured it out yet. Hopefully thomasloven can make this an included feature in the future.

Knol010 commented 5 years ago

How can i hide the slider when the light is off, and show it when i toggle it on? Thanks for the help.

thomasloven commented 5 years ago

hide_when_off: true