! Fix profile menu toggle button to toggle menu instead of keep opening (#1437)

* ! Fix profile menu toggle button to toggle menu instead of keep opening

* ! Fix togglable buttons to toggle menu instead of keep opening

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -51,7 +51,7 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      showDropdown: false,
+      dropdownShown: false,
       id: ''
     }
   },
@@ -60,25 +60,46 @@ export default Vue.extend({
   },
   methods: {
     toggleDropdown: function () {
-      $(`#${this.id}`)[0].style.display = 'inline'
+      const dropdownBox = $(`#${this.id}`)
-      $(`#${this.id}`).focus()
 
-      $(`#${this.id}`).focusout(() => {
+      if (this.dropdownShown) {
-        const shareLinks = $(`#${this.id}`).find('.shareLinks')
+        dropdownBox.get(0).style.display = 'none'
+        this.dropdownShown = false
+      } else {
+        dropdownBox.get(0).style.display = 'inline'
+        dropdownBox.get(0).focus()
+        this.dropdownShown = true
 
-        if (shareLinks.length > 0) {
+        dropdownBox.focusout(() => {
-          if (!shareLinks[0].parentNode.matches(':hover')) {
+          const shareLinks = dropdownBox.find('.shareLinks')
-            $(`#${this.id}`)[0].style.display = 'none'
+
+          if (shareLinks.length > 0) {
+            if (!shareLinks[0].parentNode.matches(':hover')) {
+              dropdownBox.get(0).style.display = 'none'
+              // When pressing the profile button
+              // It will make the menu reappear if we set `dropdownShown` immediately
+              setTimeout(() => {
+                this.dropdownShown = false
+              }, 100)
+            }
+          } else {
+            dropdownBox.get(0).style.display = 'none'
+            // When pressing the profile button
+            // It will make the menu reappear if we set `dropdownShown` immediately
+            setTimeout(() => {
+              this.dropdownShown = false
+            }, 100)
           }
-        } else {
+        })
-          $(`#${this.id}`)[0].style.display = 'none'
+      }
-        }
-      })
     },
 
     focusOut: function () {
-      $(`#${this.id}`).focusout()
+      const dropdownBox = $(`#${this.id}`)
-      $(`#${this.id}`)[0].style.display = 'none'
+
+      dropdownBox.focusout()
+      dropdownBox.get(0).style.display = 'none'
+      this.dropdownShown = false
     },
 
     handleIconClick: function () {

src/renderer/components/ft-profile-selector/ft-profile-selector.js

@@ -13,7 +13,7 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      showProfileList: false
+      profileListShown: false
     }
   },
   computed: {
@@ -38,12 +38,25 @@ export default Vue.extend({
   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 () {
-      $('#profileList')[0].style.display = 'inline'
+      const profileList = $('#profileList')
-      $('#profileList').focus()
+
+      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
+      }
     },
 
     openProfileSettings: function () {