FEATURE: replace period-chooser by a select-kit component

app/assets/javascripts/discourse/components/period-chooser.js.es6

@@ -1,46 +0,0 @@
-import CleansUp from 'discourse/mixins/cleans-up';
-
-export default Ember.Component.extend(CleansUp, {
-  classNames: 'period-chooser',
-  showPeriods: false,
-
-  cleanUp: function() {
-    this.set('showPeriods', false);
-    $('html').off('mousedown.top-period');
-  },
-
-  _clickToClose: function() {
-    const self = this;
-    $('html').off('mousedown.top-period').on('mousedown.top-period', function(e) {
-      const $target = $(e.target);
-      if (($target.prop('id') === 'topic-entrance') || (self.$().has($target).length !== 0)) {
-        return;
-      }
-      self.cleanUp();
-    });
-  },
-
-  click(e) {
-    if ($(e.target).closest('.period-popup').length) { return; }
-
-    if (!this.get('showPeriods')) {
-      if (!this.site.mobileView) {
-        const $chevron = this.$('.d-icon-caret-down');
-        this.$('#period-popup').css($chevron.position());
-      } else {
-        this.$('#period-popup').css({top: this.$().height()});
-      }
-      this.set('showPeriods', true);
-      this._clickToClose();
-    }
-  },
-
-  actions: {
-    changePeriod(p) {
-      this.cleanUp();
-      this.set('period', p);
-      this.sendAction('action', p);
-    }
-  }
-
-});

app/assets/javascripts/discourse/templates/components/period-chooser.hbs

@@ -1,11 +0,0 @@
-<h2>{{period-title period showDateRange=true}}</h2>
-<button>{{d-icon "caret-down"}}</button>
-
-<div id='period-popup' class="{{unless showPeriods 'hidden'}} period-popup">
-  <ul>
-    {{#each site.periods as |p|}}
-      <li><a href {{action "changePeriod" p}}>{{period-title p showDateRange=true}}</a></li>
-    {{/each}}
-  </ul>
-</div>
-<div class='clearfix'></div>

app/assets/javascripts/select-kit/components/period-chooser.js.es6

@@ -0,0 +1,17 @@
+import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: ["period-chooser"],
+  rowComponent: "period-chooser/period-chooser-row",
+  headerComponent: "period-chooser/period-chooser-header",
+  collectionHeight: "auto",
+  content: Ember.computed.alias("site.periods"),
+  value: Ember.computed.alias("period"),
+  isHidden: Ember.computed.alias("showPeriods"),
+
+  actions: {
+    onSelect() {
+      this.sendAction("action", this.get("computedValue"));
+    }
+  }
+});

app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6

@@ -0,0 +1,12 @@
+import DropdownSelectBoxHeaderomponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default DropdownSelectBoxHeaderomponent.extend({
+  layoutName: "select-kit/templates/components/period-chooser/period-chooser-header",
+  classNames: "period-chooser-header",
+
+  @computed("isExpanded")
+  caretIcon(isExpanded) {
+    return isExpanded ? "caret-up" : "caret-down";
+  }
+});

app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6

@@ -0,0 +1,6 @@
+import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
+
+export default DropdownSelectBoxRowComponent.extend({
+  layoutName: "select-kit/templates/components/period-chooser/period-chooser-row",
+  classNames: "period-chooser-row"
+});

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -1,4 +1,4 @@
-const { isNone } = Ember;
+const { isNone, run } = Ember;
 import computed from "ember-addons/ember-computed-decorators";
 import UtilsMixin from "select-kit/mixins/utils";
 import DomHelpersMixin from "select-kit/mixins/dom-helpers";
@@ -246,9 +246,9 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
 
   _boundaryActionHandler(actionName, ...params) {
     if (Ember.get(this.actions, actionName)) {
-      this.send(actionName, ...params);
+      run.next(() => this.send(actionName, ...params));
     } else if (this.get(actionName)) {
-      this.get(actionName)();
+      run.next(() => this.get(actionName)());
     }
   },
 

app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs

@@ -0,0 +1,5 @@
+<h2 class="selected-name" title={{title}}>
+  {{period-title value showDateRange=true}}
+</h2>
+
+{{d-icon caretIcon class="caret-icon"}}

app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs

@@ -0,0 +1 @@
+{{period-title value showDateRange=true}}

app/assets/stylesheets/common/base/_topic-list.scss

@@ -288,71 +288,6 @@ ol.category-breadcrumb {
   padding-right: 3px;
 }
 
-.period-chooser {
-  display: inline-block;
-  @include unselectable;
-
-  h2 {
-    float: left;
-    margin: 5px 0 10px;
-    .top-date-string {
-      font-size: $font-down-1;
-    }
-  }
-
-  .top-date-string {
-    color: dark-light-choose($primary-medium, $secondary-high);
-    font-weight: normal;
-    text-transform: uppercase;
-  }
-
-  button {
-    outline: 0;
-    background: transparent;
-    border: 0;
-    font-size: $font-up-3;
-    padding: 5px 10px 0 10px;
-    line-height: $line-height-large;
-  }
-
-  #period-popup {
-
-    @include unselectable;
-
-    font-size: $font-up-1;
-    border: 1px solid $primary-low;
-    padding: 5px;
-    background: $secondary;
-    position: absolute;
-    z-index: 999;
-    box-shadow: 0 2px 2px rgba(0,0,0, .4);
-
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        margin: 0;
-        padding: 0;
-        font-weight: bold;
-        a, a:visited {
-          display: block;
-          padding: 5px;
-          color: $primary;
-        }
-        .top-date-string {
-          font-weight: normal;
-          font-size: $font-down-1;
-        }
-        &:hover {
-          background-color: $highlight-medium;
-        }
-      }
-    }
-  }
-}
-
 .top-title-buttons {
   display: inline;
 

app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

@@ -18,8 +18,8 @@
     .select-box-kit-body, .select-kit-body {
       border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       background-clip: padding-box;
-      -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+      -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
-              box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+              box-shadow: 0 2px 2px rgba(0,0,0,0.4);
       max-width: 300px;
       width: 300px;
     }

app/assets/stylesheets/common/select-kit/period-chooser.scss

@@ -0,0 +1,64 @@
+.select-kit {
+  &.dropdown-select-box {
+    &.period-chooser {
+      display: inline-flex;
+      position: relative;
+
+      .select-kit-collection {
+        padding: 5px;
+      }
+
+      .period-chooser-header {
+        background: none;
+        border: none;
+        justify-content: flex-start;
+        width: auto;
+        height: auto;
+        padding: 0;
+
+        h2.selected-name {
+          overflow: auto;
+          color: black;
+          display: inline-block;
+          line-height: 31.5px;
+          box-sizing: border-box;
+
+          .top-date-string {
+            font-size: $font-down-1;
+            color: dark-light-choose($primary-medium, $secondary-high);
+            font-weight: normal;
+            text-transform: uppercase;
+          }
+        }
+
+        .d-icon {
+          color: black;
+          opacity: 1;
+          margin: 5px 0 10px 5px;
+          font-size: $font-up-3;
+        }
+
+        &.is-focused, &:hover {
+          background: none;
+          border: none;
+          outline: none;
+        }
+      }
+
+      .period-chooser-row {
+        font-weight: bold;
+        padding: 5px;
+        color: #222;
+        font-size: $font-up-1;
+
+        .top-date-string {
+          font-weight: normal;
+          font-size: $font-down-1;
+          color: dark-light-choose($primary-medium, $secondary-high);
+          text-transform: uppercase;
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/mobile/directory.scss

@@ -1,14 +1,3 @@
-.directory {
-  .period-chooser button {
-    margin: 0;
-  }
-  .period-chooser {
-    li {
-      text-align: left;
-    }
-  }
-}
-
 .user-controls {
   padding: 1em;
 }