From 3bf40b154c1e38c879c40795f24a0d2221e1dbf1 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 9 Sep 2024 12:18:00 -0700
Subject: [PATCH] Better doc link value layout

---
 ...ustom-fields-query-dropdown.component.html |  2 +-
 ...ustom-fields-query-dropdown.component.scss |  8 ++-
 .../document-link.component.html              | 60 +++++++++----------
 .../document-link/document-link.component.ts  |  3 +
 4 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 578955d96..4fd2241f8 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -79,7 +79,7 @@
         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
       }
       @case (CustomFieldQueryOperator.Contains) {
-        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select" placeholder="Search docs" [minimal]="true"></pngx-input-document-link>
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
       }
       @default {
         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
index 3995ffc5e..8c2fd9f73 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
@@ -8,6 +8,7 @@
 ::ng-deep .ng-select-container {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
+  height: 100% !important;
 }
 
 ::ng-deep .ng-select {
@@ -20,10 +21,13 @@
   padding-top: 0 !important;
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;
+  background-image: none !important;
 
-  .ng-select-container {
+  .ng-select-container,
+  .ng-select.ng-select-opened > .ng-select-container {
     border: none !important;
-    min-height: auto !important;
+    min-height: 34px !important;
+    background: none !important;
   }
   .ng-select {
     max-width: 200px;
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.html b/src-ui/src/app/components/common/input/document-link/document-link.component.html
index 94b6033b4..24dcfdca9 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@@ -24,35 +24,33 @@
 }
 
 <ng-template #select>
-  <div class="doc-link-select">
-    <ng-select name="inputId" [(ngModel)]="selectedDocuments"
-      [disabled]="disabled"
-      [items]="foundDocuments$ | async"
-      placeholder="Search for documents"
-      [notFoundText]="notFoundText"
-      [multiple]="true"
-      bindValue="id"
-      [compareWith]="compareDocuments"
-      [trackByFn]="trackByFn"
-      [minTermLength]="2"
-      [loading]="loading"
-      [typeahead]="documentsInput$"
-      (change)="onChange(selectedDocuments)">
-      <ng-template ng-label-tmp let-document="item">
-        <div class="d-flex align-items-center">
-          <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
-          <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
-          </a>
-        </div>
-      </ng-template>
-      <ng-template ng-loadingspinner-tmp>
-        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-        <div class="visually-hidden" i18n>Loading...</div>
-      </ng-template>
-      <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
-        <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
-      </ng-template>
-    </ng-select>
-  </div>
+  <ng-select name="inputId" [(ngModel)]="selectedDocuments"
+    [disabled]="disabled"
+    [items]="foundDocuments$ | async"
+    [placeholder]="placeholder"
+    [notFoundText]="notFoundText"
+    [multiple]="true"
+    bindValue="id"
+    [compareWith]="compareDocuments"
+    [trackByFn]="trackByFn"
+    [minTermLength]="2"
+    [loading]="loading"
+    [typeahead]="documentsInput$"
+    (change)="onChange(selectedDocuments)">
+    <ng-template ng-label-tmp let-document="item">
+      <div class="d-flex align-items-center">
+        <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+        <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
+          <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
+        </a>
+      </div>
+    </ng-template>
+    <ng-template ng-loadingspinner-tmp>
+      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+      <div class="visually-hidden" i18n>Loading...</div>
+    </ng-template>
+    <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+      <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+    </ng-template>
+  </ng-select>
 </ng-template>
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.ts b/src-ui/src/app/components/common/input/document-link/document-link.component.ts
index 0e06da34b..882aacad5 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.ts
@@ -49,6 +49,9 @@ export class DocumentLinkComponent
   @Input()
   minimal: boolean = false
 
+  @Input()
+  placeholder: string = $localize`Search for documents`
+
   constructor(private documentsService: DocumentService) {
     super()
   }