From 3906bd33e8a11cf31d2796f2026c53b6256f0e94 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 24 Jul 2020 09:48:05 +0000
Subject: [PATCH] [IMP] website: review options UI for media list

Reword custom controls for image position and content vertical
alignment. Use different icons set according to the selected image
position.

Part of https://github.com/odoo/odoo/pull/54913
task-2157252
---
 .../snippets_options/align_bottom_right.svg   | 11 +++
 .../snippets_options/align_middle_right.svg   | 11 +++
 .../img/snippets_options/align_top_right.svg  | 11 +++
 .../src/img/snippets_options/image_left.svg   | 10 +++
 .../src/img/snippets_options/image_right.svg  | 10 +++
 .../img/snippets_options/media_layout_1_2.svg | 10 +++
 .../media_layout_1_2_right.svg                | 10 +++
 .../img/snippets_options/media_layout_1_3.svg | 10 +++
 .../media_layout_1_3_right.svg                | 10 +++
 .../img/snippets_options/media_layout_1_4.svg | 10 +++
 .../media_layout_1_4_right.svg                | 10 +++
 .../website/views/snippets/s_media_list.xml   | 72 +++++++++++++++----
 12 files changed, 170 insertions(+), 15 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_options/align_bottom_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/align_middle_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/align_top_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/image_left.svg
 create mode 100644 addons/website/static/src/img/snippets_options/image_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_2.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_3.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_4.svg
 create mode 100644 addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg

diff --git a/addons/website/static/src/img/snippets_options/align_bottom_right.svg b/addons/website/static/src/img/snippets_options/align_bottom_right.svg
new file mode 100644
index 00000000000..9cea3be7ce4
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_bottom_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_4" transform="translate(-203 -5)">
+      <g class="align_bottom_right" transform="translate(203 5)">
+        <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="9" height="6" x="11" y="6" fill="#FFF" class="o_graphic"/>
+        <polygon fill="#B8B8B8" points="11 0 20 0 20 1 11 1" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_middle_right.svg b/addons/website/static/src/img/snippets_options/align_middle_right.svg
new file mode 100644
index 00000000000..9ee12c3bd04
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_middle_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_4" transform="translate(-173 -5)">
+      <g class="align_middle_right" transform="translate(173 5)">
+        <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+        <path fill="#B8B8B8" d="M20 11v1h-9v-1h9zM11 0h9v1h-9V0z" class="o_subdle"/>
+        <rect width="9" height="6" x="11" y="3" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/align_top_right.svg b/addons/website/static/src/img/snippets_options/align_top_right.svg
new file mode 100644
index 00000000000..ed84020e788
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/align_top_right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_4" transform="translate(-139 -5)">
+      <g class="align_top_right" transform="translate(139 5)">
+        <rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="9" height="1" x="11" y="11" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="9" height="6" x="11" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_left.svg b/addons/website/static/src/img/snippets_options/image_left.svg
new file mode 100644
index 00000000000..66fc80d9d10
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/image_left.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_5" transform="translate(-137 -5)">
+      <g class="image_left" transform="translate(137 5)">
+        <rect width="8" height="11" x="16" fill="#B8B8B8" class="o_subdle"/>
+        <path fill="#FFF" d="M0 0h13v11H0V0zm1 1h11v9H1V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375A1.275 1.275 0 0 1 2 3.286c0-.357.118-.661.355-.911S2.88 2 3.22 2c.338 0 .626.125.863.375s.356.554.356.91zm6.5 2.571v3H2V7.571L4.031 5.43 5.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_right.svg b/addons/website/static/src/img/snippets_options/image_right.svg
new file mode 100644
index 00000000000..8cc4ddca000
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/image_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_5" transform="translate(-171 -5)">
+      <g class="image_right" transform="translate(171 5)">
+        <rect width="8" height="11" fill="#B8B8B8" class="o_subdle"/>
+        <path fill="#FFF" d="M11 0h13v11H11V0zm1 1h11v9H12V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375a1.275 1.275 0 0 1-.355-.91c0-.357.118-.661.355-.911S13.88 2 14.22 2c.338 0 .626.125.863.375s.355.554.355.91zm6.5 2.571v3H13V7.571l2.031-2.142L16.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_2.svg b/addons/website/static/src/img/snippets_options/media_layout_1_2.svg
new file mode 100644
index 00000000000..f83de7d4c46
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_3" transform="translate(-170 -7)">
+      <g class="media_layout_1_2" transform="translate(170 7)">
+        <rect width="10" height="8" x="13" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="11" height="8" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
new file mode 100644
index 00000000000..70519f1f284
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_6" transform="translate(-171 -7)">
+      <g class="media_layout_1_2_right" transform="translate(171 7)">
+        <rect width="10" height="8" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="11" height="8" x="12" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_3.svg b/addons/website/static/src/img/snippets_options/media_layout_1_3.svg
new file mode 100644
index 00000000000..475877a2c03
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_3" transform="translate(-204 -7)">
+      <g class="media_layout_1_3" transform="translate(204 7)">
+        <rect width="14" height="8" x="9" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="7" height="8" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
new file mode 100644
index 00000000000..215a3115c70
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_6" transform="translate(-204 -7)">
+      <g class="media_layout_1_3_right" transform="translate(204 7)">
+        <rect width="14" height="8" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="7" height="8" x="16" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_4.svg b/addons/website/static/src/img/snippets_options/media_layout_1_4.svg
new file mode 100644
index 00000000000..dd6e24c70c9
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_3" transform="translate(-137 -7)">
+      <g class="media_layout_1_4" transform="translate(137 7)">
+        <rect width="18" height="8" x="5" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="3" height="8" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg b/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg
new file mode 100644
index 00000000000..219233dcc53
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_6" transform="translate(-137 -7)">
+      <g class="media_layout_1_4_right" transform="translate(137 7)">
+        <rect width="18" height="8" fill="#B8B8B8" class="o_subdle"/>
+        <rect width="3" height="8" x="20" fill="#FFF" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index b127318cf3e..76720cc29bb 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -59,24 +59,66 @@
             <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
         <div data-selector=".s_media_list_item" data-target="> .row">
-            <we-button-group string="Image Position">
-                <we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
-                <we-button title="Right" data-select-class="flex-row-reverse"><i class="fa fa-fw fa-align-right"/></we-button>
-            </we-button-group>
-            <!-- Don't use the standard Vert. Alignement option to not suggest
-                 Equal Height, which is useless for this snippet -->
-            <we-button-group string="Vert. Alignment" title="Vertical Alignment">
-                <we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
-                <we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
-                <we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+            <we-button-group string="Layout">
+                <we-button title="Left"
+                           data-name="media_left_opt"
+                           data-select-class=""
+                           data-img="/website/static/src/img/snippets_options/image_left.svg"/>
+                <we-button title="Right"
+                           data-select-class="flex-row-reverse"
+                           data-img="/website/static/src/img/snippets_options/image_right.svg"/>
             </we-button-group>
         </div>
         <div data-js="MediaItemLayout" data-selector=".s_media_list_item">
-            <we-select string="Layout">
-                <we-button data-layout="6">1/2 - 1/2</we-button>
-                <we-button data-layout="4">1/3 - 2/3</we-button>
-                <we-button data-layout="3">1/4 - 3/4</we-button>
-            </we-select>
+            <we-button-group string="Image Size" data-dependencies="media_left_opt">
+                <we-button data-layout="3"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_4.svg"
+                           title="1/4 - 3/4"/>
+                <we-button data-layout="4"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_3.svg"
+                           title="1/3 - 2/3"/>
+                <we-button data-layout="6"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_2.svg"
+                           title="1/2 - 1/2"/>
+            </we-button-group>
+            <we-button-group string="Image Size" data-dependencies="!media_left_opt">
+                <we-button data-layout="3"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_4_right.svg"
+                           title="1/4 - 3/4"/>
+                <we-button data-layout="4"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_3_right.svg"
+                           title="1/3 - 2/3"/>
+                <we-button data-layout="6"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_2_right.svg"
+                           title="1/2 - 1/2"/>
+            </we-button-group>
+        </div>
+
+        <div data-selector=".s_media_list_item" data-target="> .row">
+            <!-- Don't use the standard Vert. Alignement option to not suggest
+                 Equal Height, which is useless for this snippet. -->
+            <we-button-group string="Text Position" title="Text Position" data-dependencies="media_left_opt">
+                <we-button title="Align Top"
+                           data-select-class="align-items-start"
+                           data-img="/website/static/src/img/snippets_options/align_top_right.svg"/>
+                <we-button title="Align Middle"
+                           data-select-class="align-items-center"
+                           data-img="/website/static/src/img/snippets_options/align_middle_right.svg"/>
+                <we-button title="Align Bottom"
+                           data-select-class="align-items-end"
+                           data-img="/website/static/src/img/snippets_options/align_bottom_right.svg"/>
+            </we-button-group>
+            <we-button-group string="Text Position" title="Text Position" data-dependencies="!media_left_opt">
+                <we-button title="Align Top"
+                           data-select-class="align-items-start"
+                           data-img="/website/static/src/img/snippets_options/align_top.svg"/>
+                <we-button title="Align Middle"
+                           data-select-class="align-items-center"
+                           data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
+                <we-button title="Align Bottom"
+                           data-select-class="align-items-end"
+                           data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
+            </we-button-group>
         </div>
     </xpath>
 </template>