Commit 91d7e387 authored by Phil Hughes's avatar Phil Hughes

Merge branch '52971-merge-request-file-browser-should-always-be-possible-show-hide' into 'master'

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

Closes #52971

See merge request gitlab-org/gitlab-ce!24103
parents ce171674 a0146dce
......@@ -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"
......
......@@ -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;
......@@ -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);
}
}
......
......@@ -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;
@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;
}
......
---
title: Make possible to toggle file tree while scrolling through diffs
merge_request: !24103
author:
type: changed
......@@ -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 ""
......
......@@ -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',
);
});
......
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