Commit a0146dce authored by Sam Bigelow's avatar Sam Bigelow Committed by Phil Hughes

Resolve "Merge request file browser should always be possible show/hide"

parent ce171674
...@@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'; ...@@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility'; import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import CompareVersionsDropdown from './compare_versions_dropdown.vue'; import CompareVersionsDropdown from './compare_versions_dropdown.vue';
...@@ -54,10 +55,19 @@ export default { ...@@ -54,10 +55,19 @@ export default {
showDropdowns() { showDropdowns() {
return !this.commit && this.mergeRequestDiffs.length; 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() { baseVersionPath() {
return this.mergeRequestDiff.base_version_path; return this.mergeRequestDiff.base_version_path;
}, },
}, },
mounted() {
polyfillSticky(this.$el);
},
methods: { methods: {
...mapActions('diffs', [ ...mapActions('diffs', [
'setInlineDiffViewType', 'setInlineDiffViewType',
...@@ -73,7 +83,7 @@ export default { ...@@ -73,7 +83,7 @@ export default {
</script> </script>
<template> <template>
<div class="mr-version-controls"> <div class="mr-version-controls" :class="{ 'is-fileTreeOpen': showTreeList }">
<div class="mr-version-menus-container content-block"> <div class="mr-version-menus-container content-block">
<button <button
v-gl-tooltip.hover v-gl-tooltip.hover
...@@ -82,10 +92,10 @@ export default { ...@@ -82,10 +92,10 @@ export default {
:class="{ :class="{
active: showTreeList, active: showTreeList,
}" }"
:title="__('Toggle file browser')" :title="toggleFileBrowserTitle"
@click="toggleShowTreeList" @click="toggleShowTreeList"
> >
<icon name="hamburger" /> <icon :name="fileTreeIcon" />
</button> </button>
<div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container"> <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
Changes between Changes between
...@@ -108,7 +118,7 @@ export default { ...@@ -108,7 +118,7 @@ export default {
{{ __('Viewing commit') }} {{ __('Viewing commit') }}
<gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link> <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
</div> </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 <gl-button
v-if="commit || startVersion" v-if="commit || startVersion"
:href="latestVersionPath" :href="latestVersionPath"
......
...@@ -664,3 +664,8 @@ $priority-label-empty-state-width: 114px; ...@@ -664,3 +664,8 @@ $priority-label-empty-state-width: 114px;
Issues Analytics Issues Analytics
*/ */
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
/*
Merge Requests
*/
$mr-tabs-height: 51px;
$mr-version-controls-height: 56px;
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
@media (min-width: map-get($grid-breakpoints, md)) { @media (min-width: map-get($grid-breakpoints, md)) {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: $header-height + 51px; top: $mr-version-controls-height + $header-height + $mr-tabs-height;
margin-left: -1px; margin-left: -1px;
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
z-index: 102; z-index: 102;
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
.with-performance-bar & { .with-performance-bar & {
top: $header-height + 36px + $performance-bar-height; top: $header-height + 36px + $performance-bar-height;
} }
} }
...@@ -34,7 +35,7 @@ ...@@ -34,7 +35,7 @@
} }
.with-performance-bar & { .with-performance-bar & {
top: 127px; top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height;
} }
} }
...@@ -1026,8 +1027,9 @@ ...@@ -1026,8 +1027,9 @@
.tree-list-holder { .tree-list-holder {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 100px; $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
max-height: calc(100vh - 100px); top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
max-height: calc(100vh - $top-pos);
padding-right: $gl-padding; padding-right: $gl-padding;
.file-row { .file-row {
...@@ -1036,8 +1038,9 @@ ...@@ -1036,8 +1038,9 @@
} }
.with-performance-bar & { .with-performance-bar & {
top: 135px; $performance-bar-top-pos: $performance-bar-height + $top-pos;
max-height: calc(100vh - 135px); top: $performance-bar-top-pos;
max-height: calc(100vh - $performance-bar-top-pos);
} }
} }
......
...@@ -708,6 +708,7 @@ ...@@ -708,6 +708,7 @@
.mr-version-controls { .mr-version-controls {
position: relative; position: relative;
z-index: 103;
background: $gray-light; background: $gray-light;
color: $gl-text-color; color: $gl-text-color;
...@@ -755,13 +756,37 @@ ...@@ -755,13 +756,37 @@
color: $orange-500; color: $orange-500;
padding-right: 5px; 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 { .merge-request-tabs-holder {
top: $header-height; top: $header-height;
z-index: 200; z-index: 200;
background-color: $white-light; 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) { @include media-breakpoint-up(sm) {
position: sticky; position: sticky;
...@@ -816,7 +841,7 @@ ...@@ -816,7 +841,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@include media-breakpoint-down(md) { @include media-breakpoint-down(sm) {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
......
---
title: Make possible to toggle file tree while scrolling through diffs
merge_request: !24103
author:
type: changed
...@@ -3574,6 +3574,9 @@ msgstr "" ...@@ -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." 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 "" msgstr ""
msgid "Hide file browser"
msgstr ""
msgid "Hide host keys manual input" msgid "Hide host keys manual input"
msgstr "" msgstr ""
...@@ -6345,6 +6348,9 @@ msgstr "" ...@@ -6345,6 +6348,9 @@ msgstr ""
msgid "Show complete raw log" msgid "Show complete raw log"
msgstr "" msgstr ""
msgid "Show file browser"
msgstr ""
msgid "Show latest version" msgid "Show latest version"
msgstr "" msgstr ""
...@@ -7431,9 +7437,6 @@ msgstr "" ...@@ -7431,9 +7437,6 @@ msgstr ""
msgid "Toggle discussion" msgid "Toggle discussion"
msgstr "" msgstr ""
msgid "Toggle file browser"
msgstr ""
msgid "Toggle navigation" msgid "Toggle navigation"
msgstr "" msgstr ""
......
...@@ -22,10 +22,10 @@ describe('CompareVersions', () => { ...@@ -22,10 +22,10 @@ describe('CompareVersions', () => {
const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list'); const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
expect(treeListBtn).not.toBeNull(); 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.querySelectorAll('svg use').length).not.toBe(0);
expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain( expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain(
'#hamburger', '#collapse-left',
); );
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment