diff --git a/app/assets/javascripts/discourse/components/period-chooser.js.es6 b/app/assets/javascripts/discourse/components/period-chooser.js.es6
deleted file mode 100644
index e3bc67fb5fe..00000000000
--- a/app/assets/javascripts/discourse/components/period-chooser.js.es6
+++ /dev/null
@@ -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);
- }
- }
-
-});
diff --git a/app/assets/javascripts/discourse/templates/components/period-chooser.hbs b/app/assets/javascripts/discourse/templates/components/period-chooser.hbs
deleted file mode 100644
index ce4d6066c57..00000000000
--- a/app/assets/javascripts/discourse/templates/components/period-chooser.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-{{period-title period showDateRange=true}}
-
-
-
-
diff --git a/app/assets/javascripts/select-kit/components/period-chooser.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser.js.es6
new file mode 100644
index 00000000000..02bb13c9075
--- /dev/null
+++ b/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"));
+ }
+ }
+});
diff --git a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6
new file mode 100644
index 00000000000..2c9c927992f
--- /dev/null
+++ b/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";
+ }
+});
diff --git a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6
new file mode 100644
index 00000000000..0a31c0a7c7c
--- /dev/null
+++ b/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"
+});
diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6
index cf033a2d464..63f597341c8 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/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)());
}
},
diff --git a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs
new file mode 100644
index 00000000000..2f0f825d003
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs
@@ -0,0 +1,5 @@
+
+ {{period-title value showDateRange=true}}
+
+
+{{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
new file mode 100644
index 00000000000..19d2d702fda
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
@@ -0,0 +1 @@
+{{period-title value showDateRange=true}}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index d9628bad291..2036667eb69 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 228ea992ec6..dca38474368 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/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);
- 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 2px 2px rgba(0,0,0,0.4);
max-width: 300px;
width: 300px;
}
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
new file mode 100644
index 00000000000..b62592768c2
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss
index d6cc24df05d..472345a79ee 100644
--- a/app/assets/stylesheets/mobile/directory.scss
+++ b/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;
}