Converting the Kolab Admin Panel to the Bootstrap Front-end Framework
Updated 729 Days AgoPublic

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?
  • 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:

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

Last Author
marclaporte
Projects
None
Subscribers
luci, marclaporte