From fd93fff39bec528055fc717660208738a5e1e73f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Fri, 15 Apr 2016 17:58:32 +0200 Subject: [PATCH] update pikaday.js to latest and replace date inputs with pikadays --- .../admin/templates/email_preview_digest.hbs | 2 +- .../javascripts/admin/templates/reports.hbs | 4 +- .../components/date-picker-future.js.es6 | 12 ++++ .../components/date-picker-past.js.es6 | 12 ++++ .../discourse/components/date-picker.js.es6 | 2 - .../templates/modal/feature-topic.hbs | 2 +- app/assets/stylesheets/common.scss | 2 +- .../stylesheets/common/admin/admin_base.scss | 6 -- .../common/base/topic-admin-menu.scss | 14 ---- .../common/components/date-picker.css.scss | 22 ++++++ app/assets/stylesheets/vendor/pikaday.scss | 72 +++++++++++++------ public/javascripts/pikaday.js | 15 ++-- 12 files changed, 109 insertions(+), 56 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/date-picker-future.js.es6 create mode 100644 app/assets/javascripts/discourse/components/date-picker-past.js.es6 create mode 100644 app/assets/stylesheets/common/components/date-picker.css.scss diff --git a/app/assets/javascripts/admin/templates/email_preview_digest.hbs b/app/assets/javascripts/admin/templates/email_preview_digest.hbs index 630260f13..7bd2a4455 100644 --- a/app/assets/javascripts/admin/templates/email_preview_digest.hbs +++ b/app/assets/javascripts/admin/templates/email_preview_digest.hbs @@ -3,7 +3,7 @@
- {{input type="date" value=lastSeen id="last-seen"}} + {{date-picker-past value=lastSeen id="last-seen"}} {{user-selector single="true" usernames=username}} diff --git a/app/assets/javascripts/admin/templates/reports.hbs b/app/assets/javascripts/admin/templates/reports.hbs index 53174990b..7f0363a2f 100644 --- a/app/assets/javascripts/admin/templates/reports.hbs +++ b/app/assets/javascripts/admin/templates/reports.hbs @@ -1,8 +1,8 @@

{{model.title}}

- {{i18n 'admin.dashboard.reports.start_date'}} {{input type="date" value=startDate}} - {{i18n 'admin.dashboard.reports.end_date'}} {{input type="date" value=endDate}} + {{i18n 'admin.dashboard.reports.start_date'}} {{date-picker-past value=startDate}} + {{i18n 'admin.dashboard.reports.end_date'}} {{date-picker-past value=endDate}} {{combo-box valueAttribute="value" content=categoryOptions value=categoryId}} {{#if showGroupOptions}} {{combo-box valueAttribute="value" content=groupOptions value=groupId}} diff --git a/app/assets/javascripts/discourse/components/date-picker-future.js.es6 b/app/assets/javascripts/discourse/components/date-picker-future.js.es6 new file mode 100644 index 000000000..fa6ed4037 --- /dev/null +++ b/app/assets/javascripts/discourse/components/date-picker-future.js.es6 @@ -0,0 +1,12 @@ +import DatePicker from "discourse/components/date-picker"; + +export default DatePicker.extend({ + layoutName: "components/date-picker", + + _opts() { + return { + defaultDate: moment().add(1, "day").toDate(), + minDate: new Date(), + }; + } +}); diff --git a/app/assets/javascripts/discourse/components/date-picker-past.js.es6 b/app/assets/javascripts/discourse/components/date-picker-past.js.es6 new file mode 100644 index 000000000..5e9a3ab83 --- /dev/null +++ b/app/assets/javascripts/discourse/components/date-picker-past.js.es6 @@ -0,0 +1,12 @@ +import DatePicker from "discourse/components/date-picker"; + +export default DatePicker.extend({ + layoutName: "components/date-picker", + + _opts() { + return { + defaultDate: new Date(), + maxDate: new Date(), + }; + } +}); diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6 index 53b7c0c42..21825d2ed 100644 --- a/app/assets/javascripts/discourse/components/date-picker.js.es6 +++ b/app/assets/javascripts/discourse/components/date-picker.js.es6 @@ -15,8 +15,6 @@ export default Em.Component.extend({ field: input, container: this.$()[0], format: "YYYY-MM-DD", - defaultDate: moment().add(1, "day").toDate(), - minDate: new Date(), firstDay: moment.localeData().firstDayOfWeek(), i18n: { previousMonth: I18n.t('dates.previous_month'), diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs index 942fa2611..97f8a0e34 100644 --- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs +++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs @@ -39,7 +39,7 @@

{{{pinMessage}}} {{fa-icon "clock-o"}} - {{date-picker value=model.pinnedInCategoryUntil}} + {{date-picker-future value=model.pinnedInCategoryUntil}} {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 992370c48..49b4ad957 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,5 +1,6 @@ @import "vendor/normalize"; @import "vendor/font_awesome/font-awesome"; +@import "vendor/pikaday"; @import "common/foundation/helpers"; @import "common/foundation/base"; @import "vendor/select2"; @@ -11,4 +12,3 @@ @import "common/printer-friendly"; @import "common/base/*"; @import "common/d-editor"; -@import "vendor/pikaday"; diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index b13c4a3bd..414bffb78 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -38,12 +38,6 @@ $mobile-breakpoint: 700px; .filters input { margin-bottom: 0; } } -.admin-contents .admin-reports-filter { - input[type="date"] { - width: 140px; - } -} - td.flaggers td { border-bottom: none; border-top: none; diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss index 667496f92..acabe8664 100644 --- a/app/assets/stylesheets/common/base/topic-admin-menu.scss +++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss @@ -33,15 +33,6 @@ } } -.date-picker-wrapper { - display: inline-block; - position: relative; -} - -.pika-single { - position: absolute !important; -} - .modal-body.feature-topic { padding: 5px; max-height: 500px; @@ -53,11 +44,6 @@ .badge-wrapper { margin-right: 0; } - .date-picker { - text-align: center; - width: 80px; - margin: 0; - } .desc { display: inline-block; vertical-align: middle; diff --git a/app/assets/stylesheets/common/components/date-picker.css.scss b/app/assets/stylesheets/common/components/date-picker.css.scss new file mode 100644 index 000000000..edf976fa7 --- /dev/null +++ b/app/assets/stylesheets/common/components/date-picker.css.scss @@ -0,0 +1,22 @@ +.pika-table { + th, td { + padding: 0 !important; + border-top: none !important; + border-bottom: none !important; + } +} + +.date-picker-wrapper { + display: inline-block; + position: relative; +} + +.date-picker { + text-align: center; + width: 80px; + margin: 0; +} + +.pika-single { + position: absolute !important; +} diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss index a12e8e546..90799a4ea 100644 --- a/app/assets/stylesheets/vendor/pikaday.scss +++ b/app/assets/stylesheets/vendor/pikaday.scss @@ -3,15 +3,43 @@ * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ */ +// Variables +// Declare any of these variables before importing this SCSS file to easily override defaults +// 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-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; + +// Font +$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; + + .pika-single { z-index: 9999; display: block; position: relative; - color: #333; - background: #fff; - border: 1px solid #ccc; - border-bottom-color: #bbb; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: $pd-text-color; + background: $pd-picker-bg; + border: 1px solid $pd-picker-border; + border-bottom-color: $pd-picker-border-bottom; + font-family: $pd-font-family; &.is-hidden { display: none; @@ -19,7 +47,7 @@ &.is-bound { position: absolute; - box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); + box-shadow: 0 5px 15px -5px $pd-picker-shadow; } } @@ -70,7 +98,8 @@ font-size: 14px; line-height: 20px; font-weight: bold; - background-color: #fff; + color: $pd-title-color; + background-color: $pd-title-bg; } .pika-prev, @@ -86,7 +115,9 @@ text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) white-space: nowrap; overflow: hidden; - background: transparent no-repeat center center; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; background-size: 75% 75%; opacity: .5; *position: absolute; @@ -134,7 +165,7 @@ } th { - color: #999; + color: $pd-th-color; font-size: 12px; line-height: 25px; font-weight: bold; @@ -157,35 +188,36 @@ margin: 0; width: 100%; padding: 5px; - color: #666; + color: $pd-day-color; font-size: 12px; line-height: 15px; text-align: right; - background: #f5f5f5; + background: $pd-day-bg; .is-today & { - color: #33aaff; + color: $pd-day-today-color; font-weight: bold; } .is-selected & { - color: #fff; + color: $pd-day-selected-color; font-weight: bold; - background: #33aaff; - box-shadow: inset 0 1px 3px #178fe5; + background: $pd-day-selected-bg; + box-shadow: inset 0 1px 3px $pd-day-selected-shadow; border-radius: 3px; } - .is-disabled & { + .is-disabled &, + .is-outside-current-month & { pointer-events: none; cursor: default; - color: #999; + color: $pd-day-disabled-color; opacity: .3; } &:hover { - color: #fff; - background: #ff8000; + color: $pd-day-hover-color; + background: $pd-day-hover-bg; box-shadow: none; border-radius: 3px; } @@ -193,7 +225,7 @@ .pika-week { font-size: 11px; - color: #999; + color: $pd-week-color; } .is-inrange .pika-button { diff --git a/public/javascripts/pikaday.js b/public/javascripts/pikaday.js index bc0c64474..7fec0fc46 100644 --- a/public/javascripts/pikaday.js +++ b/public/javascripts/pikaday.js @@ -340,7 +340,7 @@ for (i = 0; i < 7; i++) { arr.push('' + renderDayName(opts, i, true) + ''); } - return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; }, renderTitle = function(instance, c, year, month, refYear) @@ -357,8 +357,8 @@ for (arr = [], i = 0; i < 12; i++) { arr.push(''); } monthHtml = '

' + opts.i18n.months[month] + '
'; @@ -373,7 +373,7 @@ for (arr = []; i < j && i <= opts.maxYear; i++) { if (i >= opts.minYear) { - arr.push(''); + arr.push(''); } } yearHtml = '
' + year + opts.yearSuffix + '
'; @@ -428,7 +428,7 @@ } if (!hasClass(target, 'is-disabled')) { - if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) { + if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) { self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day'))); if (opts.bound) { sto(function() { @@ -904,10 +904,7 @@ } if (typeof this._o.onDraw === 'function') { - var self = this; - sto(function() { - self._o.onDraw.call(self); - }, 0); + this._o.onDraw(this); } },