diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-23 21:09:25 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-23 21:09:25 +0300 |
commit | 967812838c7e7742729a4c7aeb9859f98a509622 (patch) | |
tree | 22db2e6642be51cb12535db7863331457e5523c3 /app/assets/javascripts | |
parent | 074d013e1eb3f6e0c27f96a3be8b9361254c8a98 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
6 files changed, 45 insertions, 24 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index 8babc05f1ce..e09bf1f8005 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -58,6 +58,9 @@ export default { hasDiff() { return hasDiff(this.file); }, + isActive() { + return this.currentDiffFileId === this.file.file_hash; + }, isFileTooLarge() { return this.file.viewer.error === diffViewerErrors.too_large; }, @@ -143,7 +146,7 @@ export default { <div :id="file.file_hash" :class="{ - 'is-active': currentDiffFileId === file.file_hash, + 'is-active': isActive, }" class="diff-file file-holder" > @@ -153,6 +156,7 @@ export default { :collapsible="true" :expanded="!isCollapsed" :add-merge-request-buttons="true" + :is-active="isActive" class="js-file-title file-title" @toggleFile="handleToggle" @showForkMessage="showForkMessage" diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index d4270960f57..bad82c84601 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -55,6 +55,11 @@ export default { type: Boolean, required: true, }, + isActive: { + type: Boolean, + required: false, + default: false, + }, }, computed: { ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']), @@ -158,6 +163,9 @@ export default { <div ref="header" class="js-file-title file-title file-title-flex-parent" + :class="{ + 'is-active': isActive, + }" @click.self="handleToggleFile" > <div class="file-header-content"> diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index eca9091f92f..fcf87807e75 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -26,7 +26,7 @@ export default { }; }, computed: { - ...mapState('diffs', ['tree', 'renderTreeList']), + ...mapState('diffs', ['tree', 'renderTreeList', 'currentDiffFileId', 'viewedDiffFileIds']), ...mapGetters('diffs', ['allBlobs']), filteredTreeList() { const search = this.search.toLowerCase().trim(); @@ -96,6 +96,8 @@ export default { :level="0" :hide-file-stats="hideFileStats" :file-row-component="$options.DiffFileRow" + :active-file="currentDiffFileId" + :viewed-files="viewedDiffFileIds" @toggleTreeOpen="toggleTreeOpen" @clickFile="scrollToFile" /> diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js index 81f1506260c..f1bd9d8981d 100644 --- a/app/assets/javascripts/diffs/store/modules/diff_state.js +++ b/app/assets/javascripts/diffs/store/modules/diff_state.js @@ -26,6 +26,7 @@ export default () => ({ showTreeList: true, currentDiffFileId: '', projectPath: '', + viewedDiffFileIds: [], commentForms: [], highlightedRow: null, renderTreeList: true, diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js index bb4c80b5759..6438dad4f7f 100644 --- a/app/assets/javascripts/diffs/store/mutations.js +++ b/app/assets/javascripts/diffs/store/mutations.js @@ -284,6 +284,9 @@ export default { }, [types.UPDATE_CURRENT_DIFF_FILE_ID](state, fileId) { state.currentDiffFileId = fileId; + if (!state.viewedDiffFileIds.includes(fileId)) { + state.viewedDiffFileIds = [fileId, ...state.viewedDiffFileIds]; + } }, [types.OPEN_DIFF_FILE_COMMENT_FORM](state, formData) { state.commentForms.push({ 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> |