RFC: New UI for tagging module

[zisoft]

Based on the mockup of @Ni-Ti in #15172 I have started to implement a new UI for the tagging module.

For now I have replaced the top treeview for the attached tags with a GTK Flowbox containing the tag labels:

The tag labels only contain the leave of the tags. The full hierarchy can always be shown by hovering:

The toggle switch for displaying the internal darktable tags is removed from the UI and now a module preference:

The styling is completely done in CSS, widget name is #tag-label. A tag label can have additional CSS classes based on the type/status of the tag. I have setup a basic CSS styling as follows:

Internal darktable tags are dimmed. They cannot be selected. CSS class darktable

Category tags have italic font. CSS class category

Tags marked as private get the CSS class private (no basic design from me).

If multiple images are selected and some tags are attached to only some of these images they get a dashed border. CSS class some:

/*---------------------------------------------------------
  - Tagging module                                        -
  ---------------------------------------------------------*/
flowbox.tagging
{
  padding: 0.21em;
}

.dt_flowbox_sw
{
  background-color: @field_bg;
}

#tag-label
{
  border: 1px solid @plugin_label_color;
  border-radius: 1em;
  padding: 0 0.4em;
  margin: 0.15em;
}

#tag-label:not(.darktable):selected,
#tag-label:not(.darktable).hover
{
  background-color: @selected_bg_color;
}

#tag-label.some
{
  border-style: dashed;
}

#tag-label.darktable
{
  border-color: @grey_80;
}

#tag-label.darktable label
{
  color: @grey_80;
}

#tag-label.category label
{
  font-style: italic;
}

#tag-label.private label
{
}

This part is fully functional so far and can be tested.

This is still WIP and if this doesn't get completely torn apart in the air I would continue with the dictionary part of the tagging module.

Would like to hear what you think so far.

closes #15172

[TurboGit]

There is one thing that annoy me, some long tags are getting ellipsis and this makes reading the tag harder. Maybe have a longer default before adding ellipsis? A tag taking the whole width of the tag display should be fine by me.

[pehar1]

Should this UI replace the old one or should this be a new mode, selectable via preference ?

I have well over a thousand tags, all hierarchical, most with a depth of 5 to 10. I strongly prefer the current display as a list as you can see the hierarchy for all attached tags at a glance. The new design requires hovering with the mouse for each individual tag and only the hierarchy for one single tag is visible at a time. For me, this is a considerable disadvantage.

[da-phil]

Should this UI replace the old one or should this be a new mode, selectable via preference ?

I have well over a thousand tags, all hierarchical, most with a depth of 5 to 10. I strongly prefer the current display as a list as you can see the hierarchy for all attached tags at a glance. The new design requires hovering with the mouse for each individual tag and only the hierarchy for one single tag is visible at a time. For me, this is a considerable disadvantage.

Same for me, although I barely use more than 2 hierarchy levels. Seeing the full tag name with all levels really helps to quickly identify tags of the same hierarchy, which can be collapsed if not relevant.
The proposed design is going to make work with those tag scenarios a lot more time consuming.

While I like the sleek design and that you can adapt it by means of CSS, I think there should be an alternative design for workflows with hierarchical heavy tagging.

[wpferguson]

For now I have replaced the top treeview

I use the treeview almost exclusively

The toggle switch for displaying the internal darktable tags is removed from the UI and now a module preference:

I also use this a lot while developing....

Internal darktable tags are dimmed. They cannot be selected. CSS class darktable

I select darktable tags and manipulate them while developing and testing (mostly delete when it's not correct so that I can rerun the code and test again). However, I can also see the point where you don't want the user manipulating them without knowing what they are doing.