Kitchen Sink UI for System Styles - Add Color Preview for less variables in Admin - Layout - Style: Edit - Less

If you need any help in filling out this wiki page, please visit our ILIAS Community FAQ.

1 Initial Problem

The less editor of the kitchen sink UI allows color assignments to be hex (#aabbcc) as well as named colors (referencing color definitions elsewhere on the less page) and even shadings of them (such as darken(@brand-primary,20%) ), where named colors again could be lightened/darkened versions of other named colors and so on. The actual color achieved by a specific setting can hardly be guessed.
Adjusting colors and maintaining a consistent color scheme becomes very difficult and laborious, because the outcome cannot be simulated on the less page, but rather needs serveral iterations of:  save new values / go to the resp. object (don't forget to clear the cache...) / go back to less page to correct the errors). 

2 Conceptual Summary

I suggest adding a color preview next to color settings on the less settings page. This previes should show the effective color in hex and real (as a colored field). It is a display, not a color picker, because nestings of color references along with function (lighten()/darken()) etc. need to be calculated. 
Implementation should not require page reloads, and the previews should be re-calculated as soon as a color field loses focus - so an event based JS / jQuery implementation might be adequate.

See the following mock-up for a suggested view (the right column with "Preview" and the color boxes being new): 

Note: This was first posted as issue #20751 in mantis. 

3 User Interface Modifications

3.1 List of Affected Views

• Admin - Layout - Styles: Edit - Less

3.2 User Interface Details

See the mock-up in "Conceptual Summary" above.

3.3 New User Interface Concepts

none.

4 Technical Information

{The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues.}

5 Contact

• Author of the Request:  
• Maintainer: {Please add your name before applying for an initial workshop or a Jour Fixe meeting.}
• Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

6 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• …

7 Discussion

8 Implementation

{The maintainer has to give a description of the final implementation and add screenshots if possible.}

Test Cases

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approval

Approved at {date} by {user}.