From 3cef4286ad859724612070542cf58d79aa6b7f2f Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 9 Jan 2019 17:54:28 -0800
Subject: [PATCH] Templating and styling the multi-select-dropdown component

---
 ui/app/styles/components/dropdown.scss        | 48 +++++++++++++++++--
 .../components/multi-select-dropdown.hbs      | 18 +++++++
 2 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 ui/app/templates/components/multi-select-dropdown.hbs

diff --git a/ui/app/styles/components/dropdown.scss b/ui/app/styles/components/dropdown.scss
index 0be310dd3..0643d07d3 100644
--- a/ui/app/styles/components/dropdown.scss
+++ b/ui/app/styles/components/dropdown.scss
@@ -1,8 +1,11 @@
-.ember-power-select-trigger {
+.ember-power-select-trigger,
+.dropdown-trigger {
+  position: relative;
   padding: 0.3em 16px 0.3em 0.3em;
   border-radius: $radius;
   box-shadow: $button-box-shadow-standard;
   background: $white-bis;
+  border: 1px solid $grey-light;
 
   &.is-outlined {
     border-color: rgba($white, 0.5);
@@ -20,17 +23,52 @@
   }
 }
 
-.ember-power-select-selected-item {
+.dropdown-trigger-label {
+  margin-left: 8px;
+}
+
+.ember-power-select-selected-item,
+.dropdown-item {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ember-power-select-prefix {
+.ember-power-select-prefix,
+.dropdown-prefix {
   color: $grey;
 }
 
-.ember-power-select-option {
-  .ember-power-select-prefix {
+.ember-power-select-option,
+.dropdown-option {
+  .ember-power-select-prefix,
+  .dropdown-prefix {
     display: none;
   }
 }
+
+.dropdown-options {
+  border: 1px solid $grey-light;
+  margin-top: -1px;
+
+  & > ul {
+    width: 100%;
+  }
+
+  .dropdown-option {
+    line-height: 1.75;
+
+    label {
+      display: block;
+      padding: 3px 8px;
+      cursor: pointer;
+    }
+
+    & + .dropdown-option {
+      border-top: 1px solid $grey-lighter;
+    }
+
+    &:hover {
+      background: $white-bis;
+    }
+  }
+}
diff --git a/ui/app/templates/components/multi-select-dropdown.hbs b/ui/app/templates/components/multi-select-dropdown.hbs
new file mode 100644
index 000000000..fe75067bc
--- /dev/null
+++ b/ui/app/templates/components/multi-select-dropdown.hbs
@@ -0,0 +1,18 @@
+{{#basic-dropdown matchTriggerWidth=true as |dd|}}
+  {{#dd.trigger class="dropdown-trigger"}}
+    <span class="dropdown-trigger-label">{{label}}</span>
+    <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
+  {{/dd.trigger}}
+  {{#dd.content class="dropdown-options"}}
+    <ul role="listbox">
+      {{#each options key="key" as |option|}}
+        <li class="dropdown-option">
+          <label>
+            <input type="checkbox" checked={{includes option.key selection}} />
+            {{option.label}}
+          </label>
+        </li>
+      {{/each}}
+    </ul>
+  {{/dd.content}}
+{{/basic-dropdown}}
\ No newline at end of file