diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
commit | 48aff82709769b098321c738f3444b9bdaa694c6 (patch) | |
tree | e00c7c43e2d9b603a5a6af576b1685e400410dee /app/assets/javascripts/notes/components/timeline_toggle.vue | |
parent | 879f5329ee916a948223f8f43d77fba4da6cd028 (diff) | |
download | gitlab-ce-48aff82709769b098321c738f3444b9bdaa694c6.tar.gz |
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/notes/components/timeline_toggle.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/timeline_toggle.vue | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/app/assets/javascripts/notes/components/timeline_toggle.vue b/app/assets/javascripts/notes/components/timeline_toggle.vue new file mode 100644 index 00000000000..d1ffe0a3601 --- /dev/null +++ b/app/assets/javascripts/notes/components/timeline_toggle.vue @@ -0,0 +1,60 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { mapActions, mapGetters } from 'vuex'; +import { s__ } from '~/locale'; +import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants'; +import notesEventHub from '../event_hub'; +import TrackEventDirective from '~/vue_shared/directives/track_event'; +import { trackToggleTimelineView } from '../utils'; + +export const timelineEnabledTooltip = s__('Timeline|Turn timeline view off'); +export const timelineDisabledTooltip = s__('Timeline|Turn timeline view on'); + +export default { + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + TrackEvent: TrackEventDirective, + }, + computed: { + ...mapGetters(['timelineEnabled', 'sortDirection']), + tooltip() { + return this.timelineEnabled ? timelineEnabledTooltip : timelineDisabledTooltip; + }, + }, + methods: { + ...mapActions(['setTimelineView', 'setDiscussionSortDirection']), + trackToggleTimelineView, + setSort() { + if (this.timelineEnabled && this.sortDirection !== DESC) { + this.setDiscussionSortDirection({ direction: DESC, persist: false }); + } + }, + setFilter() { + notesEventHub.$emit('dropdownSelect', COMMENTS_ONLY_FILTER_VALUE, false); + }, + toggleTimeline(event) { + event.currentTarget.blur(); + this.setTimelineView(!this.timelineEnabled); + this.setSort(); + this.setFilter(); + }, + }, +}; +</script> + +<template> + <gl-button + v-gl-tooltip + v-track-event="trackToggleTimelineView(timelineEnabled)" + icon="comments" + size="small" + :selected="timelineEnabled" + :title="tooltip" + :aria-label="tooltip" + class="gl-mr-3" + @click="toggleTimeline" + /> +</template> |