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
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
|
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="snippets" groups="base.group_user">
<snippets id="snippet_custom" string="Custom"/>
<t id="default_snippets">
<snippets id="snippet_structure" string="First Panel">
<t t-snippet="web_editor.s_hr" string="Separator" t-thumbnail="/web_editor/static/src/img/snippets_thumbs/s_hr.svg"/>
</snippets>
</t>
<div id="snippet_options" class="d-none">
<t t-call="web_editor.snippet_options"/>
</div>
</template>
<template id="snippet_options_image_optimization_widgets">
<t t-set="filter_label">Filter</t>
<we-select t-att-string="filter_label" t-att-class="indent and 'o_we_sublevel_2'">
<we-button data-gl-filter="">None</we-button>
<we-button data-gl-filter="blur">Blur</we-button>
<we-button data-gl-filter="1977">1977</we-button>
<we-button data-gl-filter="aden">Aden</we-button>
<we-button data-gl-filter="brannan">Brannan</we-button>
<we-button data-gl-filter="earlybird">EarlyBird</we-button>
<we-button data-gl-filter="inkwell">Inkwell</we-button>
<we-button data-gl-filter="maven">Maven</we-button>
<we-button data-gl-filter="toaster">Toaster</we-button>
<we-button data-gl-filter="walden">Walden</we-button>
<we-button data-gl-filter="valencia">Valencia</we-button>
<we-button data-gl-filter="xpro">Xpro</we-button>
<we-button data-gl-filter="custom" data-name="custom_glfilter_opt">Custom</we-button>
</we-select>
<t t-set="color_label">Color</t>
<t t-set="saturation_label">Saturation</t>
<t t-set="contrast_label">Contrast</t>
<t t-set="brightness_label">Brightness</t>
<t t-set="sepia_label">Sepia</t>
<t t-set="blur_label">Blur</t>
<we-row t-att-string="color_label" t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'">
<we-select data-filter-property="blend" data-dependencies="custom_glfilter_opt">
<we-button data-custom-filter="normal">Normal</we-button>
<we-button data-custom-filter="overlay">overlay</we-button>
<we-button data-custom-filter="screen">screen</we-button>
<we-button data-custom-filter="multiply">multiply</we-button>
<we-button data-custom-filter="lighter">add</we-button>
<we-button data-custom-filter="exclusion">exclusion</we-button>
<we-button data-custom-filter="darken">darken</we-button>
<we-button data-custom-filter="lighten">lighten</we-button>
</we-select>
<we-colorpicker data-dependencies="custom_glfilter_opt" data-custom-filter="" data-filter-property="filterColor" data-excluded="common, theme"/>
</we-row>
<we-range t-att-string="saturation_label"
t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="saturation"
data-min="-100"
data-step="10"/>
<we-range t-att-string="contrast_label"
t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="contrast"
data-min="-100"
data-step="10"/>
<we-range t-att-string="brightness_label"
t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="brightness"
data-min="-100"
data-step="10"/>
<we-range t-att-string="sepia_label"
t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="sepia"
data-step="5"/>
<we-range t-att-string="blur_label"
t-att-class="indent and 'o_we_sublevel_3' or 'o_we_sublevel_1'"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="blur"
data-max="2000"
data-step="100"/>
<t t-set="format_label">Format</t>
<we-select t-att-string="format_label"
t-att-class="indent and 'o_we_sublevel_2'"
data-name="format_select_opt"/>
<t t-set="quality_label">Quality</t>
<we-range t-att-string="quality_label"
t-att-class="indent and 'o_we_sublevel_2'"
data-set-quality=""/>
</template>
<template id="snippet_options_background_color_widget">
<we-colorpicker title="Color"
data-name="bg_color_opt"
t-att-data-select-color-combination="'' if with_color_combinations else None"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"
t-att-data-with-combinations="with_color_combinations and 'selectColorCombination' or None"
t-att-data-with-gradients="with_gradients and 'true' or None"
t-att-data-css-compatible="css_compatible and 'true' or None"/>
</template>
<template id="snippet_options_background_options">
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
<t t-if="with_images">
<we-button title="Image" class="ms-auto fa fa-fw fa-camera"
data-name="bg_image_toggle_opt"
t-att-data-dependencies="images_dependencies"
data-toggle-bg-image="true"
data-no-preview="true">
</we-button>
<t t-if="with_shapes">
<we-button title="Shape"
data-toggle-bg-shape="true"
t-att-data-dependencies="images_dependencies"
data-no-preview="true"
data-img="/web_editor/static/src/img/snippets_options/bg_shape.svg"/>
</t>
</t>
</we-row>
</div>
<t t-if="with_images">
<div data-js="BackgroundImage"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="Image" class="o_we_sublevel_1">
<we-imagepicker title="Edit image"
data-background=""
data-name="bg_image_opt"
data-dependencies="bg_image_opt"/>
</we-row>
<we-row string="Main Color" class="o_we_sublevel_2" title="Main Color" data-name="main_color_opt">
<we-colorpicker data-dynamic-color="true" data-color-name="c1"/>
<we-colorpicker data-dynamic-color="true" data-color-name="c2"/>
<we-colorpicker data-dynamic-color="true" data-color-name="c3"/>
<we-colorpicker data-dynamic-color="true" data-color-name="c4"/>
<we-colorpicker data-dynamic-color="true" data-color-name="c5"/>
</we-row>
</div>
<div data-js="BackgroundPosition"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="Position" class="o_we_sublevel_2">
<we-select data-no-preview="true">
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position" data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<we-input string="Width" class="o_we_sublevel_3" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="Height" class="o_we_sublevel_3" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</div>
<div data-js="BackgroundOptimize"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-call="web_editor.snippet_options_image_optimization_widgets">
<t t-set="indent" t-value="True"/>
</t>
</div>
<!-- Color filter -->
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-set="color_filter_dependencies" t-valuef="bg_image_toggle_opt"/>
<we-colorpicker string="Color Filter"
class="o_we_sublevel_2"
t-att-data-dependencies="color_filter_dependencies"
data-name="bg_filter_opt"
data-select-filter-color=""
data-color-prefix="bg-"
data-opacity="0.5"
data-with-gradients="1"
data-selected-tab="gradients"
data-excluded="theme, common"
/>
</div>
<div data-js="BackgroundShape"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="Shape" class="o_we_sublevel_1">
<we-select-pager class="o_we_bg_shape_menu" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
<header class="o_pager_nav d-flex flex-column flex-wrap flex-shrink-0 mh-100">
<div class="d-flex align-items-center">
<button class="o_pager_nav_angle fa fa-angle-left btn btn-secondary bg-transparent border-0"/>
<h5 class="o_pager_nav_title mb-0 text-white">Background Shapes</h5>
</div>
<div class="d-flex">
<button type="button" class="o_pager_nav_btn p-0 text-uppercase active" data-scroll-to="o_scroll_bgshapes_basic">
<span class="w-100">Basic</span>
</button>
<button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_linear">
<span class="w-100">Linear</span>
</button>
<button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_creative">
<span class="w-100">Creative</span>
</button>
</div>
</header>
<div class="o_pager_container">
<div class="o_scroll_bgshapes_basic">
<we-title>Origins</we-title>
<we-select-page string="Origins">
<we-button data-shape="web_editor/Origins/02_001" data-select-label="Origins 01"/>
<we-button data-shape="web_editor/Origins/04_001" data-select-label="Origins 02"/>
<we-button data-shape="web_editor/Origins/05" data-select-label="Origins 03"/>
<we-button data-shape="web_editor/Origins/06_001" data-select-label="Origins 04"/>
<we-button data-shape="web_editor/Origins/07_002" data-select-label="Origins 05"/>
<we-button data-shape="web_editor/Origins/08" data-select-label="Origins 06"/>
<we-button data-shape="web_editor/Origins/09_001" data-select-label="Origins 07"/>
<we-button data-shape="web_editor/Origins/11_001" data-select-label="Origins 08"/>
<we-button data-shape="web_editor/Origins/14_001" data-select-label="Origins 09"/>
<we-button data-shape="web_editor/Origins/16" data-select-label="Origins 10" data-animated="true"/>
<we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11" data-animated="true"/>
<we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12" data-animated="true"/>
<we-button data-shape="web_editor/Origins/19" data-select-label="Origins 13"/>
</we-select-page>
<we-title>Bold</we-title>
<we-select-page string="Bold">
<we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
<we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
<we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
<we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
<we-button data-shape="web_editor/Bold/05_001" data-select-label="Bold 05"/>
<we-button data-shape="web_editor/Bold/06_001" data-select-label="Bold 06"/>
<we-button data-shape="web_editor/Bold/07_001" data-select-label="Bold 07"/>
<we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
<we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
<we-button data-shape="web_editor/Bold/10_001" data-select-label="Bold 10"/>
<we-button data-shape="web_editor/Bold/11_001" data-select-label="Bold 11"/>
<we-button data-shape="web_editor/Bold/12_001" data-select-label="Bold 12"/>
</we-select-page>
<we-title>Blobs</we-title>
<we-select-page string="Blobs">
<we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blobs 01" data-animated="true"/>
<we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
<we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
<we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
<we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
<we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
<we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
<we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
<we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
<we-button data-shape="web_editor/Blobs/10_001" data-select-label="Blobs 10"/>
<we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
<we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
</we-select-page>
</div>
<div class="o_scroll_bgshapes_linear">
<we-title>Airy & Zigs</we-title>
<we-select-page string="Airy & Zigs">
<we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
<we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
<we-button data-shape="web_editor/Airy/03_001" data-select-label="Airy 03" data-animated="true"/>
<we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04" data-animated="true"/>
<we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05" data-animated="true"/>
<we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
<we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
<we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
<we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
<we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
<we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
<we-button data-shape="web_editor/Airy/12_001" data-select-label="Airy 12" data-animated="true"/>
<we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13" data-animated="true"/>
<we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
<we-button data-shape="web_editor/Zigs/01_001" data-select-label="Zigs 01" data-animated="true"/>
<we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02" data-animated="true"/>
<we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
<we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
<we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
<we-button data-shape="web_editor/Zigs/06" data-select-label="Zigs 06"/>
</we-select-page>
</div>
<div class="o_scroll_bgshapes_creative">
<we-title>Wavy</we-title>
<we-select-page string="Wavy">
<we-button data-shape="web_editor/Wavy/01_001" data-select-label="Wavy 01"/>
<we-button data-shape="web_editor/Wavy/02_001" data-select-label="Wavy 02"/>
<we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
<we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 04"/>
<we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 05" data-animated="true"/>
<we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06" data-animated="true"/>
<we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07" data-animated="true"/>
<we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08" data-animated="true"/>
<we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 09"/>
<we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 10"/>
<we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 11"/>
<we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 12"/>
<we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 13"/>
<we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 14"/>
<we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 15"/>
<we-button data-shape="web_editor/Wavy/12_001" data-select-label="Wavy 16"/>
<we-button data-shape="web_editor/Wavy/28" data-select-label="Wavy 17" data-animated="true"/>
<we-button data-shape="web_editor/Wavy/13_001" data-select-label="Wavy 18"/>
<we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 19"/>
<we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 20"/>
<we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 21"/>
<we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 22"/>
<we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 23"/>
<we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 24"/>
<we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 25"/>
<we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 26"/>
<we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 27"/>
<we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 28"/>
</we-select-page>
<we-title>Block & Rainy</we-title>
<we-select-page string="Blocks & Rainy">
<we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 01"/>
<we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 02"/>
<we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
<we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
<we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 03"/>
<we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 04"/>
<we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 06"/>
<we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 07"/>
<we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>
</we-select-page>
<we-title>Floating Shapes</we-title>
<we-select-page string="Floating Shapes">
<we-button data-shape="web_editor/Floats/01" data-select-label="Float 01" data-animated="true"/>
<we-button data-shape="web_editor/Floats/02" data-select-label="Float 02" data-animated="true"/>
<we-button data-shape="web_editor/Floats/03" data-select-label="Float 03" data-animated="true"/>
<we-button data-shape="web_editor/Floats/04" data-select-label="Float 04" data-animated="true"/>
<we-button data-shape="web_editor/Floats/05" data-select-label="Float 05" data-animated="true"/>
<we-button data-shape="web_editor/Floats/06" data-select-label="Float 06" data-animated="true"/>
<we-button data-shape="web_editor/Floats/07" data-select-label="Float 07" data-animated="true"/>
<we-button data-shape="web_editor/Floats/08" data-select-label="Float 08" data-animated="true"/>
<we-button data-shape="web_editor/Floats/09" data-select-label="Float 09" data-animated="true"/>
<we-button data-shape="web_editor/Floats/10" data-select-label="Float 10" data-animated="true"/>
<we-button data-shape="web_editor/Floats/11" data-select-label="Float 11" data-animated="true"/>
<we-button data-shape="web_editor/Floats/12" data-select-label="Float 12" data-animated="true"/>
<we-button data-shape="web_editor/Floats/13" data-select-label="Float 13" data-animated="true"/>
<we-button data-shape="web_editor/Floats/14" data-select-label="Float 14" data-animated="true"/>
</we-select-page>
</div>
</div>
</we-select-pager>
<we-button class="o_we_device" data-show-on-mobile="false" title="Show/Hide on Mobile"
data-dependencies="!shape_none_opt" data-no-preview="true"
data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"/>
<we-button data-shape="" data-name="shape_none_opt" data-dependencies="!shape_none_opt" data-no-preview="true" class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times"/>
</we-row>
<we-row string="Flip" class="o_we_sublevel_2">
<we-button class="oi oi-fw oi-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
<we-button class="oi oi-fw oi-arrows-v" data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
</we-row>
<we-row string="Colors" class="o_we_sublevel_2" data-name="colors">
<we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to="> .o_we_shape"/>
</we-row>
<we-row string="Speed" class="o_we_sublevel_2">
<we-range data-name="bg_shape_anim_speed_opt"
data-no-preview="true"
data-display-range-value="true"
data-set-bg-shape-animation-speed=""
data-max="2"
data-min="-2"
data-step="0.1"
data-to-ratio="true"/>
</we-row>
</div>
</t>
</template>
<template id="snippet_options_version_control">
<div data-js="VersionControl"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target"/>
</template>
<!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
<template id="snippet_options">
<!-- t-field -->
<div data-js='many2one'
data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
data-no-check="true"/>
<div data-selector=".s_hr"
data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
<t t-call="web_editor.snippet_options_version_control">
<t t-set="selector" t-value="'[data-snippet]'"/>
</t>
<!-- Replace a media -->
<!-- TODO probably review this system once the new editor is merged to not duplicate the selector, etc -->
<div data-js="ReplaceMedia"
data-selector="img, .media_iframe_video, span.fa, i.fa"
data-exclude="[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa">
<we-row string="Media">
<we-button class="o_we_bg_success" data-replace-media="true" data-no-preview="true">Replace</we-button>
<div>
<we-button class="fa fa-link"
data-name="media_link_opt"
data-set-link="true" data-no-preview="true"
title="Redirect the user elsewhere when he clicks on the media."/>
</div>
</we-row>
<we-input string="Your URL"
class="o_we_sublevel_1 o_we_large"
data-name="media_url_opt" data-dependencies="media_link_opt"
data-set-url="" data-no-preview="true"
placeholder="www.example.com"
data-request-focus="true"/>
<we-checkbox string="Open in New Window"
class="o_we_sublevel_1"
data-dependencies="media_url_opt"
data-set-new-window="true" data-no-preview="true"/>
</div>
<div data-js="FontawesomeTools" data-selector="span.fa, i.fa" data-exclude="[data-oe-xpath]">
<we-colorpicker string="Color"
title="Color"
data-select-style=""
data-css-property="color"
data-color-prefix="text-"/>
<we-colorpicker string="Background Color"
title="Background Color"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"/>
<we-button-group string="Size">
<we-button data-select-class="" title="Size 1x">1x</we-button>
<we-button data-select-class="fa-2x" title="Size 2x">2x</we-button>
<we-button data-select-class="fa-3x" title="Size 3x">3x</we-button>
<we-button data-select-class="fa-4x" title="Size 4x">4x</we-button>
<we-button data-select-class="fa-5x" title="Size 5x">5x</we-button>
<!-- Hidden buttons which allows to automatically remove other fa
sizing class we do not suggest.
TODO: implement a param to add those extra classes to remove
via selectClass (also fixes the fact that nothing is selected
if fa-1x is actually used on the icon in this case) -->
<we-button data-select-class="fa-1x" data-dependencies="fake"/>
<we-button data-select-class="fa-lg" data-dependencies="fake"/>
</we-button-group>
</div>
<t t-set="no_animations" t-value="False"/>
<div data-js="ImageTools"
data-selector="img">
<div class="o_we_image_shape">
<we-row string="Shape" class="o_we_full_row">
<we-select-pager data-name="shape_img_opt" class="o_we_fake_transparent_background">
<header class="o_pager_nav d-flex flex-column flex-wrap flex-shrink-0 mh-100">
<div class="d-flex align-items-center">
<button class="o_pager_nav_angle fa fa-angle-left btn btn-secondary bg-transparent border-0"/>
<h5 class="o_pager_nav_title mb-0 text-white">Shapes</h5>
</div>
<div class="d-flex">
<button type="button" class="o_pager_nav_btn p-0 text-uppercase active" data-scroll-to="o_scroll_shapes_basic">
<span class="w-100">Basic</span>
</button>
<button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_shapes_decorative">
<span class="w-100">Decorative</span>
</button>
<button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_shapes_devices">
<span class="w-100">Devices</span>
</button>
</div>
</header>
<div class="o_pager_container">
<div class="o_scroll_shapes_basic">
<we-title class="">Geometrics</we-title>
<we-select-page string="Geometrics">
<we-button data-set-img-shape="web_editor/geometric/geo_square" data-no-transform="true" data-name="shape_img_square_opt"/> <!-- hidden and only used for hover effects -->
<we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door" data-unstretch="true"/>
<t t-if="not no_animations">
<we-button data-set-img-shape="web_editor/geometric/geo_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_square_3" data-select-label="Square 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_square_4" data-select-label="Square 4" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_square_5" data-select-label="Square 5" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric/geo_square_6" data-select-label="Square 6" data-animated="true"/>
</t>
</we-select-page>
<we-title>Geometrics Rounded</we-title>
<we-select-page string="Geometrics Rounded">
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_circle" data-select-label="Circle" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)" data-no-transform="true" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)" data-no-transform="true" data-unstretch="true"/>
<t t-if="not no_animations">
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_1" data-select-label="Square 1 (R)" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_2" data-select-label="Square 2 (R)" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_soft" data-select-label="Blob Soft" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_medium" data-select-label="Blob Medium" data-animated="true"/>
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_hard" data-select-label="Blob Hard" data-animated="true"/>
</t>
</we-select-page>
<we-title>Geometrics Panels</we-title>
<we-select-page string="Panels">
<we-button data-set-img-shape="web_editor/panel/panel_duo" data-select-label="Duo"/>
<we-button data-set-img-shape="web_editor/panel/panel_duo_r" data-select-label="Duo (R)"/>
<we-button data-set-img-shape="web_editor/panel/panel_duo_step" data-select-label="Duo Step"/>
<we-button data-set-img-shape="web_editor/panel/panel_duo_step_pill" data-select-label="Duo Step Pill"/>
<we-button data-set-img-shape="web_editor/panel/panel_trio_in_r" data-select-label="Trio In (R)"/>
<we-button data-set-img-shape="web_editor/panel/panel_trio_out_r" data-select-label="Trio Out (R)"/>
<we-button data-set-img-shape="web_editor/panel/panel_window" data-select-label="Window" data-no-transform="true" data-unstretch="true"/>
</we-select-page>
<we-title>Composites</we-title>
<we-select-page string="Composites">
<we-button data-set-img-shape="web_editor/composite/composite_double_pill" data-select-label="Double Pill"/>
<we-button data-set-img-shape="web_editor/composite/composite_triple_pill" data-select-label="Triple Pill"/>
<we-button data-set-img-shape="web_editor/composite/composite_half_circle" data-select-label="Half Circle"/>
<we-button data-set-img-shape="web_editor/composite/composite_sonar" data-select-label="Double Sonar"/>
<we-button data-set-img-shape="web_editor/composite/composite_cut_circle" data-select-label="Cut Circle"/>
</we-select-page>
</div>
<div class="o_scroll_shapes_decorative">
<we-title>Brushed</we-title>
<we-select-page string="Brushed">
<we-button data-set-img-shape="web_editor/brushed/brush_1" data-select-label="Brush 1" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3" data-unstretch="true"/>
<we-button data-set-img-shape="web_editor/brushed/brush_4" data-select-label="Brush 4"/>
</we-select-page>
<we-title>Composition</we-title>
<we-select-page string="Composition">
<we-button data-set-img-shape="web_editor/composition/composition_organic_line" data-select-label="Organic Line" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line" data-no-transform="true"/>
<t t-if="not no_animations">
<we-button data-set-img-shape="web_editor/composition/composition_triangle_line" data-select-label="Triangle Line" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="true" data-no-transform="true"/>
</t>
</we-select-page>
<we-title>Patterns</we-title>
<we-select-page string="Patterns">
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_cross" data-select-label="Organic Cross" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra" data-no-transform="true"/>
<t t-if="not no_animations">
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_1" data-select-label="Wave 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="true" data-no-transform="true"/>
</t>
</we-select-page>
<we-title>Solids</we-title>
<we-select-page string="Solids">
<we-button data-set-img-shape="web_editor/solid/solid_blob_1" data-select-label="Blob 1" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4" data-no-transform="true"/>
<t t-if="not no_animations">
<we-button data-set-img-shape="web_editor/solid/solid_blob_5" data-select-label="Blob 5" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true" data-no-transform="true"/>
</t>
</we-select-page>
<we-title>Specials</we-title>
<we-select-page string="Specials" t-if="not no_animations">
<we-button data-set-img-shape="web_editor/special/special_speed" data-select-label="Speed" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="true" data-no-transform="true"/>
<we-button data-set-img-shape="web_editor/special/special_flag" data-select-label="Flag" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/special_organic" data-select-label="Organic" data-animated="true"/>
</we-select-page>
</div>
<div class="o_scroll_shapes_devices">
<we-title>Devices</we-title>
<we-select-page string="Devices">
<we-button data-set-img-shape="web_editor/devices/iphone_front_portrait" data-select-label="iPhone #1" data-img-size="0.46:1"/>
<we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="0.46:1"/>
<we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="0.46:1"/>
<we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="2.17:1"/>
<we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="2.17:1"/>
<we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="2.17:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="0.45:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="0.45:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="0.45:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="2.22:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="2.22:1"/>
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="2.22:1"/>
<we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="0.75:1"/>
<we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="0.75:1"/>
<we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="0.75:1"/>
<we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="4:3"/>
<we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="4:3"/>
<we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="4:3"/>
<we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="16:9"/>
<we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="16:9"/>
<we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="16:9"/>
<we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1.6:1"/>
<we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1.6:1"/>
<we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1.6:1"/>
<we-button data-set-img-shape="web_editor/devices/browser_01" data-select-label="Browser #1"/>
<we-button data-set-img-shape="web_editor/devices/browser_02" data-select-label="Browser #2"/>
<we-button data-set-img-shape="web_editor/devices/browser_03" data-select-label="Browser #3"/>
</we-select-page>
</div>
</div>
</we-select-pager>
<we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt"
class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times" data-name="remove_img_shape_opt"/>
</we-row>
<we-row string="Colors" class="o_we_sublevel_1">
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0"/>
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-1" data-color-id="1"/>
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-2" data-color-id="2"/>
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-3" data-color-id="3"/>
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-4" data-color-id="4"/>
</we-row>
<we-row string="Transform" class="o_we_sublevel_1">
<we-button class="oi oi-fw oi-arrows-h" data-name="img_shape_transform_flip_x_opt" data-set-img-shape-flip-x="true"
data-no-preview="true" data-dependencies="shape_img_opt" title="Horizontal mirror"/>
<we-button class="oi oi-fw oi-arrows-v" data-name="img_shape_transform_flip_y_opt" data-set-img-shape-flip-y="true"
data-no-preview="true" data-dependencies="shape_img_opt" title="Vertical mirror"/>
<we-button class="fa fa-fw fa-rotate-left" data-name="img_shape_transform_rotate_x_opt" data-set-img-shape-rotate-left="true"
data-no-preview="true" data-dependencies="shape_img_opt" title="Rotate left"/>
<we-button class="fa fa-fw fa-rotate-right" data-name="img_shape_transform_rotate_y_opt" data-set-img-shape-rotate-right="true"
data-no-preview="true" data-dependencies="shape_img_opt" title="Rotate right"/>
</we-row>
<we-row string="Speed" class="o_we_sublevel_1">
<we-range data-name="shape_anim_speed_opt"
data-no-preview="true"
data-display-range-value="true"
data-attribute-name="shapeAnimationSpeed"
data-select-data-attribute=""
data-max="2"
data-min="-2"
data-step="0.1"
data-to-ratio="true"/>
</we-row>
<we-row string="Stretch" class="o_we_sublevel_1">
<we-checkbox data-remove-stretch="true" data-dependencies="shape_img_opt" data-no-preview="true" data-name="toggle_stretch_opt"/>
</we-row>
</div>
<we-input string="Description" class="o_we_large"
data-select-attribute="" data-attribute-name="alt"
placeholder="Alt tag"
title="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...)."/>
<we-input string="Tooltip" class="o_we_large"
data-select-attribute="" data-attribute-name="title"
placeholder="Title tag"
title="'Title tag' is shown as a tooltip when you hover the picture."/>
<we-row string="Transform">
<we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
<we-button class="o_we_bg_danger ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
Reset
</we-button>
<we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture"/>
<we-button class="ms-0 border-start-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
Reset
</we-button>
</we-row>
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
<we-button-group string="Size" data-css-property="width">
<we-button data-select-style="" title="Resize Default">Default</we-button>
<we-button data-select-style="25%" title="Resize Quarter">25%</we-button>
<we-button data-select-style="50%" title="Resize Half">50%</we-button>
<we-button data-select-style="100%" title="Resize Full">100%</we-button>
</we-button-group>
</div>
<div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]" class="o_we_image_options">
<we-select string="Alignment" data-state-to-first-class="true">
<we-button data-select-class="" title="Unalign">None</we-button>
<we-button data-select-class="me-auto float-start" title="Align Left">Left</we-button>
<we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
<we-button data-select-class="ms-auto float-end" title="Align Right">Right</we-button>
</we-select>
<we-row string="Style">
<we-button class="fa fa-fw fa-square" data-select-class="rounded" title="Shape: Rounded"/>
<we-button class="fa fa-fw fa-circle-o" data-select-class="rounded-circle" title="Shape: Circle"/>
<we-button class="fa fa-fw fa-sun-o" data-select-class="shadow" title="Shadow"/>
<we-button class="fa fa-fw fa-picture-o" data-select-class="img-thumbnail" title="Shape: Thumbnail"/>
</we-row>
<we-input string="Padding" data-select-style="" data-unit="px" data-css-property="padding"/>
</div>
<div data-js="DynamicSvg" data-selector="img">
<we-row string="Dynamic Colors" data-name="colors">
<we-colorpicker data-color="true" data-color-name="c1"/>
<we-colorpicker data-color="true" data-color-name="c2"/>
<we-colorpicker data-color="true" data-color-name="c3"/>
<we-colorpicker data-color="true" data-color-name="c4"/>
<we-colorpicker data-color="true" data-color-name="c5"/>
</we-row>
</div>
</template>
<!-- default block -->
<template id="s_hr" name="Separator">
<div class="s_hr pt32 pb32">
<hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>
</div>
</template>
</odoo>
|
