How far do we want to create components

[cavasinf]

Hey @kevinpapst,

Just wondering,
do we want to create simple components only (card, modal, timeline).
Or can we also made them with Extra/Demo from Tabler?

Example with Setting extra.
I've created on my side a template with this render but with bootstrap tab version (JS navigation) AND literal hard links (URL navigation).

Do we implement that in this bundle ?

[kevinpapst]

It's a good question how far we want to go with the abstraction. Obviously we would all benefit from such a component, as it would reduce the amount of extra HTML needed, which I am trying to avoid as much as possible outside roof macros and embeds.

The problem with such a component is that you have to find a way to move the tab contents between the use of the macros, probably something like stacked embeds. Not sure how to do that.

Edit:
I have a settings page that behaves differently, there is a list on the left side, with scroll anchors, all settings are grouped in cards one below the other. It makes the page much longer and looks a bit overwhelming, but on the other hand it allows to use the CMD+F search inside the browser.
In other words: I'd like to see more components without doubt, but I don't have an urgent need for it. But if you want to work on it: awesome 😄 I am sure I will use it at some point!

[cavasinf]

The problem with such a component is that you have to find a way to move the tab contents between the use of the macros, probably something like stacked embeds. Not sure how to do that.

I think I maybe understand what you are saying..
You mean that if we need to write long/complex twig for those tab contents, it will be hard if we need to pass those inside a "macro parameter" ?
If it's the case, I've the same problem currently with the accordion component => content is a complex HTML/twig, but macro only waits for parameters.

[kevinpapst]

Yes, that's what I am trying to say 😁 Actually it would be good to have multi macros, a big one like the existing that takes everything as parameters, but also helper macros for "start accordion", "start according card", "end accordion card", "end accordion". You could always use

{% set accordion_content %}
long html
{% endset %}

And then pass the accordion_content variable to the macro... but that feels wrong.

[cavasinf]

{% set accordion_content %}
long html
{% endset %}

And then pass the accordion_content variable to the macro... but that feels wrong.

That's what I'm doing with the accordion component 😭

[cavasinf]

I have a settings page that behaves differently, there is a list on the left side, with scroll anchors, all settings are grouped in cards one below the other. It makes the page much longer and looks a bit overwhelming, but on the other hand it allows to use the CMD+F search inside the browser.

Can you show me that pls ?

[kevinpapst]

Login with susan_super and kitten to https://demo-branch.kimai.org/fr/admin/system-config/

[cavasinf]

Yeah OK.
Hard to say what is the best way.
On your settings page, does submitting 1 of the forms, triggers submit of ALL others forms?
Or do you need to "submit" every form one by one?

[cavasinf]

Gitlab does the same way as yours, but they have made the "card" collapsed by default.
BUT with a short description text that tells you what you can find in that card SO you can also CMD + F to quickly find what you are looking for without expanding all cards.

Example with CMD + F Merge checks:

I find it nicely done like that.

[kevinpapst]

You need to submit every form by itself. In 100% of all cases that I observed in screen shares, users edited at most 1-3 settings at a time and saved those changes directly. Not perfectly elegant, but it keeps the save button near to the setting.
Gitlab UI looks really good, maybe I will steal that idea in the future 😁
I find it hard to say what works better for end-users, as they tend to behave much different from what I expect as developer... I like the look, but on the other hand you have to expand all boxes to be able to find the setting that might belong to different areas.