From 8821613d6f28b292f40959a614ac13e0276c761f Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Wed, 25 Aug 2021 22:39:38 +0800
Subject: [PATCH] ! 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
---
 .../ft-icon-button/ft-icon-button.js          | 49 +++++++++++++------
 .../ft-profile-selector.js                    | 19 +++++--
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 38df01a2..b71bc697 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/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'
-      $(`#${this.id}`).focus()
+      const dropdownBox = $(`#${this.id}`)
 
-      $(`#${this.id}`).focusout(() => {
-        const shareLinks = $(`#${this.id}`).find('.shareLinks')
+      if (this.dropdownShown) {
+        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) {
-          if (!shareLinks[0].parentNode.matches(':hover')) {
-            $(`#${this.id}`)[0].style.display = 'none'
+        dropdownBox.focusout(() => {
+          const shareLinks = dropdownBox.find('.shareLinks')
+
+          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()
-      $(`#${this.id}`)[0].style.display = 'none'
+      const dropdownBox = $(`#${this.id}`)
+
+      dropdownBox.focusout()
+      dropdownBox.get(0).style.display = 'none'
+      this.dropdownShown = false
     },
 
     handleIconClick: function () {
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 65254512..b62b4e11 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/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'
-      $('#profileList').focus()
+      const profileList = $('#profileList')
+
+      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 () {