Replace jquery in the profile selector (#2664)

Author: absidue

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>

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;
 }
 

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,43 +27,46 @@ 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()
+        })
       }
     },
 
     openProfileSettings: function () {
       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([

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"