feature: implement a gooey config editor

[kinghat]

add the gui config editor for those that dont manage card configs via yaml

[samuelmcconnell]

I'd like it if the GUI were similar to those in vertical-stack-card, grid-card, etc,, where you can add tabs by clicking a + button, and rearrange them with < and > buttons.

[kinghat]

I'd like it if the GUI were similar to those in vertical-stack-card, grid-card, etc,, where you can add tabs by clicking a + button, and rearrange them with < and > buttons.

already working on this and basically mimicking the grid card.

[SiriosDev]

can't wait 😮
I will add one obvious thing, the perfect editor type would be a vstack-like editor mixed with a condition-like editor ( two tabs: in the first style, def pos, etc; in the second the cards)

[kinghat]

can't wait open_mouth I will add one obvious thing, the perfect editor type would be a vstack-like editor mixed with a condition-like editor ( two tabs: in the first style, def pos, etc; in the second the cards)

im not what youre talking about here but i will be posting an alpha version soon so that people can test it out for bugs and offer ideas via discussion. everyone in this thread will be notified.

[SiriosDev]

my idea was something like this

[kinghat]

my idea was something like this

yes very similar to that.

[kinghat]

everyone participating in this thread: im making progress on the gui editor. ive made screencast below showing what i have at this point:

Overview.Home.Assistant.mp4

i would like some input. what do you think of it? this is a pretty large addition of code. should i push beta releases from this branch im working on so you all can test it out and flesh out any bugs before it hits the masses?

edit: noticed theres still bugs in the tab selections 🤦‍♂️ bane of my existence!

[HenkSiemer]

I like it, would like to try it 😁

[kinghat]

have pushed an alpha of the graphical editor for testing and suggestions from those interested: https://github.com/kinghat/tabbed-card/releases/tag/v0.4.0-alpha

[kinghat]

one piece of feedback id like to receive is what information should be inferred when picking a card? for example, the tab label. currently if i pick a card, the label is just blank and looks weird:

should i try to infer some type of name or id from the card to populate the label config parameter for people? ive wanted to keep from generating actual config for users but maybe in this case 🤔

[HenkSiemer]

Install this next to the regulaar tabbed-card, or should i replace files in www/community ??

[kinghat]

Install this next to the regulaar tabbed-card, or should i replace files in www/community ??

if youre not using HACS you would overwrite whatever tabbed-card.js you currently have in there. you can just replace with the old one if you want to go back.

[HenkSiemer]

I don't mind the blank label, I will probably always rename it to something to my liking.
The graphical editor is just great, so much easier, things were getting complicated since i have a lot of horizontal and vertical stacks with custom button cards inside them.
Thnx.. great work.

[kinghat]

I don't mind the blank label, I will probably always rename it to something to my liking. The graphical editor is just great, so much easier, things were getting complicated since i have a lot of horizontal and vertical stacks with custom button cards inside them. Thnx.. great work.

going to test out "New Tab N" as the default label when picking a new card. will be in the next alpha release.

[Cerothen]

So far so good. I did some general testing and noticed that there appears to be a scoping issue associated with the "Local Tab Configuraiton" panel.

To recreate:

1. Add a new card to the dashboard
2. Select Tabbed Card
3. Select any other type of subcard
4. Expand the "local tab configuration" panel
5. Hit the "+" symbol (leave the "local tab configuration" panel expanded)

Now on any tab the "local tab configuration" panel is blank and the contents are flicker on screen when expanding then disappear. Reviewing the HTML with it expanded and retracted the "" contents are present when retracted and shown when expanded.

This bug does not seem to happen if the "local tab configuration" panel is retracted before switching to another tab.

Hopefully this feedback is helpful. Thanks for your hard work!

[kinghat]

looking into this. thanks for testing and reporting 🙏

[kinghat]

is fixed in next alpha release.

[kinghat]

does anyone have any examples of HA itself or other cards that let users configure styling on the frontend? looking for some inspiration other than just a text area/field. otherwise it would be just as easy to toggle the code editor and add them there.

[Cerothen]

Given the volume of possible options perhaps a text box with a link to all the different ones. Unless you are feeling particularily ambitious then maybe a dropdown of the options, when selected it makes a new row with the option and a textbox that lets you enter in the value.

[kinghat]

i thought about the drop down selection as well but there are so many, especially when you get to typography: https://github.com/material-components/material-web/blob/mwc/packages/tab/README.md#css-custom-properties and https://github.com/material-components/material-web/blob/mwc/docs/theming.md#typography. what i will probably do is add a few of the most common ones like colors and sizes as gui controlled and then people can just drop into the code editor if they want to go deeper.

[kinghat]

added color pickers to the styles tab. sorry it took so long but i was indecisive on how i wanted to handle it. its only the colors for now but ill add the text size and possibly the opacity config of inactive tab elements. report any issues please.

also id like to know if the * on altered properties is self-explanatory or not? basically i just want it to denote that you have explicitly set this property in config. either previously or by the graphical editor. should i apply it to the global config as well?

[Cerothen]

I tried compiling the dev branch but the styles are not present. Do you have a compiled second beta?

[kinghat]

can you be more specific when you say you tried compiling the dev branch?

[kinghat]

are others seeing the overlapping selector labels on firefox or whatever browser youre using?

[HenkSiemer]

Probably doing something wrong but i get this "STYLES NOT IMPLEMENTED: wat?"

[kinghat]

Probably doing something wrong but i get this "STYLES NOT IMPLEMENTED: wat?"

😀
have you updated to v0.4.0-alpha.1?

[HenkSiemer]

Yes replaced 4.0 for 4.1 Van: kinghat ***@***.***> Verzonden: zondag 12 februari 2023 17.42 uur Aan: kinghat/tabbed-card ***@***.***> CC: HenkSiemer ***@***.***>; Comment ***@***.***> Onderwerp: Re: [kinghat/tabbed-card] feature: implement a gooey config editor (Discussion #27) Probably doing something wrong but i get this "STYLES NOT IMPLEMENTED: wat?" 😀 have you updated to v0.4.0-alpha.1 <https://github.com/kinghat/tabbed-card/releases/tag/v0.4.0-alpha.1> ? — Reply to this email directly, view it on GitHub <#27 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM3HBBRJXIGRA5MMSMVQ5OTWXEHD7ANCNFSM6AAAAAARKFKHHY> . You are receiving this because you commented. <https://github.com/notifications/beacon/AM3HBBRIJ2ZGWDZVZKB75T3WXEHD7A5CNFSM6AAAAAARKFKHH2WGG33NNVSW45C7OR4XAZNRIRUXGY3VONZWS33OINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAJOEGO.gif> Message ID: ***@***.*** ***@***.***> >

[kinghat]

the v0.4.0-alpha.1 release file is correct so you either manually replaced it incorrectly or your browser needs a reload/cache clearing.

[HenkSiemer]

Its working, i do not have the overlapping, (chrome)

[mathmaniac43]

Hello! How is this going? Do you need more testers or feedback?

[kinghat]

hi. sorry for the delay. its still a thing but life happens. hopefully will get back to it soon.

[mathmaniac43]

No need to apologize! Just stumbled onto this thread today and wanted to offer to help if I can. Thank you for sharing this tool and for your time developing it!

[vingerha]

Also hoping this to be delivered at some point, I am very (!) well aware that time is often/always an issue. I am using this card a plenty as it reduces the need for scolling a lot, great card!!

[gsemet]

Any news ?

[kinghat]

you can try the alpha version