mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-23 15:48:43 -05:00
update pikaday.js to latest and replace date inputs with pikadays
This commit is contained in:
Régis Hanol
parent
e492ed64ec
commit
fd93fff39b
12 changed files with 109 additions and 56 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<div class='admin-controls'>
|
||||
<div class='span7 controls'>
|
||||
<label for='last-seen'>{{i18n 'admin.email.last_seen_user'}}</label>
|
||||
{{input type="date" value=lastSeen id="last-seen"}}
|
||||
{{date-picker-past value=lastSeen id="last-seen"}}
|
||||
<label>{{i18n 'admin.email.user'}}:</label>
|
||||
{{user-selector single="true" usernames=username}}
|
||||
<button class='btn' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<h3>{{model.title}}</h3>
|
||||
|
||||
<div class="admin-reports-filter">
|
||||
{{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}}
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -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(),
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<p class="with-validation">
|
||||
{{{pinMessage}}}
|
||||
{{fa-icon "clock-o"}}
|
||||
{{date-picker value=model.pinnedInCategoryUntil}}
|
||||
{{date-picker-future value=model.pinnedInCategoryUntil}}
|
||||
{{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
72
app/assets/stylesheets/vendor/pikaday.scss
vendored
72
app/assets/stylesheets/vendor/pikaday.scss
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@
|
|||
for (i = 0; i < 7; i++) {
|
||||
arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
|
||||
}
|
||||
return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
|
||||
return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
|
||||
},
|
||||
|
||||
renderTitle = function(instance, c, year, month, refYear)
|
||||
|
|
@ -357,8 +357,8 @@
|
|||
|
||||
for (arr = [], i = 0; i < 12; i++) {
|
||||
arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
|
||||
(i === month ? ' selected': '') +
|
||||
((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
|
||||
(i === month ? ' selected="selected"': '') +
|
||||
((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
|
||||
opts.i18n.months[i] + '</option>');
|
||||
}
|
||||
monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
|
||||
|
|
@ -373,7 +373,7 @@
|
|||
|
||||
for (arr = []; i < j && i <= opts.maxYear; i++) {
|
||||
if (i >= opts.minYear) {
|
||||
arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
|
||||
arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"': '') + '>' + (i) + '</option>');
|
||||
}
|
||||
}
|
||||
yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
|
||||
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue