diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/repo_file.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/repo_file.vue | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue new file mode 100644 index 00000000000..20ebf840774 --- /dev/null +++ b/app/assets/javascripts/repo/components/repo_file.vue @@ -0,0 +1,107 @@ +<script> +import TimeAgoMixin from '../../vue_shared/mixins/timeago'; + +const RepoFile = { + mixins: [TimeAgoMixin], + props: { + file: { + type: Object, + required: true, + }, + isMini: { + type: Boolean, + required: false, + default: false, + }, + loading: { + type: Object, + required: false, + default() { return { tree: false }; }, + }, + hasFiles: { + type: Boolean, + required: false, + default: false, + }, + activeFile: { + type: Object, + required: true, + }, + }, + + computed: { + canShowFile() { + return !this.loading.tree || this.hasFiles; + }, + + fileIcon() { + const classObj = { + 'fa-spinner fa-spin': this.file.loading, + [this.file.icon]: !this.file.loading, + }; + return classObj; + }, + + fileIndentation() { + return { + 'margin-left': `${this.file.level * 10}px`, + }; + }, + + activeFileClass() { + return { + active: this.activeFile.url === this.file.url, + }; + }, + }, + + methods: { + linkClicked(file) { + this.$emit('linkclicked', file); + }, + }, +}; + +export default RepoFile; +</script> + +<template> +<tr + v-if="canShowFile" + class="file" + :class="activeFileClass" + @click.prevent="linkClicked(file)"> + <td> + <i + class="fa fa-fw file-icon" + :class="fileIcon" + :style="fileIndentation" + aria-label="file icon"> + </i> + <a + :href="file.url" + class="repo-file-name" + :title="file.url"> + {{file.name}} + </a> + </td> + + <template v-if="!isMini"> + <td class="hidden-sm hidden-xs"> + <div class="commit-message"> + <a @click.stop :href="file.lastCommitUrl"> + {{file.lastCommitMessage}} + </a> + </div> + </td> + + <td class="hidden-xs"> + <span + class="commit-update" + :title="tooltipTitle(file.lastCommitUpdate)"> + {{timeFormated(file.lastCommitUpdate)}} + </span> + </td> + </template> +</tr> +</template> |