codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

ensure pikaday respects our color scheme

Browse source
This commit is contained in:
Régis Hanol 2016-04-21 20:56:12 +02:00
parent ee7ef46b9e
commit ded03a1aa4
5 changed files with 62 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/javascripts/discourse/components/date-picker.js.es6
View file

@ -9,24 +9,28 @@ export default Em.Component.extend({
@on("didInsertElement")
_loadDatePicker() {
const input = this.$(".date-picker")[0];
const container = $("#" + this.get("containerId"))[0];
loadScript("/javascripts/pikaday.js").then(() => {
let default_opts = {
field: input,
container: this.$()[0],
format: "YYYY-MM-DD",
firstDay: moment.localeData().firstDayOfWeek(),
i18n: {
previousMonth: I18n.t('dates.previous_month'),
nextMonth: I18n.t('dates.next_month'),
months: moment.months(),
weekdays: moment.weekdays(),
weekdaysShort: moment.weekdaysShort()
},
onSelect: date => this.set("value", moment(date).format("YYYY-MM-DD"))
};
Ember.run.next(() => {
let default_opts = {
field: input,
container: container || this.$()[0],
bound: container === undefined,
format: "YYYY-MM-DD",
firstDay: moment.localeData().firstDayOfWeek(),
i18n: {
previousMonth: I18n.t('dates.previous_month'),
nextMonth: I18n.t('dates.next_month'),
months: moment.months(),
weekdays: moment.weekdays(),
weekdaysShort: moment.weekdaysShort()
},
onSelect: date => this.set("value", moment(date).format("YYYY-MM-DD"))
};
this._picker = new Pikaday(_.merge(default_opts, this._opts()));
this._picker = new Pikaday(_.merge(default_opts, this._opts()));
});
});
},

2
app/assets/javascripts/discourse/templates/components/date-picker.hbs
View file

@ -1 +1 @@
<input class="date-picker">
<input type="text" class="date-picker">

6
app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs
View file

@ -1,4 +1,4 @@
<div class="modal-body">
<div class="modal-body change-timestamp">
<p>
{{i18n 'topic.change_timestamp.instructions'}}
</p>
@ -8,9 +8,11 @@
</p>
<form>
{{input type="date" value=date}}
{{date-picker-past value=date containerId="date-container"}}
{{input type="time" value=time}}
</form>
<div id="date-container" />
</div>
<div class="modal-footer">

16
app/assets/stylesheets/desktop/modal.scss
View file

@ -196,3 +196,19 @@
width: 400px;
}
}
.change-timestamp {
min-height: 300px;
.date-picker {
width: 10em;
}
input[type=time] {
width: 6em;
}
form {
margin: 0;
}
}

42
app/assets/stylesheets/vendor/pikaday.scss vendored
View file

@ -1,3 +1,5 @@
@import "common/foundation/variables";
/*!
* Pikaday
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
@ -8,24 +10,24 @@
// Variables are namespaced with the pd (pikaday) prefix
// Colours
$pd-text-color: #333 !default;
$pd-title-color: #333 !default;
$pd-title-bg: #fff !default;
$pd-picker-bg: #fff !default;
$pd-picker-border: #ccc !default;
$pd-picker-border-bottom: #bbb !default;
$pd-text-color: $primary !default;
$pd-title-color: $primary !default;
$pd-title-bg: $secondary !default;
$pd-picker-bg: $secondary !default;
$pd-picker-border: dark-light-diff($secondary, $primary, -20%, 20%) !default;
$pd-picker-border-bottom: dark-light-diff($secondary, $primary, -30%, 30%) !default;
$pd-picker-shadow: rgba(0,0,0,.5) !default;
$pd-th-color: #999 !default;
$pd-day-color: #666 !default;
$pd-day-bg: #f5f5f5 !default;
$pd-day-hover-color: #fff !default;
$pd-day-hover-bg: #ff8000 !default;
$pd-day-today-color: #33aaff !default;
$pd-day-selected-color: #fff !default;
$pd-day-selected-bg: #33aaff !default;
$pd-day-selected-shadow: #178fe5 !default;
$pd-day-disabled-color: #999 !default;
$pd-week-color: #999 !default;
$pd-th-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
$pd-day-color: dark-light-diff($primary, $secondary, -30%, 30%) !default;
$pd-day-bg: dark-light-diff($primary, $secondary, 90%, -90%) !default;
$pd-day-hover-color: $secondary !default;
$pd-day-hover-bg: dark-light-diff($tertiary, $secondary, 30%, -30%) !default;
$pd-day-today-color: $tertiary !default;
$pd-day-selected-color: $secondary !default;
$pd-day-selected-bg: $tertiary !default;
$pd-day-selected-shadow: dark-light-diff($tertiary, $secondary, 50%, -50%) !default;
$pd-day-disabled-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
$pd-week-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
// Font
$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
@ -233,15 +235,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
}
.is-startrange .pika-button {
color: #fff;
color: $secondary;
background: #6CB31D;
box-shadow: none;
border-radius: 3px;
}
.is-endrange .pika-button {
color: #fff;
background: #33aaff;
color: $secondary;
background: $tertiary;
box-shadow: none;
border-radius: 3px;
}