Add scroll shadows to timeline viz lists

Mechanical-Advantage · Sep 3, 2023 · 69034c0 · 69034c0
1 parent 460b424
commit 69034c0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/src/hub/tabControllers/TimelineVizController.ts b/src/hub/tabControllers/TimelineVizController.ts
@@ -295,7 +295,17 @@ export default abstract class TimelineVizController implements TabController {
     return [...activeFields, ...this.getAdditionalActiveFields()];
   }
 
-  periodic() {}
+  periodic() {
+    // Update list shadows
+    Object.values(this.listConfig).forEach((list) => {
+      let content = list.element.firstElementChild as HTMLElement;
+      let shadowTop = list.element.getElementsByClassName("list-shadow-top")[0] as HTMLElement;
+      let shadowBottom = list.element.getElementsByClassName("list-shadow-bottom")[0] as HTMLElement;
+      shadowTop.style.opacity = content.scrollTop === 0 ? "0" : "1";
+      shadowBottom.style.opacity =
+        Math.ceil(content.scrollTop + content.clientHeight) >= content.scrollHeight ? "0" : "1";
+    });
+  }
 
   /** Called every 15ms (regardless of the visible tab). */
   private customPeriodic() {

diff --git a/www/hub.css b/www/hub.css
@@ -428,18 +428,16 @@ div.tab-bar-shadow-right {
   width: 60px;
   top: 0px;
   height: 50px;
-
+  opacity: 0;
   transition: opacity 0.2s ease-in-out;
 }
 
 div.tab-bar-shadow-left {
-  opacity: 0%;
   left: 10px;
   background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0.75), transparent);
 }
 
 div.tab-bar-shadow-right {
-  opacity: 100%;
   right: calc(182px + var(--show-lock-buttons) * 28px + var(--show-update-button) * 38px);
   background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0.75), transparent);
 }
@@ -1465,6 +1463,37 @@ table.timeline-viz-config td.list div.list-content {
   vertical-align: top;
 }
 
+table.timeline-viz-config td.list div.list-shadow-top,
+table.timeline-viz-config td.list div.list-shadow-bottom {
+  position: absolute;
+  left: 0%;
+  width: 100%;
+  height: 30px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+table.timeline-viz-config td.list div.list-shadow-top {
+  top: 0%;
+  background-image: linear-gradient(to bottom, white, transparent);
+}
+
+table.timeline-viz-config td.list div.list-shadow-bottom {
+  bottom: 0%;
+  background-image: linear-gradient(to top, white, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  table.timeline-viz-config td.list div.list-shadow-top {
+    background-image: linear-gradient(to bottom, #222, transparent);
+  }
+
+  table.timeline-viz-config td.list div.list-shadow-bottom {
+    background-image: linear-gradient(to top, #222, transparent);
+  }
+}
+
 table.timeline-viz-config div.list-filler {
   position: absolute;
   left: 0%;

diff --git a/www/hub.html b/www/hub.html
@@ -330,6 +330,8 @@
                 <tr>
                   <td rowspan="3" class="list">
                     <div class="list-content"></div>
+                    <div class="list-shadow-top"></div>
+                    <div class="list-shadow-bottom"></div>
                   </td>
                   <td>
                     <span class="label">Game:</span>
@@ -412,9 +414,13 @@
                 <tr>
                   <td rowspan="3" class="list">
                     <div class="list-content"></div>
+                    <div class="list-shadow-top"></div>
+                    <div class="list-shadow-bottom"></div>
                   </td>
                   <td rowspan="3" class="list">
                     <div class="list-content"></div>
+                    <div class="list-shadow-top"></div>
+                    <div class="list-shadow-bottom"></div>
                   </td>
                   <td>
                     <span class="label">Field:</span>