fix(orb-ui): Active filters list overflow (#2798)

orb-community · Nov 10, 2023 · 3f59085 · 3f59085
1 parent e10efe2
commit 3f59085
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 67 deletions.
diff --git a/ui/src/app/shared/components/filter/filter.component.html b/ui/src/app/shared/components/filter/filter.component.html
@@ -91,25 +91,23 @@
     (ngModelChange)="onSearchTextChange()">
 </div>
 <div *ngIf="(hasActiveFilters() | async)" class="list-div">
-  <div #filterList class="filters-list">
-    <div class="boundary-div" [style.padding-left.px]="boundryWidth" [style.transform]="'translateX(-' + boundryWidth + 'px)'">
-      <div #filtersDisplay cdkDrag cdkDragLockAxis="x" cdkDragBoundary=".boundary-div" [cdkDragFreeDragPosition]="dragPosition" class="filter-list-display" [style.cursor]="displayCursor">
-        <ng-container *ngFor="let filter of activeFilters$ | async; let index = index" >
-          <div class="filter-item" *ngIf="filter.name !== 'Name'">
-            <div class="filter-name">
-              <span>{{ filter?.name }}</span>
-            </div>
-            <div class="filter-param">
-              <span>{{ filter?.param | paramformatter}}</span>
-            </div>
-            <div class="filter-remove" id="remove-button">
-              <button class="remove-tag-button" (click)="removeFilter(index, filter)">
-                <nb-icon icon="close-outline"></nb-icon>
-              </button>
-            </div>
+  <div class="filters-list">
+    <div class="filter-list-display">
+      <ng-container *ngFor="let filter of activeFilters$ | async; let index = index" >
+        <div class="filter-item" *ngIf="filter.name !== 'Name'">
+          <div class="filter-name">
+            <span>{{ filter?.name }}</span>
           </div>
-        </ng-container>
-      </div>
+          <div class="filter-param">
+            <span>{{ filter?.param | paramformatter}}</span>
+          </div>
+          <div class="filter-remove" id="remove-button">
+            <button class="remove-tag-button" (click)="removeFilter(index, filter)">
+              <nb-icon icon="close-outline"></nb-icon>
+            </button>
+          </div>
+        </div>
+      </ng-container>
     </div>
   </div>
   <button class="clear-filters-button" (click)="clearAllFilters()">

diff --git a/ui/src/app/shared/components/filter/filter.component.scss b/ui/src/app/shared/components/filter/filter.component.scss
@@ -50,15 +50,23 @@
   width: fit-content;
   max-width: calc(100% - 100px);
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   box-sizing: content-box;
+  padding-bottom: 0 !important;
+  scrollbar-width: thin;
+  scrollbar-color: #969fb9 transparent;
 }
-
-.boundary-div {
-  max-width: none !important;
-  height: 22px;
-  width: fit-content;
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: transparent;
 }
+::-webkit-scrollbar-thumb {
+  background: #969fb9;
+  border-radius: 16px;
+}
+
 .filter-list-display {
   position: relative !important;
   display: flex;

diff --git a/ui/src/app/shared/components/filter/filter.component.ts b/ui/src/app/shared/components/filter/filter.component.ts
@@ -14,7 +14,7 @@ import { map } from 'rxjs/operators';
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.scss'],
 })
-export class FilterComponent implements OnInit, OnDestroy, AfterViewInit {
+export class FilterComponent implements OnInit, OnDestroy {
   @Input()
   availableFilters!: FilterOption[];
 
@@ -42,11 +42,6 @@ export class FilterComponent implements OnInit, OnDestroy, AfterViewInit {
 
   selectedFilterParams = [];
 
-  boundryWidth = 0;
-
-  displayCursor = 'auto';
-
-  dragPosition = {x: 0, y: 0};
 
   @ViewChild('filtersDisplay') filtersDisplay!: ElementRef;
 
@@ -113,43 +108,7 @@ export class FilterComponent implements OnInit, OnDestroy, AfterViewInit {
       this.observer = null;
     }
   }
-  ngAfterViewInit() {
-    this.hasActiveFilters().subscribe(hasFilters => {
-      if (hasFilters) {
-        this.observeElementChanges();
-      }
-    });
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event: Event) {
-    this.calcBoundryWidth();
-  }
-
-  observeElementChanges() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-    const boundaryDiv = this.elRef.nativeElement.querySelector('.boundary-div');
-    this.observer = new MutationObserver(() => {
-      this.calcBoundryWidth();
-    });
-    const config = { attributes: true, childList: true, subtree: true };
-    if (boundaryDiv) {
-      this.observer.observe(boundaryDiv, config);
-    }
-  }
 
-  calcBoundryWidth() {
-    const filtersDisplayElement = this.filtersDisplay?.nativeElement;
-    const filterListElement = this.filterList?.nativeElement;
-    if (filtersDisplayElement && filterListElement) {
-      const sub = filtersDisplayElement.offsetWidth - filterListElement.offsetWidth;
-      this.boundryWidth = sub > 0 ? sub : 0;
-      this.displayCursor = this.boundryWidth > 0 ? 'move' : 'auto';
-      this.cdr.detectChanges();
-    }
-  }
   onSearchTextChange() {
     if (this.loadedSearchText) {
       this.filter.findAndRemove(this.loadedSearchText, 'Name');
@@ -176,7 +135,6 @@ export class FilterComponent implements OnInit, OnDestroy, AfterViewInit {
       this.selectedFilterParams = [];
     }
     this.filter.removeFilter(index);
-    this.dragPosition = {x: 0, y: 0};
   }
 
   filterChanged(event: MatSelectChange) {