[IMP] web_editor: new shapes full height menu
This commit replaces the `we-select-pager` for a full-height version allowing better sorting and visibility of the shapes and background shapes. The new UI now has a navbar inside the pager which allows to scroll to anchors inside the menu. To do so a new attribute `data-scroll-to` is added on the button element allowing to scroll to the class contained in the attribute with the new function `_onClickScrollPage`. Thanks to ard the Selection widget now activates the corresponding menu section of the new pager whenever the data-scroll matches a section that has passed the middle of the container. The menu being full width, the angle with the class `.o_pager_nav_angle` triggers the `_onClickCloseMenu` to close the menu. To avoid duplication, the label for the devices now uses the same Js logic as the Animated label for the shapes. This frees the :before and :after which allows to use the alpha-background extended class on the we-button for both types of shapes. The devices label information now shows an aspect ratio rather than full dimensions. For the new pager to appear full-height and the content being scrollable inside the proper section of the menu, two new containers are added one for the pager's navigation (`o_pager_nav`) and one for the shapes pages (`o_pager_container`). This allows to have the parent div in fixed positioning and keeping a scrollable section on the `o_pager_container` under its inner navigation. The previous shapes are back to their original ratio of 800x600 since switching them in square makes them less recognizable. Finally, in the `we-toggler` when no elements are selected or when it is empty, we now display `None` instead of `/`. task-3266751 closes odoo/odoo#118253 Related: odoo/design-themes#653 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Mathieu (mano)
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(45deg) scale(.7);}
|
||||
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
|
||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<style>
|
||||
@keyframes scale_1 {
|
||||
0%, 100% {transform: scale(1);}
|
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
|
||||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
0%, 100% {transform: rotate(45deg) scale(.8);}
|
||||
|
||||
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 966 B After Width: | Height: | Size: 966 B |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 857 B After Width: | Height: | Size: 857 B |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 857 B After Width: | Height: | Size: 857 B |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="pattern" width="1634.68" height="1461.26" patternUnits="userSpaceOnUse" viewBox="0 0 1634.68 1461.26" patternTransform="scale(0.05)">
|
||||
<rect width="1634.68" height="1461.26" fill="#FFFFFF"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
|
||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
|
||||
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="Capsules_2" data-name="Capsules 2" width="57.6" stroke="#3AADAA" height="57.6"
|
||||
patternTransform="translate(-59.36 422.92) scale(1.09 1.17)" patternUnits="userSpaceOnUse"
|
||||
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="Crosses_5" data-name="Crosses 5" stroke="#7C6576" width="57.6" height="57.6"
|
||||
patternTransform="translate(0 691.2)" patternUnits="userSpaceOnUse" viewBox="0 0 57.6 57.6">
|
||||
|
||||
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="_10_lpi_80_2" data-name="10 lpi 80% 2" width="72" height="72" stroke="#3AADAA"
|
||||
patternTransform="translate(0 432)" patternUnits="userSpaceOnUse" viewBox="0 0 72 72">
|
||||
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="pattern" width="4" height="4" viewBox="0 -4 4 4" patternUnits="userSpaceOnUse">
|
||||
<circle cx="1" cy="-1" r="0.5" fill="#3AADAA"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="pattern" width="6.24" height="6.24" viewBox="0 0 6.24 6.24" patternUnits="userSpaceOnUse">
|
||||
<rect width="100%" height="100%" fill="#3AADAA"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<pattern id="pattern" width="250" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(41) scale(0.3)">
|
||||
<rect fill="#FFFFFF" width="250" height="30"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"></use>
|
||||
|
||||
|
Before Width: | Height: | Size: 947 B After Width: | Height: | Size: 947 B |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" id="shape">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||||
<use xlink:href="#filterPath" fill="none"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<style type="text/css">
|
||||
@keyframes ld-speed-dash {
|
||||
0% { transform: translate(0,0); }
|
||||
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -8,6 +8,7 @@ import Dialog from "web.Dialog";
|
||||
import {scrollTo} from "web.dom";
|
||||
import rpc from "web.rpc";
|
||||
import time from "web.time";
|
||||
import { throttleForAnimation, debounce } from "@web/core/utils/timing";
|
||||
import utils from "web.utils";
|
||||
import Widget from "web.Widget";
|
||||
import { ColorPaletteWidget } from "web_editor.ColorPalette";
|
||||
@@ -34,10 +35,10 @@ import {
|
||||
import * as OdooEditorLib from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
|
||||
import {SIZES, MEDIAS_BREAKPOINTS} from "@web/core/ui/ui_service";
|
||||
import { sprintf } from "@web/core/utils/strings";
|
||||
import { debounce } from "@web/core/utils/timing";
|
||||
|
||||
var qweb = core.qweb;
|
||||
var _t = core._t;
|
||||
const _lt = core._lt;
|
||||
const preserveCursor = OdooEditorLib.preserveCursor;
|
||||
const descendants = OdooEditorLib.descendants;
|
||||
|
||||
@@ -948,6 +949,7 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
|
||||
events: {
|
||||
'click': '_onClick',
|
||||
},
|
||||
PLACEHOLDER_TEXT: _lt("None"),
|
||||
|
||||
/**
|
||||
* @override
|
||||
@@ -959,7 +961,10 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
|
||||
this.containerEl.insertBefore(this.options.valueEl, this.menuEl);
|
||||
}
|
||||
|
||||
this.menuEl.dataset.placeholderText = this.PLACEHOLDER_TEXT;
|
||||
|
||||
this.menuTogglerEl = document.createElement('we-toggler');
|
||||
this.menuTogglerEl.dataset.placeholderText = this.PLACEHOLDER_TEXT;
|
||||
this.iconEl = this.imgEl || null;
|
||||
const icon = this.el.dataset.icon;
|
||||
if (icon) {
|
||||
@@ -1036,7 +1041,7 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
|
||||
}
|
||||
}
|
||||
} else {
|
||||
textContent = "/";
|
||||
textContent = this.PLACEHOLDER_TEXT;
|
||||
}
|
||||
|
||||
this.menuTogglerEl.textContent = textContent;
|
||||
@@ -2447,42 +2452,28 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
|
||||
const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
|
||||
className: (SelectUserValueWidget.prototype.className || '') + ' o_we_select_pager',
|
||||
events: Object.assign({}, SelectUserValueWidget.prototype.events, {
|
||||
'click .o_we_pager_next, .o_we_pager_prev': '_onPageChange',
|
||||
'click .o_pager_nav_btn': '_onClickScrollPage',
|
||||
'click .o_pager_nav_angle': '_onClickCloseMenu',
|
||||
}),
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
async start() {
|
||||
const _super = this._super.bind(this);
|
||||
this.pages = this.options.childNodes.filter(node => node.matches && node.matches('we-select-page'));
|
||||
this.numPages = this.pages.length;
|
||||
|
||||
const prev = document.createElement('i');
|
||||
prev.classList.add('o_we_pager_prev', 'fa', 'fa-chevron-left');
|
||||
|
||||
this.pageNum = document.createElement('span');
|
||||
this.currentPage = 0;
|
||||
|
||||
const next = document.createElement('i');
|
||||
next.classList.add('o_we_pager_next', 'fa', 'fa-chevron-right');
|
||||
|
||||
const pagerControls = document.createElement('div');
|
||||
pagerControls.classList.add('o_we_pager_controls');
|
||||
pagerControls.appendChild(prev);
|
||||
pagerControls.appendChild(this.pageNum);
|
||||
pagerControls.appendChild(next);
|
||||
|
||||
this.pageName = document.createElement('b');
|
||||
const pagerHeader = document.createElement('div');
|
||||
pagerHeader.classList.add('o_we_pager_header');
|
||||
pagerHeader.appendChild(this.pageName);
|
||||
pagerHeader.appendChild(pagerControls);
|
||||
|
||||
await _super(...arguments);
|
||||
this.menuEl.classList.add('o_we_has_pager');
|
||||
$(this.menuEl).prepend(pagerHeader);
|
||||
this._updatePage();
|
||||
this.menuEl.classList.add('o_we_has_pager', 'position-fixed', 'top-0', 'end-0', 'z-index-1', 'rounded-0');
|
||||
this.menuTogglerEl.classList.add('o_we_toggler_pager');
|
||||
|
||||
this.__onScroll = throttleForAnimation(this._onScroll.bind(this));
|
||||
this.el.querySelector('.o_pager_container').addEventListener('scroll', this.__onScroll);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
destroy() {
|
||||
this._super(...arguments);
|
||||
this.el.querySelector('.o_pager_container').removeEventListener('scroll', this.__onScroll);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
@@ -2493,18 +2484,7 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
|
||||
* @override
|
||||
*/
|
||||
_shouldIgnoreClick(ev) {
|
||||
return !!ev.target.closest('.o_we_pager_header') || this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* Updates the pager's page number display.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_updatePage() {
|
||||
this.pages.forEach((page, i) => page.classList.toggle('active', i === this.currentPage));
|
||||
this.pageNum.textContent = `${this.currentPage + 1}/${this.numPages}`;
|
||||
const activePage = this.pages.find((page, i) => i === this.currentPage);
|
||||
this.pageName.textContent = activePage.getAttribute('string');
|
||||
return !!ev.target.closest('.o_pager_nav') || this._super(...arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
@@ -2512,31 +2492,44 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Goes to the previous/next page with wrap-around.
|
||||
* Scrolls to the requested section.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_onPageChange(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const delta = ev.target.matches('.o_we_pager_next') ? 1 : -1;
|
||||
this.currentPage = (this.currentPage + this.numPages + delta) % this.numPages;
|
||||
this._updatePage();
|
||||
_onClickScrollPage(ev) {
|
||||
const navButtonEl = ev.currentTarget;
|
||||
const attribute = navButtonEl.dataset.scrollTo;
|
||||
const destinationOffset = this.menuEl.querySelector('.' + attribute).offsetTop;
|
||||
|
||||
const pagerContainerEl = this.menuEl.querySelector('.o_pager_container');
|
||||
const pagerNavEl = this.menuEl.querySelector('.o_pager_nav');
|
||||
pagerContainerEl.scrollTop = destinationOffset - pagerNavEl.offsetHeight;
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
* @private
|
||||
*/
|
||||
_onClick(ev) {
|
||||
const activeButton = this._getActiveSubWidget();
|
||||
if (activeButton) {
|
||||
const currentPage = this.pages.indexOf(activeButton.el.closest('we-select-page'));
|
||||
if (currentPage !== -1) {
|
||||
this.currentPage = currentPage;
|
||||
this._updatePage();
|
||||
}
|
||||
}
|
||||
return this._super(...arguments);
|
||||
_onClickCloseMenu(ev) {
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onScroll(ev) {
|
||||
const pagerContainerEl = ev.currentTarget;
|
||||
const pagerContainerHeight = pagerContainerEl.getBoundingClientRect().height;
|
||||
// The threshold for when a menu element is defined as 'active' is half
|
||||
// of the container's height. This has a drawback as if a section
|
||||
// is too small it might never get `active` if it's the last section.
|
||||
const threshold = pagerContainerEl.scrollTop + (pagerContainerHeight / 2);
|
||||
const anchorElements = this.menuEl.querySelectorAll('[data-scroll-to]');
|
||||
for (const anchorEl of anchorElements) {
|
||||
const destination = anchorEl.getAttribute('data-scroll-to');
|
||||
const sectionEl = this.menuEl.querySelector(`.${destination}`);
|
||||
const nextSectionEl = sectionEl.nextElementSibling;
|
||||
anchorEl.classList.toggle('active', sectionEl.offsetTop < threshold &&
|
||||
(!nextSectionEl || nextSectionEl.offsetTop > threshold));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const m2oRpcCache = {};
|
||||
@@ -5917,15 +5910,24 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
|
||||
|
||||
/**
|
||||
* @param {Element} containerEl
|
||||
* @param {boolean} labelIsDimension - Optional display imgsize attribute instead of animated
|
||||
* @returns {Element}
|
||||
*/
|
||||
const _addAnimatedShapeLabel = function addAnimatedShapeLabel(containerEl) {
|
||||
const _addAnimatedShapeLabel = function addAnimatedShapeLabel(containerEl, labelIsDimension = false) {
|
||||
const labelEl = document.createElement('span');
|
||||
labelEl.classList.add('o_we_shape_animated_label');
|
||||
const labelStr = _t("Animated");
|
||||
labelEl.textContent = labelStr[0];
|
||||
let labelStr = _t("Animated");
|
||||
const spanEl = document.createElement('span');
|
||||
spanEl.textContent = labelStr.substr(1);
|
||||
if (labelIsDimension) {
|
||||
const dimensionIcon = document.createElement('i');
|
||||
labelStr = containerEl.dataset.imgSize;
|
||||
dimensionIcon.classList.add('fa', 'fa-expand');
|
||||
labelEl.append(dimensionIcon);
|
||||
spanEl.textContent = labelStr;
|
||||
} else {
|
||||
labelEl.textContent = labelStr[0];
|
||||
spanEl.textContent = labelStr.substr(1);
|
||||
}
|
||||
labelEl.appendChild(spanEl);
|
||||
containerEl.classList.add('position-relative');
|
||||
containerEl.appendChild(labelEl);
|
||||
@@ -6340,6 +6342,8 @@ registry.ImageTools = ImageHandlerOption.extend({
|
||||
|
||||
if (btn.dataset.animated) {
|
||||
_addAnimatedShapeLabel(btn);
|
||||
} else if (btn.dataset.imgSize) {
|
||||
_addAnimatedShapeLabel(btn, true);
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -7208,7 +7212,7 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
|
||||
* @param {String} shapeId identifier of the shape
|
||||
*/
|
||||
_getShapeDefaultColors(shapeId) {
|
||||
const $shapeContainer = this.$el.find(".o_we_shape_menu we-button[data-shape='" + shapeId + "'] div.o_we_shape");
|
||||
const $shapeContainer = this.$el.find(".o_we_bg_shape_menu we-button[data-shape='" + shapeId + "'] div.o_we_shape");
|
||||
const shapeContainer = $shapeContainer[0];
|
||||
const shapeSrc = shapeContainer && getBgImageURL(shapeContainer);
|
||||
const url = new URL(shapeSrc, window.location.origin);
|
||||
|
||||
@@ -117,6 +117,7 @@ $o-we-sidebar-width: 288px !default; // This includes $o-we-sidebar-border-width
|
||||
$o-we-sidebar-top-height: 46px !default;
|
||||
|
||||
$o-we-sidebar-tabs-size-ratio: 1 !default;
|
||||
$o-we-sidebar-tabs-height: 3rem;
|
||||
$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
|
||||
$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
|
||||
$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
|
||||
|
||||
@@ -273,9 +273,11 @@
|
||||
#snippets_menu {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
background-color: $o-we-sidebar-tabs-bg;
|
||||
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
|
||||
color: $o-we-sidebar-tabs-color;
|
||||
height: $o-we-sidebar-tabs-height;
|
||||
|
||||
> button {
|
||||
@extend %we-generic-tab-button;
|
||||
@@ -697,6 +699,11 @@
|
||||
|
||||
we-toggler {
|
||||
@include we-icon-button('\f0d7');
|
||||
|
||||
&.o_we_toggler_pager {
|
||||
@include we-icon-button('\f105');
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
|
||||
> img, > svg {
|
||||
@@ -704,7 +711,7 @@
|
||||
}
|
||||
|
||||
+ * {
|
||||
display: none !important;
|
||||
display: none;
|
||||
border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
|
||||
border-radius: $o-we-item-border-radius;
|
||||
background-color: $o-we-sidebar-content-field-dropdown-bg;
|
||||
@@ -713,7 +720,12 @@
|
||||
&.active {
|
||||
@include we-icon-button('\f0d8');
|
||||
+ * {
|
||||
display: block !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .o_we_has_pager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -945,7 +957,7 @@
|
||||
&:not(.o_we_icon_select) we-toggler {
|
||||
@include large-component();
|
||||
}
|
||||
&.o_we_widget_opened .o_we_dropdown_caret {
|
||||
&:not(.o_we_select_pager).o_we_widget_opened .o_we_dropdown_caret {
|
||||
position: relative;
|
||||
display: block;
|
||||
align-self: flex-end;
|
||||
@@ -967,24 +979,67 @@
|
||||
border-right-width: ($o-we-item-spacing - 1px);
|
||||
}
|
||||
}
|
||||
&:not(.o_we_so_color_palette) + we-button:not(:hover) {
|
||||
&:not(.o_we_so_color_palette) + we-button:not(:hover):not(.o_we_image_shape_remove) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
we-toggler:empty::before {
|
||||
content: '/';
|
||||
content: attr(data-placeholder-text);
|
||||
}
|
||||
we-selection-items {
|
||||
@include o-position-absolute(100%, 0, auto, 0);
|
||||
z-index: $zindex-dropdown;
|
||||
&:not(.dropdown-menu) {
|
||||
margin-top: $o-we-sidebar-content-field-dropdown-spacing !important;
|
||||
}
|
||||
|
||||
&:not(.o_we_has_pager) {
|
||||
&:not(.o_we_has_pager) {
|
||||
@include o-position-absolute(100%, 0, auto, 0);
|
||||
z-index: $zindex-dropdown;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
&.o_we_has_pager {
|
||||
$o-offset-total-topbar: calc(#{$o-we-sidebar-top-height} + #{$o-we-sidebar-tabs-height});
|
||||
|
||||
width: $o-we-sidebar-width;
|
||||
max-height: calc(100% - #{$o-offset-total-topbar});
|
||||
margin-top: $o-offset-total-topbar;
|
||||
|
||||
we-title {
|
||||
padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
|
||||
background-color: $o-we-bg-light;
|
||||
line-height: $o-we-sidebar-content-main-title-height;
|
||||
}
|
||||
.o_pager_nav {
|
||||
background-color: $o-we-bg-light;
|
||||
|
||||
> div:first-child {
|
||||
padding-left: $o-we-item-spacing * 1.5;
|
||||
padding-top: $o-we-item-spacing;
|
||||
}
|
||||
}
|
||||
.o_pager_nav_title {
|
||||
padding-left: $o-we-item-spacing * 1.5;
|
||||
}
|
||||
.o_pager_nav_angle {
|
||||
@extend %we-generic-clickable;
|
||||
@include button-variant($o-we-bg-light, $o-we-bg-light);
|
||||
padding: $o-we-item-spacing / 2;
|
||||
font-size: $o-we-sidebar-font-size * 1.4;
|
||||
}
|
||||
.o_pager_nav_btn {
|
||||
@extend %we-generic-tab-button;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.o_pager_container {
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
background-color: $o-we-bg-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.dropdown-menu):not(.o_we_has_pager) {
|
||||
margin-top: $o-we-sidebar-content-field-dropdown-spacing;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
line-height: $o-we-sidebar-content-field-dropdown-item-height;
|
||||
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
|
||||
@@ -993,7 +1048,7 @@
|
||||
padding-left: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
|
||||
|
||||
&::before {
|
||||
content: '/';
|
||||
content: attr(data-placeholder-text);
|
||||
}
|
||||
}
|
||||
> we-title {
|
||||
@@ -1046,79 +1101,41 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_we_pager_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
|
||||
margin-bottom: 1px;
|
||||
|
||||
& > b {
|
||||
padding: $o-we-sidebar-content-field-label-spacing;
|
||||
color: $o-we-fg-lighter;
|
||||
}
|
||||
}
|
||||
.o_we_pager_controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
margin: 0 $o-we-sidebar-content-field-label-spacing;
|
||||
}
|
||||
}
|
||||
.o_we_pager_next, .o_we_pager_prev {
|
||||
margin: 0.3em;
|
||||
padding: $o-we-sidebar-content-field-label-spacing;
|
||||
cursor: pointer;
|
||||
border: $o-we-item-border-width solid currentColor;
|
||||
border-radius: $o-we-item-border-radius;
|
||||
}
|
||||
we-select-page {
|
||||
display: none;
|
||||
width: 100%;
|
||||
// Cut the last visible option in the list to understand that we can scroll.
|
||||
max-height: 75px * 7.5;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: $o-we-item-spacing / 2;
|
||||
padding: $o-we-item-spacing;
|
||||
background-color: $o-we-bg-lighter;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
we-select.o_we_user_value_widget.o_we_select_grid {
|
||||
we-select-page {
|
||||
|
||||
we-button img {
|
||||
height: $o-we-sidebar-content-field-dropdown-grid-item-height;
|
||||
width: $o-we-sidebar-content-field-dropdown-grid-item-height;
|
||||
}
|
||||
&.active {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
we-button {
|
||||
width: percentage(1 / 4);
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
flex-grow: 0;
|
||||
border-radius: 2px;
|
||||
border: $o-we-item-border-width solid $o-we-bg-darkest;
|
||||
|
||||
img {
|
||||
padding: $o-we-sidebar-content-field-spacing;
|
||||
}
|
||||
}
|
||||
we-button.active {
|
||||
border: 2px solid $o-we-color-success !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.o_we_fake_transparent_background {
|
||||
we-button {
|
||||
background-image: url(/web/static/img/transparent.png);
|
||||
background-size: 10px auto;
|
||||
@extend %o-preview-alpha-background;
|
||||
padding: $o-we-item-spacing;
|
||||
background-color: transparent;
|
||||
}
|
||||
// For background shapes
|
||||
we-button[data-shape] {
|
||||
grid-column: span 4;
|
||||
padding: 0;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
we-button.active {
|
||||
border: 4px solid $o-we-color-success;
|
||||
background-color: rgba($o-we-color-success, 0.2);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
we-button.o_we_image_shape_remove {
|
||||
div {
|
||||
display: flex;
|
||||
@@ -1906,7 +1923,6 @@
|
||||
|
||||
input[type=range] {
|
||||
pointer-events: none;
|
||||
focusable: false;
|
||||
grid-column: 1/span 2;
|
||||
grid-row: 3;
|
||||
background: none;
|
||||
@@ -2478,26 +2494,9 @@
|
||||
outline: 2px dashed $o-we-handles-accent-color;
|
||||
}
|
||||
|
||||
we-select.o_we_shape_menu {
|
||||
we-button[data-shape] {
|
||||
padding: 0 !important;
|
||||
|
||||
&.active {
|
||||
border: 1px solid $o-we-color-success !important;
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
.o_we_shape_btn_content {
|
||||
@extend %o-preview-alpha-background;
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_we_shape_animated_label {
|
||||
@include o-position-absolute(0, 0);
|
||||
padding: 0 6px;
|
||||
padding: 0 4px;
|
||||
background: $o-we-color-success;
|
||||
color: white;
|
||||
|
||||
@@ -2507,35 +2506,15 @@ we-select.o_we_shape_menu {
|
||||
}
|
||||
}
|
||||
|
||||
// Add average resolutions for the category "Devices" in image shapes.
|
||||
we-button[data-img-size] {
|
||||
position: relative;
|
||||
we-button:hover .o_we_shape_animated_label {
|
||||
i {
|
||||
padding-right: $o-we-item-spacing / 2;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
padding: 0 6px;
|
||||
background: $o-we-color-success;
|
||||
color: white;
|
||||
text-align: center;
|
||||
> span {
|
||||
max-width: $o-we-sidebar-width / 2;
|
||||
transition: max-width 0.5s ease 0s;
|
||||
}
|
||||
&::before {
|
||||
font-family: "FontAwesome" !important;
|
||||
content: "\f065";
|
||||
@include o-position-absolute(0, 0, inherit, inherit);
|
||||
}
|
||||
&::after {
|
||||
content: attr(data-img-size);
|
||||
@include o-position-absolute(0, 0, inherit, 0);
|
||||
transform: translateX(100%);
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
&:hover::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
we-button:hover .o_we_shape_animated_label > span {
|
||||
max-width: 150px;
|
||||
transition: max-width 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.o_we_ui_loading {
|
||||
|
||||
@@ -235,135 +235,167 @@
|
||||
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_shape_menu" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
|
||||
<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-select-page>
|
||||
<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-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-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>
|
||||
<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-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>
|
||||
<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>
|
||||
<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-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 data-shape="" data-name="shape_none_opt" data-dependencies="!shape_none_opt" data-no-preview="true" class="fa fa-fw fa-times"/>
|
||||
<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="fa fa-fw fa-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
|
||||
@@ -461,188 +493,221 @@
|
||||
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_select_grid o_we_fake_transparent_background">
|
||||
<we-select-page string="Geometrics">
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_square" data-select-label="Square"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door"/>
|
||||
<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-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-select-label="Square"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door"/>
|
||||
<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-select-page string="Geometrics Rounded">
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_circle" data-select-label="Circle"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)"/>
|
||||
<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 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"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)"/>
|
||||
<we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)"/>
|
||||
<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-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"/>
|
||||
</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"/>
|
||||
</we-select-page>
|
||||
|
||||
<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>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2"/>
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3"/>
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_4" data-select-label="Brush 4"/>
|
||||
</we-select-page>
|
||||
|
||||
<we-select-page string="Brushed">
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_1" data-select-label="Brush 1"/>
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2"/>
|
||||
<we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="true"/>
|
||||
</t>
|
||||
</we-select-page>
|
||||
|
||||
<we-select-page string="Composition">
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_organic_line" data-select-label="Organic Line"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="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"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="true"/>
|
||||
</t>
|
||||
</we-select-page>
|
||||
|
||||
<we-select-page string="Patterns">
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_cross" data-select-label="Organic Cross"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="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"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true"/>
|
||||
</t>
|
||||
</we-select-page>
|
||||
|
||||
<we-select-page string="Solids">
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_1" data-select-label="Blob 1"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4"/>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true"/>
|
||||
</t>
|
||||
</we-select-page>
|
||||
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="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>
|
||||
|
||||
<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="375 x 812"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="375 x 812"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="375 x 812"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="812 x 375"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="812 x 375"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="812 x 375"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="360 x 800"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="360 x 800"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="360 x 800"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="800 x 360"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="800 x 360"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="800 x 360"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="768 x 1024"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="768 x 1024"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="768 x 1024"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="1024 x 768"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="1024 x 768"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="1024 x 768"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="1280 x 720"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="1280 x 720"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="1280 x 720"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1280 x 800"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1280 x 800"/>
|
||||
<we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1280 x 800"/>
|
||||
<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>
|
||||
<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"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true"/>
|
||||
<we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="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 fa fa-fw fa-times"/>
|
||||
<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"/>
|
||||
</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"/>
|
||||
@@ -653,11 +718,9 @@
|
||||
</we-row>
|
||||
</div>
|
||||
|
||||
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
|
||||
|
||||
<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="ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
|
||||
<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"/>
|
||||
@@ -666,6 +729,8 @@
|
||||
</we-button>
|
||||
</we-row>
|
||||
|
||||
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
|
||||
|
||||
<we-button-group string="Width" 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>
|
||||
|
||||
Reference in New Issue
Block a user