-
Notifications
You must be signed in to change notification settings - Fork 55
/
index.html
488 lines (429 loc) · 21.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IBO - Icon Builder for Odoo</title>
<meta name="author" content="spilymp">
<meta name="description" content="An simple Icon Builder for Odoo (IBO), which provide the ability to create app icons in the style of the appicons of the ERP system Odoo.">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/milligram.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css"
integrity="sha512-QKC1UZ/ZHNgFzVKSAhV5v5j73eeL9EEN289eKAEFaAjgAiobVAnVv/AGuPbXsKl1dNoel3kNr6PYnSiTzVVBCw=="
crossorigin="anonymous" />
<!-- Bootstrap Icons-->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" as="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" type="text/css">
<!-- Remix Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" type="text/css">
<!-- Tabler Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" type="text/css">
<!-- Weather Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css" type="text/css">
<script type="text/javascript" src="js/ibo_icon.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let icon = new IBO_ICON({
'font_family': 'bootstrap-icons',
'icon_class': 'bi bi-droplet',
});
icon.draw("icon");
});
function generate() {
document.getElementById("icon").innerHTML = '';
let icon = new IBO_ICON({
'font_color': document.getElementById('iconFontColor').value,
'font_family': document.getElementById('iconSet').value,
'font_size': document.getElementById('iconFontSizeValue').value,
'font_weight': document.getElementById('fontWeight').value,
'icon_background': document.getElementById('iconBackgroundColor').value,
'icon_class': document.getElementById('iconClass').value,
'icon_width': document.getElementById('iconSizeValue').value,
'odoo_version': document.getElementById('odooVersion').value,
});
icon.draw("icon");
}
function toggle_settings() {
document.querySelectorAll('.settings-card').forEach(function (element) {
element.classList.toggle('deactivated');
});
}
function download() {
let image = document.getElementsByClassName('ibo-icon-canvas')[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
document.getElementById('download').setAttribute('href', image);
}
function populateIconSetWebsite() {
switch (document.getElementById('iconSet').value) {
case "Font Awesome 5 Brands":
document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v5/search?o=r&m=free&f=brands"
document.getElementById('iconClass').placeholder = "e.g. fab fa-github"
break;
case "FontAwesome":
document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v4/icons/"
document.getElementById('iconClass').placeholder = "e.g. fa fa-bath"
break;
case "bootstrap-icons":
document.getElementById('iconSetWebsite').href = "https://icons.getbootstrap.com/"
document.getElementById('iconClass').placeholder = "e.g. bi bi-droplet"
break;
case "simple-line-icons":
document.getElementById('iconSetWebsite').href = "https://simplelineicons.github.io/"
document.getElementById('iconClass').placeholder = "e.g. icon-globe-alt"
break;
case "remixicon":
document.getElementById('iconSetWebsite').href = "https://remixicon.com/"
document.getElementById('iconClass').placeholder = "e.g. ri-customer-service-line"
break;
case "tabler-icons":
document.getElementById('iconSetWebsite').href = "https://tabler-icons.io/"
document.getElementById('iconClass').placeholder = "e.g. ti ti-bone-off"
break;
case "weathericons":
document.getElementById('iconSetWebsite').href = "http://erikflowers.github.io/weather-icons/"
document.getElementById('iconClass').placeholder = "e.g. wi-day-sleet-storm"
break;
default:
document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v5/search?m=free&s=solid%2Cregular"
document.getElementById('iconClass').placeholder = "e.g. fas fa-carrot"
break;
}
}
</script>
</head>
<body>
<!-- pre loading the fonts so they are available for the js class -->
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'Font Awesome 5 Free', Arial, sans-serif;"></span>
<span style="font-family: 'Font Awesome 5 Brands', Arial, sans-serif;"></span>
<span style="font-family: 'FontAwesome', Arial, sans-serif;"></span>
<span style="font-family: 'bootstrap-icons', Arial, sans-serif;"></span>
<span style="font-family: 'simple-line-icons', Arial, sans-serif;"></span>
<span style="font-family: 'remixicon', Arial, sans-serif;"></span>
<span style="font-family: 'tabler-icons', Arial, sans-serif;"></span>
<span style="font-family: 'weathericons', Arial, sans-serif;"></span>
</div>
<header class="container">
<div class="row">
<div class="column align-center">
<h1>IBO - Icon Builder for Odoo</h1>
</div>
</div>
</header>
<div class="container">
<div class="row row-center">
<div class="column align-center settings-card front">
<div class="row">
<div class="column column-center">
<label for="odooVersion">Odoo Version</label>
</div>
<div class="column">
<select id="odooVersion">
<option value="15.0">Odoo 15</option>
<option value="14.0">Odoo 14</option>
<option value="13.0">Odoo 13</option>
<option value="12.0">Odoo 12</option>
<option value="11.0">Odoo 11</option>
</select>
</div>
</div>
<div class="row icon-set-website">
<div class="column column-center column-50">
<label for="iconSet">Icon Set</label>
</div>
<div class="column column-40">
<select id="iconSet" onchange="populateIconSetWebsite()">
<option value="Font Awesome 5 Free">Font Awesome 5 Solid & Regular</option>
<option value="Font Awesome 5 Brands">Font Awesome 5 Brands</option>
<option value="FontAwesome">Font Awesome 4.7</option>
<option value="bootstrap-icons">Bootstrap Icons</option>
<option value="simple-line-icons">Simple Line Icons</option>
<option value="remixicon">Remix Icon</option>
<option value="tabler-icons">Tabler Icons</option>
<option value="weathericons">Weather Icons</option>
</select>
</div>
<div class="column">
<a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular" id="iconSetWebsite"
class="button button-outline" target="_blank">
<i class="fas fa-globe-europe button-icon"></i>
</a>
</div>
</div>
<div class="row">
<div class="column column-center">
<label for="iconClass">Icon Class</label><i id="icon-preview"></i>
</div>
<div class="column">
<input id="iconClass" type="text" placeholder="e.g. fas fa-address-card">
</div>
</div>
<div class="row">
<div class="column column-center">
<label for="iconBackgroundColor">Icon Background Color</label>
</div>
<div class="column">
<input type="color" onchange="clickColor(0, -1, -1, 5)" value="#9b4dca"
id="iconBackgroundColor">
</div>
</div>
<div class="row">
<div class="column align-right">
<button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
<i class="fas fa-sliders-h button-icon"></i>
</button>
<button class="button button-outline" type="submit" value="Generate" onclick="generate()">
<i class="fas fa-play button-icon"></i>
</button>
<a id="download" download="odoo_icon.png">
<button type="submit" value="Download" onclick="download()">
Download
</button>
</a>
</div>
</div>
</div>
<div class="column align-center settings-card back deactivated">
<div class="row">
<div class="column column-center">
<label for="iconFontColor">Icon Font Color</label>
</div>
<div class="column">
<input id="iconFontColor" type="color" onchange="clickColor(0, -1, -1, 5)" value="#ffffff">
</div>
</div>
<div class="row">
<div class="column column-center">
<label for="iconSize">Icon Size</label>
</div>
<div class="column">
<div class="row" id="iconSize">
<div class="column column-center">
<input id="iconSizeSlider" type="range" value="300" min="100" max="800" oninput="document.getElementById('iconSizeValue').value = this.value">
</div>
<div class="column column-center">
<input id="iconSizeValue" type="text" value="300">
</div>
</div>
</div>
</div>
<div class="row">
<div class="column column-center">
<label for="iconFontSize">Icon Font Size</label>
</div>
<div class="column">
<div class="row" id="iconFontSize">
<div class="column column-center">
<input id="iconFontSizeSlider" type="range" value="150" min="00" max="800" oninput="document.getElementById('iconFontSizeValue').value = this.value">
</div>
<div class="column column-center">
<input id="iconFontSizeValue" type="text" value="150">
</div>
</div>
</div>
</div>
<div class="row">
<div class="column column-center">
<label for="fontWeight">Icon Font Weight</label>
</div>
<div class="column">
<select id="fontWeight">
<option value="900" selected>Normal</option>
<option value="300">Light</option>
</select>
</div>
</div>
<div class="row">
<div class="column align-right">
<button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
<i class="fas fa-sliders-h button-icon"></i>
</button>
<button class="button button-outline" type="submit" value="Generate" onclick="generate()">
<i class="fas fa-play button-icon"></i>
</button>
<a id="download" download="odoo_icon.png">
<button type="submit" value="Download" onclick="download()">
Download
</button>
</a>
</div>
</div>
</div>
<div class="column align-center">
<div id="icon"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="column">
<h2>Documentation</h2>
</div>
</div>
<div class="row">
<div class="column">
<p class="section-description">
The configurator above can be used to quickly and easily create new appicons in the style of the
appicons of the ERP system <a href="https://www.odoo.com/" rel="external nofollow">Odoo</a>.
To set an icon you have to find and enter the corresponding css class.
Please check the corresponding page of the icon set for this purpose:
<ul>
<li><a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular">Font Awesome 5 Solid &
Regular</a></li>
<li><a href="https://fontawesome.com/v5/search?m=free&s=brands">Font Awesome 5 Brands</a></li>
<li><a href="https://fontawesome.com/v4/icons/">Font Awesome 4.7</a></li>
<li><a href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>
<li><a href="https://simplelineicons.github.io/">Simple Line Icons</a></li>
<li><a href="https://remixicon.com/">Remix Icon</a></li>
<li><a href="https://tabler-icons.io/">Tabler Icons</a></li>
<li><a href="http://erikflowers.github.io/weather-icons/">Weather Icons</a></li>
</ul>
<span><strong>Note:</strong> The icon pack which Odoo uses up to version 15 is Font Awesome 4.7!</span>
</p>
</div>
</div>
<div class="row">
<div class="column">
<h3>Getting Started</h3>
</div>
</div>
<div class="row row-center">
<div class="column">
<p>
It is also possible to use the class elsewhere and create your own configurator based on it, for
example.
For this purpose, the class offers a few more parameters for individualization in addition to the
options shown above.
</p>
</div>
</div>
<div class="row row-center">
<div class="column">
<p>
The basis of the configurator is a JavaScript class "IBO_ICON", which creates a canvas and "paints"
the icon on it.
If the existing class is used directly by means of a script, additional parameters can be passed.
If this class is instantiated, various parameters can be passed to it (see sample code block on the
right).
If not, default values are used in each case.
</p>
</div>
<div class="column">
<pre>
<code>[...]
let icon = new IBO_ICON({
'font_family': 'bootstrap-icons',
'icon_class': 'bi bi-droplet',
});
[...]</code>
</pre>
</div>
</div>
<div class="row row-center">
<div class="column">
<p>
The actual creation then takes place in the "draw" method.
The ID of an HTML element to which the created canvas is attached must be specified here as a
parameter.
</p>
</div>
<div class="column">
<pre>
<code>[...]
icon.draw("icon");
[...]</code>
</pre>
</div>
</div>
<div class="row">
<h3>Parameter</h3>
</div>
<div class="row">
<div class="column">
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Values</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>font_color</td>
<td>e.g. "#ffffff"</td>
<td>Hex color value for the text or symbol.</td>
</tr>
<tr>
<td>font_family</td>
<td>e.g. "Font Awesome 5 Free"</td>
<td>Font family for your text or symbol. Make sure the family is added to your page!</td>
</tr>
<tr>
<td>font_size</td>
<td>e.g. "40"</td>
<td>Font size for your text or symbol.</td>
</tr>
<tr>
<td>font_weight</td>
<td>e.g. "900"</td>
<td>Font weight for your text or symbol.</td>
</tr>
<tr>
<td>icon_background</td>
<td>e.g. "#9b4dca"</td>
<td>Hex color value for the background of your icon.</td>
</tr>
<tr>
<td>icon_class</td>
<td>e.g. "fas fa-address-card"</td>
<td>CSS class name of your symbol for the icon, the class will automatically try to find
the corresponding unicode. If an unicode (parameter "icon_text") is set the class will
be ignored.</td>
</tr>
<tr>
<td>icon_text</td>
<td>e.g. "Test"</td>
<td>The text or symbol which should be displayed on the icon. Will be preferred over the
parameter "icon_class" if set.</td>
</tr>
<tr>
<td>icon_width</td>
<td>e.g. "300"</td>
<td>The width of your icon (in px), will also be the height of your icon.</td>
</tr>
<tr>
<td>odoo_version</td>
<td>["11.0", "12.0", "13.0", "14.0", "15.0"]</td>
<td>The odoo version for which the icon should be generated.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="container">
<div class="row">
<hr />
</div>
<div class="row">
<div class="column column-50">
<p>
Created with <i class="fas fa-heart"></i> by <a href="https://github.com/spilymp">spilymp</a>.
</p>
</div>
<div class="column column-50 align-right">
<p>
View Source Code on <a href="https://github.com/spilymp/ibo"><i class="fab fa-github"></i></a>
</p>
</div>
</div>
</footer>
</body>
</html>