diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-31 15:09:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-31 15:09:59 +0300 |
commit | a8632f50992a5304304e122fc7dfff1fd87b3c09 (patch) | |
tree | 497a8c0bbb88abcebf7889c79f098ace8d0033bf /app/assets/javascripts/super_sidebar/components | |
parent | 3608a02eb461c2cadbac0e08c0c6edec471d6648 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/nav_item.vue | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue index e5267035232..1b2d0172c06 100644 --- a/app/assets/javascripts/super_sidebar/components/nav_item.vue +++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue @@ -62,6 +62,12 @@ export default { default: false, }, }, + data() { + return { + isMouseIn: false, + canClickPinButton: false, + }; + }, computed: { pillData() { return this.item.pill_count; @@ -119,11 +125,20 @@ export default { return this.item.to ? NavItemRouterLink : NavItemLink; }, }, + methods: { + togglePointerEvents() { + if (this.isMouseIn) { + this.canClickPinButton = true; + } else { + this.canClickPinButton = false; + } + }, + }, }; </script> <template> - <li> + <li @mouseenter="isMouseIn = true" @mouseleave="isMouseIn = false"> <component :is="navItemLinkComponent" #default="{ isActive }" @@ -174,8 +189,10 @@ export default { category="tertiary" icon="thumbtack" class="show-on-focus-or-hover--target" + :class="{ 'gl-pointer-events-none': !canClickPinButton }" :aria-label="$options.i18n.pinItem" @click.prevent="$emit('pin-add', item.id)" + @transitionend="togglePointerEvents" /> <gl-button v-else-if="isPinnable && isPinned" @@ -185,7 +202,9 @@ export default { :aria-label="$options.i18n.unpinItem" icon="thumbtack-solid" class="show-on-focus-or-hover--target" + :class="{ 'gl-pointer-events-none': !canClickPinButton }" @click.prevent="$emit('pin-remove', item.id)" + @transitionend="togglePointerEvents" /> </span> </component> |