diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/file_row.vue | 47 |
1 files changed, 25 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 4d60cf5b1cc..5a953b351f9 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -18,6 +18,16 @@ export default { type: Number, required: true, }, + activeFile: { + type: String, + required: false, + default: '', + }, + viewedFiles: { + type: Array, + required: false, + default: () => [], + }, }, computed: { isTree() { @@ -34,8 +44,8 @@ export default { fileClass() { return { 'file-open': this.isBlob && this.file.opened, - 'is-active': this.isBlob && this.file.active, - folder: this.isTree, + 'is-active': this.isBlob && (this.file.active || this.activeFile === this.file.fileHash), + 'is-viewed': this.isBlob && this.viewedFiles.includes(this.file.fileHash), 'is-open': this.file.opened, }; }, @@ -107,15 +117,23 @@ export default { v-else :class="fileClass" :title="file.name" - class="file-row" + class="file-row text-left px-1 py-2 ml-n2 d-flex align-items-center" role="button" @click="clickFile" @mouseleave="$emit('mouseleave', $event)" > - <div class="file-row-name-container"> - <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated"> + <div class="file-row-name-container w-100 d-flex align-items-center"> + <span + ref="textOutput" + :style="levelIndentation" + class="file-row-name str-truncated d-inline-block" + :class="[ + { 'folder font-weight-normal': isTree }, + fileClass['is-viewed'] ? 'font-weight-normal' : 'font-weight-bold', + ]" + > <file-icon - class="file-row-icon" + class="file-row-icon align-middle mr-1" :class="{ 'text-secondary': file.type === 'tree' }" :file-name="file.name" :loading="file.loading" @@ -132,14 +150,8 @@ export default { <style> .file-row { - display: flex; - align-items: center; height: 32px; - padding: 4px 8px; - margin-left: -8px; - margin-right: -8px; border-radius: 3px; - text-align: left; cursor: pointer; } @@ -157,24 +169,15 @@ export default { } .file-row-name-container { - display: flex; - width: 100%; - align-items: center; overflow: visible; } .file-row-name { - display: inline-block; flex: 1; max-width: inherit; - height: 19px; + height: 20px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } - -.file-row-name .file-row-icon { - margin-right: 2px; - vertical-align: middle; -} </style> |