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

Increase GUI contrast in active/inactive buttons #6047

Open
anytizer opened this issue Jun 9, 2021 · 13 comments
Open

Increase GUI contrast in active/inactive buttons #6047

anytizer opened this issue Jun 9, 2021 · 13 comments

Comments

@anytizer
Copy link
Contributor

anytizer commented Jun 9, 2021

The active and inactive buttons feel like very similar, causing difficulties in identifying which one is active.
It would be nice to have a bit more contrast in those buttons' background color.

image

In the picture, "No" is selected, but it is visually weaker to know.
Pressing SPACE BAR would send ENTER to "No" button.

Obtaining the above dialog/prompt:
LMMS > Ctrl + O > Try to delete an LMMS File.

@anytizer anytizer added the bug label Jun 9, 2021
@musikBear
Copy link

Not but, but enhancement, and one important one.
There are select-color mistakes in lmms.
One of the more strange is that we use black as text-select color -Everywhere
If the green frame diddent gave it away, would you spot witch name was selected?
image
Meta-wise this goes under accessibility

@anytizer
Copy link
Contributor Author

image
Slightly difficult to determine which tab is currently active.

@anytizer
Copy link
Contributor Author

anytizer commented Jun 6, 2023

Also, #6730

@michaelgregorius
Copy link
Contributor

The first issue could be fixed by extending the style sheet with a definition for QPushButton::default, e.g.:

QPushButton::default {
	background-color: #6c757f;
}

This would make the dialogues look as follows:
6047-DefaultButton-DeleteYesNo

6047-DefaultButton-SaveDiscardCancel

The gray might be a bit too light though because it makes the text less readable.

@michaelgregorius
Copy link
Contributor

The second issue about the selection color of the line edit has been fixed with commit 69a35b5 in pull request #5687. Currently it looks as follows:

6047-QLineEditSelectionColor

@musikBear
Copy link

In this case i still have issue seeing the focused button. I would prefer more 'bling' to make it blatantly obvious, like
image

Ugly mockup, but i believe its clear.

@michaelgregorius
Copy link
Contributor

Here's how it looks if the default button has a green text color.

With the delete dialog I think there's too much green in the icons and text so that it becomes rather confusing:
6047-TextColorOfDefaultButton

On the file selection dialog it's too subtle and the default "OK" button look less important than the "Cancel" button:
6047-TextColorOfDefaultButtonFileSelection

Although one of the problems is that the icon that's used for "No" and "Cancel" should not be green but red instead.

@musikBear
Copy link

On the file selection dialog it's too subtle and the default "OK" button look less important than the "Cancel" button:

That is correct

"Cancel" should not be green but red instead.

Also agree
Perhaps we could do something with green complementary colour -Orange, so we get something like:
image

It stands out, but is also ugly. Rebekka would have to chime in
Another option could be a new design of the button so the one in focus has a green outline like:
image
But that is a question if qT support that

@flurick
Copy link

flurick commented Feb 27, 2024

image

QPushButton:focus {
  border: 1px solid lightgreen;
  border-radius: 4px;
  background-color: #17793b;
}

@Rossmaxx
Copy link
Contributor

@flurick if you don't mind, can you open a PR?

@musikBear
Copy link

...

I like the border ! It shows what button is in focus, bur perhaps 2 px outline would be clearer.
The green button-color is however confusing.
Many would exspect that green would be for a save-button.
In this case the green button would not save anything, but just close, that is not intuitive.

@Rossmaxx
Copy link
Contributor

Rossmaxx commented Apr 11, 2024

Since flurick has not responded, i decided to take up this one #7202.

@RoxasKH
Copy link
Contributor

RoxasKH commented May 27, 2024

Leaving here a couple of info/mockups about the issue that i've talked about in #7202

here's a couple of quickly drafted option that take inspiration from other programs, one just changes the selectede button color, the other uses an outer border to give a dvisual difference both in colors and perceived size

Colored Border
colored outer-border

In the border one, bg color might also gets a little darker, but it should keep the gradient and shouldn't reach the point where it blends in to the background.

Ps side note: the colored button proposal was also mentioned about making the loop state more evident in #3069 , where Rebecca also proposed a darker background/green icon mock-up that could also apply as a possible option here too.

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

No branches or pull requests

7 participants