Hide last authors
Ecaterina Moraru (Valica) 5.2 1 == Related Proposals ==
2
3 * [[Panels Improvements for Flamingo Skin>>Proposal.PanelsImprovements]]
4 * [[Application Presentation>>Proposal.ApplicationPresentation]]
5
Guillaume Delhumeau 6.2 6 == Color Themes ==
Ecaterina Moraru (Valica) 5.3 7
Guillaume Delhumeau 1.2 8 Currently, we have the ability to create different color themes for Colibri.
9
10 [[image:Capture du 2014-04-15 10:47:05.png||width="60%"]]
11
12 But the pre-visualisation of the theme is clearly based on Colibri and it does not reflect the results on Flamingo.
13
14 == Ideas ==
15
16 1. We can modify the existing Color Theme Application to display an other previsualisation if Flamingo is used.
17 1. We can create a new Color Theme Application dedicated to Flamingo, as the current one is dedicated to Colibri.
18
19 == Scope ==
20
Guillaume Delhumeau 6.1 21 Flamingo is based on Bootstrap, which defines a lot of [[customizable variables>>url:https://github.com/twbs/bootstrap/blob/master/less/variables.less]], more than we have for colibri (such as font size, font family, etc...). A lot of applications already exists
22 on the web to help users to fill these variables to create their own themes:
Guillaume Delhumeau 1.2 23
Guillaume Delhumeau 6.1 24 * http://bootswatchr.com/create#!/edit/3217e159
Guillaume Delhumeau 3.1 25 * http://stylebootstrap.info/
26 * http://www.bootstrapthemeroller.com/
27 * http://pikock.github.io/bootstrap-magic/
Guillaume Delhumeau 1.2 28 * and a lot of more...
Guillaume Delhumeau 2.1 29
30 Maybe we could integrate one of them in XWiki, or taking inspiration from them.
31
32 Question: should we propose to set all these variables in our Color Theme Application or only some of them?
33
34 == Previsualisation ==
35
36 === Idea ===
37
Guillaume Delhumeau 3.1 38 Since we are using LESS to build Flamingo, and since there is an [[Client-Side LESS compiler>>url:http://lesscss.org/#client-side-usage]], we can use it to refresh all the XWiki UI instead of the previsualisaton area. In any way, we need to propose a kind a previsuliasation because refreshing the current UI will not show all the use-cases.
Guillaume Delhumeau 6.2 39
40
41 == Skin Implementation ==
42
Guillaume Delhumeau 7.1 43 Currently, we use LESS to generate the CSS file during the build via a maven plugin, not during the runtime.
Guillaume Delhumeau 6.2 44
45 === Implementation using velocity variables (LESS compiler called BEFORE velocity engine) ===
46
47 It is possible to use Velocity variables in the LESS files:
48
Guillaume Delhumeau 6.3 49 {{code language="shell"}}
Guillaume Delhumeau 6.2 50 @body-bg: $theme.pageBackgroundColor;
51 // when @body-bg is used in a CSS class, LESS will just replace it by the string "$theme.pageBackgroundColor"
52 {{/code}}
53
54 Then, the velocity variables will be interpreted at the runtime, as usual.
55
56 But this approach is limited, it makes impossible to use some bootstrap mixins like {{code}}darken(){{/code}} (used to generate a darken color from a parameter) because LESS cannot compute a value from the string "$theme.pageBackgroundColor". It means that we have to change such calls in the **bootstrap sources**.
57
58 ==== Pros : ====
59
60 * quite easy to implement
61
62 ==== Cons : ====
63
64 * needs to modify the bootstrap sources (not good for upgrades)
65
66 === Implementation using LESS at the runtime (LESS compiler called AFTER velocity engine) ===
67
Guillaume Delhumeau 7.1 68 The idea is to call the velocity engine BEFORE the LESS compiler, so any reference to a velocity variables is replaced by the proper value and the bootstrap mixins work without any problem.
Guillaume Delhumeau 6.2 69
70 ==== Pros : ====
71
Guillaume Delhumeau 6.3 72 * more powerful, we can use the bootstrap mixins
73 * we do not modify the bootstrap sources, we just provide our variables.less file
74 * a good step into the direction of proposing LESS features to our users
75
76 ==== Cons : ====
77
78 * need to use LESS at the runtime
79 ** what about performances? we should probably cache the result
80 ** how to implement the @import feature?
Guillaume Delhumeau 9.1 81 ** we need to add both flamingo & bootstrap sources in our instances
Guillaume Delhumeau 7.1 82 * much harder to implement. Overkill?
Guillaume Delhumeau 6.3 83
Guillaume Delhumeau 10.1 84 {{info}}
85 I have started to work on a prototype and I have good results.
86 {{/info}}
87
Guillaume Delhumeau 6.3 88 === Alternative: rewrite some bootstrap mixins with velocity macros ===
89
90 We can, for example, write our own version of darken(), executed by velocity at the runtime.
91
92 === Pros : ===
93
Guillaume Delhumeau 8.1 94 * no need to have the LESS compiler at the runtime
Guillaume Delhumeau 6.3 95
96 === Cons : ===
97
98 * we still have to modify the bootstrap sources to use our velocity macros instead of their mixins, but it could probably be done automatically
99 * we have to maintain our own version of the bootstrap mixins as velocity macros
Guillaume Delhumeau 12.1 100
101 = UI =
Ecaterina Moraru (Valica) 22.1 102
Guillaume Delhumeau 12.1 103 The UI to create/edit a Color Theme should be split in two sections:
Ecaterina Moraru (Valica) 22.1 104
Guillaume Delhumeau 14.1 105 1. a WYSIWYG section, with some bootstrap variables and a color picker, that refreshes in real-time the CSS of the page
Guillaume Delhumeau 12.1 106 1. a textarea where users can directly write some LESS code
107
108 1) is for the regular users.
109 2) is for people who wants to integrate a bootstrap kit found on the web
110
Guillaume Delhumeau 14.1 111 == Implementation ==
112
Guillaume Delhumeau 15.1 113 === UI ===
Ecaterina Moraru (Valica) 22.1 114
Guillaume Delhumeau 16.1 115 The "WYSIWIG" editor could be something like this [[Bootstrap fancyboot>>http://fancyboot.designspebam.com/]] or a modified version of the current one.
Ecaterina Moraru (Valica) 22.1 116 {{image reference="fancyboot.png" width="60%"/}}
Guillaume Delhumeau 15.1 117
118 === Storage ===
Ecaterina Moraru (Valica) 22.1 119
Guillaume Delhumeau 15.1 120 2 options
Ecaterina Moraru (Valica) 22.1 121
Guillaume Delhumeau 15.1 122 1. we do not offer more variables that the current editor does, we just change the way it is displayed in the editor (for the rest, there is the textarea field). Then we could use the existing [[ColorThemes.ColorThemeClass>>ColorThemes.ColorThemeClass]].
123 1. we offer a completely different set of variables and we need an other, incompatible with colibri, ColorTheme class.
Guillaume Delhumeau 17.1 124
125 == Problems ==
Ecaterina Moraru (Valica) 22.1 126
Guillaume Delhumeau 17.1 127 === A lot of customs CSS uses the color theme variables ===
Ecaterina Moraru (Valica) 22.1 128
Guillaume Delhumeau 17.1 129 These variables (such as $theme.textSecondaryColor) does not always have an equivalent in Bootstrap. However, it is easy to add some code in ##colorThemeInit.vm## to do a mapping between the variables of the new color theme and the variables of the old one. But if some variables have been set in the text-area, we need to parse the LESS code to know what is the final value of a bootstrap variable.
130
Guillaume Delhumeau 18.1 131 Idea: Parse the generated CSS to get the computed variables, with some CSS classes specific to that purpose.
132
Guillaume Delhumeau 17.1 133 === Should a color theme be specific to a skin? ===
Ecaterina Moraru (Valica) 22.1 134
Guillaume Delhumeau 17.1 135 In this case, we need a mechanism to express if a color theme is compatible with a skin.

Get Connected