2014-05-28 10:43 GMT+02:00 Marius Dumitru Florea < [email protected]>:
> On Tue, May 27, 2014 at 11:47 AM, Guillaume "Louis-Marie" Delhumeau > <[email protected]> wrote: > > 2014-05-27 9:56 GMT+02:00 Denis Gervalle <[email protected]>: > > > >> 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)? > Ok. I have mapped "highlightColor" (color theme variable) to "@nav-link-hover-bg" (bootstrap variable). So, when slat changes @nav-link-hover-bg to gray, I want to be able to say "$theme.highlightColor" is gray too. How can I do that? 1/ Parsing the LESS file or 2/ Parsing the CSS output file I am prototyping the method 2. Concretly, at the end of my style.less file, I add: /* this class is actually useless for the browser */ .colortheme-highlightColor{ color: @nav-link-hover-bg; } LESS transforms it to: .colortheme-highlightColor{ color: #eee; } Now, my parser looks at every classes starting by ".colortheme-". The mapping looks like this: .colortheme-NAME_OF_THE_VARIABLE{ color: VALUE_OF_THE_VARIABLE; } So my parser is able to say "highlightColor" = "#eee". I agree... it looks like a hack. But it is the simplest way I have found to compute the color theme from a LESS file... > > 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 < > >> [email protected]> 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 > >> > [email protected] > >> > http://lists.xwiki.org/mailman/listinfo/devs > >> > > >> > >> > >> > >> -- > >> Denis Gervalle > >> SOFTEC sa - CEO > >> _______________________________________________ > >> devs mailing list > >> [email protected] > >> http://lists.xwiki.org/mailman/listinfo/devs > >> > > _______________________________________________ > > devs mailing list > > [email protected] > > http://lists.xwiki.org/mailman/listinfo/devs > _______________________________________________ > devs mailing list > [email protected] > http://lists.xwiki.org/mailman/listinfo/devs > _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
