From 2a224cb3b5c67fe259b4da429a807c60a19b5667 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Tue, 15 Dec 2020 14:04:11 +0100
Subject: [PATCH] Overwork chip list in search value selector

Removed the placeholder, fixed the height, made it scrollable like the
filter bars, using elipsis for very long names, inidkated long names
using tooltips
---
 .../search-value-selector.component.html      | 14 +++++++-----
 .../search-value-selector.component.scss      | 22 ++++++++-----------
 .../search-value-selector.component.ts        |  7 ------
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
index 4dcb653db..270c9479b 100644
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.html
@@ -17,22 +17,24 @@
     <mat-option>
         <ngx-mat-select-search [formControl]="searchValue"></ngx-mat-select-search>
     </mat-option>
-    <ng-container *ngIf="multiple && showChips">
-        <div #chipPlaceholder>
-            <div class="os-search-value-selector-chip-container" [style.width]="width">
-                <mat-chip-list class="chip-list" [selectable]="false">
+    <ng-container>
+        <div *ngIf="multiple && showChips" class="h-scroller">
+            <div class="os-search-value-selector-chip-container">
+                <mat-chip-list [selectable]="false">
                     <mat-chip
                         *ngFor="let item of selectedItems"
                         [removable]="true"
                         (removed)="removeChipItem(item)"
                         [disableRipple]="true"
+                        matTooltip="{{ item.getTitle() | translate }}"
                     >
-                        {{ item.getTitle() | translate }}
+                        <span class="ellipsis-overflow">
+                            {{ item.getTitle() | translate }}
+                        </span>
                         <mat-icon matChipRemove>cancel</mat-icon>
                     </mat-chip>
                 </mat-chip-list>
             </div>
-            <div class="os-search-value-selector-chip-placeholder"></div>
         </div>
     </ng-container>
     <ng-container *ngIf="showNotFoundButton && !getFilteredItems().length">
diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
index 63db9e233..753c7e2c6 100644
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
@@ -3,21 +3,17 @@
 }
 
 .os-search-value-selector-chip-container {
-    position: absolute;
-    padding: 8px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    top: 52px;
-    width: 100%;
-    background: white;
-    z-index: 100;
-    min-height: 41px;
+    margin: 5px;
+    width: max-content;
+    height: 30px;
+
+    .mat-chip {
+        max-width: 150px;
+    }
 }
 
-.os-search-value-selector-chip-placeholder {
-    padding: 8px;
-    width: 100%;
-    background: white;
-    min-height: 39px;
+.h-scroller {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .os-not-found-button {
diff --git a/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts b/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts
index 4de12f155..9cbeba6bb 100644
--- a/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts
+++ b/client/src/app/shared/components/search-value-selector/search-value-selector.component.ts
@@ -55,9 +55,6 @@ import { Selectable } from '../selectable';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchValueSelectorComponent extends BaseFormControlComponentDirective<Selectable[]> {
-    @ViewChild('chipPlaceholder', { static: false })
-    public chipPlaceholder: ElementRef<HTMLElement>;
-
     @ViewChild(CdkVirtualScrollViewport, { static: true })
     public cdkVirtualScrollViewPort: CdkVirtualScrollViewport;
 
@@ -134,10 +131,6 @@ export class SearchValueSelectorComponent extends BaseFormControlComponentDirect
 
     public controlType = 'search-value-selector';
 
-    public get width(): string {
-        return this.chipPlaceholder ? `${this.chipPlaceholder.nativeElement.clientWidth - 16}px` : '100%';
-    }
-
     /**
      * All items
      */