FEATURE: replace period-chooser by a select-kit component
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
bd7e21fa99
commit
ec2ce8f763
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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";
|
||||
}
|
||||
});
|
||||
|
|
@ -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"
|
||||
});
|
||||
|
|
@ -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)());
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<h2 class="selected-name" title={{title}}>
|
||||
{{period-title value showDateRange=true}}
|
||||
</h2>
|
||||
|
||||
{{d-icon caretIcon class="caret-icon"}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{period-title value showDateRange=true}}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,3 @@
|
|||
.directory {
|
||||
.period-chooser button {
|
||||
margin: 0;
|
||||
}
|
||||
.period-chooser {
|
||||
li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-controls {
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue