Replace jQuery-UI with something

[alecpl]

The jQuery-UI project is dead and outdated. We should replace it with something better/new. This ticket is to find replacement(s) for it. Here's a list of components we currently use.

1. Date picker - it is used heavily by Kolab's calendar plugin, so we need something extensible. Maybe https://github.com/fengyuanchen/datepicker
2. Dialogs - I guess we could create something simple by our own. Maybe skins should be able to replace that, e.g. Elastic could use Bootstrap modals.
3. Tagedit - used by Kolab plugins. Requires Autocomplete.
4. Autocomplete - used by managesieve, libcalendaring plugins standalone and some other Kolab plugins via Tagedit. W/o ajax capabilities. Note: core uses a separate code for ajax autocompletion, we could re-use that code.
5. Draggable/Droppable/Sortable - used in core and Elastic. This may be the hardest part.
6. Slider - used by Kolab's tasklist plugin. Maybe just use standard <input type=range> (with minimal js).
7. Tabs - used in Larry skin (also some plugins).
8. Button - used by Kolab plugins. Could be dropped.
9. Position - used in one place in libcalendaring plugin. Could be dropped.
10. Color picker - used by Kolab plugins. We can stay with miniColors, it does not require jQuery-UI. We can consider use of standard <input type=color> (but that's not yet supported on iOS/Android?). Consider building something simple based on https://github.com/wieringen/tinycolorpicker.

From the fact that we already use Bootstrap and we do not require as many widgets, I guess we'll not use any other big UI framework. We should consider replacing/re-implementing only what we really need. At the same time we could drop classic skin support to make the migration easier.

The ticket is to find out what options do we have and what impact the changes will have. Did I forget anything? Is any other plugin using any of not mentioned jQuery-UI widgets/utils?

[thomascube]

Please consider accessibility features of the various UI elements when evaluating replacements. jQuery UI had pretty good support for WCAG suggestions already built in.

[andjsch]

Even though it might not be a perfect fit for Roundcube, using a component based system with Vue (or literally any other JS framework like React or Angular) could have big advantages for future versions of Roundcube as the interface is further being developed.

[markc]

+1 for Vue.js. It may not be a simple transition but the long term UI benefits could be significant.

[alecpl]

Please, don't propose vue or angular here. We (read I) are not going to rewrite the whole app. This ticket is about UI components not the framework. Maybe there is some good replacement for jQuery-UI in vue/angular worlds (I don't know), but it's not going to happen. The list of changes here is already scary, so don't add to it. Thank you.

[awbry]

Check out https://semantic-ui.com/

[awbry]

Another option could be https://www.carbondesignsystem.com/

[chilek]

About semantic-ui - just have a look of commit list: https://github.com/Semantic-Org/Semantic-UI/commits/master So last commit in Oct. 2018. Is it next almost dead project?

[chilek]

1. Date picker - it is used heavily by Kolab's calendar plugin, so we need something extensible. Maybe https://github.com/fengyuanchen/datepicker

It's unmaintained too - message on top of the github page: [Deprecated] No longer maintained. A simple jQuery datepicker plugin.

[chilek]

It's interesting that there is no reasonable way to donate jquery and jquery-ui development - these projects are now the part of OpenJS Foundation, and yes you can become sponsor, but only big one.

[bytestream]

Surprisingly life has recently emerged in the jquery-ui github repository