From c3f8a3561b613638a8d73ed88ebe58d302d7d2e9 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 27 Sep 2022 14:16:56 +0200 Subject: [PATCH] Replace jquery in ft-icon-button with vue functionality (#2617) * Replace jquery in ft-icon-button with vue functionality * Rename hide method to hideDropdown * Fix typo in comment Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com> * Fix menu reappearing too soon * Fix share menu buttons not triggering Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com> --- .../ft-icon-button/ft-icon-button.js | 74 +++++++------------ .../ft-icon-button/ft-icon-button.sass | 5 +- .../ft-icon-button/ft-icon-button.vue | 5 +- .../ft-share-button/ft-share-button.js | 16 ++-- 4 files changed, 40 insertions(+), 60 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 2cf1ffa6..4c220abc 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -1,5 +1,4 @@ import Vue from 'vue' -import $ from 'jquery' export default Vue.extend({ name: 'FtIconButton', @@ -56,64 +55,45 @@ export default Vue.extend({ data: function () { return { dropdownShown: false, - id: '' + mouseDownOnIcon: false } }, - mounted: function () { - this.id = `iconButton${this._uid}` - }, methods: { - toggleDropdown: function () { - const dropdownBox = $(`#${this.id}`) - - 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 - - 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) - } - }) - } - }, - - focusOut: function () { - const dropdownBox = $(`#${this.id}`) - - dropdownBox.focusout() - dropdownBox.get(0).style.display = 'none' + // used by the share menu + hideDropdown: function () { this.dropdownShown = false }, handleIconClick: function () { if (this.forceDropdown || (this.dropdownOptions.length > 0)) { - this.toggleDropdown() + this.dropdownShown = !this.dropdownShown + + if (this.dropdownShown) { + // wait until the dropdown is visible + // then focus it so we can hide it automatically when it loses focus + setTimeout(() => { + this.$refs.dropdown.focus() + }, 0) + } } else { this.$emit('click') } }, + handleIconMouseDown: function () { + if (this.dropdownShown) { + this.mouseDownOnIcon = true + } + }, + + handleDropdownFocusOut: function () { + if (this.mouseDownOnIcon) { + this.mouseDownOnIcon = false + } else if (!this.$refs.dropdown.matches(':focus-within')) { + this.dropdownShown = false + } + }, + handleDropdownClick: function ({ url, index }) { if (this.returnIndex) { this.$emit('click', index) @@ -121,7 +101,7 @@ export default Vue.extend({ this.$emit('click', url) } - this.focusOut() + this.dropdownShown = false } } }) diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass index cd94d89a..c8ae1b87 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.sass +++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass @@ -56,7 +56,7 @@ color: var(--favorite-icon-color) .iconDropdown - display: none + display: inline position: absolute text-align: center list-style-type: none @@ -68,9 +68,6 @@ color: var(--secondary-text-color) user-select: none - &:focus - display: inline - &.left right: calc(50% - 10px) diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index 94940d88..fe1479f9 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -13,9 +13,11 @@ fontSize: size + 'px' }" @click="handleIconClick" + @mousedown="handleIconMouseDown" />