diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/diffs/components/app.vue | 35 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/tree_list.vue | 12 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/constants.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/actions.js | 5 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/panel_resizer.vue | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/ide.scss | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 33 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 4 |
9 files changed, 94 insertions, 39 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index f0ce2579ee7..8f47931d14a 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -4,6 +4,7 @@ import Icon from '~/vue_shared/components/icon.vue'; import { __ } from '~/locale'; import createFlash from '~/flash'; import { GlLoadingIcon } from '@gitlab/ui'; +import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; import eventHub from '../../notes/event_hub'; import CompareVersions from './compare_versions.vue'; import DiffFile from './diff_file.vue'; @@ -11,6 +12,13 @@ import NoChanges from './no_changes.vue'; import HiddenFilesWarning from './hidden_files_warning.vue'; import CommitWidget from './commit_widget.vue'; import TreeList from './tree_list.vue'; +import { + TREE_LIST_WIDTH_STORAGE_KEY, + INITIAL_TREE_WIDTH, + MIN_TREE_WIDTH, + MAX_TREE_WIDTH, + TREE_HIDE_STATS_WIDTH, +} from '../constants'; export default { name: 'DiffsApp', @@ -23,6 +31,7 @@ export default { CommitWidget, TreeList, GlLoadingIcon, + PanelResizer, }, props: { endpoint: { @@ -54,8 +63,12 @@ export default { }, }, data() { + const treeWidth = + parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH; + return { assignedDiscussions: false, + treeWidth, }; }, computed: { @@ -96,6 +109,9 @@ export default { this.startVersion.version_index === this.mergeRequestDiff.version_index) ); }, + hideFileStats() { + return this.treeWidth <= TREE_HIDE_STATS_WIDTH; + }, }, watch: { diffViewType() { @@ -142,6 +158,7 @@ export default { 'startRenderDiffsQueue', 'assignDiscussionsToDiff', 'setHighlightedRow', + 'cacheTreeListWidth', ]), fetchData() { this.fetchDiffFiles() @@ -184,6 +201,8 @@ export default { } }, }, + minTreeWidth: MIN_TREE_WIDTH, + maxTreeWidth: MAX_TREE_WIDTH, }; </script> @@ -209,7 +228,21 @@ export default { :data-can-create-note="getNoteableData.current_user.can_create_note" class="files d-flex prepend-top-default" > - <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div> + <div + v-show="showTreeList" + :style="{ width: `${treeWidth}px` }" + class="diff-tree-list js-diff-tree-list" + > + <panel-resizer + :size.sync="treeWidth" + :start-size="treeWidth" + :min-size="$options.minTreeWidth" + :max-size="$options.maxTreeWidth" + side="right" + @resize-end="cacheTreeListWidth" + /> + <tree-list :hide-file-stats="hideFileStats" /> + </div> <div class="diff-files-holder"> <commit-widget v-if="commit" :commit="commit" /> <template v-if="renderDiffFiles"> diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index 7e00b994541..8fc3af15bea 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -13,6 +13,12 @@ export default { Icon, FileRow, }, + props: { + hideFileStats: { + type: Boolean, + required: true, + }, + }, data() { return { search: '', @@ -40,6 +46,9 @@ export default { return acc; }, []); }, + fileRowExtraComponent() { + return this.hideFileStats ? null : FileRowStats; + }, }, methods: { ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile', 'toggleFileFinder']), @@ -48,7 +57,6 @@ export default { }, }, shortcutKeyCharacter: `${/Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl'}+P`, - FileRowStats, diffTreeFiltering: gon.features && gon.features.diffTreeFiltering, }; </script> @@ -98,7 +106,7 @@ export default { :file="file" :level="0" :hide-extra-on-tree="true" - :extra-component="$options.FileRowStats" + :extra-component="fileRowExtraComponent" :show-changed-icon="true" @toggleTreeOpen="toggleTreeOpen" @clickFile="scrollToFile" diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js index bd188d9de9e..7002655ea49 100644 --- a/app/assets/javascripts/diffs/constants.js +++ b/app/assets/javascripts/diffs/constants.js @@ -36,3 +36,9 @@ export const MR_TREE_SHOW_KEY = 'mr_tree_show'; export const TREE_TYPE = 'tree'; export const TREE_LIST_STORAGE_KEY = 'mr_diff_tree_list'; export const WHITESPACE_STORAGE_KEY = 'mr_show_whitespace'; +export const TREE_LIST_WIDTH_STORAGE_KEY = 'mr_tree_list_width'; + +export const INITIAL_TREE_WIDTH = 320; +export const MIN_TREE_WIDTH = 240; +export const MAX_TREE_WIDTH = 400; +export const TREE_HIDE_STATS_WIDTH = 260; diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index feda882e826..c37a5c3a45f 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -16,6 +16,7 @@ import { MR_TREE_SHOW_KEY, TREE_LIST_STORAGE_KEY, WHITESPACE_STORAGE_KEY, + TREE_LIST_WIDTH_STORAGE_KEY, } from '../constants'; import { diffViewerModes } from '~/ide/constants'; @@ -302,5 +303,9 @@ export const toggleFileFinder = ({ commit }, visible) => { commit(types.TOGGLE_FILE_FINDER_VISIBLE, visible); }; +export const cacheTreeListWidth = (_, size) => { + localStorage.setItem(TREE_LIST_WIDTH_STORAGE_KEY, size); +}; + // prevent babel-plugin-rewire from generating an invalid default during karma tests export default () => {}; diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue index bf736a378dd..8d81940eb91 100644 --- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue +++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue @@ -28,11 +28,12 @@ export default { data() { return { size: this.startSize, + isDragging: false, }; }, computed: { className() { - return `drag-${this.side}`; + return [`position-${this.side}-0`, { 'is-dragging': this.isDragging }]; }, cursorStyle() { if (this.enabled) { @@ -57,6 +58,7 @@ export default { startDrag(e) { if (this.enabled) { e.preventDefault(); + this.isDragging = true; this.startPos = e.clientX; this.currentStartSize = this.size; document.addEventListener('mousemove', this.drag); @@ -80,6 +82,7 @@ export default { }, endDrag(e) { e.preventDefault(); + this.isDragging = false; document.removeEventListener('mousemove', this.drag); this.$emit('resize-end', this.size); }, @@ -91,7 +94,7 @@ export default { <div :class="className" :style="cursorStyle" - class="drag-handle" + class="position-absolute position-top-0 position-bottom-0 drag-handle" @mousedown="startDrag" @dblclick="resetSize" ></div> diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index dc279bfa202..c1f2f5f8c6a 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -446,3 +446,15 @@ img.emoji { .position-left-0 { left: 0; } .position-right-0 { right: 0; } .position-top-0 { top: 0; } + +.drag-handle { + width: 4px; + + &:hover { + background-color: $white-normal; + } + + &.is-dragging { + background-color: $gray-600; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 2ac98b5d18f..a80158943c6 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -682,25 +682,6 @@ $ide-commit-header-height: 48px; flex: 1; } -.drag-handle { - position: absolute; - top: 0; - bottom: 0; - width: 4px; - - &:hover { - background-color: $white-normal; - } - - &.drag-right { - right: 0; - } - - &.drag-left { - left: 0; - } -} - .ide-commit-list-container { display: flex; flex: 1; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index a708149b36c..ae0768592e0 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -1038,12 +1038,30 @@ } .diff-tree-list { - width: 320px; + position: -webkit-sticky; + position: sticky; + $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; + top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; + max-height: calc(100vh - #{$top-pos}); + padding-right: $gl-padding; + z-index: 202; + + .with-performance-bar & { + $performance-bar-top-pos: $performance-bar-height + $top-pos; + top: $performance-bar-top-pos; + max-height: calc(100vh - #{$performance-bar-top-pos}); + } + + .drag-handle { + bottom: 16px; + transform: translateX(-6px); + } } .diff-files-holder { flex: 1; min-width: 0; + z-index: 201; } .compare-versions-container { @@ -1051,23 +1069,12 @@ } .tree-list-holder { - position: -webkit-sticky; - position: sticky; - $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; - top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; - max-height: calc(100vh - #{$top-pos}); - padding-right: $gl-padding; + height: 100%; .file-row { margin-left: 0; margin-right: 0; } - - .with-performance-bar & { - $performance-bar-top-pos: $performance-bar-height + $top-pos; - top: $performance-bar-top-pos; - max-height: calc(100vh - #{$performance-bar-top-pos}); - } } .tree-list-scroll { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 790d438c7e2..883c856870f 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -735,7 +735,7 @@ .mr-version-controls { position: relative; - z-index: 103; + z-index: 203; background: $gray-light; color: $gl-text-color; margin-top: -1px; @@ -809,7 +809,7 @@ .merge-request-tabs-holder { top: $header-height; - z-index: 200; + z-index: 300; background-color: $white-light; border-bottom: 1px solid $border-color; |