Fiddling with autocomplete drop downs in the UI

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Fiddling with autocomplete drop downs in the UI

geowolf
Hi,
one of the things that keeps on annoying me with the current UI is how hard it is, sometimes,
to locate an item in dropdown, especially when they get long.

The two major pet-peeves of mine are the "new layer/choose store" and "layer/publishing/default style" 
cases, it is not uncommon to have hundreds of entries in there, and locating things in there when
one just remembers the store name but not the workspace, or just part of the name, can be rather
time consuming.

So I wanted to do something about it (without getting nuts and trying to handle the hundreds of
thousands choices cases, that would require a different treatment and more effort). 
Looking around I've found this wicketstuff-select2 component that provides a autocomplete dropdown

I wanted something that would be a drop-in replacement for the Wicket DropDownChoice, so made
a small bridge class, and something that would not look too much out of place, so worked a bit
on the style too.

I came up with this, here are a couple of videos showing it in action on the default data directory
(which does not have many items, but hope you get the idea anyways):

The downside of these new combos is that they do not look like native ones in Firefox for example:

Now, we could just replace all dropdowns with autocomplete ones... seems a bit silly for dropdowns
having 3 items in it, but would at least be consistent style and UI experience wise.

Here is a pull request so that you can see how it looks code wise, as you can see most of the time
switching to the autocomplete version of the drop down is a "search and replace" business:

So... thoughts?

Cheers
Andrea

==
GeoServer Professional Services from the experts! Visit http://goo.gl/it488V for more information.
==

Ing. Andrea Aime
@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054  Massarosa (LU)
phone: +39 0584 962313
fax: +39 0584 1660272
mob: +39  339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Geoserver-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/geoserver-devel
Reply | Threaded
Open this post in threaded view
|

Re: Fiddling with autocomplete drop downs in the UI

Torben Barsballe
UI improvements are always nice, and this seems like a particularly useful one.

The style differences relative to native drop-downs are a bit annoying, but seem fine. One possible alternate workaround for that would be to style the regular drop-downs so that they are the same between browsers. That should be as simple as adding a bit of CSS (Although most of the methods I could find for this used a background image to replace the select, so this workaround seems a bit finicky).
I think we should probably avoid replacing all drop-downs with the select2 one just for style reasons, seems like it could be a bit annoying/unnecessary where there are only a few options.
One thing I did notice is that the select2 drop-down doesn't support keyboard navigation (tab + arrow keys), unlike a regular select. That seems like another good reason to only use it where necessary.

Looking at the code, it seems pretty straightforward and easy to use. Overall, +1.

Torben



On Sun, Jan 14, 2018 at 2:52 AM, Andrea Aime <[hidden email]> wrote:
Hi,
one of the things that keeps on annoying me with the current UI is how hard it is, sometimes,
to locate an item in dropdown, especially when they get long.

The two major pet-peeves of mine are the "new layer/choose store" and "layer/publishing/default style" 
cases, it is not uncommon to have hundreds of entries in there, and locating things in there when
one just remembers the store name but not the workspace, or just part of the name, can be rather
time consuming.

So I wanted to do something about it (without getting nuts and trying to handle the hundreds of
thousands choices cases, that would require a different treatment and more effort). 
Looking around I've found this wicketstuff-select2 component that provides a autocomplete dropdown

I wanted something that would be a drop-in replacement for the Wicket DropDownChoice, so made
a small bridge class, and something that would not look too much out of place, so worked a bit
on the style too.

I came up with this, here are a couple of videos showing it in action on the default data directory
(which does not have many items, but hope you get the idea anyways):

The downside of these new combos is that they do not look like native ones in Firefox for example:

Now, we could just replace all dropdowns with autocomplete ones... seems a bit silly for dropdowns
having 3 items in it, but would at least be consistent style and UI experience wise.

Here is a pull request so that you can see how it looks code wise, as you can see most of the time
switching to the autocomplete version of the drop down is a "search and replace" business:

So... thoughts?

Cheers
Andrea

==
GeoServer Professional Services from the experts! Visit http://goo.gl/it488V for more information.
==

Ing. Andrea Aime
@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054  Massarosa (LU)
phone: <a href="tel:+39%200584%20962313" value="+390584962313" target="_blank">+39 0584 962313
fax: <a href="tel:+39%200584%20166%200272" value="+3905841660272" target="_blank">+39 0584 1660272
mob: <a href="tel:+39%20339%20884%204549" value="+393398844549" target="_blank">+39  339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Geoserver-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/geoserver-devel



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Geoserver-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/geoserver-devel
Reply | Threaded
Open this post in threaded view
|

Re: Fiddling with autocomplete drop downs in the UI

Nuno Oliveira-3
In reply to this post by geowolf
+1

On 01/14/2018 10:52 AM, Andrea Aime wrote:
Hi,
one of the things that keeps on annoying me with the current UI is how hard it is, sometimes,
to locate an item in dropdown, especially when they get long.

The two major pet-peeves of mine are the "new layer/choose store" and "layer/publishing/default style" 
cases, it is not uncommon to have hundreds of entries in there, and locating things in there when
one just remembers the store name but not the workspace, or just part of the name, can be rather
time consuming.

So I wanted to do something about it (without getting nuts and trying to handle the hundreds of
thousands choices cases, that would require a different treatment and more effort). 
Looking around I've found this wicketstuff-select2 component that provides a autocomplete dropdown

I wanted something that would be a drop-in replacement for the Wicket DropDownChoice, so made
a small bridge class, and something that would not look too much out of place, so worked a bit
on the style too.

I came up with this, here are a couple of videos showing it in action on the default data directory
(which does not have many items, but hope you get the idea anyways):

The downside of these new combos is that they do not look like native ones in Firefox for example:

Now, we could just replace all dropdowns with autocomplete ones... seems a bit silly for dropdowns
having 3 items in it, but would at least be consistent style and UI experience wise.

Here is a pull request so that you can see how it looks code wise, as you can see most of the time
switching to the autocomplete version of the drop down is a "search and replace" business:

So... thoughts?

Cheers
Andrea

== GeoServer Professional Services from the experts! Visit http://goo.gl/it488V for more information. == Ing. Andrea Aime @geowolf Technical Lead GeoSolutions S.A.S. Via di Montramito 3/A 55054  Massarosa (LU) phone: +39 0584 962313 fax: +39 0584 1660272 mob: +39  339 8844549 http://www.geo-solutions.it http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


_______________________________________________
Geoserver-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/geoserver-devel

-- 
Regards,
Nuno Oliveira
==
GeoServer Professional Services from the experts! Visit http://goo.gl/it488V for more information.
==

Nuno Miguel Carvalho Oliveira
@nmcoliveira
Software Engineer

GeoSolutions S.A.S.
Via di Montramito 3/A
55054  Massarosa (LU)
Italy
phone: +39 0584 962313
fax:      +39 0584 1660272

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

-------------------------------------------------------
AVVERTENZE AI SENSI DEL D.Lgs. 196/2003
Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.
 
The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Geoserver-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/geoserver-devel