From ab7016c8e129b8bc80c5ed5a40bf58a08e66f192 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 28 Jan 2020 17:26:37 +0000
Subject: [PATCH] [IMP] web_editor, *: make all editor left panel items inline

* 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>
---
 .../static/src/scss/wysiwyg_snippets.scss     | 39 ++++++++++++-------
 .../website/views/snippets/s_blockquote.xml   |  2 +-
 addons/website/views/snippets/s_chart.xml     |  2 +-
 addons/website/views/snippets/s_hr.xml        |  2 +-
 addons/website/views/snippets/s_popup.xml     |  8 ++--
 addons/website/views/snippets/s_rating.xml    |  6 +--
 addons/website/views/snippets/snippets.xml    | 18 ++++-----
 addons/website_sale/views/snippets.xml        |  2 +-
 8 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index c6d1e8fa394..5d610465f92 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -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;
                 }
             }
         }
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index e274b4a3cd6..0e3b6406fa1 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -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>
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index 574e78a9c52..cca0473204c 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -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>
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index 876d284f327..04b773dce48 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -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"
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index e9eaa8d1e86..4bec477b28c 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -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>
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
index 626cc2c5255..b9b29d8d5f3 100644
--- a/addons/website/views/snippets/s_rating.xml
+++ b/addons/website/views/snippets/s_rating.xml
@@ -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"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index ff05fe02a3e..7838a0da9e5 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -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-"
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index 2072ea2c5e5..3f8e62acfea 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -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>