Zum Inhalt springen
Version 1.1 von admin am 2025/02/23 19:43
Zeige letzte Bearbeiter
1 {{velocity}}
2 ############################
3 ## JS, CSS AND TRANSLATIONS TO USE
4 ############################
5 #set($discard = $xwiki.jsx.use('FlamingoThemesCode.ThemeSheet'))
6 #set($discard = $xwiki.ssx.use('FlamingoThemesCode.ThemeSheet'))
7 ############################
8 ## GLOBALS
9 ############################
10 #set($obj = $doc.getObject('FlamingoThemesCode.ThemeClass'))
11 #set($isEdit = ($xcontext.action == 'edit'))
12 ############################
13 ## VARIABLES TO CUSTOMIZE
14 ############################
15 #set($variables = {
16 "logos": {
17 "logo": "image"
18 },
19 "base-colors": {
20 "text-color": "color",
21 "body-bg": "color",
22 "xwiki-page-content-bg" : "color",
23 "link-color": "color",
24 "brand-primary": "color",
25 "brand-success": "color",
26 "brand-info": "color",
27 "brand-warning": "color",
28 "brand-danger": "color",
29 "headings-color": "color",
30 "component-active-color" : "color",
31 "component-active-bg" : "color"
32 },
33 "typography" : {
34 "font-family-base": "font",
35 "font-family-sans-serif": "font",
36 "font-family-serif": "font",
37 "font-family-monospace": "font",
38 "font-size-base" : "size"
39 },
40 "tables" : {
41 "table-bg": "color",
42 "table-bg-hover": "color",
43 "table-border-color": "color"
44 },
45 "buttons": {
46 "btn-font-weight" : "fontWeight",
47 "btn-default-color" : "color",
48 "btn-default-bg" : "color",
49 "btn-primary-color" : "color",
50 "btn-primary-bg" : "color",
51 "btn-success-color" : "color",
52 "btn-success-bg" : "color",
53 "btn-info-color" : "color",
54 "btn-info-bg" : "color",
55 "btn-warning-color" : "color",
56 "btn-warning-bg" : "color",
57 "btn-danger-color" : "color",
58 "btn-danger-bg" : "color",
59 "btn-default-border" : "color"
60 },
61 "navbar": {
62 "navbar-default-color" : "color",
63 "navbar-default-bg" : "color",
64 "navbar-default-link-color" : "color",
65 "navbar-default-link-hover-color" : "color",
66 "navbar-default-link-hover-bg" : "color",
67 "navbar-default-link-active-color": "color",
68 "navbar-default-link-active-bg": "color",
69 "navbar-height" : "size"
70 },
71 "dropdowns" : {
72 "dropdown-bg" : "color",
73 "dropdown-border" : "color",
74 "dropdown-link-color" : "color",
75 "dropdown-link-hover-color" : "color",
76 "dropdown-link-hover-bg" : "color",
77 "dropdown-divider-bg" : "color"
78 },
79 "forms": {
80 "input-bg" : "color",
81 "input-border" : "color",
82 "input-color" : "color",
83 "input-border-focus" : "color",
84 "input-color-placeholder" : "color",
85 "legend-color" : "color",
86 "legend-border-color": "color"
87 },
88 "panels": {
89 "panel-bg" : "color",
90 "panel-header-text" : "color"
91 },
92 "breadcrumb": {
93 "breadcrumb-bg": "color",
94 "breadcrumb-color": "color",
95 "breadcrumb-link-color": "color",
96 "breadcrumb-separator": "escapedText"
97 },
98 "advanced": {
99 "lessCode": "textarea"
100 }
101 })
102 ############################
103 ## DISPLAY VARIABLES PANEL
104 ############################
105 #macro(displayVariablesPanel)
106 <div class="col-xs-12 col-md-5">
107 <div class="panel panel-primary" id="panel-theme-variables">
108 <div class="panel-heading">$services.localization.render("platform.flamingo.themes.title.variables")</div>
109 <div class="panel-body">
110 #displayVariablesTabs()
111 #displayVariablesPanes()
112 </div>
113 </div>
114 </div>
115 #end
116 ############################
117 ## DISPLAY VARIABLES TABS
118 ############################
119 #macro(displayVariablesTabs)
120 <ul class="nav nav-pills nav-stacked col-xs-4">
121 #foreach($category in $variables.keySet())
122 <li#if($foreach.count==1) class="active"#end><a href="#cat-${category}" data-toggle="tab">$services.localization.render("platform.flamingo.themes.category.${category}")</a></li>
123 #end
124 </ul>
125 #end
126 ############################
127 ## FIELD TEXTAREA
128 ############################
129 #macro(fieldTextarea $varName $obj)
130 #if($varName == 'lessCode')
131 <div class="alert alert-info">$services.localization.render("platform.flamingo.themes.lessCode.description")</div>
132 #end
133 <textarea id="var-$varName" name="FlamingoThemesCode.ThemeClass_0_$varName" class="form-control" rows="6">
134 $!escapetool.xml($!doc.getValue($varName, $obj))
135 </textarea>
136 #end
137 ############################
138 ## FIELD IMAGE
139 ############################
140 #macro(fieldImage $varName $obj)
141 <div id="var-$varName" class="type-image">
142 {{/html}}
143
144 {{attachmentSelector classname="FlamingoThemesCode.ThemeClass" property="$varName" savemode="form" displayImage="true" width="120" filter="png,jpg,gif,svg" defaultValue=""/}}
145
146 {{html clean="false"}}
147 </div>
148 #end
149 ############################
150 ## FIELD TEXT
151 ############################
152 #macro(fieldText $varName $obj)
153 <div class="input-group">
154 <input type="text" class="form-control type-text" id="var-$varName" name="FlamingoThemesCode.ThemeClass_0_$varName" value="$!escapetool.xml($!doc.getValue($varName, $obj))">
155 </div>
156 #end
157 ############################
158 ## FIELD SIZE
159 ############################
160 #macro(fieldSize $varName $obj)
161 <div class="input-group">
162 <input type="text" class="form-control type-size" id="var-$varName" name="FlamingoThemesCode.ThemeClass_0_$varName" value="$!escapetool.xml($!doc.getValue($varName, $obj))">
163 </div>
164 #end
165 ############################
166 ## FIELD COLOR
167 ############################
168 #macro(fieldColor $varName $obj)
169 #set ($colorPickerParams = {
170 'id': "var-$varName",
171 'name': "FlamingoThemesCode.ThemeClass_0_$varName",
172 'value': $doc.getValue($varName, $obj)
173 })
174 #colorPicker($colorPickerParams)
175 #end
176 ############################
177 ## FIELD FONT WEIGHT
178 ############################
179 #macro(fieldFontWeight $varName $obj)
180 <select name="FlamingoThemesCode.ThemeClass_0_$varName" id="var-$varName" class="type-fontweight">
181 #set ($value = $doc.getValue($varName, $obj))
182 #set ($options = ['normal', 'bold', 'bolder', 'lighter'])
183 #foreach ($option in $options)
184 <option value="$option" #if("$!value" == $option)selected="selected"#end>$option</option>
185 #end
186 </select>
187 #end
188 ############################
189 ## DISPLAY VARIABLES PANES
190 ############################
191 #macro(displayVariablesPanes)
192 <div class="tab-content col-xs-8" id="bt-variables">
193 #foreach($category in $variables.keySet())
194 <div class="tab-pane fade #if($foreach.count==1)in active#end" id="cat-$category">
195 <h2>$services.localization.render("platform.flamingo.themes.category.${category}")</h2>
196 #set($catVar = $variables.get($category))
197 #foreach($var in $catVar.keySet())
198 #set($varName = $var)
199 #set($varType = $catVar.get($varName))
200 <div class="form-group">
201 <label for="var-$varName" class="col-xs-12">@$varName</label>
202 <div class="col-xs-12">
203 #if($varType == 'image')
204 #fieldImage($varName, $obj)
205 #elseif($varType == 'textarea')
206 #fieldTextarea($varName, $obj)
207 #elseif($varType == 'size')
208 #fieldSize($varName, $obj)
209 #elseif($varType == 'color')
210 #fieldColor($varName, $obj)
211 #elseif($varType == 'fontWeight')
212 #fieldFontWeight($varName, $obj)
213 #else
214 #fieldText($varName, $obj)
215 #end
216 </div>
217 </div>
218 #end
219 </div>
220 #end
221 </div>
222 #end
223 ############################
224 ## DISPLAY VARIABLES PANEL
225 ############################
226 #macro(displayPreviewPanel)
227 <div class="col-xs-12 #if($isEdit)col-md-7#end">
228 <div class="panel panel-primary">
229 <div class="panel-heading">$services.localization.render("platform.flamingo.themes.title.preview")</div>
230 <div class="panel-body">
231 #if ($isEdit)
232 <p>
233 <input type="checkbox" id="autosync" checked="checked"/>
234 <label for="autosync">$services.localization.render("platform.flamingo.themes.autorefresh")</label>
235 </p>
236 #end
237 <p class="alert alert-info">
238 ## We disable the refresh button initially until the JavaScript code that handles the refresh is ready.
239 <input type="button" id="refresh" class="btn btn-primary" disabled="disabled"
240 value="$services.localization.render('platform.flamingo.themes.refresh')" />
241 $services.localization.render('platform.flamingo.themes.refreshwarning')
242 </p>
243 <div id="preview-curtain">
244 <h2>$escapetool.xml($services.localization.render('platform.flamingo.themes.loading'))</h2>
245 </div>
246 </div>
247 </div>
248 </div>
249 #end
250 ############################
251 ## DISPLAY HIDDEN VARIABLES
252 ############################
253 #macro(displayHiddenVariables)
254 <div id="bt-variables" class="hidden">
255 #foreach($category in $variables.keySet())
256 #set($catVar = $variables.get($category))
257 #foreach($var in $catVar.keySet())
258 #set($varName = $var)
259 #set($varType = $catVar.get($varName))
260 #if ($varType == 'textarea')
261 <textarea id="var-$varName" name="FlamingoThemesCode.ThemeClass_0_$varName" class="type-${varType}">
262 $!escapetool.xml($doc.getValue($varName, $obj))
263 </textarea>
264 #else
265 <input type="hidden" id="var-$varName" name="FlamingoThemesCode.ThemeClass_0_$varName" value="$!escapetool.xml($doc.getValue($varName, $obj))" class="type-${varType}"/>
266 #end
267 #end
268 #end
269 </div>
270 #end
271 ############################
272 ## MAIN
273 ############################
274 {{html clean="false"}}
275 <div class="row">
276 #if($isEdit)
277 #displayVariablesPanel()
278 #else
279 #displayHiddenVariables()
280 #end
281 #displayPreviewPanel()
282 ## Special data for computing URLs
283 <span class="hidden" id="attachmentsURL" data-value="$xwiki.getAttachmentURL($doc.fullName, '__tochange__')"></span>
284 </div>
285 {{/html}}
286 {{/velocity}}