diff options
author | Phil Hughes <me@iamphill.com> | 2019-01-08 09:31:23 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-01-08 09:31:23 +0000 |
commit | 12edecd002163e7dedff6fcdf10043b7d1967962 (patch) | |
tree | 45bd3c1eee15e911fd43733f1af77a10e4f0fc98 /app/assets/javascripts/vue_shared/components/file_row.vue | |
parent | 1d2ef4c6557846eb531f4d0e80cf43dea99b037b (diff) | |
download | gitlab-ce-12edecd002163e7dedff6fcdf10043b7d1967962.tar.gz |
Add headers to files in the tree list on merge requests
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54807
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/file_row.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/file_row.vue | 44 |
1 files changed, 10 insertions, 34 deletions
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 9e713673678..4c884c55a30 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -1,11 +1,13 @@ <script> import Icon from '~/vue_shared/components/icon.vue'; +import FileHeader from '~/vue_shared/components/file_row_header.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; export default { name: 'FileRow', components: { + FileHeader, FileIcon, Icon, ChangedFileIcon, @@ -34,21 +36,10 @@ export default { required: false, default: false, }, - displayTextKey: { - type: String, - required: false, - default: 'name', - }, - shouldTruncateStart: { - type: Boolean, - required: false, - default: false, - }, }, data() { return { mouseOver: false, - truncateStart: 0, }; }, computed: { @@ -60,7 +51,7 @@ export default { }, levelIndentation() { return { - marginLeft: `${this.level * 16}px`, + marginLeft: this.level ? `${this.level * 16}px` : null, }; }, fileClass() { @@ -71,14 +62,8 @@ export default { 'is-open': this.file.opened, }; }, - outputText() { - const text = this.file[this.displayTextKey]; - - if (this.truncateStart === 0) { - return text; - } - - return `...${text.substring(this.truncateStart, text.length)}`; + childFilesLevel() { + return this.file.isHeader ? 0 : this.level + 1; }, }, watch: { @@ -92,15 +77,6 @@ export default { if (this.hasPathAtCurrentRoute()) { this.scrollIntoView(true); } - - if (this.shouldTruncateStart) { - const { scrollWidth, offsetWidth } = this.$refs.textOutput; - const textOverflow = scrollWidth - offsetWidth; - - if (textOverflow > 0) { - this.truncateStart = Math.ceil(textOverflow / 5) + 3; - } - } }, methods: { toggleTreeOpen(path) { @@ -156,7 +132,9 @@ export default { <template> <div> + <file-header v-if="file.isHeader" :path="file.path" /> <div + v-else :class="fileClass" class="file-row" role="button" @@ -175,7 +153,7 @@ export default { :size="16" /> <changed-file-icon v-else :file="file" :size="16" class="append-right-5" /> - {{ outputText }} + {{ file.name }} </span> <component :is="extraComponent" @@ -185,17 +163,15 @@ export default { /> </div> </div> - <template v-if="file.opened"> + <template v-if="file.opened || file.isHeader"> <file-row v-for="childFile in file.tree" :key="childFile.key" :file="childFile" - :level="level + 1" + :level="childFilesLevel" :hide-extra-on-tree="hideExtraOnTree" :extra-component="extraComponent" :show-changed-icon="showChangedIcon" - :display-text-key="displayTextKey" - :should-truncate-start="shouldTruncateStart" @toggleTreeOpen="toggleTreeOpen" @clickFile="clickedFile" /> |