From ded03a1aa4ebf72d73187e7214f72fc57a9a8dac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Thu, 21 Apr 2016 20:56:12 +0200 Subject: [PATCH] ensure pikaday respects our color scheme --- .../discourse/components/date-picker.js.es6 | 34 ++++++++------- .../templates/components/date-picker.hbs | 2 +- .../templates/modal/change-timestamp.hbs | 6 ++- app/assets/stylesheets/desktop/modal.scss | 16 +++++++ app/assets/stylesheets/vendor/pikaday.scss | 42 ++++++++++--------- 5 files changed, 62 insertions(+), 38 deletions(-) diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6 index 21825d2ed..ea8664878 100644 --- a/app/assets/javascripts/discourse/components/date-picker.js.es6 +++ b/app/assets/javascripts/discourse/components/date-picker.js.es6 @@ -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())); + }); }); }, diff --git a/app/assets/javascripts/discourse/templates/components/date-picker.hbs b/app/assets/javascripts/discourse/templates/components/date-picker.hbs index 7d9e48080..a2c89401a 100644 --- a/app/assets/javascripts/discourse/templates/components/date-picker.hbs +++ b/app/assets/javascripts/discourse/templates/components/date-picker.hbs @@ -1 +1 @@ - + diff --git a/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs b/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs index c76c58e12..5114bd9cf 100644 --- a/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs +++ b/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs @@ -1,4 +1,4 @@ -
+

{{i18n 'topic.change_timestamp.instructions'}}

@@ -8,9 +8,11 @@

- {{input type="date" value=date}} + {{date-picker-past value=date containerId="date-container"}} {{input type="time" value=time}}
+ +
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index 82a1ee16f..cf4902e5a 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -196,3 +196,19 @@ width: 400px; } } + +.change-timestamp { + min-height: 300px; + + .date-picker { + width: 10em; + } + + input[type=time] { + width: 6em; + } + + form { + margin: 0; + } +} diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss index 90799a4ea..646f08ed0 100644 --- a/app/assets/stylesheets/vendor/pikaday.scss +++ b/app/assets/stylesheets/vendor/pikaday.scss @@ -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; }