diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/release_block.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/release_block.vue | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue index 7b6bd9913a8..921ada91544 100644 --- a/app/assets/javascripts/releases/components/release_block.vue +++ b/app/assets/javascripts/releases/components/release_block.vue @@ -6,6 +6,9 @@ import Icon from '~/vue_shared/components/icon.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { __, n__, sprintf } from '../../locale'; +import { slugify } from '~/lib/utils/text_utility'; +import { getLocationHash } from '~/lib/utils/url_utility'; +import { scrollToElement } from '~/lib/utils/common_utils'; export default { name: 'ReleaseBlock', @@ -26,7 +29,15 @@ export default { default: () => ({}), }, }, + data() { + return { + isHighlighted: false, + }; + }, computed: { + id() { + return slugify(this.release.tag_name); + }, releasedTimeAgo() { return sprintf(__('released %{time}'), { time: this.timeFormated(this.release.released_at), @@ -62,10 +73,21 @@ export default { return n__('Milestone', 'Milestones', this.release.milestones.length); }, }, + mounted() { + const hash = getLocationHash(); + if (hash && slugify(hash) === this.id) { + this.isHighlighted = true; + setTimeout(() => { + this.isHighlighted = false; + }, 2000); + + scrollToElement(this.$el); + } + }, }; </script> <template> - <div :id="release.tag_name" class="card"> + <div :id="id" :class="{ 'bg-line-target-blue': isHighlighted }" class="card release-block"> <div class="card-body"> <h2 class="card-title mt-0"> {{ release.name }} |