diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/release_block.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/release_block.vue | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue new file mode 100644 index 00000000000..bd65a225d8f --- /dev/null +++ b/app/assets/javascripts/releases/components/release_block.vue @@ -0,0 +1,145 @@ +<script> +import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +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 { sprintf } from '../../locale'; + +export default { + name: 'ReleaseBlock', + components: { + GlLink, + Icon, + UserAvatarLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + mixins: [timeagoMixin], + props: { + name: { + type: String, + required: true, + }, + tag: { + type: String, + required: true, + }, + commit: { + type: Object, + required: true, + }, + description: { + type: String, + required: false, + default: '', + }, + author: { + type: Object, + required: true, + }, + createdAt: { + type: String, + required: false, + default: '', + }, + assetsCount: { + type: Number, + required: false, + default: 0, + }, + sources: { + type: Array, + required: false, + default: () => [], + }, + links: { + type: Array, + required: false, + default: () => [], + }, + }, + computed: { + releasedTimeAgo() { + return sprintf('released %{time}', { + time: this.timeFormated(this.createdAt), + }); + }, + userImageAltDescription() { + return this.author && this.author.username + ? sprintf("%{username}'s avatar", { username: this.author.username }) + : null; + }, + }, +}; +</script> +<template> + <div class="card"> + <div class="card-body"> + <h2 class="card-title mt-0">{{ name }}</h2> + + <div class="card-subtitle d-flex flex-wrap text-secondary"> + <div class="append-right-8"> + <icon name="commit" class="align-middle" /> + <span v-gl-tooltip.bottom :title="commit.title">{{ commit.short_id }}</span> + </div> + + <div class="append-right-8"> + <icon name="tag" class="align-middle" /> + <span v-gl-tooltip.bottom :title="__('Tag')">{{ tag }}</span> + </div> + + <div class="append-right-4"> + • + <span v-gl-tooltip.bottom :title="tooltipTitle(createdAt)">{{ releasedTimeAgo }}</span> + </div> + + <div class="d-flex"> + by + <user-avatar-link + class="prepend-left-4" + :link-href="author.path" + :img-src="author.avatar_url" + :img-alt="userImageAltDescription" + :tooltip-text="author.username" + /> + </div> + </div> + + <div class="card-text prepend-top-default"> + <b> + {{ __('Assets') }} <span class="js-assets-count badge badge-pill">{{ assetsCount }}</span> + </b> + + <ul class="pl-0 mb-0 prepend-top-8 list-unstyled js-assets-list"> + <li v-for="link in links" :key="link.name" class="append-bottom-8"> + <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.url"> + <icon name="package" class="align-middle append-right-4" /> {{ link.name }} + </gl-link> + </li> + </ul> + + <div class="dropdown"> + <button + type="button" + class="btn btn-link" + data-toggle="dropdown" + aria-haspopup="true" + aria-expanded="false" + > + <icon name="doc-code" class="align-top append-right-4" /> {{ __('Source code') }} + <icon name="arrow-down" /> + </button> + + <div class="js-sources-dropdown dropdown-menu"> + <li v-for="asset in sources" :key="asset.url"> + <gl-link :href="asset.url">{{ __('Download') }} {{ asset.format }}</gl-link> + </li> + </div> + </div> + </div> + + <div class="card-text prepend-top-default"><div v-html="description"></div></div> + </div> + </div> +</template> |