pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor: add label for animated shapes

Browse Source 
This commit adds a little label on the top corner of animated shapes
previews.

Part of #70843
task-2319488

Related: odoo/design-themes#17
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Brieuc-brd
2021-06-15 12:17:41 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent 0da5c12179
commit ebc56f7605
3 changed files with 59 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+11
View File
@@ -5139,6 +5139,17 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
btnContentInnerDiv.classList.add('o_we_shape');
btnContent.appendChild(btnContentInnerDiv);
if (btn.dataset.animated) {
const animatedLabelEl = document.createElement('span');
animatedLabelEl.classList.add('o_we_shape_animated_label');
const labelStr = _t("Animated");
animatedLabelEl.textContent = labelStr[0];
const spanEl = document.createElement('span');
spanEl.textContent = labelStr.substr(1);
animatedLabelEl.appendChild(spanEl);
btnContent.appendChild(animatedLabelEl);
}
const {shape} = btn.dataset;
const shapeEl = btnContent.querySelector('.o_we_shape');
shapeEl.classList.add(`o_${shape.replace(/\//g, '_')}`);
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+15
View File
@@ -2134,6 +2134,21 @@ we-select.o_we_shape_menu {
}
}
}
.o_we_shape_animated_label {
@include o-position-absolute(0, 0);
padding: 0 6px;
background: $o-we-color-success;
color: white;
> span {
@include o-text-overflow(inline-block);
max-width: 0;
}
}
we-button:hover .o_we_shape_animated_label > span {
max-width: 150px;
transition: max-width 0.5s ease 0s;
}
.o_we_ui_loading {
@include o-position-absolute(0, 0, 0, 0);
addons/web_editor/views/snippets.xml
+33 -33
View File
@@ -238,24 +238,24 @@
<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"/>
<we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11"/>
<we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12"/>
<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 &amp; 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"/>
<we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02"/>
<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"/>
<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"/>
<we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09"/>
<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">
@@ -263,10 +263,10 @@
<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"/>
<we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06"/>
<we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07"/>
<we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08"/>
<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"/>
@@ -275,7 +275,7 @@
<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"/>
<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"/>
@@ -289,7 +289,7 @@
<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"/>
<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"/>
@@ -319,37 +319,37 @@
<we-select-page string="Airy &amp; 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"/>
<we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04"/>
<we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05"/>
<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"/>
<we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13"/>
<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"/>
<we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02"/>
<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-select-page>
<we-select-page string="Floating shapes">
<we-button data-shape="web_editor/Floats/01" data-select-label="Float 01"/>
<we-button data-shape="web_editor/Floats/02" data-select-label="Float 02"/>
<we-button data-shape="web_editor/Floats/03" data-select-label="Float 03"/>
<we-button data-shape="web_editor/Floats/04" data-select-label="Float 04"/>
<we-button data-shape="web_editor/Floats/05" data-select-label="Float 05"/>
<we-button data-shape="web_editor/Floats/06" data-select-label="Float 06"/>
<we-button data-shape="web_editor/Floats/07" data-select-label="Float 07"/>
<we-button data-shape="web_editor/Floats/08" data-select-label="Float 08"/>
<we-button data-shape="web_editor/Floats/09" data-select-label="Float 09"/>
<we-button data-shape="web_editor/Floats/10" data-select-label="Float 10"/>
<we-button data-shape="web_editor/Floats/11" data-select-label="Float 11"/>
<we-button data-shape="web_editor/Floats/12" data-select-label="Float 12"/>
<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-select-page>
</we-select-pager>
<we-row string=" ⌙ Flip"><!-- &emsp; -->