Skins :: adjust styles of skin context menus, tooltip… 2nd attempt #2363

ronso0 · 2019-11-16T22:13:11Z

Synchronise styles of skin right-click menus, tooltip, ...
[2nd attempt after #2337 was merged too early. See conversation there...]
[hopefully all changes are included here. ]

This should definitely be included in the 2.3 release because it makes the entire regular GUI interaction a consistent experience. No more OS themes crushing in, except popup windows like file dialogs and warnings.

It affects

Tracks table menu
hotcue menu
cover art menu
tooltips
effect selector drop-down
table header menu
editable fields (Search box, beat spinboxes, library items)
skin settings menu (Tango, LateNight, maybe Deere)
sidebar menu

This is how the popups etc. are supposed to look like:

ToDo

Please test with various themes, also on Windows and MacOS, also without desktop styles (window manager olnly, like i3wm)

…, ..."" This reverts commit 6e1abd2.

ronso0 · 2019-11-16T22:27:27Z

It would be nice if someone with MacOS 10.11 could test if the effect selector drop-down looks like this, i.e. checkmarks drawn properly, no offset/cropped list items:

ronso0 · 2019-11-18T09:33:51Z

@esbrandt Could you please test Deere again? The closed effect selector should now have a dark bg color.

Be-ing · 2019-11-20T01:14:06Z

res/skins/Deere/style-mac.qss

@@ -7,7 +7,7 @@
 }


-/* hack to hide the checkmark, otherwise text gets cut off
+/* Previously necessayr hack to hide the checkmark, otherwise text gets cut off


Why not just delete the code?

For documentation. It took a while to notice and figure out the fix, so its valuble info IMO

I'd rather have the code deleted if it is no longer necessary. It is still in the Git history if that info is needed later.

Be-ing · 2019-11-20T01:19:44Z

IMO the contrast for highlighted menu items in Deere should still be improved.

ronso0 · 2019-11-20T02:07:45Z

I'll take a look.

Holzhaus · 2019-11-21T13:28:54Z

Thanks @ronso0, nice work!

I noticed a few more issues while testing:

The context menus look bit too large on my 4K screen:

Same for tooltips:

The file picker (for selecting a new cover) looks broken:

ronso0 · 2019-11-21T13:54:10Z

Thanks for testing!

Idk how the file picker is affected by the changes.
On which OS are you?
I'll try to limit the QScrollBar style to WLibrary QScrollBar, WLibrarySidebar QScrollBar, and find a similiar selector for the dialog bg.

About the menu/tooltip font size:
we have several font issues in master, and it would be nice to solve those for 2.3:

search box / table header don't scale with the Library font size set in Preferences
library icons don't scale consistently with the Library font size ...
(BPM lock, 'played' checkbox, Preview button)

For now I'll remove the fixed fon sizes from the menu, tooltip and other elements, hoping they use the OS default size.

daschuer · 2019-11-21T14:18:38Z

Out of curious, what are the native dimensions of the cover?
What are your display scaling settings?

Holzhaus · 2019-11-21T15:01:38Z

Out of curious, what are the native dimensions of the cover?

Either 500x500px (embedded in the FLAC tag) or 550x550px (cover.jpg in the same folder). I don't know which one Mixxx uses.

What are your display scaling settings?

None AFAIC. I don't have a DE installed (using i3wm via startx) and didn't set any scaling settings. Qt seems to determine the scale factor automatically from the screen size. I can disable it via QT_AUTO_SCREEN_SCALE_FACTOR=0, but that's about it.

ronso0 · 2019-11-21T15:38:43Z

I'll try to limit the QScrollBar style to WLibrary QScrollBar, WLibrarySidebar QScrollBar

...and do the same for QHeaderView. Uff

ywwg · 2019-11-21T19:42:48Z

Does this PR also cover style of dialog boxes spawned by right click menus? Right now they are hard to read on LateNight:

Holzhaus · 2019-11-21T19:58:45Z

@ronso0: Idk how the file picker is affected by the changes.
On which OS are you?

I use Arch btw.

ronso0 · 2019-11-25T10:10:27Z

Does this PR also cover style of dialog boxes spawned by right click menus? Right now they are hard to read on LateNight:

I remember experiments with overview labels with those exact colors (css green & blue) in #2342 but in this branch I don't use those styles.

ronso0 · 2019-11-25T10:12:59Z

@Holzhaus Do you see the skinned file selector scrollbars also in Deere?

I'll try to limit the QScrollBar style to WLibrary QScrollBar, WLibrarySidebar QScrollBar

...and do the same for QHeaderView. Uff

Scrollbars may also pop up in the effect selector if someone has a lot of external effects enabled.
Double Ufff..

to avoid styling any QFileDialog that's parented to #Mixxx main widget.

ronso0 · 2019-11-25T14:19:55Z

@Holzhaus Could you please pull and test the cover dialog again with LateNight?
With the previous commit all scrollbar and background styles should be appplied to Mixxx widgets only.

Holzhaus · 2019-11-25T19:25:06Z

@ronso0 Voilà:

ronso0 · 2019-11-26T07:26:49Z

alright, thx!
with i3wm only, previously the Mixxx styles must have popped up all over the place. so your screens are good for working on keepin all Mixx styles, well within Mixxx..

ronso0 · 2020-01-21T14:02:34Z

Thanks for testing this again & again!
Ok, so in your case CueNumberLabel & CuePositionLabel don't inherit styles from WCueMenuPopup but have to be addressed explicitely. Will fix.

I chose a rather large spacing for menu items for better readability, font size is still set by OS, which is probably also the reason for large appearance in your screenshot with 100% scaling on 4k UHD.
I'm curious how it looks like when you run it with scale_factor=2.0

ronso0 · 2020-01-21T14:06:44Z

If the menu item spacing is considered too wide with 100% scaling by other users, as well, I'd decrease that, of course.

ronso0 · 2020-01-22T18:53:12Z

remaining ToDos:

in-depth review on macOS
opinions on the menu items spacing

Apart from that this is ready to merge IMO so it receives broader testing from those who rely on pre-built binaries. I bet we'll discover minor issues anyway, but those can be fixed later on.

Holzhaus · 2020-01-23T12:31:58Z

When using Tango, the content of the label field is not visible unless selected:

opinions on the menu items spacing

I think the spacing is ok. For some reason, I feel like all custom UI elements (i.e. everything execept library and menu bar) are too small on my 4K screen (or library and menu bar are huge when using QT_SCALE_FACTOR=2), but that issue is unrealated to this PR.

ronso0 · 2020-01-23T14:20:19Z

When using Tango, the content of the label field is not visible unless selected:

Fixed. I just double-checked the other QLineEdit styles and I think this was the last missing piece in this regard.

library and menu bar are huge when using QT_SCALE_FACTOR=2

you refer to the table header?

Holzhaus · 2020-01-23T14:33:41Z

Nope, the top menu bar. The table header is actually fine, it's just that the entries are large in comparison:

Holzhaus · 2020-01-23T14:39:38Z

By the way, in Tango there are some icons visible below the "No Headphones configured". I think this is a bug, but this also happens in master:

ronso0 · 2020-01-23T15:11:39Z

By the way, in Tango there are some icons visible below the "No Headphones configured".

It's opaque now.
The PreviewDeck cover I'd leave translucent, though, so there's some feedback for when loading / previewing a track from the library. It'll be hard to make the (UX) situations with unconfigured devices consistent for mic, vinyl and headphone (how control canges are processed / allowed)...

Holzhaus · 2020-02-06T23:39:10Z

This is ready to merge, but needs some MacOS testing, right?

Holzhaus · 2020-02-07T12:42:41Z

I just checked again. In direct comparison, the spacing between the items could be a bit smaller. But I guess that's just personal preference.

ronso0 · 2020-02-07T13:34:18Z

This is ready to merge, but needs some MacOS testing, right?

Yep, final feedback from MacOS is missing.
Besides the merge conflicts, this is left to do:

somehow remove middle elide of effect names in LateNight, this is impractical n small screens (can't tell what's causing this)
reduce menu item spacing

ronso0 · 2020-02-07T14:22:06Z

somehow remove middle elide of effect names in LateNight

for some reason the label of the (closed) effect selector is shown elided sometimes, indeveloper mode though. strange..

ronso0 · 2020-02-07T17:12:31Z

@Holzhaus the qss check has proven to be very helpful once more. Thx!
especially now that I can't test locally..

Holzhaus · 2020-02-14T13:47:05Z

Is this ready to review and merge?

ronso0 · 2020-02-14T18:28:35Z

this is ready for some time already.
still needs testing/confirmation on MacOS & WIN.
can't tell who to ping for that right now.

I still think we can merge and fix minor issues afterwards when nightly builds are avaliable dor everyone

Holzhaus · 2020-02-14T21:13:48Z

We could merge this now and get feedback during the 2.3 beta phase.

ronso0 · 2020-02-14T21:35:47Z

Yup! +1

Holzhaus · 2020-02-14T22:17:30Z

Done. Thank you for your work!

Revert "Revert "Skins :: adjust styles of skin context menus, tooltip…

b22cfc4

…, ..."" This reverts commit 6e1abd2.

ronso0 changed the title ~~Revert "Revert "Skins :: adjust styles of skin context menus, tooltip…~~ Skins :: adjust styles of skin context menus, tooltip… 2nd attempt Nov 16, 2019

ronso0 marked this pull request as ready for review November 18, 2019 09:26

Deere: set bg color for (closed) WEffectSeletor

ddb2182

all skins: remove WEffectSelector hack from macOS stylesheets

c9e74ad

ronso0 mentioned this pull request Nov 19, 2019

src/widget: Replace CueMenu implementation with a custom popup #2362

Merged

Be-ing reviewed Nov 20, 2019

View reviewed changes

all skins: remove fixed font sized from QMenu & QToolTip

9916f6c

restrict QScroolBar style to WLibrary and QTreeView pt1

6641709

ronso0 added 2 commits November 24, 2019 23:50

Merge remote-tracking branch 'mixxx/master' into skins-menu-styles

b40ea53

restrict styles for QLabel and QPushButton to WLibrary

0a84fc7

LateNight: restrict QTableView, QTreeView & QScrollBar styles to library

49fc104

to avoid styling any QFileDialog that's parented to #Mixxx main widget.

ronso0 mentioned this pull request Nov 25, 2019

LateNight :: Redesign part 2 #2342

Merged

2 tasks

LateNight: restrict QHeaderView and QMenu styles to Mixxx widgets

4579801

ronso0 added 2 commits January 22, 2020 16:34

set WCueMenuPopup QLabel text color in Tango & Deere

74a1bba

clean up Deere QHeaderView style

738cc75

Tango: set #CueLabelEdit text color explicitely

2d10baf

Tango: opaque 'No Heaphone' hint

bae31f3

ronso0 added 2 commits February 7, 2020 16:46

Merge branch 'master' into skins-menu-styles

8fb15a1

fix qss error, Deere/style.qss

5e33be6

Holzhaus merged commit 4ef6ab9 into mixxxdj:master Feb 14, 2020

ronso0 deleted the skins-menu-styles branch March 11, 2020 18:26

Be-ing mentioned this pull request Apr 15, 2020

Quick action context menu for WTrackProperty #2612

Merged

This was referenced Aug 22, 2022

library font does not affect editor widgets #7750

Closed

tango settings menu UI issues #9797

Closed

Skins :: adjust styles of skin context menus, tooltip… 2nd attempt #2363

Skins :: adjust styles of skin context menus, tooltip… 2nd attempt #2363

Conversation

ronso0 commented Nov 16, 2019 • edited Loading

ronso0 commented Nov 16, 2019

ronso0 commented Nov 18, 2019

Be-ing Nov 20, 2019

Choose a reason for hiding this comment

ronso0 Nov 20, 2019

Choose a reason for hiding this comment

Be-ing Nov 20, 2019

Choose a reason for hiding this comment

Be-ing commented Nov 20, 2019

ronso0 commented Nov 20, 2019

Holzhaus commented Nov 21, 2019 • edited Loading

ronso0 commented Nov 21, 2019

daschuer commented Nov 21, 2019

Holzhaus commented Nov 21, 2019

ronso0 commented Nov 21, 2019

ywwg commented Nov 21, 2019

Holzhaus commented Nov 21, 2019

ronso0 commented Nov 25, 2019 • edited Loading

ronso0 commented Nov 25, 2019

ronso0 commented Nov 25, 2019 • edited Loading

Holzhaus commented Nov 25, 2019

ronso0 commented Nov 26, 2019 • edited Loading

ronso0 commented Jan 21, 2020 • edited Loading

ronso0 commented Jan 21, 2020 • edited Loading

ronso0 commented Jan 22, 2020

Holzhaus commented Jan 23, 2020

ronso0 commented Jan 23, 2020

Holzhaus commented Jan 23, 2020

Holzhaus commented Jan 23, 2020

ronso0 commented Jan 23, 2020

Holzhaus commented Feb 6, 2020

Holzhaus commented Feb 7, 2020

ronso0 commented Feb 7, 2020

ronso0 commented Feb 7, 2020

ronso0 commented Feb 7, 2020 • edited Loading

Holzhaus commented Feb 14, 2020

ronso0 commented Feb 14, 2020

Holzhaus commented Feb 14, 2020

ronso0 commented Feb 14, 2020

Holzhaus commented Feb 14, 2020

ronso0 commented Nov 16, 2019 •

edited

Loading

Holzhaus commented Nov 21, 2019 •

edited

Loading

ronso0 commented Nov 25, 2019 •

edited

Loading

ronso0 commented Nov 25, 2019 •

edited

Loading

ronso0 commented Nov 26, 2019 •

edited

Loading

ronso0 commented Jan 21, 2020 •

edited

Loading

ronso0 commented Jan 21, 2020 •

edited

Loading

ronso0 commented Feb 7, 2020 •

edited

Loading