From 1fafb9ace6af9da4a977f78dc88cd3f1a6680ca9 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 13 Dec 2020 14:40:17 -0800
Subject: [PATCH] Prettier styling on dropdowns

---
 .../filter-dropdown-date.component.html       |  4 +--
 .../filter-dropdown-button.component.html     |  4 +--
 .../filter-dropdown.component.html            | 28 ++++++++++++++-----
 .../filter-dropdown.component.scss            |  9 ++++--
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
index 94da65d7c..e41f7c7ab 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
@@ -7,9 +7,9 @@
     </ng-container>
     {{title}}
   </button>
-  <div class="dropdown-menu date-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-        <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex" role="menuitem" (click)="setDateQuickFilter(range)">
+        <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
           <ng-container *ngIf="isStringRange(range)">This </ng-container>
           {{ range }}
           <ng-container *ngIf="!isStringRange(range)"> days</ng-container>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
index 10068c675..eef4e2c17 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
@@ -1,4 +1,4 @@
-<button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" (click)="toggleItem()">
+<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
   <div class="selected-icon mr-1">
     <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
@@ -8,5 +8,5 @@
     <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
     <ng-template #displayName><small>{{item.name}}</small></ng-template>
   </div>
-  <div class="badge bg-primary text-light rounded-pill ml-auto">{{item.document_count}}</div>
+  <div class="badge badge-light rounded-pill ml-auto">{{item.document_count}}</div>
 </button>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
index b2d82f3d0..99ab629dc 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
@@ -1,18 +1,32 @@
   <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)">
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>
-    <ng-container *ngIf="itemsSelected?.length > 0">
-      <div class="badge bg-primary text-light rounded-pill ml-auto">{{itemsSelected?.length}}</div>
-    </ng-container>
+      <div class="badge bg-primary text-light rounded-pill ml-auto">
+        <ng-container *ngIf="itemsSelected?.length > 0">
+        {{itemsSelected?.length}}
+      </ng-container>
+      </div>
     {{title}}
   </button>
-  <div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
-      <ng-container *ngIf="items">
+      <div class="list-group-item">
+        <div class="input-group input-group-sm">
+          <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+          <div class="input-group-append">
+            <span class="input-group-text bg-light text-muted">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="items" class="items">
         <ng-container *ngFor="let item of items | filter: filterText; let i = index">
           <app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
         </ng-container>
-      </ng-container>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
index 5551b0329..d34729eee 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
@@ -1,5 +1,8 @@
-.quick-filter {
+.dropdown-menu {
   min-width: 250px;
-  max-height: 400px;
-  overflow-y: scroll;
+
+  .items {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
 }