From c926e0242ac87cd3620bbfea82b3012f12e0139e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 21 Jan 2021 11:30:29 -0800
Subject: [PATCH] Add UI hint for option-click

---
 .../filterable-dropdown.component.html               |  9 ++++++++-
 .../filterable-dropdown.component.scss               | 12 ++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index 45a8fdc4f..e2c1cb7da 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -23,11 +23,18 @@
         </ng-container>
       </div>
       <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
-        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>Apply</small>
+        <small class="ml-2" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>Apply</small>
         <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
         </svg>
       </button>
+      <div *ngIf="!editing" class="list-group-item list-group-item-note pt-1 pb-2">
+        <small i18n>Use
+          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-option" viewBox="0 0 16 16">
+            <use xlink:href="assets/bootstrap-icons.svg#option" />
+          </svg>
+           + click to exclude items.</small>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
index 40c93838f..5863cc5b6 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
@@ -12,3 +12,15 @@
     overflow-y: scroll;
   }
 }
+
+small > svg {
+  margin-top: -2px;
+}
+
+.list-group-item-note {
+  line-height: 1;
+
+  small {
+    font-size: 70%;
+  }
+}