diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/nav_item.vue')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/nav_item.vue | 26 |
1 files changed, 19 insertions, 7 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue index 5e0f8fffb0e..5416f86abeb 100644 --- a/app/assets/javascripts/super_sidebar/components/nav_item.vue +++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue @@ -7,6 +7,7 @@ import { TRACKING_UNKNOWN_ID, TRACKING_UNKNOWN_PANEL, } from '~/super_sidebar/constants'; +import eventHub from '../event_hub'; import NavItemLink from './nav_item_link.vue'; import NavItemRouterLink from './nav_item_router_link.vue'; @@ -69,16 +70,14 @@ export default { return { isMouseIn: false, canClickPinButton: false, + pillCount: this.item.pill_count, }; }, computed: { - pillData() { - return this.item.pill_count; - }, hasPill() { return ( - Number.isFinite(this.pillData) || - (typeof this.pillData === 'string' && this.pillData !== '') + Number.isFinite(this.pillCount) || + (typeof this.pillCount === 'string' && this.pillCount !== '') ); }, isPinnable() { @@ -145,6 +144,9 @@ export default { hasAvatar() { return Boolean(this.item.entity_id); }, + hasEndSpace() { + return this.hasPill || this.isPinnable || this.isFlyout; + }, avatarShape() { return this.item.avatar_shape || 'rect'; }, @@ -179,11 +181,21 @@ export default { if (this.item.is_active) { this.$el.scrollIntoView(false); } + + eventHub.$on('updatePillValue', this.updatePillValue); + }, + destroyed() { + eventHub.$off('updatePillValue', this.updatePillValue); }, methods: { togglePointerEvents() { this.canClickPinButton = this.isMouseIn; }, + updatePillValue({ value, itemId }) { + if (this.item.id === itemId) { + this.pillCount = value; + } + }, }, }; </script> @@ -236,7 +248,7 @@ export default { </div> </div> <slot name="actions"></slot> - <span v-if="hasPill || isPinnable" class="gl-text-right gl-relative gl-min-w-8"> + <span v-if="hasEndSpace" class="gl-text-right gl-relative gl-min-w-6"> <gl-badge v-if="hasPill" size="sm" @@ -246,7 +258,7 @@ export default { 'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable, }" > - {{ pillData }} + {{ pillCount }} </gl-badge> </span> </component> |