Converting the Kolab Admin Panel to the Bootstrap Front-end Framework
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
- Basic project: convert to get some immediate benefits.
- Extended project: 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 (so it's easy to have own branding)
- Modern and theme-able icons like Font Awesome
- Provides easy access to a huge ecosystem. Ex.: Bootstrap Tour
- 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 theme (and avoid things like black text on a very dark background)
Questions
- Who can confirm that Roundcube Next will use Bootstrap? Both initiatives should be aware of each other, for consistent UX. Ref: https://roundcubenext.com/topic/19/bootstrap-front-end-framework
- Bootstrap 3 or Bootstrap 4?
- Bootstrap 3 is very mature
- Bootstrap 4 alpha 3 was released on 2016-07-27
- 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 properly and demonstrates all the use cases)
Steps
1- Project Approval
The project proposal should be announced to all interested parties, collaboratively improved on (and concerns addressed) and then presented to the Kolab leadership for approval (and to set preferred timeline). The next Architecture & Design meeting is scheduled for the first week of May 2016.
2- 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 this virtual machine
- Ideally, it would update automagically to latest code (so we are certain to work on latest code)
- So looks like perhaps Winterfell
3- 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)
4- Testing and approval
5- Pull request
6- Be alert to regression bug reports
When
There is no set timeline, but should (at the latest) be started in time to be part of Kolab 17.
Who
Action
- luciash d' being, WikiSuite web designer and integrator (experienced with converting apps to Bootstrap).
- Giles Vincent, Kolab Chief Design Officer
Advisors
- Marc Laporte, WikiSuite Founder
- Aaron Seigo Kolab Senior Technologist
- Georg Greve, Kolab 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.
- https://fortawesome.github.io/Font-Awesome/
- http://wikisuite.org/
- https://github.com/roundcube-next
- Last Author
- marclaporte
- Last Edited
- Dec 10 2016, 10:11 PM