label-filter-bar: Fix shadow scroll being under content

CATcher-org · Jul 17, 2023 · ebe2728 · ebe2728
1 parent 1b272aa
commit ebe2728
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 35 deletions.
diff --git a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css
@@ -22,17 +22,61 @@
   max-height: 400px;
   width: 100%;
   overflow-y: auto;
+  position: relative;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
+}
+
+/* Ref: https://css-scroll-shadows.vercel.app */
+.scroll-container::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  z-index: 2;
+  height: 7px;
+  width: 100%;
+  display: block;
+  background-image: linear-gradient(to bottom, white 66%, transparent);
+}
+
+.scroll-container::after {
+  pointer-events: none;
+  content: '';
+  position: sticky;
+  z-index: 2;
+  top: 100%;
+  height: 7px;
+  width: 100%;
+  display: block;
+  background-image: linear-gradient(to top, white 66%, transparent);
+}
+
+.scroll-container-wrapper {
+  position: relative;
+}
+
+.scroll-container-wrapper::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.7), transparent);
+}
 
-  /* Ref: https://css-scroll-shadows.vercel.app */
-  background: linear-gradient(white 33%, transparent), linear-gradient(transparent, white 66%) 0 100%,
-    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.7), transparent),
-    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.7), transparent) 0 100%;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-attachment: local, local, scroll, scroll;
-  background-size: 100% 15px, 100% 15px, 100% 5px, 100% 5px;
+.scroll-container-wrapper::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.7), transparent);
 }
 
 .scroll-container::-webkit-scrollbar {

diff --git a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html
@@ -13,34 +13,36 @@
       <input #input matInput placeholder="Find labels" />
     </mat-form-field>
 
-    <div class="scroll-container">
-      <mat-selection-list [(ngModel)]="selectedLabelNames" (selectionChange)="selectedLabels.next(selectedLabelNames)">
-        <mat-list-option
-          #option
-          *ngFor="let label of allLabels"
-          [value]="label.name"
-          [selected]="selectedLabelNames.includes(label.name)"
-          class="list-option"
-          [class.hidden]="filter(input.value, label.name)"
-        >
-          <div class="flexbox-container">
-            <button mat-icon-button *ngIf="!hiddenLabelNames.has(label.name)" (click)="hide(label.name); $event.stopPropagation()">
-              <mat-icon>visibility</mat-icon>
-            </button>
-            <button mat-icon-button *ngIf="hiddenLabelNames.has(label.name)" (click)="show(label.name); $event.stopPropagation()">
-              <mat-icon>visibility_off</mat-icon>
-            </button>
+    <div class="scroll-container-wrapper">
+      <div class="scroll-container">
+        <mat-selection-list [(ngModel)]="selectedLabelNames" (selectionChange)="selectedLabels.next(selectedLabelNames)">
+          <mat-list-option
+            #option
+            *ngFor="let label of allLabels"
+            [value]="label.name"
+            [selected]="selectedLabelNames.includes(label.name)"
+            class="list-option"
+            [class.hidden]="filter(input.value, label.name)"
+          >
+            <div class="flexbox-container">
+              <button mat-icon-button *ngIf="!hiddenLabelNames.has(label.name)" (click)="hide(label.name); $event.stopPropagation()">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button mat-icon-button *ngIf="hiddenLabelNames.has(label.name)" (click)="show(label.name); $event.stopPropagation()">
+                <mat-icon>visibility_off</mat-icon>
+              </button>
 
-            <mat-chip
-              [ngStyle]="labelService.setLabelStyle(label.color)"
-              [disabled]="hiddenLabelNames.has(label.name)"
-              (click)="simulateClick(option); $event.stopPropagation()"
-            >
-              {{ label.name }}
-            </mat-chip>
-          </div>
-        </mat-list-option>
-      </mat-selection-list>
+              <mat-chip
+                [ngStyle]="labelService.setLabelStyle(label.color)"
+                [disabled]="hiddenLabelNames.has(label.name)"
+                (click)="simulateClick(option); $event.stopPropagation()"
+              >
+                {{ label.name }}
+              </mat-chip>
+            </div>
+          </mat-list-option>
+        </mat-selection-list>
+      </div>
     </div>
   </div>
 </mat-menu>