Quality of Life UI proposal

[veradrawer]

Hi @SkepticMystic, I've been talking with some friends who also use breadcrumbs, and after some ins and outs I think I have a concrete proposal for a UI update.

The proposal.

There is a lot to unpack, so I'll divide it in tweaks and functionalities.

Functionalities

1. Hierarchy titles: While minimal, the possibility of naming a hierarchy allows us to collapse under it the parent, sibling and child fields, which is thankful thing to have when using a lot of hierarchies. The main benefir from this is how this feature interacts with the rest of the proposed changes.

Having titles allows collapsing, which helps stacking.

2. Sort display order in Matrix/List View: Currently hierarchies appear in those views by update time: the hierarchies las created or modified by the user appear at the bottom. For those of us who use Matrix view as navigation, this would be a blessing. As for accesibility, a menu could be added so options like "Send to top/Send to bottom" are one click away.

Send to top and send to bottom are accesibility friendly measures.

3. Options within the field: there has been some discussion regarding choosing what fields should be shown within the Matrix/List view. This configuration allows for unobtrussive and clear stacking, while making it sort-of future proof.

Each field has it's own checkbox for every desired feature. Flexible.

Twaks

1. Copy: Reset Hierarchies can be understood as a kind of "update" button, mostly because it's placed next to one that is completely benign to click on, so it's been updated as Delete All Hierarchies. I deleted my hierarchies twice by accident by clicking on it, so a modal asking for confirmation would be nice too. On the same line, the X button for deleting hierarchies has been updated to display a text label.

2. Button placement: Show Hierarchies and Delete All Hierachies have been stacked vertically and aligned to the right, so there is less of a chance of clicking on them while sorting hierarchies. parent, sibling and child fields have also been stacked, as with some skins or in mobile the horizontality can't be rendered properly.

With some skins or in mobile, fields can't be rendered in a single horizontal line, which is noisy.

If this would be implemented, there would be a lot of improvements to be made so this would be more mobile friendly, or even more QoL updates like the Save field not appearing unless there are changes. I believe things like these are good and useful, but for another iteration.

[SkepticMystic]

Wow, this is amazing 😄
Haha I totally agree with each of these proposed changes!
One small thing is with these checkboxes to include a direction in the l/m view, and write to file functionality.

Because every direction can have multiple field names: ↑: Up, Parent, for example, having the checkbox apply to the direction as a whole would limit the granularity of which fields can be chosen. In this example, one wouldn't be able to only include Parent or only include Up, it would have to be all or nothing.
Aside from this change, I absolutely love this proposal!

Would you be open to making a pull request for this? If I were to do it myself, it would take me a while to learn how to make everything look so nice 😅

[SkepticMystic]

I think, regarding the issue mentioned above, it will be best to have the checkboxes to choose which fields are displayed in their own separate place.
This will keep the Hierarchy Creation settings cleaner and it will mean the checkboxes can be added for each individual field, not just each direction

[veradrawer]

Because every direction can have multiple field names: ↑: Up, Parent, for example, having the checkbox apply to the direction as a whole would limit the granularity of which fields can be chosen. In this example, one wouldn't be able to only include Parent or only include Up, it would have to be all or nothing.

Oh, I agree. The main idea was to show that these checkboxes should be stacked and close to the affected field. Here is another preview:

Checkboxes should be stacked and close to the affected field.

Would you be open to making a pull request for this? If I were to do it myself, it would take me a while to learn how to make everything look so nice 😅

Oh, it was a mockup made with Figma! there is no code to back it :'D If you would want to I can make a simple html with the added css so you only would have to refactor it a little.

[SkepticMystic]

I would really appreciate if you could do that!
I think I'll make this in Svelte, that way having the raw html would be very helpful

[veradrawer]

I'm back. Life gets in the way. I've seen that there's a lot of updates, and a lot of mails mentioning me!
How can we help now?

btw, congrats on Graph Analysis, it's f*ing amazing.

[SkepticMystic]

Also, it would be great to hear from the other people who developed this!
I'm really blown away 😄