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 c2d6b09c..38df01a2 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import $ from 'jquery' export default Vue.extend({ name: 'FtIconButton', @@ -50,12 +51,34 @@ export default Vue.extend({ }, data: function () { return { - showDropdown: false + showDropdown: false, + id: '' } }, + mounted: function () { + this.id = `iconButton${this._uid}` + }, methods: { toggleDropdown: function () { - this.showDropdown = !this.showDropdown + $(`#${this.id}`)[0].style.display = 'inline' + $(`#${this.id}`).focus() + + $(`#${this.id}`).focusout(() => { + const shareLinks = $(`#${this.id}`).find('.shareLinks') + + if (shareLinks.length > 0) { + if (!shareLinks[0].parentNode.matches(':hover')) { + $(`#${this.id}`)[0].style.display = 'none' + } + } else { + $(`#${this.id}`)[0].style.display = 'none' + } + }) + }, + + focusOut: function () { + $(`#${this.id}`).focusout() + $(`#${this.id}`)[0].style.display = 'none' }, handleIconClick: function () { @@ -67,8 +90,8 @@ export default Vue.extend({ }, handleDropdownClick: function (index) { - this.toggleDropdown() this.$emit('click', this.dropdownValues[index]) + this.focusOut() } } }) 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 07cc0a6d..a0425509 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.sass +++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass @@ -46,6 +46,7 @@ background-color: var(--accent-color-active) .iconDropdown + display: none position: absolute text-align: center list-style-type: none @@ -57,6 +58,9 @@ 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 bafa0c6e..6c1534dc 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -17,7 +17,8 @@ @click="handleIconClick" />