Skip to content

Make color preferences visually more pleasing and better usable - #48

Open
j6t wants to merge 6 commits into
masterfrom
js/prefs-color-buttons
Open

Make color preferences visually more pleasing and better usable#48
j6t wants to merge 6 commits into
masterfrom
js/prefs-color-buttons

Conversation

@j6t

@j6t j6t commented Aug 5, 2026

Copy link
Copy Markdown
Owner

I find the user interface to set the color preferences a bit ugly for these reasons:

  • The color samples are not clickable as one would expect who enters the dialog. Instead, the description is the button that must be clicked.

  • Since the descriptive texts are different for the preferences, the width of the buttons are different, too.

  • The descriptions themselves are not always natural language (read: they are nerdy) and use abbreviations.

This series makes the descriptions static text and turns the color samples into the clickable buttons. It also makes the descriptions and dialog titles more natural language.

This is the dialog before the change:
Screenshot_color_buttons_before
And this is the dialog after the change:
Screenshot_color_buttons_after

j6t added 6 commits August 12, 2026 09:04
After the user has selected a color in the Preferences dialog, the
helper proc prefspage_set_colorswatches is used to update the colors
shown in the Preferences dialog. Use this proc also to show the initial
colors after the Preferences dialog is constructed. This keeps the
procedure that gives the UI elements their colors in a single place.

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
The color selection elements in the Preferences dialog are set up in a
very uniform manner. The code doing that has grown in the past by simply
modifying a copy of a paragraph. Extract the varying parts into a list
and then operate the repeating parts in a foreach loop. This helps a
later change where we want to set up the UI elements in a different way.

Change the UI names "markbgsep" and "selbgsep" to drop the "sep", which
has obviously been left over by accident when "hunksep" was copied.

Change the suffix "but" to "btn", which resonates a bit better when
reading the code.

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
When the user goes to the color preferences, the eye is automatically
drawn to the color samples. However, clicking on the sample with the
intent to change it does nothing. Instead, the text label also acts as
a button and must be clicked to change the color.

Turn the color samples into clickable buttons and the text labels into
static text. Use non-themed buttons because their color can be changed
by simply specifying the color properties. (Themed buttons would need
a lot more elaboration.)

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
The labels used to be clickable buttons. These would have looked funny
if they carried long texts. For this reason, jargon and abbreviations
were used to keep them short. Since there is no button frame around the
labels anymore, the texts can become longer without becoming ugly.
Bring them closer to natural language.

Remove the prefix "Diff" from labels, because the remaining texts are
sufficiently unambiguous that they are about diff text.

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
When the user clicks a color preference, a color selection dialog is
presented whose title is provided in parts by the caller. The dialog
implementation must supply the rest of the title. This is unfriendly
for translations. Provide the full title by the caller. Rewrite the
texts to be more natural language.

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
The selection and link colors apply not only to the diff panel, but also
to the the commit list. Move these right after the generic background
and text color options.

The color for marked lines is only used in the diff panel, hence, leave
it below the diff color options.

Signed-off-by: Johannes Sixt <j6t@kdbg.org>
@j6t
j6t force-pushed the js/prefs-color-buttons branch from 22c2797 to 40ca78d Compare August 12, 2026 11:29
@j6t

j6t commented Aug 12, 2026

Copy link
Copy Markdown
Owner Author

Changes since the last round:

  • Apply a thicker border to the buttons and some vertical distance between the lines.
  • Remove "Diff" from the labels, because they are sufficiently unambiguous without.
  • Fine-tune the wording of the labels for better English.
  • Move selection and link colors above diff colors.
  • Tweak the commit messages.

This is the dialog after these changes:
Screenshot_color_buttons_after_v2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant