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

[IMP] web_editor: add new "Zigs" background shape

Browse Source 
Related to task-2545200

closes odoo/odoo#77119

X-original-commit: 1624b1659d15df731a954912b88908a24aeddb5d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Cocographique
2021-09-24 01:50:16 +00:00
committed by qsm-odoo
parent ff1f5e6c8c
commit af666dff20
5 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/shapes/Zigs/06.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
<path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z"/>
</svg>
<svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
<path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z"/>
</svg>
</defs>
<svg>
<use xlink:href="#zigs06_top"/>
<use xlink:href="#zigs06_bottom"/>
</svg>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

addons/web_editor/static/shapes/convert.js
+4 -1
View File
@@ -3,6 +3,8 @@
The following script can be used to convert SVGs exported from illustrator into
a format that's compatible with the shape system. It runs with nodejs. Some
manual conversion may be necessary.
FIXME this script is out-dated.
*/
const fs = require('fs');
@@ -43,6 +45,7 @@ files.filter(f => f.endsWith('svg')).forEach(filePath => {
nonIsometric: fileName.includes('+'),
nonPaletteColors: nonPaletteColors && nonPaletteColors.length ? nonPaletteColors.join(' ') : null,
containsImage: svg.includes('<image'),
repeatX: fileName.includes('repeatx'),
repeatY: fileName.includes('repeaty'),
};
shape.optionXML = `<we-button data-shape="web_editor/${shape.page}/${shape.name}" data-select-label="${shape.page} ${shape.name}"/>`;
@@ -52,7 +55,7 @@ files.filter(f => f.endsWith('svg')).forEach(filePath => {
} else {
shape.size = '100% auto';
}
shape.scss = `'${shape.page}/${shape.name}': ('position': ${shape.position[0]}, 'size': ${shape.size}, 'colors': (${shape.colors.join(', ')})${shape.repeatY ? ", 'repeat-y': true" : ""})`;
shape.scss = `'${shape.page}/${shape.name}': ('position': ${shape.position[0]}, 'size': ${shape.size}, 'colors': (${shape.colors.join(', ')})${shape.repeatX ? ", 'repeat-x': true" : ""}${shape.repeatY ? ", 'repeat-y': true" : ""})`;
shapes.push(shape);
});
const xml = shapes.map(shape => shape.optionXML).join('\n');
addons/web_editor/static/src/scss/web_editor.frontend.scss
+3 -3
View File
@@ -68,9 +68,9 @@
background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
background-position: map-get($style, 'position');
background-size: map-get($style, 'size');
@if map-get($style, 'repeat-y') {
background-repeat: repeat-y;
}
background-repeat:
if(map-get($style, 'repeat-x'), repeat, no-repeat)
if(map-get($style, 'repeat-y'), repeat, no-repeat);
@each $mapping-name, $mapping in $extra-mappings {
$color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, $mapping or ());
addons/web_editor/static/src/scss/web_editor.variables.scss
+1
View File
@@ -783,6 +783,7 @@ $o-bg-shapes: ('web_editor': (
'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1)),
'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3)),
'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),
));
@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
addons/web_editor/views/snippets.xml
+1
View File
@@ -338,6 +338,7 @@
<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"/>