diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue new file mode 100644 index 00000000000..48fa33eb558 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue @@ -0,0 +1,51 @@ +<script> +import { GlIcon, GlLink } from '@gitlab/ui'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { sprintf, __ } from '~/locale'; + +export default { + components: { + GlIcon, + GlLink, + }, + props: { + fileName: { + type: String, + required: true, + }, + filePath: { + type: String, + required: true, + }, + fileSize: { + type: Number, + required: false, + default: 0, + }, + }, + computed: { + downloadFileSize() { + return numberToHumanSize(this.fileSize); + }, + downloadText() { + if (this.fileSize > 0) { + return sprintf(__('Download (%{fileSizeReadable})'), { + fileSizeReadable: this.downloadFileSize, + }); + } + return __('Download'); + }, + }, +}; +</script> + +<template> + <div class="gl-text-center gl-py-13 gl-bg-gray-50"> + <gl-link :href="filePath" rel="nofollow" :download="fileName" target="_blank"> + <div> + <gl-icon :size="16" name="download" class="gl-text-gray-900" /> + </div> + <h4>{{ downloadText }}</h4> + </gl-link> + </div> +</template> |