Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: New UI for tagging module #17488

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Conversation

zisoft
Copy link
Collaborator

@zisoft zisoft commented Sep 17, 2024

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:

Bildschirmfoto 2024-09-17 um 09 12 56

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

Bildschirmfoto 2024-09-17 um 09 14 56

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

Bildschirmfoto 2024-09-17 um 09 15 32

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

Bildschirmfoto 2024-09-17 um 09 15 48

Category tags have italic font. CSS class category

Bildschirmfoto 2024-09-17 um 09 16 27

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:

Bildschirmfoto 2024-09-17 um 09 16 47

/*---------------------------------------------------------
  - 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

@zisoft zisoft added the wip pull request in making, tests and feedback needed label Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wip pull request in making, tests and feedback needed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New UI for tagging module
1 participant