dlg-ui 1.0.5 → 1.0.7

package/addon/components/dropdown.hbs

@@ -1,21 +1,22 @@
-<div class="dropdown-wrapper {{@class}}" {{did-insert this.loadClickListener}}>
-    <div class="dropdown-select {{if this.isOpen 'open'}}">
-        {{#if this.selectedOption}}
-            {{this.selectedOption.label}}
-            {{!-- TODO - If there is no label, then they submitted just strings and we can use those for a dropdown --}}
-        {{else}}
-            <span class="dropdown-placeholder">
-                {{this.placeholder}}
-            </span>
-        {{/if}}
-    </div>
-    {{#if this.isOpen}}
-        <div class="dropdown-options">
-            {{#each @options as |option|}}
-                <div class="dropdown-option" {{on "click" (fn this.makeSelection option)}}>
-                    {{option.label}}
-                </div>
-            {{/each}}
-        </div>
+<div class='dropdown-wrapper {{@class}}' {{did-insert this.loadClickListener}}>
+  <div class='dropdown-select {{if this.isOpen "open"}}'>
+    {{#if this.selectedOption}}
+      {{this.selectedOption.label}}
+      {{! TODO - If there is no label, then they submitted just strings and we can use those for a dropdown }}
+    {{else}}
+      <span class='dropdown-placeholder'>
+        {{this.placeholder}}
+      </span>
     {{/if}}
+  </div>
+  <div class={{this.dropdownClass}}>
+    {{#each @options as |option|}}
+      <div
+        class='dropdown-option'
+        {{on 'click' (fn this.makeSelection option)}}
+      >
+        {{option.label}}
+      </div>
+    {{/each}}
+  </div>
 </div>

package/addon/components/dropdown.js

@@ -6,6 +6,14 @@ export default class DropdownComponent extends Component {
   @tracked isOpen = false;
   @tracked _selectedOption = this.args.selectedOption;
 
+  get dropdownClass() {
+    if (this.isOpen) {
+      return 'dropdown-options display';
+    } else {
+      return 'dropdown-options';
+    }
+  }
+
   get selectedOption() {
     if (this.args.selectedOption) {
       return this.args.selectedOption;

package/addon/components/header-dropdown.hbs

@@ -1,16 +1,23 @@
-<div class="header-dropdown-wrapper {{@class}}" {{did-insert this.loadClickListener}}>
-    <div class="header-dropdown-select {{if this.isOpen 'open'}}">
-        <span class="header-dropdown-selected">
-            {{this.selectedOption.label}}
-        </span>
-    </div>
-    {{#if this.isOpen}}
-        <div class="header-dropdown-options {{if this.isOpen 'open'}}" {{did-insert this.setDropdownWidth}}>
-            {{#each @options as |option|}}
-                <div class="dropdown-option" {{on "click" (fn this.makeSelection option)}}>
-                    {{option.label}}
-                </div>
-            {{/each}}
-        </div>
-    {{/if}}
+<div
+  class='header-dropdown-wrapper {{@class}}'
+  {{did-insert this.loadClickListener}}
+>
+  <div class='header-dropdown-select {{if this.isOpen "open"}}'>
+    <span class='header-dropdown-selected'>
+      {{this.selectedOption.label}}
+    </span>
+  </div>
+  <div
+    class='header-dropdown-options {{if this.isOpen "open"}}'
+    {{did-insert this.setDropdownWidth}}
+  >
+    {{#each @options as |option|}}
+      <div
+        class='dropdown-option'
+        {{on 'click' (fn this.makeSelection option)}}
+      >
+        {{option.label}}
+      </div>
+    {{/each}}
+  </div>
 </div>

package/addon/components/header-dropdown.js

@@ -52,6 +52,7 @@ export default class DropdownComponent extends Component {
 
     element.addEventListener('click', (event) => {
       if (!event.target.classList.contains('dropdown-option')) {
+        this.setDropdownWidth();
         this.isOpen = !this.isOpen;
       }
     });

package/addon/components/navbar.hbs

@@ -32,6 +32,8 @@
     </div>
   </div>
   <div class='navbar-yield'>
-    {{yield}}
+    <div class='navbar-body'>
+      {{yield}}
+    </div>
   </div>
 </div>

package/addon/styles/addon.css

@@ -22,12 +22,23 @@
 
 .dropdown-options {
   white-space: normal;
+  max-height: 0;
   overflow-wrap: break-word;
   border-style: solid;
   border-top-style: none;
   border-bottom-style: none;
   border-width: 2px;
   background-color: #f6f6f6;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  opacity: 0;
+}
+
+.dropdown-options.display {
+  opacity: 1;
+  max-height: 500px;
+  transform: scaleY(1);
 }
 
 .dropdown-placeholder {
@@ -83,10 +94,18 @@
   border-bottom-style: none;
   border-width: 2px;
   background-color: #f6f6f6;
+  max-height: 0;
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .header-dropdown-options.open {
   border-top-style: solid;
+  opacity: 1;
+  max-height: 500px;
+  transform: scaleY(1);
 }
 
 .header-dropdown-select {
@@ -136,18 +155,23 @@
   width: 100%;
 }
 
+.navbar-body {
+  flex: 1 1 auto;
+  padding: 0 1em;
+}
+
 .navbar-container {
   background-color: #eee;
   position: sticky;
   top: 0;
   left: 0;
-  width: 100%;
   min-height: 5vh;
   height: fit-content;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 10;
+  padding: 0 1em;
 }
 
 .navbar-dropdown .header-dropdown-options {
@@ -176,7 +200,6 @@
   display: flex;
   flex-wrap: wrap;
   width: fit-content;
-  margin-right: 10px;
 }
 
 .navbar-selection {
@@ -185,9 +208,13 @@
   align-items: center;
 }
 
+.navbar-selection:last-child {
+  margin-right: 0;
+}
+
 .navbar-title {
   font-size: clamp(20px, 3vw, 30px);
-  margin: 0px 8px 0px 8px;
+  margin-right: 1em;
   width: fit-content;
   white-space: nowrap;
   font-weight: bold;
@@ -200,6 +227,8 @@
 }
 
 .navbar-yield {
+  display: flex;
+  justify-content: center;
   flex: 1 1 auto;
   padding-top: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlg-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"