Re: [xwiki-devs] [Proposal] Retro-compatibility between Color Theme Application ad Flamingo

On Tue, May 27, 2014 at 11:47 AM, Guillaume "Louis-Marie" Delhumeau <gdelhumeau(a)xwiki.com> wrote: > 2014-05-27 9:56 GMT+02:00 Denis Gervalle <dgl(a)softec.lu>lu>: > >> Hi Guillaume, >> >> Maintaining retro-compatibility for theme using LESS code is too much. >> Maintaining retro compatibility could be simply to support importing >> existing color themes in the new theme system made for bootstrap and no >> more. >> > > Let me show you an example: > The Activity Stream has its own CSS, which does: > > #template('colorThemeInit.vm') > ... > .activityPage:hover , .activityApplication:hover , .activityUser:hover { > background: $theme.highlightColor; > } > ... > > So when my mouse is hovering the AS, its background color change. By > default, it's a kind of yellow. > > Now, if I want to integrate a bootswatch theme, let say 'slate' [1]. I just > copy the LESS files ([2] and [3]) in my textarea. > > It looks very good [4], until my mouse comes over the activity stream... > that becomes yellow! [5] Something needs to be done. > All clear up to here. > A solution could be to manually fix the colors in the color theme editor > but it defeats the principle to easily integrate a bootstrap kit found on > the web... > > That's why I would like to parse the LESS code. With the solution 3, which > is easy to implement, we have a solution. So you need to set the value of $theme.highlightColor to a color taken from the 'slate' theme (which was taken from bootswatch). I must say I didn't understood very well what you mean by parsing the LESS output. Can you give more details (for solution 3)?

Thanks, Marius > > I agree it's not perfect, but it could be a migration path until we change > all the CSS of every applications! > > > >> Regarding the customization of Bootstrap, it exists a couple of tools >> already. It allows far more than just color customization. Have you check >> if one of those existing tools could be adapted (and have appropriate >> license) ? >> > > I am looking at it. Not sure we could find it (easy to integrate, > maintained, compatible with XWiki....). > > Thanks, > Guillaume > > [1] Slate: http://bootswatch.com/slate/ > [2] Slate variables.less: http://bootswatch.com/slate/variables.less > [3] Slate bootswatch.less: http://bootswatch.com/slate/bootswatch.less > [4] Results: > http://tof.canardpc.com/view/7740a7ee-29f4-454f-99e7-f45ef53d9095.jpg > [5] Not good: > http://tof.canardpc.com/view/a23e7101-449d-4fed-a922-cf58323220d3.jpg > > >> >> Thanks, >> >> >> On Mon, May 26, 2014 at 3:49 PM, Guillaume "Louis-Marie" Delhumeau < >> gdelhumeau(a)xwiki.com&gt; wrote: >> >>> Hi! >>> >>> The current color theme editor is designed for colibri, and does not look >>> like flamingo does. We have several options here: >>> - create a new color theme editor, especially for Flamingo >>> - modify the current one to detect which skin is currenlty used, and >> change >>> the preview. >>> >>> The application will be splited in 2 sections: >>> 1/ a live preview where you can set some variables (what we currenlty >> have) >>> 2/ a free textarea where the user can fill LESS code (for example, some >>> code downloaded on bootswatch). >>> >>> But a lot of applications already use the color theme as it is, via the >>> "colorThemeInit.vm" template. So we need a retro-compatibility: a color >>> theme computed by LESS must be usable with old color themes. >>> >>> Concretly, we will map the old color theme variables to the bootstrap >> ones, >>> example: >>> $theme.notificationSuccessColor = @brand-success >>> >>> But because of the section 2 (the free textarea), we are not able to know >>> what will be the final value of a bootstrap variables without parsing the >>> content of the textarea! >>> >>> What are the options we have: >>> 1/ Implementing our own LESS parser/compiler in Java >>> 2/ Trying to reuse the official LESS Parser through Rhino in a way that >> we >>> can get the computed variables >>> 3/ Do not parse the input but the ouput: parse the CSS code to get the >>> final values of the variables >>> >>> I'm for 3. >>> >>> The idea is to create some CSS classes like this: >>> .colortheme-bordercolor{ >>> color: @border-color; >>> } >>> >>> which will be converted by LESS to: >>> .colortheme-bordercolor{ >>> color: #000000; >>> } >>> >>> so we can parse it and know the value of $theme.bordercolor. It is quick, >>> simple, but it pollutes the output CSS a little. >>> >>> WDYT? >>> >>> Thanks, >>> Guillaume >>> _______________________________________________ >>> devs mailing list >>> devs(a)xwiki.org >>> http://lists.xwiki.org/mailman/listinfo/devs >>> >> >> >> >> -- >> Denis Gervalle >> SOFTEC sa - CEO >> _______________________________________________ >> devs mailing list >> devs(a)xwiki.org >> http://lists.xwiki.org/mailman/listinfo/devs >> > _______________________________________________ > devs mailing list > devs(a)xwiki.org > http://lists.xwiki.org/mailman/listinfo/devs _______________________________________________ devs mailing list devs(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/devs