Responsive Search & Refine boxes / buttons

[Victhor]

Some ideas on how to achieve some un-cluttering on ML (plus a bit of a minimalism modern-ish look):

01 "Clear Search" button in library can be responsive? (meaning: it only appears when there is something being typed)

02 Replace it with an "X" to save space.

03 Place the word "search" located WITHIN the box, like cPro Playlist search does (and like most search boxes do nowadays in web design).



04 (Design thing - minimal) lighter box´s background so it doesn't stand out so much and also suggests its "new" button/box function.

05 (Design thing - minimal) Round button to look even better.

Note: All these can be also applied to "Refine" box (in fact, the whole line could appear ONLY when a search has been done in the upper panel)

All suggested changes:




cPro example:




Along these, some improvements on this area can be:
- Auto-select text when clicking.
- Search history in right click (on the box's background). Like... yes, like on cPro!

[Aminifu]

Hi Victhor,

Is the 'search in playlist bar' only available in cPro2 skins? I can't find a way to turn it on in cPro 1 skins.

[Victhor]

It should be there if you didn't disabled the option while installing cPro. On cPro 1 AFAIK you can't disable it, it only disappears when PL is too small.

Remember it only works on PL, not on ML views.

[Aminifu]

I see it when I toggle the control on the cPro 2 skins, but I don't see it or a toggle control with my cPro 1 skins (even when they are set to maximum screen size).

[DrO]

and i've never gotten the cPro2 playlist search to work... though i'm seriously considering trying to add it natively so it'll be skin independent (no promises!).


as for the other suggestions...

hiding the clear button - was something i'd already thought about and is simple enough to implement

setting text for what it does - that can be done easily as thankfully it's provided natively on an XP+ (for my reference: it needs to use EM_SETCUEBANNER)

auto-select text when clicking. - that's simple enough to do and probably makes sense based on doing a similar thing in the Source DSP

search history in right click - would need to think about that as the better option would be using something like the auto-complete action so it just shows things directly instead of having to mess around with clicking. not quite show how well that could work with looking into it (for my reference: look at http://msdn.microsoft.com/en-gb/libr...=vs.85%29.aspx)


as for the visual styling changes, you can do that anyway but what would be used i'm not sure if implemented (as slapping an 'X' is simple enough or a generic image would also work). but the button ideally should follow the styling of the other buttons so things are consistent. though i really don't see an distinction with the last two images btw.

[Victhor]

"easy enough to implement" was my prime directive hehe, I'm glad it "worked".

Difference between last 2 (Bento) images are the color of the box and the style of the X button (one squared the other rounded).

It's a shame PL search isn't working for any of you, is one of the useful features of cPro. I'll look what is it with it (probably uninstalling - installing would solve it, but i should check)

[Aminifu]

...

It's a shame PL search isn't working for any of you, is one of the useful features of cPro. I'll look what is it with it (probably uninstalling - installing would solve it, but i should check)

It works for me in the cPro 2 skins, but I would have to get used to the implementation. I like the way JTFE works better.

I just can't get the search bar to show up in my cPro 1 skins.

[DrO]

ok, Victhor and i have had a bit of a chat over the last hour and i've done a bit of quick work on a few things to see how it all might work. so....


the attachment shows the clear button using a bold font 'X' which should suffice for localisation needs and also conveys the need of the button. it could do with a bit of fine tuning to make the button more square (it still has the text specific padding applied at the moment).

[edit]
additional multi-pane attachment shows the clear buttons without the text padding mentioned above.
[/edit]

the auto-select thing will be enabled by default for all skinned edit boxes (config option to disabled - behaviour will be default: on e.g. like explorer and all browsers seem to do). just need to sort out a place to pop it (probably on the w.i.p. 'appearance' preference page.

the cue text needs a bit of work (i'd hoped the skinning code was already in place to support it but it's not).


for the automatic hiding of the buttons as needed, i need to get around to implementing it, but it's a simple enough thing to do (especially after all of the work done to standardise how the layout handling is done when looking to apply it to the other native views).

[DrO]

not sure this'll show things well enough or not but i've now got it to the point where it can show the cue text (italicised like explorer) when there's no search text and it's not focused.

it also shows things without the caption text just before the search field so you've got a bit more space to see what you've entered (which is handy with smaller viewing setups). and with the clear button hidden as needed when there is no search entered.


i'm thinking for the cue message to have the selected view name in there here applicable e.g. Search 'simple album'... and Refine 'simple album' Search... and so on for local library views (using 'local library' on the root node) and the history view would just be Search History....

other than a weird issue with the mode buttons in the library view painting strangely (likely due to just ripping code out), it works and seems to fit with what has been suggested (does mean i've broken every language pack out there but never mind as there is time to fix them!).

[Victhor]

Well well.. that's more than I expected! Impressive.

Visible cue message would be cool, a little bit more "pro" (or modern-ish for the case). I'm glad you decided to move the clear button to the left, it means that I was right when I thought about suggesting it there (so it doesn't get "far" to the right when the view is widely stretched), but I refrained 'cause I guessed it wasn't easy to do..


As for the language packs I'm pretty sure something else broke it before this... (but it doesn't save me from feeling obligated to help fixing the Spanish LP at least.. hehe).


PS / EDIT: Looking at the last SS, MAYBE the cue message in the Refine field can be saved as it is already stated above, just for the sake of minimalism. But it's not a big deal.. just a matter of taste.

[Aminifu]

The clear search button ("X") appears before the search bar in the screenshot in post #9, instead of being hidden until needed. Or is this what you mean by "other than a weird issue with the mode buttons in the library view painting strangely..."?

[DrO]

the clear button won't be on the left and that's one of the quirks I was referring to (had thought I'd uploaded a screenshot without that specific glitch).

as for the refine text, it sort of needs to have something shown in order to make sense as otherwise there's no context for what it does for those new to things or not used it for a while. so is best to have if showing there.

for the time being I can either programmatically fix the language packs. so I can force remove the caption control and setting the button text or (and I prefer this as its not leaving in excess code) is to just fix the language packs directly which is more time consuming than tricky to do.


so I just need to resolve the visual quirks, apply the change to ml_pop and make the naming tweaks and that should be the majority of the changes needed made. at a later time I'll need to look into the history / auto-complete mode on the search field (and also look into applying it all to the jtf search as it could use the cue and history modes). and as a mental note for me, I really need to do something so the ml_local view buttons scale / size better at higher dpi / text sizes (as its not increasing the width appropriately to the height increase).

[Victhor]

D'oh! I thought of drawing artifacts when you said "weird issue", thought it was on purpose. Now I suggested it I must recommend it , the button to the left is handier (though I know it could feel a bit awkward there..).

But it's totally fine to the right too haha, I know I've pushed my luck getting almost everything else from the list so..

[DrO]

the painting quirks were the close button and the mode buttons not being drawn correctly (so either incorrectly overlapping or just not drawing the contents correctly). sorry to get your hopes up on a change like that but it's somewhat at odds with how all of the clear buttons i know off work i.e. they're always on the right of the field and not before the field. plus it's less jarring when confronted with the ui change from prior releases, so will have to say no on the left-aligned clear button.

[edit]
issues mentioned above have now been resolved and have refined the text messages so they're more explorer like e.g. Search Audio instead of Search "Audio"..., though for playlists it'll be done as Search "playlist name" Playlist.

[Koogle]

cPro2 playlist search to inline playlist search built in? hhur fking huurray.. maybe tabbed playlists aswel like aimp2.

But unless this comes up with all useful features of cpro, then it won't even be worth considering to use unless it supports existing plugins or at least with minimal updating to them.