debian-mirror-gitlab/app/assets/javascripts/releases/components/release_block_footer.vue

117 lines
3 KiB
Vue
Raw Normal View History

2019-12-26 22:10:19 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { __, sprintf } from '~/locale';
export default {
name: 'ReleaseBlockFooter',
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2019-12-26 22:10:19 +05:30
GlLink,
UserAvatarLink,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
props: {
commit: {
type: Object,
required: false,
default: null,
},
commitPath: {
type: String,
required: false,
default: '',
},
tagName: {
type: String,
required: false,
default: '',
},
tagPath: {
type: String,
required: false,
default: '',
},
author: {
type: Object,
required: false,
default: null,
},
releasedAt: {
type: String,
required: false,
default: '',
},
},
computed: {
releasedAtTimeAgo() {
2020-01-01 13:55:28 +05:30
return this.timeFormatted(this.releasedAt);
2019-12-26 22:10:19 +05:30
},
userImageAltDescription() {
return this.author && this.author.username
? sprintf(__("%{username}'s avatar"), { username: this.author.username })
: null;
},
2020-05-24 23:13:21 +05:30
createdTime() {
const now = new Date();
const isFuture = now < new Date(this.releasedAt);
return isFuture ? __('Will be created') : __('Created');
},
2019-12-26 22:10:19 +05:30
},
};
</script>
<template>
<div>
<div v-if="commit" class="float-left mr-3 d-flex align-items-center js-commit-info">
2020-11-24 15:15:51 +05:30
<gl-icon ref="commitIcon" name="commit" class="mr-1" />
2019-12-26 22:10:19 +05:30
<div v-gl-tooltip.bottom :title="commit.title">
<gl-link v-if="commitPath" :href="commitPath">
2020-04-08 14:13:33 +05:30
{{ commit.shortId }}
2019-12-26 22:10:19 +05:30
</gl-link>
2020-04-08 14:13:33 +05:30
<span v-else>{{ commit.shortId }}</span>
2019-12-26 22:10:19 +05:30
</div>
</div>
<div v-if="tagName" class="float-left mr-3 d-flex align-items-center js-tag-info">
2020-11-24 15:15:51 +05:30
<gl-icon name="tag" class="mr-1" />
2019-12-26 22:10:19 +05:30
<div v-gl-tooltip.bottom :title="__('Tag')">
<gl-link v-if="tagPath" :href="tagPath">
{{ tagName }}
</gl-link>
<span v-else>{{ tagName }}</span>
</div>
</div>
<div
v-if="releasedAt || author"
class="float-left d-flex align-items-center js-author-date-info"
>
2020-05-24 23:13:21 +05:30
<span class="text-secondary">{{ createdTime }}&nbsp;</span>
2019-12-26 22:10:19 +05:30
<template v-if="releasedAt">
<span
v-gl-tooltip.bottom
:title="tooltipTitle(releasedAt)"
class="text-secondary flex-shrink-0"
>
{{ releasedAtTimeAgo }}&nbsp;
</span>
</template>
<div v-if="author" class="d-flex">
<span class="text-secondary">{{ __('by') }}&nbsp;</span>
<user-avatar-link
2020-04-08 14:13:33 +05:30
:link-href="author.webUrl"
:img-src="author.avatarUrl"
2019-12-26 22:10:19 +05:30
:img-alt="userImageAltDescription"
:tooltip-text="author.username"
tooltip-placement="bottom"
/>
</div>
</div>
</div>
</template>