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 38df01a26..b71bc6971 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 652545129..b62b4e11f 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 () {