From 28e07ec0aa49f13bfec90f9b1b6646f3ee63c534 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Tue, 4 Oct 2022 19:55:55 +0200
Subject: [PATCH] Replace jquery in the profile selector (#2664)

---
 src/renderer/components/ft-card/ft-card.vue   |  5 +-
 .../ft-profile-selector.css                   | 11 ++---
 .../ft-profile-selector.js                    | 49 ++++++++++---------
 .../ft-profile-selector.vue                   |  6 ++-
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/renderer/components/ft-card/ft-card.vue b/src/renderer/components/ft-card/ft-card.vue
index d21ab19a..641a0100 100644
--- a/src/renderer/components/ft-card/ft-card.vue
+++ b/src/renderer/components/ft-card/ft-card.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="ft-card">
+  <div
+    class="ft-card"
+    @focusout="$emit('focusout')"
+  >
     <slot />
   </div>
 </template>
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 6d5add61..51897b99 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -19,8 +19,8 @@
   text-align: center;
 }
 
-#profileList {
-  display: none;
+.profileList {
+  display: inline;
   position: absolute;
   top: 60px;
   right: 10px;
@@ -31,11 +31,6 @@
   box-shadow: 0 0 4px var(--scrollbar-color-hover);
 }
 
-#profileList:focus {
-  display: inline;
-  outline: none;
-}
-
 .profileWrapper {
   margin-top: 60px;
   height: 340px;
@@ -71,7 +66,7 @@
 
 .profileListTitle {
   position: absolute;
-  top: -15px;
+  margin: 0;
   left: 10px;
 }
 
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index 6d038f68..c1507a78 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
-import $ from 'jquery'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
@@ -13,7 +12,8 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      profileListShown: false
+      profileListShown: false,
+      mouseDownOnIcon: false
     }
   },
   computed: {
@@ -27,35 +27,24 @@ export default Vue.extend({
       return this.$store.getters.getDefaultProfile
     },
     activeProfileInitial: function () {
-      return this?.activeProfile?.name?.length > 0 ? Array.from(this.activeProfile.name)[0].toUpperCase() : ''
+      return this.activeProfile?.name?.length > 0 ? this.activeProfile.name[0].toUpperCase() : ''
     },
     profileInitials: function () {
       return this.profileList.map((profile) => {
-        return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
+        return profile?.name?.length > 0 ? profile.name[0].toUpperCase() : ''
       })
     }
   },
-  mounted: function () {
-    $('#profileList').focusout(() => {
-      $('#profileList')[0].style.display = 'none'
-      // When pressing the profile button
-      // It will make the menu reappear if we set `profileListShown` immediately
-      setTimeout(() => {
-        this.profileListShown = false
-      }, 100)
-    })
-  },
   methods: {
     toggleProfileList: function () {
-      const profileList = $('#profileList')
+      this.profileListShown = !this.profileListShown
 
       if (this.profileListShown) {
-        profileList.get(0).style.display = 'none'
-        this.profileListShown = false
-      } else {
-        profileList.get(0).style.display = 'inline'
-        profileList.get(0).focus()
-        this.profileListShown = true
+        // wait until the profile list is visible
+        // then focus it so we can hide it automatically when it loses focus
+        setTimeout(() => {
+          this.$refs.profileList.$el.focus()
+        })
       }
     },
 
@@ -63,7 +52,21 @@ export default Vue.extend({
       this.$router.push({
         path: '/settings/profile/'
       })
-      $('#profileList').focusout()
+      this.profileListShown = false
+    },
+
+    handleIconMouseDown: function () {
+      if (this.profileListShown) {
+        this.mouseDownOnIcon = true
+      }
+    },
+
+    handleProfileListFocusOut: function () {
+      if (this.mouseDownOnIcon) {
+        this.mouseDownOnIcon = false
+      } else if (!this.$refs.profileList.$el.matches(':focus-within')) {
+        this.profileListShown = false
+      }
     },
 
     setActiveProfile: function (profile) {
@@ -80,7 +83,7 @@ export default Vue.extend({
         }
       }
 
-      $('#profileList').trigger('focusout')
+      this.profileListShown = false
     },
 
     ...mapActions([
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index 6c0c06f8..d1d0ee0c 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -4,6 +4,7 @@
       class="colorOption"
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
       @click="toggleProfileList"
+      @mousedown="handleIconMouseDown"
     >
       <div
         class="initial"
@@ -12,8 +13,11 @@
       </div>
     </div>
     <ft-card
-      id="profileList"
+      v-show="profileListShown"
+      ref="profileList"
+      class="profileList"
       tabindex="-1"
+      @focusout="handleProfileListFocusOut"
     >
       <h3
         class="profileListTitle"