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

Group Roadmap enhancements

Closes #5088

See merge request gitlab-org/gitlab-ee!4651

ee/app/assets/javascripts/roadmap/components/epics_list_section.vue

@@ -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"

ee/app/assets/javascripts/roadmap/components/roadmap_timeline_section.vue

@@ -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' : '';
       },
     },
   };

ee/app/assets/stylesheets/pages/roadmap.scss

 $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 {

ee/changelogs/unreleased/4848-fix-roadmap-tech-debt.yml

+---
+title: Group Roadmap enhancements
+merge_request: 4651
+author:
+type: changed