[Idea] Light brightness slider in one row

[piitaya]

[Idea] Light brightness slider in one row

[piitaya]

I think the vertical option can be removed and can be replaced by a layout options : default vertical horizontal.
And we can a backward compatibility to avoid breaking change.

There will be 3 layouts :

Default

Vertical

Horizontal

[piitaya]

Somethings like that ?

Maybe we can add an option controls_layout: "column" | "row" for that?

[piitaya]

We can add collapse_controls to hide controls when entity is considered off too. I think it's easy to understand if collapse and layout are two different options.

[redford-jones]

Another option that I'd like to see is to be able to hide the slider if the current state of the light is 'off'

[posreg]

Another option that I'd like to see is to be able to hide the slider if the current state of the light is 'off'

I'm doing this by Conditional Card

hide slider when other than on, show when on

[simon2d]

I did a mock up of how it could look like with and without title with light and dark themes.. Don't hesitate if you want me to try different versions since it's all in photoshop and split in layers. It's pretty easy for me to change things around if needed. I hope this helps.

[Ulrar]

Absolutely agreed, I'm trying to make per room group card and it's a bit tough to get Light cards and entity cards (for smart plugs controling lights, in the switch domain) to line up cleanly on one line.
The ability to get the light card to only take one line would make that look good, +1 !

[brandensilva]

Also would love to see this to reduce vertical space. It likely can get extended to be reused for other card as common layout option too. For example, this is the mushroom alarm card with vertical disabled:

Here is how it could look like with a layout mode of horizontal and vertical disabled:

This looks possible with flex-direction: row; justify-content: space-between; align-items: center; on the container and some modifications to some of the padding on the mushroom entity.

This sets us up for getting closer to Yuhang's original design work with horizontal card layouts that are rounded and compact so it keeps things true to the design language this work was inspired from. Plus it differentiates mushroom and UI Minimalist from the blocky nature and wasted use of space in other HA cards you might find:

With a rounded border radius on the card and icons:

Other cards that benefit:

[brandensilva]

I wanted to share this as well given there are constraints you have to deal with doing this approach:

This is a 50/50 split with space reserved for text and the other portion reserved for actions. I feel the look and usability is acceptable but users will need to be more careful about not ending up in situations where they break these constraints or risk text or elements collapsing to a new line thus negating the main benefit of this approach.

It also means this mode is primarily used for full-width columns and not half-columns in a horizontal stack. Need to think through how to gracefully handle these use cases. One initial thought is maybe the horizontal layout mode is ignored and things function with vertical flow as if the layout option didn't exist (aka swap back to flex-direction: column; and reflow as the original look is now.)

[Stooovie]

Exactly! Or even put the slider behind the entity name (but that may introduce color contrast issues) :) Thank you!

[Stooovie]

OT: I must say I absolutely love the haptic feedback implementation on the iPhone. That's something the default Lovelace stuff should have.

[Dielee]

Yeah, this would be nice. Until this feature is available, just use an vertical stack!

[simon2d]

+1 for one row light.
Would be also nice to have a height attribute so we can make the slider even more compact if needed.
I'm currently using it for a mobile device and less real estate on slider would be a great help.

Thanks for the amazing work on this btw.

[Stooovie]

Wouldn't it be possible to have the slider extend (begin) under the text? It would probably be bad from an UX perspective, right?

[piitaya]

We will not propose such slider (behind the text) in Mushroom because it's too different than other cards.
The design proposed by @brandensilva can be a great addition because it's composable with all type of controls (buttons, slider, etc...)

If you want a slider behind text, you can use this card : https://github.com/mattieha/slider-button-card#general

[Stooovie]

I like Branden's proposal as well as your from your first reply to this request. Something like that.

[simon2d]

I agree that what Branden's proposed is more in line with the rest of Mushroom look. I would be happy with that :-)

[brandensilva]

Wouldn't it be possible to have the slider extend (begin) under the text? It would probably be bad from an UX perspective, right?

It's doable but not great code to write. Because each of these sections is separated as two different components or elements, they cannot easily mingle into each other like that without a bit of hackery. You could alter how it renders based on those options being selected but that's a lot of code for little benefit.

Or to put simply it's a solvable problem but the problem is it requires writing code that is less maintainable in the long run due to how the code is structured.

[Stooovie]

I agree, it wouldn't be pretty or very useful anyway as the slider would be very close to the tappable button.

[bemble]

@piitaya will give a first answer to this issue in 1.0.6 ;)

[brandensilva]

@bemble Cool. I think the big thing is the responsiveness if this were used in two columns. I really do think we should revert back to the flex-direction: column rather than flex-direction: row in those cases so actions re-flow below the text.

It also might make sense to make this clearer between what "vertical" is doing and what a horizontal layout mode does so it might require some renaming of some labels when editing the cards.

[cyrilphoenix71]

Clearly a good proposition ! :)
With collasped option who hide the sliders and controls when light is off, it will be perfect :)

[Stooovie]

That's oh so pretty! Thank you!

[simon2d]

Wow really nice!!!!
Can't wait to try it :-).

Thanks

[cyrilphoenix71]

Perfect