Sitemap Editor: Buttongrid support

[mherwege]

This PR adds the Buttongrid element to the sitemap editor.
There is also some cleanup for configuration on small screens.
See openhab/openhab-core#3810 and openhab/openhab-android#3494

[relativeci]

Job #1298: Bundle Size — 15.82MiB (+0.39%).

a5ff0ef(current) vs b7270d2 main#1158(baseline)

Important

Bundle introduced 1 and removed 1 duplicate package – View changed duplicate packages

Warning

Bundle introduced 13 new packages: @jsep-plugin/regex, @jsep-plugin/arrow, @jsep-plugin/object and 10 more – View changed packages

Bundle metrics   10 changes 5 regressions 1 improvement

	Current Job #1298	Baseline Job #1158
Initial JS	1.9MiB(+13.5%)	1.67MiB
Initial CSS	609.63KiB(+0.12%)	608.89KiB
Cache Invalidation	93.81%	93.95%
Chunks	217(-0.91%)	219
Assets	683(-0.87%)	689
Modules	3029(+78.18%)	1700
Duplicate Modules	170(+88.89%)	90
Duplicate Code	1.6%(-17.95%)	1.95%
Packages	152(+10.14%)	138
Duplicate Packages	16(+6.67%)	15

Bundle size by type   3 changes 3 regressions

	Current Job #1298	Baseline Job #1158
JS	9.29MiB (+0.43%)	9.25MiB
Other	4.75MiB (+0.42%)	4.73MiB
CSS	860.95KiB (+0.17%)	859.49KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.23KiB	1.23KiB

---

View job #1298 report View mherwege:buttongrid branch activity

[mherwege]

@lolodomo I hope I have the JSON format right, but would need a working UI to test. I understand there is none yet. I will correct if there is an issue.

[lolodomo]

I started to implement buttongrid widget. I will publish a WIP PR today so that you can test your PR.

[lolodomo]

@mherwege : you can try with BasicUI built from PR #2195

[lolodomo]

@mherwege : look at my message, I propose to change the syntax: openhab/openhab-core#3441 (comment)
WDYT ?

[mherwege]

@lolodomo I am fine with that change. If it is agreed, I will adapt the sitemap editor PR accordingly.

[mherwege]

@lolodomo I now adapted it to the syntax with colons to separate row and column (row:column:command).

Here are few screenshots:

[florian-h05]

Is this finished and ready for review?

[mherwege]

Is this finished and ready for review?

@florian-h05 Yes it is.

[lolodomo]

Is it compatible with the last syntax (PR merged yesterday) ?

[mherwege]

Is it compatible with the last syntax (PR merged yesterday) ?

@lolodomo I now adapted it to the syntax with colons to separate row and column (row:column:command).

If this is the syntax, yes.

[ghys]

Thanks @mherwege it seems to work well.

I think the header/tabs in the bottom pane (Widget, Visibility...) when on some phones with the iOS theme is becoming quite crowded, like this:

We might need to find a solution design-wise for these, when there are too many 'tabs' to display and there isn't enough room.

Otherwise LGTM!

[mherwege]

@ghys I see. It might be better to put Visibility at the end cor this. I put it there because I found that the more logical position.

I did create these extra tabs because content inside one tab became too much.

Is there a way to swipe the tabs slightly left/right? That might be a solution.

[ghys]

I think normally the tabs can be scrolled but in this case (I tried on my Android) they don't. So you have something like this but no way to access what's not visible in the header:

I'll try to have a look!

[mherwege]

Add ‘scrollable’ here may do.

[mherwege]

@ghys I added a scrollable attribute to the tabbar. I hope that makes it better.

[florian-h05]

I have tested this now on my iPhone 14 and in the Chrome DevTools with "Pixel 7" setting, and in both cases, the tab bar is now scrollable.
@ghys Please let me know if I can merge this or should wait for you.

[lolodomo]

The new widget is now implemented (merged) in Basic UI so we really need this PR before OH 4.1 code is frozen ;)

[florian-h05]

Sure. Let's wait for Yannick till Friday evening, and then merge,

[ghys]

I'm happy with this fix, maybe we should move the chevron (to collapse) to the left so we don't have to scroll to find it, but it'll do for now.
Thanks for addressing my concerns!