Convert thermostat to round-slider

[iantrich]

Closes #3622
Closes #2756
Closes #3711
Closes #3889
Closes #3891

[iantrich]

• Scaling
• Handles are not properly themed yet. Edit: I actually kind of like the colored handles rather than the white. It looks like the new slider does not have a border var on the handles yet, is that right @thomasloven?

[thomasloven]

That's correct. I made them to look more like paper-slider than our old round sliders.

Re: card size, there should really be a minimum supported card width. 200-300 px is definitely reasonable.

[iantrich]

@thomasloven thanks. Yeah, I like the handles as is.

[iantrich]

I think the card looks good down to ~300px
Please check the preview and try to break the theming and/or find improvements.

[thomasloven]

I think it could do with some more work 😉

[iantrich]

🤔 looks fine on refresh though, right?

[thomasloven]

Only the final state. There's still the problem with the name overlapping the circle at some sizes, and the circle being taller than the card in the single column.

[iantrich]

why did I sign up for something involving so much CSS... 🤦‍♂

[iantrich]

@thomasloven I only get that behavior when doing what you were doing; moving the window size. On a refresh of the page it looks fine to me. Do I need to fire an iron-resize or something? This is the kind of stuff I'm quite ignorant on, still.

[thomasloven]

I get the problem even after refresh if the window is between about 540 and 600 px wide.

[bramkragten]

Nice! 👍

[bramkragten]

We should also remove jquery and roundslider from the deps, and remove the load scripts.

[iantrich]

We can do that in a separate PR

[iantrich]

Last commit helps with window resizing but still struggling with scaling at certain sizes

[Misiu]

I found a weird behavior: when You enter config mode and add this entry:

type: vertical-stack
cards:
  - cards:
      - entity: climate.upstairs
        type: thermostat
        name: Kuchnia
      - entity: climate.upstairs
        type: thermostat
        name: Sypialnia
    type: horizontal-stack
  - cards:
      - entity: climate.upstairs
        type: thermostat
        name: Pokój dzienny
      - entity: climate.upstairs
        type: thermostat
        name: Korytarz
    type: horizontal-stack

You get this view:

But when You close edit view You suddenly get this:

The easiest way to reproduce this is to add two thermostats into horizontal-stack:

[iantrich]

I regret starting this... 😂

[Misiu]

@iantrich even with these small issues, You version works and looks great 👏
The first problem (resizing after exiting edit mode) isn't that important - I can always hit refresh (but unfortunately not on demo site).
The only issue (for me) is placing two thermostats in horizontal-stack, but I can live with it 🙂

[iantrich]

@Misiu it will get there, just a chore at this point 👎

[thomasloven]

The light card doesn't scale... might be worth considering.

[iantrich]

Now if the name is greater than 10 characters, the title size is lowered from 23px to 18px. I think that's good for now and could possible be tweaked further in another PR.

[iantrich]

@bramkragten I think this is good to go now unless @thomasloven has anything to add. Thanks for both your help on this one.

[thomasloven]

Now if the name is greater than 10 characters, the title size is lowered from 23px to 18px. I think that's good for now and could possible be tweaked further in another PR.

Did you perhaps forget to push that?

[iantrich]

Now if the name is greater than 10 characters, the title size is lowered from 23px to 18px. I think that's good for now and could possible be tweaked further in another PR.

Did you perhaps forget to push that?

I sure did, thanks!

[bramkragten]

Why is this? https://github.com/home-assistant/home-assistant-polymer/pull/3734/files/333568c622de79683ba54644db46ce5a2091d8ff..ff0706582e3ac1c4f5b836c9c346da152c18ab54#diff-aa72d1334cd817ce683ee67f3e2227adR254-R259

[thomasloven]

Actually, I think round-slider could handle this. If you give it both low, high and value, it will show one handle if low is undefined, and two otherwise.
May be a bit confusing, though...

[iantrich]

...can this be done...? 🤣 I never want to look at this card again

[bramkragten]

...can this be done...? 🤣 I never want to look at this card again

I will assign all issues with this card to you 😉

[Misiu]

@iantrich congratulations 🎉