From 8ca476935413aad564a4958f5b447fc80e287677 Mon Sep 17 00:00:00 2001
From: kyw <kyw504100@hotmail.com>
Date: Tue, 1 Feb 2022 08:06:38 +0800
Subject: [PATCH] Menu Improvements (#280)

* Added icon for the menu

* Updated the CSS

* Implemented icon to the menu
---
 src/renderer/style.less               | 14 ++++++++++++++
 src/renderer/views/main.ejs           | 15 ++++++++++-----
 src/renderer/views/svg/headphones.svg |  1 +
 src/renderer/views/svg/info.svg       |  1 +
 src/renderer/views/svg/log-out.svg    |  1 +
 src/renderer/views/svg/settings.svg   |  1 +
 src/renderer/views/svg/smartphone.svg |  1 +
 7 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/views/svg/headphones.svg
 create mode 100644 src/renderer/views/svg/info.svg
 create mode 100644 src/renderer/views/svg/log-out.svg
 create mode 100644 src/renderer/views/svg/settings.svg
 create mode 100644 src/renderer/views/svg/smartphone.svg

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 5b12b25a..e6b69faa 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -663,6 +663,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
     .usermenu-item {
       #cmenu.item();
+        
+      .usermenu-item-icon {
+        position:relative;
+        top:1.5px;
+        right:3px;
+        display:table-cell;
+      }
+
+      .usermenu-item-name {
+        position:relative;
+        bottom:2px;
+        padding-left: 5px;
+        display:table-cell;
+      }
     }
   }
 }
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 7f609f2b..ebfa0ac0 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -242,22 +242,27 @@
                                 <button class="usermenu-item" @click="showWebRemoteQR()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
-                                            {{$root.getLz('action.showWebRemoteQR')}}
+                                            <span class="usermenu-item-icon"><%- include("./svg/smartphone.svg") %></span>
+                                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
                                         </div>
                                     </div>
                                 </button>
                                 <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
                                         @click="modals.audioSettings = true">
-                                    {{$root.getLz('term.audioSettings')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/headphones.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="appRoute('about')">
-                                    {{$root.getLz('term.about')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/info.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="appRoute('settings')">
-                                    {{$root.getLz('term.settings')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/settings.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="unauthorize()">
-                                    {{$root.getLz('term.logout')}}
+                                    <span class="usermenu-item-icon" style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                                 </button>
                             </div>
                         </div>
diff --git a/src/renderer/views/svg/headphones.svg b/src/renderer/views/svg/headphones.svg
new file mode 100644
index 00000000..201363e2
--- /dev/null
+++ b/src/renderer/views/svg/headphones.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/views/svg/info.svg b/src/renderer/views/svg/info.svg
new file mode 100644
index 00000000..e5b94ee7
--- /dev/null
+++ b/src/renderer/views/svg/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
\ No newline at end of file
diff --git a/src/renderer/views/svg/log-out.svg b/src/renderer/views/svg/log-out.svg
new file mode 100644
index 00000000..86640c9c
--- /dev/null
+++ b/src/renderer/views/svg/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
\ No newline at end of file
diff --git a/src/renderer/views/svg/settings.svg b/src/renderer/views/svg/settings.svg
new file mode 100644
index 00000000..41f574c0
--- /dev/null
+++ b/src/renderer/views/svg/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/views/svg/smartphone.svg b/src/renderer/views/svg/smartphone.svg
new file mode 100644
index 00000000..d84723c9
--- /dev/null
+++ b/src/renderer/views/svg/smartphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
\ No newline at end of file