From 49f68451aecf1250d53edff7c679ad15a0c3869a Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Fri, 12 Nov 2021 15:31:49 +0100
Subject: [PATCH] Update profile menu and change UX

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
---
 .../src/Components/Menu/ProfileSubMenu.svelte | 57 +++++++++++++++----
 .../images/btn-menu-profile-camera.svg        |  1 +
 .../images/btn-menu-profile-companion.svg     |  1 +
 .../images/btn-menu-profile-identity.svg      |  1 +
 .../images/btn-menu-profile-woka.svg          |  1 +
 5 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 front/src/Components/images/btn-menu-profile-camera.svg
 create mode 100644 front/src/Components/images/btn-menu-profile-companion.svg
 create mode 100644 front/src/Components/images/btn-menu-profile-identity.svg
 create mode 100644 front/src/Components/images/btn-menu-profile-woka.svg

diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
index e543096e..9aeabdc3 100644
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@@ -12,6 +12,10 @@
     import {localUserStore} from "../../Connexion/LocalUserStore";
     import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {enableCameraSceneVisibilityStore} from "../../Stores/MediaStore";
+    import btnProfileSubMenuCamera from "../images/btn-menu-profile-camera.svg";
+    import btnProfileSubMenuIdentity from "../images/btn-menu-profile-identity.svg";
+    import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
+    import btnProfileSubMenuWoka from "../images/btn-menu-profile-woka.svg";
 
 
     function disableMenuStores(){
@@ -57,12 +61,22 @@
 <div class="customize-main">
     <div class="submenu">
         <section>
-            <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
-            <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
-            <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
-        </section>
-        <section>
-            <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>
+                <img src={btnProfileSubMenuIdentity} alt="Edit your name">
+                <span class="btn-hover">Edit your name</span>
+            </button>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
+                <img src={btnProfileSubMenuWoka} alt="Edit your WOKA">
+                <span class="btn-hover">Edit your WOKA</span>
+            </button>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
+                <img src={btnProfileSubMenuCompanion} alt="Edit your companion">
+                <span class="btn-hover">Edit your companion</span>
+            </button>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>
+                <img src={btnProfileSubMenuCamera} alt="Edit your camera">
+                <span class="btn-hover">Edit your camera</span>
+            </button>
         </section>
     </div>
 
@@ -85,16 +99,39 @@
 </div>
 
 <style lang="scss">
-    div.customize-submenu{
-
-    }
     div.customize-main{
       width: 100%;
       display: inline-flex;
 
       div.submenu{
         height: 100%;
-        width: 180px;
+        width: 50px;
+
+        button {
+          transition: all .5s ease;
+          text-align: left;
+          white-space: nowrap;
+          margin-bottom: 10px;
+          max-height: 44px;
+
+          img {
+            height: 26px;
+            width: 26px;
+            cursor: pointer;
+          }
+
+          span.btn-hover{
+            display: none;
+          }
+
+          &:hover{
+            width: auto;
+
+            span.btn-hover {
+              display: initial;
+            }
+          }
+        }
       }
 
       div.content {
diff --git a/front/src/Components/images/btn-menu-profile-camera.svg b/front/src/Components/images/btn-menu-profile-camera.svg
new file mode 100644
index 00000000..6135cc74
--- /dev/null
+++ b/front/src/Components/images/btn-menu-profile-camera.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g id="btn_setup_camera" data-name="btn setup camera"><circle cx="24.71" cy="13.11" r="1.46"/><path d="M8.65,23.34H40.78V2.89H31.16L28.24,0h-7L18.27,2.89H8.65ZM32,8.73h2.92v2.92H32Zm-7.31,0a4.39,4.39,0,1,1-4.38,4.38A4.39,4.39,0,0,1,24.71,8.73Z"/><path d="M2.81,44H5.73v5.84h8.76V44h5.84V46.9h2.92V44h5.84V46.9H32V44h5.84V46.9h2.92V44h5.84V41.06h-33l-3.52-3.53L6.58,41.06H2.81Z"/><path d="M2.81,32.3H8.65v2.92h2.92V32.3h5.84v2.92h2.92V32.3h5.84v2.92h2.92V32.3h5.85v5.84H43.7V32.3h2.92V29.37H42.84l-3.52-3.52-3.53,3.52h-33Z"/></g></svg>
\ No newline at end of file
diff --git a/front/src/Components/images/btn-menu-profile-companion.svg b/front/src/Components/images/btn-menu-profile-companion.svg
new file mode 100644
index 00000000..b0dae915
--- /dev/null
+++ b/front/src/Components/images/btn-menu-profile-companion.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50"><g id="btn_setup_companion" data-name="btn setup companion"><g id="iNhyGC.tif"><image id="Layer_0" data-name="Layer 0" width="15" height="30" transform="translate(13.21 0.25) scale(1.65)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAfCAYAAADupU20AAAACXBIWXMAAAbEAAAGxAGo1xHEAAAB20lEQVQ4T51UO04DMRScRYmEhGWlApRsBcUap4VUXICSjpqaY3ACSgpOgERQKnpoNjXRhjrkANZGikRhiuDH8w8BI7l5n/H4fVxYaxFC66FnnM1eiyjoC53QoPXQjkYnkS1HUnAFWg+tUhXatsVi8Q4AUKqClBJ1PU0q8RTMZq+Fk++CU4o4oiekbjHGhCbCVtbzS/xIwGuSQ/GbNgL5VkYEWg9tWQ4ghCCb60qKJGqjS5ZSkt0YkyWhGjjZYTIASClJUfg8r4hKVWiaOYwx0WmaOZSqEKIDfEu/PDvGHYCmmUeBSlW4PDvGTdt6o00Krq8uAIDkl+UASlUoy4Fnd3EOHXc7AOzu7QN4o/l3ie79G/+G3Kkojo50svI5hB3pAOnK5xDG0TLV9ZSMqe3jft4NKuLt/Qu6qzXG40m0fcYYjMcTdFdr3N6/eL4tYDOqhwc9AMDT4wNScPbDg563XFTEfr8P+3C6MZ4/RwTct1wuqYiFtTa5A3U9RXe1xsfONtUktRNUxMXi3Rua0egExhgi5MkcRFCWA3I6IgD0Xu7jJEQghKDE8BaX6OI4vE9VCEE38r3nqx7CW2c+9yFy00oE/x1lInDTlyPi3eCgP5F/VanPM+dPfut/wScEgxZt/KHdLgAAAABJRU5ErkJggg=="/></g></g></svg>
\ No newline at end of file
diff --git a/front/src/Components/images/btn-menu-profile-identity.svg b/front/src/Components/images/btn-menu-profile-identity.svg
new file mode 100644
index 00000000..1c2e5d43
--- /dev/null
+++ b/front/src/Components/images/btn-menu-profile-identity.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g id="btn_setup_identity" data-name="btn setup identity"><path d="M31.94,6l-4.35,6.39a3.63,3.63,0,1,1-3.07-1.7,3.71,3.71,0,0,1,.67.06l4-5.89a16,16,0,0,0-9.37,0L17,.76a1.45,1.45,0,0,0-2.4,1.64L17.09,6A16,16,0,0,0,8.56,20.15V33.69a16,16,0,0,0,31.91,0V20.15A16,16,0,0,0,31.94,6Zm-.65,32.49H17.75a1.45,1.45,0,1,1,0-2.9H31.29a1.45,1.45,0,0,1,0,2.9Zm0-5.8H17.75a1.45,1.45,0,1,1,0-2.9H31.29a1.45,1.45,0,1,1,0,2.9Zm0-5.8H17.75a1.45,1.45,0,1,1,0-2.9H31.29a1.45,1.45,0,1,1,0,2.9Z"/><path d="M34.42,2.4A1.45,1.45,0,1,0,32,.76L29.21,4.89A16.38,16.38,0,0,1,31.94,6Z"/></g></svg>
\ No newline at end of file
diff --git a/front/src/Components/images/btn-menu-profile-woka.svg b/front/src/Components/images/btn-menu-profile-woka.svg
new file mode 100644
index 00000000..5a6d6a50
--- /dev/null
+++ b/front/src/Components/images/btn-menu-profile-woka.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50"><g id="btn_setup_woka" data-name="btn setup woka"><g id="NP8bMB.tif"><image id="Layer_0" data-name="Layer 0" width="23" height="29" transform="translate(4.61 0.1) scale(1.71)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAdCAYAAABBsffGAAAACXBIWXMAAAZ1AAAGdQGEn07tAAACCUlEQVRIS61WS4rDMAx9abLoxuqi4MIYSk+Q+59iBnqCUlBhDNnYmy4aMosgj+3YyRTmQReVpSdZP6eZpglrMOajqsD8aGpnANDUyIW0bTsAwPF4DGfDMAAAxvEFoO6kSG7Mx9S2XSBUSi10vPcAZkfj+Co6WJDHxCXSHN77qoOuZJATE9FCxzkH4PdW1n4vdHbxH4k6Rom4JG/bblH8hBxIo64RC+RcKZUUXLAgF2wRC9b0AvlaP7+DmGcnAq1PdYs3oPUpOKim5T+wA+YJk1aS6XsXYmftd+j3EPnWnvgrYp4kLcyPZhxf8N6HIdmCcw7e+79PaDxta60mxKXpBLLdEk/oOL6wtmPinRLbxNEHciHu+34zohhan6CUAhHher0mDpK0xMQSrTEGAJIaSKqYGUqpsH77vsfX12fQ62aCOeo8YmMMDodDUHbOgYgSGTMnN5QFxvxoQrdcLhcA633+fD6rZ2InPADQSdREBGYOT1fuxFqL/X4Pa22QMXPy5HnvYYwJ0e+AOVc5oXSJcw7OOWitQUTQWgdZvmrFXvhCWpxzSaWHYQiFk6GSnxSQiAKhDGBc+I750cgWK60AIsLtdlukSbooRs5V/bQ4n8+TpCbveeltGaT7/V7cS9WVK4WVFADpzUQueiWs7nOlFIwxi/GvyXOskm+9o1vn1ZwD6XsYp6Qmz/ED0qpw9h1b2uQAAAAASUVORK5CYII="/></g></g></svg>
\ No newline at end of file