Commit 4d3cf166 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '4848-fix-roadmap-tech-debt' into 'master'

Group Roadmap enhancements

Closes #5088

See merge request gitlab-org/gitlab-ee!4651
parents 4d74ba74 3ce34660
......@@ -32,6 +32,8 @@
shellHeight: 0,
emptyRowHeight: 0,
showEmptyRow: false,
offsetLeft: 0,
showBottomShadow: false,
};
},
computed: {
......@@ -53,11 +55,16 @@
emptyRowCellStyles() {
return `height: ${this.emptyRowHeight}px;`;
},
shadowCellStyles() {
return `left: ${this.offsetLeft}px;`;
},
},
watch: {
shellWidth: function shellWidth() {
// Scroll view to today indicator only when shellWidth is updated.
this.scrollToTodayIndicator();
// Initialize offsetLeft when shellWidth is updated
this.offsetLeft = this.$el.parentElement.offsetLeft;
},
},
mounted() {
......@@ -107,6 +114,8 @@
// set height and show empty row reducing horizontal scrollbar size
this.emptyRowHeight = (this.shellHeight - approxChildrenHeight) - 1;
this.showEmptyRow = true;
} else {
this.showBottomShadow = true;
}
},
/**
......@@ -116,7 +125,7 @@
* update raw element properties upon event via jQuery.
*/
handleScroll() {
const scrollLeft = this.$el.scrollLeft;
const { scrollTop, scrollLeft, scrollHeight, clientHeight } = this.$el;
const tableEl = this.$el.parentElement;
if (tableEl) {
const $theadEl = $(tableEl).find('thead');
......@@ -126,7 +135,8 @@
$theadEl.find('th:nth-child(1)').css('left', scrollLeft);
$tbodyEl.find('td:nth-child(1)').css('left', scrollLeft);
}
eventHub.$emit('epicsListScrolled', this.$el.scrollTop, this.$el.scrollLeft);
this.showBottomShadow = (Math.ceil(scrollTop) + clientHeight) < scrollHeight;
eventHub.$emit('epicsListScrolled', scrollTop, scrollLeft);
},
/**
* `clientWidth` is full width of list section, and we need to
......@@ -148,6 +158,11 @@
:style="tbodyStyles"
@scroll="handleScroll"
>
<tr
v-if="showBottomShadow"
class="bottom-shadow-cell"
:style="shadowCellStyles"
></tr>
<epic-item
v-for="(epic, index) in epics"
:key="index"
......
......@@ -44,8 +44,8 @@
},
methods: {
handleEpicsListScroll(scrollTop) {
// Add class only when content are scrolled at half the height of header
this.scrolledHeaderClass = (scrollTop > this.$el.clientHeight / 2) ? 'scrolled-ahead' : '';
// Add class only when epics list is scrolled at 1% the height of header
this.scrolledHeaderClass = (scrollTop > this.$el.clientHeight / 100) ? 'scrolled-ahead' : '';
},
},
};
......
$item-height: 50px;
$column-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.12) inset;
$scroll-top-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12);
$scroll-top-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.001) 100%);
$scroll-bottom-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.15) 100%);
$border-style: 1px solid $border-gray-normal;
$details-cell-width: 320px;
......@@ -27,11 +28,22 @@ $details-cell-width: 320px;
position: relative;
}
.epics-list-section .bottom-shadow-cell {
position: fixed;
bottom: 0;
height: 10px;
width: $details-cell-width;
pointer-events: none;
background: $scroll-bottom-gradient;
z-index: 3;
}
.epics-list-section .epic-details-cell:after,
.roadmap-timeline-section .timeline-header-blank:after,
.roadmap-timeline-section.scrolled-ahead .timeline-header-blank:before {
content: '';
position: absolute;
pointer-events: none;
}
.epics-list-section .epic-details-cell:after,
......@@ -41,20 +53,19 @@ $details-cell-width: 320px;
height: 100%;
width: 14px;
box-shadow: $column-shadow;
pointer-events: none;
}
.roadmap-timeline-section .timeline-header-blank:after {
top: -2px;
height: 60px;
height: 62px;
}
.roadmap-timeline-section.scrolled-ahead .timeline-header-blank:before {
bottom: -1px;
bottom: -10px;
left: 0;
height: 15px;
height: 10px;
width: 100%;
box-shadow: $scroll-top-shadow;
background: $scroll-top-gradient;
}
.roadmap-timeline-section {
......@@ -86,6 +97,7 @@ $details-cell-width: 320px;
display: block;
top: 2px;
height: 60px;
margin-top: -2px;
width: $details-cell-width;
background-color: $white-light;
border-right: $border-style;
......@@ -122,7 +134,7 @@ $details-cell-width: 320px;
border-bottom: $border-style;
&.label-bold {
font-weight: 700;
font-weight: 600;
}
}
......@@ -178,7 +190,6 @@ $details-cell-width: 320px;
.epic-details-cell {
position: relative;
display: block;
top: 1px; /* Remove cell spacing */
width: $details-cell-width;
padding: $gl-padding-8 $gl-padding;
font-size: $code_font_size;
......@@ -194,7 +205,7 @@ $details-cell-width: 320px;
.epic-title .epic-url {
display: table-cell;
color: $theme-gray-900;
font-weight: bold;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -245,11 +256,11 @@ $details-cell-width: 320px;
}
&.start-date-undefined {
background: linear-gradient(to right, transparent 0%, $blue-200 50%, $blue-500 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0.001) 0%, $blue-200 50%, $blue-500 100%);
}
&.end-date-undefined {
background: linear-gradient(to right, $blue-500 0%, $blue-200 50%, transparent 100%);
background: linear-gradient(to right, $blue-500 0%, $blue-200 50%, rgba(255, 255, 255, 0.001) 100%);
}
&.start-date-outside {
......
---
title: Group Roadmap enhancements
merge_request: 4651
author:
type: changed
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