[IMP] website, website_form: add position options ui icons

Part of https://github.com/odoo/odoo/pull/54913
task-2157252

closes odoo/odoo#54913

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

5 files changed, 59 insertions, 6 deletions

diff --git a/addons/website/static/src/img/snippets_options/pos_bottom.svg b/addons/website/static/src/img/snippets_options/pos_bottom.svg
new file mode 100644
index 00000000000..f4a83988054
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_bottom.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_8" transform="translate(-240 -5)">
+      <g class="pos_bottom" transform="translate(240 5)">
+        <rect width="20" height="12" class="bg"/>
+        <polygon fill="#D8D8D8" points="9.426 2.444 6 2.444 6 5.556 9.426 5.556 9.426 8 14 4 9.426 0" class="o_graphic" transform="rotate(90 10 4)"/>
+        <rect width="16" height="1" x="2" y="10" fill="#D8D8D8" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_left.svg b/addons/website/static/src/img/snippets_options/pos_left.svg
new file mode 100644
index 00000000000..446e392b13b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_left.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_8" transform="translate(-172 -5)">
+      <g class="pos_left" transform="translate(172 5)">
+        <rect width="20" height="12" class="bg"/>
+        <polygon fill="#D8D8D8" points="11.054 4.444 7 4.444 7 7.556 11.054 7.556 11.054 10 17 6 11.054 2" class="o_graphic" transform="matrix(-1 0 0 1 24 0)"/>
+        <rect width="1" height="12" x="4" fill="#D8D8D8" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_right.svg b/addons/website/static/src/img/snippets_options/pos_right.svg
new file mode 100644
index 00000000000..8990d7cdaf2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_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_8" transform="translate(-138 -5)">
+      <g class="pos_right" transform="translate(138 5)">
+        <rect width="20" height="12" class="bg"/>
+        <polygon fill="#D8D8D8" points="7.054 4.444 3 4.444 3 7.556 7.054 7.556 7.054 10 13 6 7.054 2" class="o_graphic"/>
+        <rect width="1" height="12" x="15" fill="#D8D8D8" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_top.svg b/addons/website/static/src/img/snippets_options/pos_top.svg
new file mode 100644
index 00000000000..df5adfe19be
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/pos_top.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_8" transform="translate(-204 -5)">
+      <g class="pos_top" transform="translate(204 5)">
+        <rect width="20" height="12" class="bg"/>
+        <polygon fill="#D8D8D8" points="9.426 5.444 6 5.444 6 8.556 9.426 8.556 9.426 11 14 7 9.426 3" class="o_graphic" transform="rotate(-90 10 7)"/>
+        <rect width="16" height="1" x="2" fill="#D8D8D8" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index cebfd8959c5..33df0175990 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -93,12 +93,21 @@
                 <we-button data-multi-checkbox-display="vertical">Vertical</we-button>
             </we-select>
             <we-input string="Label Name" class="o_we_large_input" data-set-label-text=""/>
-            <we-select string="Label Position" data-no-preview="true">
-                <we-button data-select-label-position="none">None</we-button>
-                <we-button data-select-label-position="top">Top</we-button>
-                <we-button data-select-label-position="left">Left</we-button>
-                <we-button data-select-label-position="right">Right</we-button>
-            </we-select>
+            <we-button-group string="Label Position" data-no-preview="true">
+                <we-button title="Hide"
+                           data-select-label-position="none">
+                    <i class="fa fa-eye-slash"/>
+                </we-button>
+                <we-button title="Top"
+                           data-select-label-position="top"
+                           data-img="/website/static/src/img/snippets_options/pos_top.svg"/>
+                <we-button title="Left"
+                           data-select-label-position="left"
+                           data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
+                <we-button title="Right"
+                           data-select-label-position="right"
+                           data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
+            </we-button-group>
             <we-input string="Input Placeholder" class="o_we_large_input" data-name="placeholder_opt" data-set-placeholder=""/>
             <we-checkbox string="Required" data-name="required_opt" data-no-preview="true"
                 data-toggle-required="s_website_form_required"/>