Add ui.isDark() returns true/false if overall theme is dark or light, so the widget could switch appropriately. (can already use getTheme() to get actual colors if needs be.)
Fixes
Make spacer transparent so background is really the background.
Fix text_input to only send duplicates if enter key hit multiple times and not on loss of focus. Issue #513
Fix color-picker to not emit on tab change, and fix background overlay. Issue #514
Fix IE11 loading issue #515 (reversion)
Improve embedded node-red dashboard full path resolve - Issue #517
Let ui-form input be full width on IE11 - Issue #524
The main thing is the layout editor contribution from @KazuhiroItoh at Hitachi - Many thanks for that.
It is an initial release so the functionality is limited. but some quick notes to get you started.
The [layout] button is currently ONLY at the tab level within the Dashboard sidebar. IE you are only editing the layout of one tab at a time.
Once you open that you should see your existing page represented as a series of blocks - They are not meant to be 1:1 . From here you can move widgets around within a group - and drag between groups as you want.
A zoomed in version show several icons....
The lock/unlock symbol (eg on Gauge6 below) is the same as auto sizing mode - and will try to fit the available width. If you click the unlock symbol it will lock and then allow you to resize the widget. If you drag the size control (arrow bottom right of each locked widget) then you can change the size of the widget. Clicking the lock symbol will unlock it and revert to auto sizeing. If the widths are all locked then the group width can't be shrunk below the total width (but can be increased of course).
You can drag widgets around and the spacers will be automatically inserted - giving a result like
As usual feedback and comments appreciated.
(and don't forget to flush browser caches etc to ensure you get latest code where it's needed)
Awesome stuff. Looking at the layout mode, somehow the lock/unlock work in reverse here ?
ie. if it is "locked" I can resize it, when unlocked, I cannot. Is this WAD and should I read it differently ?
Sorry - yes.. should have said click on the unlock to lock it then you can resize it... it is a toggle from manual to auto. (edited above to try to clarify)
Scaling - tries to do its best. they are two separate items.
I think the lock means that it is locked to the size you set it to, but you can resize it. Unlocked means the s/w will autosize it for you. It is a bit non-intuitive as normally locked means the user cannot change it. Or perhaps I am misunderstanding.
I was just playing to see how it works. However this not particularly degenerate example shows the same problem. Note I am not complaining just testing
Something rather odd is going on. This is in Waterfox, it appears to be ok with Chrome and Firefox. I have cleared the cache and it still shows the problem. If I look in the developer console I can see that it is attempting to get http://localhost:1880/ui/components/ui-component/templates/spacer.html and that fails. However, if I select Disable cache on the Network tab in the developer tools and reload then it does not try to get spacer.html and the display is correct. When I deselect Disable cache then it fails again. Very odd.
Ah, found it. In the dialog for clearing history there is an option to clear the cache, which I had selected, but there is another for clearing Offline Website Data, which I had not selected. Selecting that has fixed it. Quite what the difference between the cache and offline data is I am not sure. Anyway, all working now, sorry about the red herring.
Have you tried to let Waterfox clear everything that’s part of the site data? Last night someone on a different slack workspace mentioned that following the Firefox instructions for it worked: https://support.mozilla.org/en-US/kb/storage
Edit: our messages intercepted, that was exactly the option I meant, site preferences and offline data. Checking those will also delete things like localStorage and cache from service workers.
I guess the most annoying part that I found, personally, while working on customized templates in the dashboard is that it uses an old client-side techno (old version of angular and material design). Plus, MD is quite cumbersome and hard to master, so I was wondering if there is any plan to move to a more recent client framework ?
