28 May
2014
28 May
'14
12:07 p.m.
2014-05-28 11:25 GMT+02:00 Marius Dumitru Florea <
mariusdumitru.florea(a)xwiki.com>gt;:
On Wed, May 28, 2014 at 12:10 PM, Guillaume
"Louis-Marie" Delhumeau
<gdelhumeau(a)xwiki.com> wrote:
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
My LESSColorThemeConverter component, that uses a CSS parser inside.
I've used CSSOMParser a few times
2014-05-28 10:43 GMT+02:00 Marius Dumitru Florea
<
mariusdumitru.florea(a)xwiki.com>gt;:
> 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)?
"$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;
}
All clear.
So my parser is able to say
"highlightColor" = "#eee".
WDYM by "my parser"? The CSS parser? in the past, such as here
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
Thanks.
Actually, I am looking for the correct implementation.
I have a prototype which works with a regular expression, an other one with
https://code.google.com/p/phloc-css/ and I am looking for
https://github.com/phil-brown/jCSS-Parser which has the advantage to not
build a big tree of elements but to be a streamable parser.
I will look at yours too.
Hope this helps,
Marius
_______________________________________________
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
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
<
> >> gdelhumeau(a)xwiki.com> 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