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

[IMP] web_editor, *: make all editor left panel items inline

Browse Source 
* website, website_sale

The design will be deeply reviewed in a future update. This commit is
just about unifying it and making sure no element is cut/overflowing.

-> All items are now inline automatically
-> If there is no enough space, it becomes full-width over two lines
   automatically (this can be forced with the o_we_fw class)
-> Force to stay on one line with the o_we_force_inline class

closes odoo/odoo#44142

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-01-29 10:30:38 +00:00
parent df29632282
commit ab7016c8e1
8 changed files with 45 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+25 -14
View File
@@ -323,7 +323,8 @@ body.editor_enable.editor_has_snippets {
.o_we_user_value_widget {
flex: 1 1 auto;
display: block;
min-width: 0;
@extend %o-we-inline;
> div {
display: flex;
@@ -345,7 +346,7 @@ body.editor_enable.editor_has_snippets {
// Checkboxes
.o_we_checkbox_wrapper.o_we_user_value_widget {
@extend .o_we_inline;
@extend .o_we_force_inline;
flex: 0 0 auto;
padding: 0;
border: none;
@@ -419,7 +420,7 @@ body.editor_enable.editor_has_snippets {
// Color Pickers
.o_we_so_color_palette.o_we_user_value_widget {
@extend .o_we_inline;
@extend .o_we_force_inline;
flex: 0 0 auto;
.o_we_color_preview {
@@ -484,7 +485,8 @@ body.editor_enable.editor_has_snippets {
we-row {
position: relative;
flex: 1 1 auto;
display: block;
min-width: 0;
@extend %o-we-inline;
> div {
display: flex;
@@ -501,18 +503,27 @@ body.editor_enable.editor_has_snippets {
}
}
.o_we_inline {
&, &.o_we_user_value_widget {
display: flex;
align-items: center;
%o-we-inline:not(.o_we_fw) {
display: flex;
flex-flow: row wrap;
align-items: center;
> we-title {
@include o-text-overflow();
max-width: 95%;
min-width: 30%;
margin-right: 5%;
}
> div {
flex: 1 1 auto;
min-width: 30%;
}
&.o_we_force_inline {
flex-flow: row nowrap;
> we-title {
@include o-text-overflow();
min-width: 60%;
margin-right: 5%;
}
> div {
flex: 1 1 auto;
min-width: 0;
}
}
}
addons/website/views/snippets/s_blockquote.xml
+1 -1
View File
@@ -24,7 +24,7 @@
</xpath>
<xpath expr="//div[@data-js='background']" position="before">
<div data-js="Blockquote" data-selector=".s_blockquote">
<we-select string="Display" class="o_we_inline">
<we-select string="Display">
<we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
<we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
<we-button data-select-class="s_blockquote_minimalist" data-display="minimalist">Minimalist</we-button>
addons/website/views/snippets/s_chart.xml
+1 -1
View File
@@ -64,7 +64,7 @@
data-color-change=""
data-attribute-name="borderColor"
data-no-preview="true"/>
<we-input class="o_we_inline" string="Border Width" data-select-data-attribute="2px" data-attribute-name="borderWidth" data-unit="px"/>
<we-input string="Border Width" data-select-data-attribute="2px" data-attribute-name="borderWidth" data-unit="px"/>
</div>
</xpath>
</template>
addons/website/views/snippets/s_hr.xml
+1 -1
View File
@@ -10,7 +10,7 @@
<template id="s_hr_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_hr" data-target="hr">
<we-row string="Thickness" class="o_we_inline">
<we-row string="Thickness">
<we-colorpicker
data-select-style="true"
data-css-property="border-color"
addons/website/views/snippets/s_popup.xml
+4 -4
View File
@@ -34,11 +34,11 @@
<template id="s_popup_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="SnippetPopup" data-selector=".s_popup" data-target=".s_popup_main">
<we-select string="Position" class="o_we_inline">
<we-select string="Position">
<we-button data-set-layout="modal" data-name="position_centered">Center</we-button>
<we-button data-set-layout="fixed">Bottom</we-button>
</we-select>
<we-select string="Size" data-apply-to=".s_popup_frame" class="o_we_inline">
<we-select string="Size" data-apply-to=".s_popup_frame">
<we-button data-select-class="modal-sm">Small</we-button>
<we-button data-select-class="modal-md">Medium</we-button>
<we-button data-select-class="modal-lg">Large</we-button>
@@ -48,11 +48,11 @@
<we-colorpicker string="Backdrop Color" data-select-style="true"
data-css-property="background-color" data-color-prefix="bg-" data-dependencies="position_centered"/>
<we-colorpicker string="Text Color" data-select-style="true" data-css-property="color" data-color-prefix="text-"/>
<we-select string="Display" data-attribute-name="display" data-attribute-default-value="always" class="o_we_inline">
<we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
<we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
<we-button data-select-data-attribute="mouseExit">On Exit</we-button>
</we-select>
<we-input class="o_we_inline" string="Delay" data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
<we-input string="Delay" data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
<we-select string="Show on" data-no-preview="true">
<we-button data-move-block="moveToBody">This page</we-button>
<we-button data-move-block="moveToFooter">All pages</we-button>
addons/website/views/snippets/s_rating.xml
+3 -3
View File
@@ -29,7 +29,7 @@
<we-button data-set-icons="fa-heart"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
<we-button data-set-icons="custom" class="d-none">Custom</we-button>
</we-select>
<we-row string="Active Icon" class="o_we_inline">
<we-row string="Active Icon">
<we-colorpicker
data-select-style=""
data-apply-to=".s_rating_active_icons"
@@ -37,7 +37,7 @@
data-color-prefix="text-"/>
<we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true"></we-button>
</we-row>
<we-row string="Inactive Icon" class="o_we_inline">
<we-row string="Inactive Icon">
<we-colorpicker
data-select-style=""
data-apply-to=".s_rating_inactive_icons"
@@ -45,7 +45,7 @@
data-color-prefix="text-"/>
<we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true"></we-button>
</we-row>
<we-row string="Score" class="o_we_inline">
<we-row string="Score">
<we-input data-active-icons-number="true" data-step="1"/>
<span>/</span>
<we-input data-total-icons-number="true" data-step="1"/>
addons/website/views/snippets/snippets.xml
+9 -9
View File
@@ -123,14 +123,14 @@
</template>
<template id="website.snippet_options_border">
<we-row string="Border" class="o_we_inline">
<we-row string="Border">
<we-colorpicker data-dependencies="border_width_opt"
data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
<we-input class="o_we_inline" data-name="border_width_opt"
<we-input data-name="border_width_opt"
data-select-style="0" data-css-property="border-width"
data-unit="px" data-extra-class="border"/>
</we-row>
<we-input string="Rounded" class="o_we_inline"
<we-input string="Rounded"
data-dependencies="border_width_opt"
data-select-style="0" data-css-property="border-radius"
data-unit="px" data-extra-class="rounded"/>
@@ -193,7 +193,7 @@
<we-divider/>
<we-button data-select-class="s_carousel_default">Default</we-button>
</we-select>
<we-input string="Speed" class="o_we_inline"
<we-input string="Speed"
data-select-data-attribute="0s" data-attribute-name="interval"
data-unit="s" data-save-unit="ms" data-step="0.1"/>
</div>
@@ -251,7 +251,7 @@
<div data-js="background" string="Background"
data-selector="section, .parallax, .carousel-item"
data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item">
<we-imagepicker class="o_we_inline" string="Background" data-background="" data-allow-videos=":not(.parallax, .s_parallax_bg)" data-first-filters="background"/>
<we-imagepicker string="Background" data-background="" data-allow-videos=":not(.parallax, .s_parallax_bg)" data-first-filters="background"/>
</div>
<!-- Background Image Size/Position -->
@@ -392,7 +392,7 @@
data-drop-near=".o_mega_menu .nav-link"/>
<div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
<we-imagepicker class="o_we_inline" string="Cover" data-background="" data-first-filters="cover"/>
<we-imagepicker string="Cover" data-background="" data-first-filters="cover"/>
<we-select string="Size" data-cover-opt-name="size">
<we-button data-select-class="o_record_has_cover o_full_screen_height">Full Screen</we-button>
<we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover o_half_screen_height">Half Screen</we-button>
@@ -433,7 +433,7 @@
<!-- Stretch section -->
<div data-selector="section"
data-target="> .container, > .container-fluid, > .o_container_small">
<we-select string="Width" class="o_we_inline">
<we-select string="Width">
<we-button data-select-class="container-fluid">Full</we-button>
<we-button data-select-class="container">Regular</we-button>
<we-button data-select-class="o_container_small">Small</we-button>
@@ -442,7 +442,7 @@
<!-- Min height of section -->
<div data-selector="section">
<we-select string="Height" class="o_we_inline">
<we-select string="Height">
<we-button data-select-class="">Fit content</we-button>
<we-button data-select-class="o_half_screen_height">Half screen</we-button>
<we-button data-select-class="o_full_screen_height">Full screen</we-button>
@@ -450,7 +450,7 @@
</div>
<!-- Scroll to next section button (only for full height) -->
<div data-js="ScrollButton" data-selector="section">
<we-row string="Scroll down button" class="o_we_inline o_scroll_button_opt">
<we-row string="Scroll down button" class="o_scroll_button_opt">
<we-colorpicker data-select-style="true"
data-css-property="color"
data-color-prefix="text-"
addons/website_sale/views/snippets.xml
+1 -1
View File
@@ -56,7 +56,7 @@
<div data-js="WebsiteSaleGridLayout"
data-selector="#products_grid .o_wsale_products_grid_table_wrapper > table"
data-no-check="true">
<we-input string="Number of products" class="o_we_inline" data-set-ppg="" data-no-preview="true"/>
<we-input string="Number of products" data-set-ppg="" data-no-preview="true"/>
<we-select string="Number of Columns" class="o_wsale_ppr_submenu" data-no-preview="true">
<we-button data-set-ppr="2">2</we-button>
<we-button data-set-ppr="3">3</we-button>