add new searchbox styles #4505

ronso0 · 2021-11-06T23:02:18Z

Skin styles for the new searchbox drop-down menu.

wider drop-down button, aspect ratio ~2:3
drop-down is resized with the library font

LateNight
Tango
Deere
Shade

ronso0 · 2021-12-08T00:36:34Z

src/widget/wsearchlineedit.cpp

+    // Show available auto-complete suggestions in a popup.
+    // Without this (default: QCompleter::InlineCompletion) a suggestion is picked
+    // automatically, and needs to be removed manually if it doesn't fit
+    lineEdit()->completer()->setCompletionMode(QCompleter::PopupCompletion);


This is a valuable change we should implement.
Though I'll revert this for now because currently it can't be styled wit qss.
As soon as I find a way that allows to adequately style the additional drop-down I'll open a follow-up.

ronso0 · 2021-12-15T23:33:23Z

This is now ready for review.

Swiftb0y

can't comment on the qss or any removed code since I don't know how it worked in the first place.

src/widget/wsearchlineedit.cpp

Swiftb0y · 2021-12-16T10:55:16Z

src/widget/wsearchlineedit.cpp

            << text;
 #endif // ENABLE_TRACE_LOG
-
+    int paddingPx;


if this variable does not get initialized in both of the if branches below, its uninitialized memory and using it then would result in UB. IMO it would be better to initialize on declaration using this tertiary statement. The resulting double call to isEmpty can be ignored imo because its cheap.

Suggested change

int paddingPx;

const int paddingPx = text.isEmpty() ? 0 : m_innerHeight;

ronso0 · 2021-12-16T14:21:04Z

@Swiftb0y Thanks for your review, I realized some chances for improvement after not having looked at it for some weeks.

If the fixup looks okay to you I'll squash it.

Re skin testing:

the drop-down button should scale with the library font (Pref > Library > set font)
the drop-down button should e hidden in features that don't support searching (most sidebar root items, AutoDJ, Browse, Rec)
the search query list should look like each skin's context menus

vlada-dudr · 2021-12-16T21:21:04Z

Hi, this fixes problem I have on master - auto filing searchbar and jumping to the end of the line. But I think there should be option to disable autocompletion at all. Even if it works better now, I still feel it is slowing me down.

ronso0 · 2021-12-16T22:10:34Z

@vlada-dudr I think you tested the intermdeiate version with the auto-complete drop-down. Though I reverted that because I couldn't style the list view, see my comment.

ronso0 · 2021-12-16T22:11:56Z

@Swiftb0y Ready for merge.

Swiftb0y · 2021-12-16T23:12:52Z

Thank. I got around to testing this just now. Actually the first time since a while I touched main. A couple of suggestions.

The cancel button in Deere could use a hover-style imo (out of scope)
I dislike the fact that the spacing in LateNight is so much bigger between the cancel button and the dropdown arrow compared to dropdown and the library maximize button.
the library in shade is black on white while the dropdown is white on black which seems out-of-place:
It would be nice to be able to use tab, to jump to the end of the suggestion similar to how its possible in most shells (out of scope).

vlada-dudr · 2021-12-16T23:20:54Z

I think you tested the intermdeiate version with the auto-complete drop-down.

I tested and commented on current version, with inline autocomplete. I checked it out just before commenting now. This branch is bug-free, which is much better, but my opinion holds: autocomplete is annoying feature (for me). I am sorry if I am too moronic.

ronso0 · 2021-12-17T00:03:15Z

Ah okay, I assumed you referred to the auto-complete drop-down.
As I said: as soon as it can be styled I'll add it back.

Thanks for testing, appreciated!

ronso0 · 2021-12-17T01:01:40Z

Thanks for testing all skins!

I dislike the fact that the spacing in LateNight is so much bigger between the cancel button and the dropdown arrow compared to dropdown and the library maximize button.

Actually the button sizes are equal in all skins, only the icons are a bit thinner in LateNight (PaleMoon).
The intention with the spacing is that you'd aim for the icon which should should decrease the chance of accidentally clicking the adjacent button (actually only clicking the Clear button might be annoying if it happens before the auto-save timer ran out)
I'll add more padding to the max button.

the library in shade is black on white while the dropdown is white on black

Good point. I'll adjust that.

It would be nice to be able to use tab, to jump to the end of the suggestion

Yes, out of scope. Tab is Move focus forward for all widgets.
The ➔ button does the trick though.

Swiftb0y · 2021-12-17T10:32:35Z

Actually the button sizes are equal in all skins, only the icons are a bit thinner in LateNight (PaleMoon).
The intention with the spacing is that you'd aim for the icon which should should decrease the chance of accidentally clicking the adjacent button (actually only clicking the Clear button might be annoying if it happens before the auto-save timer ran out)
I'll add more padding to the max button.

Yeah I figured that either some of the assets are suboptimal or my brain is just straight up tricking me. Still, it just looked "off" in latenight compared to the rest so I figured I'd mention that.

The ➔ button does the trick though.

yes, thats not as intuitive as Tab though since going to the arrow key essentially forces me to take my right hand of the typing position. Maybe I'm just biased and prefer tab because I'm used to it though. Still, it would be nice if both ➔ and tab could advance the autocompletion, though I guess that would involve some hacks.

ronso0 · 2021-12-18T01:02:45Z

@Swiftb0y If you find some time please take a final look.

In LateNight the max button is a bit wider now and has some more space, hope that is okay now:

The popup in Shade is styled like the tracks table now:

Swiftb0y

Works very well and looks good. Thanks.

github-actions bot added skins ui labels Nov 6, 2021

ronso0 added this to the 2.4.0 milestone Nov 6, 2021

ronso0 added the library label Nov 6, 2021

ronso0 force-pushed the search-styles branch from 92f981e to 01bb7fb Compare November 7, 2021 22:22

ronso0 commented Dec 8, 2021

View reviewed changes

ronso0 force-pushed the search-styles branch 2 times, most recently from aed8ace to 76cacca Compare December 15, 2021 15:18

ronso0 marked this pull request as ready for review December 15, 2021 23:30

ronso0 force-pushed the search-styles branch from 1344eb5 to 4748a70 Compare December 15, 2021 23:32

ronso0 force-pushed the search-styles branch from 4748a70 to 8a32cde Compare December 16, 2021 00:06

Swiftb0y reviewed Dec 16, 2021

View reviewed changes

ronso0 added 2 commits December 16, 2021 23:10

Searchbox: resize down arrow with font size

3d25acb

skins: add default searchbox style

53a641c

ronso0 force-pushed the search-styles branch from ece2f6d to 3f43ed7 Compare December 16, 2021 22:10

ronso0 added 4 commits December 18, 2021 01:52

LateNight: add searchbox styles

f1402ad

Tango: add searchbox styles

27db23f

Deere: add searchbox styles

7dfc765

Shade: add searchbox styles, brighten library font selection

ba1e124

ronso0 force-pushed the search-styles branch from 3f43ed7 to ba1e124 Compare December 18, 2021 00:52

Swiftb0y approved these changes Dec 18, 2021

View reviewed changes

Swiftb0y merged commit 4194007 into mixxxdj:main Dec 18, 2021

ronso0 deleted the search-styles branch December 18, 2021 12:53

mixxxbot mentioned this pull request Aug 23, 2022

Add option to disable search completions #10634

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add new searchbox styles #4505

add new searchbox styles #4505

ronso0 commented Nov 6, 2021 •

edited

Loading

ronso0 Dec 8, 2021 •

edited

Loading

ronso0 commented Dec 15, 2021

Swiftb0y left a comment

Swiftb0y Dec 16, 2021

ronso0 commented Dec 16, 2021

vlada-dudr commented Dec 16, 2021

ronso0 commented Dec 16, 2021

ronso0 commented Dec 16, 2021

Swiftb0y commented Dec 16, 2021

vlada-dudr commented Dec 16, 2021 •

edited

Loading

ronso0 commented Dec 17, 2021

ronso0 commented Dec 17, 2021

Swiftb0y commented Dec 17, 2021 •

edited

Loading

ronso0 commented Dec 18, 2021

Swiftb0y left a comment

	int paddingPx;
	const int paddingPx = text.isEmpty() ? 0 : m_innerHeight;

add new searchbox styles #4505

add new searchbox styles #4505

Conversation

ronso0 commented Nov 6, 2021 • edited Loading

ronso0 Dec 8, 2021 • edited Loading

Choose a reason for hiding this comment

ronso0 commented Dec 15, 2021

Swiftb0y left a comment

Choose a reason for hiding this comment

Swiftb0y Dec 16, 2021

Choose a reason for hiding this comment

ronso0 commented Dec 16, 2021

vlada-dudr commented Dec 16, 2021

ronso0 commented Dec 16, 2021

ronso0 commented Dec 16, 2021

Swiftb0y commented Dec 16, 2021

vlada-dudr commented Dec 16, 2021 • edited Loading

ronso0 commented Dec 17, 2021

ronso0 commented Dec 17, 2021

Swiftb0y commented Dec 17, 2021 • edited Loading

ronso0 commented Dec 18, 2021

Swiftb0y left a comment

Choose a reason for hiding this comment

ronso0 commented Nov 6, 2021 •

edited

Loading

ronso0 Dec 8, 2021 •

edited

Loading

vlada-dudr commented Dec 16, 2021 •

edited

Loading

Swiftb0y commented Dec 17, 2021 •

edited

Loading