diff options
7 files changed, 68 insertions, 17 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index f0a827be7e8..3770b5c8864 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility'; +import { polyfillSticky } from '~/lib/utils/sticky'; import Icon from '~/vue_shared/components/icon.vue'; import CompareVersionsDropdown from './compare_versions_dropdown.vue'; @@ -54,10 +55,19 @@ export default { showDropdowns() { return !this.commit && this.mergeRequestDiffs.length; }, + fileTreeIcon() { + return this.showTreeList ? 'collapse-left' : 'expand-left'; + }, + toggleFileBrowserTitle() { + return this.showTreeList ? __('Hide file browser') : __('Show file browser'); + }, baseVersionPath() { return this.mergeRequestDiff.base_version_path; }, }, + mounted() { + polyfillSticky(this.$el); + }, methods: { ...mapActions('diffs', [ 'setInlineDiffViewType', @@ -73,7 +83,7 @@ export default { </script> <template> - <div class="mr-version-controls"> + <div class="mr-version-controls" :class="{ 'is-fileTreeOpen': showTreeList }"> <div class="mr-version-menus-container content-block"> <button v-gl-tooltip.hover @@ -82,10 +92,10 @@ export default { :class="{ active: showTreeList, }" - :title="__('Toggle file browser')" + :title="toggleFileBrowserTitle" @click="toggleShowTreeList" > - <icon name="hamburger" /> + <icon :name="fileTreeIcon" /> </button> <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container"> Changes between @@ -108,7 +118,7 @@ export default { {{ __('Viewing commit') }} <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link> </div> - <div class="inline-parallel-buttons d-none d-md-flex ml-auto"> + <div class="inline-parallel-buttons d-none d-lg-flex ml-auto"> <gl-button v-if="commit || startVersion" :href="latestVersionPath" diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c1666c728f3..e886a54dc99 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -664,3 +664,8 @@ $priority-label-empty-state-width: 114px; Issues Analytics */ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); +/* +Merge Requests +*/ +$mr-tabs-height: 51px; +$mr-version-controls-height: 56px; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index b78f11aadf1..4f804866886 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -9,7 +9,7 @@ @media (min-width: map-get($grid-breakpoints, md)) { position: -webkit-sticky; position: sticky; - top: $header-height + 51px; + top: $mr-version-controls-height + $header-height + $mr-tabs-height; margin-left: -1px; border-left: 1px solid $border-color; z-index: 102; @@ -19,6 +19,7 @@ .with-performance-bar & { top: $header-height + 36px + $performance-bar-height; + } } @@ -34,7 +35,7 @@ } .with-performance-bar & { - top: 127px; + top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height; } } @@ -1026,8 +1027,9 @@ .tree-list-holder { position: -webkit-sticky; position: sticky; - top: 100px; - max-height: calc(100vh - 100px); + $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; .file-row { @@ -1036,8 +1038,9 @@ } .with-performance-bar & { - top: 135px; - max-height: calc(100vh - 135px); + $performance-bar-top-pos: $performance-bar-height + $top-pos; + top: $performance-bar-top-pos; + max-height: calc(100vh - $performance-bar-top-pos); } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 1e4b8d8b7e4..53afb182b54 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -708,6 +708,7 @@ .mr-version-controls { position: relative; + z-index: 103; background: $gray-light; color: $gl-text-color; @@ -755,13 +756,37 @@ color: $orange-500; padding-right: 5px; } + + @include media-breakpoint-up(md) { + position: -webkit-sticky; + position: sticky; + top: $header-height + $mr-tabs-height; + width: 100%; + border-top: 1px solid $border-color; + + &.is-fileTreeOpen { + margin-left: -16px; + width: calc(100% + 32px); + } + + .mr-version-menus-container { + flex-wrap: nowrap; + } + + .with-performance-bar & { + top: $header-height + $performance-bar-height + $mr-tabs-height; + } + } } .merge-request-tabs-holder { top: $header-height; z-index: 200; background-color: $white-light; - border-bottom: 1px solid $border-color; + + @include media-breakpoint-down(md) { + border-bottom: 1px solid $border-color; + } @include media-breakpoint-up(sm) { position: sticky; @@ -816,7 +841,7 @@ display: flex; justify-content: space-between; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(sm) { flex-direction: column-reverse; } diff --git a/changelogs/unreleased/52971-merge-request-file-browser-should-always-be-possible-show-hide.yml b/changelogs/unreleased/52971-merge-request-file-browser-should-always-be-possible-show-hide.yml new file mode 100644 index 00000000000..b661c55957d --- /dev/null +++ b/changelogs/unreleased/52971-merge-request-file-browser-should-always-be-possible-show-hide.yml @@ -0,0 +1,5 @@ +--- +title: Make possible to toggle file tree while scrolling through diffs +merge_request: !24103 +author: +type: changed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 795a46382a7..55e2e82e13e 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -3574,6 +3574,9 @@ msgstr "" msgid "Here is the public SSH key that needs to be added to the remote server. For more information, please refer to the documentation." msgstr "" +msgid "Hide file browser" +msgstr "" + msgid "Hide host keys manual input" msgstr "" @@ -6345,6 +6348,9 @@ msgstr "" msgid "Show complete raw log" msgstr "" +msgid "Show file browser" +msgstr "" + msgid "Show latest version" msgstr "" @@ -7431,9 +7437,6 @@ msgstr "" msgid "Toggle discussion" msgstr "" -msgid "Toggle file browser" -msgstr "" - msgid "Toggle navigation" msgstr "" diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js index 50135b0cf86..a976c6b837f 100644 --- a/spec/javascripts/diffs/components/compare_versions_spec.js +++ b/spec/javascripts/diffs/components/compare_versions_spec.js @@ -22,10 +22,10 @@ describe('CompareVersions', () => { const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list'); expect(treeListBtn).not.toBeNull(); - expect(treeListBtn.dataset.originalTitle).toBe('Toggle file browser'); + expect(treeListBtn.dataset.originalTitle).toBe('Hide file browser'); expect(treeListBtn.querySelectorAll('svg use').length).not.toBe(0); expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain( - '#hamburger', + '#collapse-left', ); }); |