Converting the Kolab Admin Panel to the Bootstrap Front-end Framework

Updated 2,925 Days AgoPublic

Actions

This page is to coordinate on this project. From proposal, to brainstorming, to execution and to follow-up. Some specific task tracking may also be added to the tasks system (and linked from here)

What

Converting the Kolab Admin Panel to the Bootstrap Front-end Framework

• At the very least, just convert to get some immediate benefits.
• And depending on people involved, we could proceed to a more significant UX revamp (or this could be done later)

Why

• For a nicer out-of-the-box experience
• For responsiveness (mobile)
• Make future UX enhancements much easier
• Themability
• Modern and theme-able icons like Font Awesome
• Kolab is a key component of WikiSuite, and most of the other WikiSuite components (such as Tiki and ClearOS) use Bootstrap, and thus, this will facilitate a consistent user experience.

How

• We'll convert existing code to Bootstrap
• Have 2 or more bundled options. Ex. a light and a dark one from https://bootswatch.com/
  • This is good for users of course, but it's also a great way to test the integration

Questions

• Bootstrap 3 or Bootstrap 4?
• Do we want a theme that's similar to the current one (which we easily can create with Bootstrap CSS variables) or do we do a clean break and just have new themes?
• Who can set up the shared dev / test environment? (Marc can supply a root virtual machine but prefers that someone more experienced with Kolab makes sure it's all set up )

Steps

Shared dev / test environment

• A virtual machine, with the very last development version (presumably on CentOS 7.x), which we can put on an unused domain name (Marc has plenty)
  • Where we can all share root access.
  • When pull request is done, we delete with this virtual machine
  • Ideally, it would update automagically to latest code
  • So looks like perhaps Winterfell

Bootstrapification

Luci did some research. Most probably at least these files will need changes - refactoring to Bootstrap classes:

• https://cgit.kolab.org/webadmin/tree/lib/kolab_html.php
• all html files in https://cgit.kolab.org/webadmin/tree/public_html/skins/default/templates (21 files)

Testing and approval

Pull request

Be alert to regression bug reports

Who

Action

• luci , Web designer integrator (experienced with converting apps to Bootstrap). You can see his work on Jitsi Meet here: https://meet.evoludata.com:8443/index.html?testroom
• Giles Vincent, Kolab Chief Design Officer
• Xavier dePedro, WikiSuite Community Manager

Advisors

• Marc Laporte, WikiSuite Founder
• Aaron Seigo Senior Technologist
• Georg Greve, CEO

Important links

• http://getbootstrap.com/
• https://git.kolab.org/diffusion/WAP/
• https://docs.kolab.org/contributor-guide/index.html
• https://kolab.org/hub/
• https://bootswatch.com/ is a popular source of FLOSS themes (MIT license). We could bundle a few or all 16 of them (This is what we do in Tiki Wiki CMS Groupware). At the very least, we should have at least one dark one and one light one. This is a great example of taking advantage of the Bootstrap ecosystem. There could be a theme picker.