mirror of
https://github.com/discourse/discourse.git
synced 2025-02-20 18:58:10 +00:00
UX: experimental ranges for local dates
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
a6303073a0
commit
41b71b58a9
@ -1,5 +1,5 @@
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { observes } from 'ember-addons/ember-computed-decorators';
|
||||
import { observes } from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
timeFormat: "HH:mm",
|
||||
@ -7,7 +7,9 @@ export default Ember.Component.extend({
|
||||
dateTimeFormat: "YYYY-MM-DD HH:mm",
|
||||
config: null,
|
||||
date: null,
|
||||
toDate: null,
|
||||
time: null,
|
||||
toTime: null,
|
||||
format: null,
|
||||
formats: null,
|
||||
recurring: null,
|
||||
@ -17,10 +19,17 @@ export default Ember.Component.extend({
|
||||
this._super();
|
||||
|
||||
this.set("date", moment().format(this.dateFormat));
|
||||
this.set("time", moment().format(this.timeFormat));
|
||||
this.set("format", `LLL`);
|
||||
this.set("timezones", (this.siteSettings.discourse_local_dates_default_timezones || "").split("|").filter(f => f));
|
||||
this.set("formats", (this.siteSettings.discourse_local_dates_default_formats || "").split("|"));
|
||||
this.set(
|
||||
"timezones",
|
||||
(this.siteSettings.discourse_local_dates_default_timezones || "")
|
||||
.split("|")
|
||||
.filter(f => f)
|
||||
);
|
||||
this.set(
|
||||
"formats",
|
||||
(this.siteSettings.discourse_local_dates_default_formats || "").split("|")
|
||||
);
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
@ -54,53 +63,129 @@ export default Ember.Component.extend({
|
||||
{ name: "Every two months", id: "2.months" },
|
||||
{ name: "Every three months", id: "3.months" },
|
||||
{ name: "Every six months", id: "6.months" },
|
||||
{ name: "Every year", id: "1.years" },
|
||||
{ name: "Every year", id: "1.years" }
|
||||
];
|
||||
},
|
||||
|
||||
@computed()
|
||||
allTimezones() {
|
||||
return _.map(moment.tz.names(), (z) => z);
|
||||
return _.map(moment.tz.names(), z => z);
|
||||
},
|
||||
|
||||
@observes("date", "time", "recurring", "format", "timezones")
|
||||
@observes(
|
||||
"date",
|
||||
"time",
|
||||
"toDate",
|
||||
"toTime",
|
||||
"recurring",
|
||||
"format",
|
||||
"timezones"
|
||||
)
|
||||
_setConfig() {
|
||||
const date = this.get("date");
|
||||
const toDate = this.get("toDate");
|
||||
const time = this.get("time");
|
||||
const toTime = this.get("toTime");
|
||||
const recurring = this.get("recurring");
|
||||
const format = this.get("format");
|
||||
const timezones = this.get("timezones");
|
||||
const dateTime = moment(`${date} ${time}`, this.dateTimeFormat).utc();
|
||||
|
||||
this.set("config", {
|
||||
let dateTime;
|
||||
|
||||
if (time) {
|
||||
dateTime = moment(`${date} ${time}`, this.dateTimeFormat).utc();
|
||||
} else {
|
||||
dateTime = moment(date, this.dateFormat).utc();
|
||||
}
|
||||
|
||||
let toDateTime;
|
||||
if (toTime) {
|
||||
toDateTime = moment(`${toDate} ${toTime}`, this.dateTimeFormat).utc();
|
||||
} else {
|
||||
toDateTime = moment(toDate, this.dateFormat).utc();
|
||||
}
|
||||
|
||||
let config = {
|
||||
date: dateTime.format(this.dateFormat),
|
||||
time: dateTime.format(this.timeFormat),
|
||||
dateTime,
|
||||
recurring,
|
||||
format,
|
||||
timezones,
|
||||
});
|
||||
timezones
|
||||
};
|
||||
|
||||
if (time) {
|
||||
config.time = dateTime.format(this.timeFormat);
|
||||
}
|
||||
|
||||
if (toDate) {
|
||||
config.toDate = toDateTime.format(this.dateFormat);
|
||||
}
|
||||
|
||||
if (toTime) {
|
||||
config.toTime = toDateTime.format(this.timeFormat);
|
||||
}
|
||||
|
||||
if (!time && !toTime && ["LLL", "LLLL", "LLLLL"].includes(format)) {
|
||||
config.format = "LL";
|
||||
}
|
||||
|
||||
if (toDate) {
|
||||
config.toDateTime = toDateTime;
|
||||
}
|
||||
|
||||
this.set("config", config);
|
||||
},
|
||||
|
||||
getTextConfig(config) {
|
||||
let text = `[date=${config.date} `;
|
||||
if (config.recurring) text += `recurring=${config.recurring} `;
|
||||
text += `time=${config.time} `;
|
||||
|
||||
if (config.time) {
|
||||
text += `time=${config.time} `;
|
||||
}
|
||||
|
||||
text += `format="${config.format}" `;
|
||||
text += `timezones="${config.timezones.join("|")}"`;
|
||||
text += `]`;
|
||||
|
||||
if (config.toDate) {
|
||||
text += ` ➡ `;
|
||||
text += `[date=${config.toDate} `;
|
||||
|
||||
if (config.toTime) {
|
||||
text += `time=${config.toTime} `;
|
||||
}
|
||||
|
||||
text += `format="${config.format}" `;
|
||||
text += `timezones="${config.timezones.join("|")}"`;
|
||||
text += `]`;
|
||||
}
|
||||
|
||||
return text;
|
||||
},
|
||||
|
||||
@computed("config.dateTime")
|
||||
validDate(dateTime) {
|
||||
@computed("config.dateTime", "config.toDateTime")
|
||||
validDate(dateTime, toDateTime) {
|
||||
if (!dateTime) return false;
|
||||
|
||||
if (toDateTime) {
|
||||
if (!toDateTime.isValid()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (toDateTime.diff(dateTime) < 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return dateTime.isValid();
|
||||
},
|
||||
|
||||
@computed("advancedMode")
|
||||
toggleModeBtnLabel(advancedMode) {
|
||||
return advancedMode ? "discourse_local_dates.create.form.simple_mode" : "discourse_local_dates.create.form.advanced_mode";
|
||||
return advancedMode
|
||||
? "discourse_local_dates.create.form.simple_mode"
|
||||
: "discourse_local_dates.create.form.advanced_mode";
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
||||
@ -6,21 +6,47 @@
|
||||
|
||||
<div class="form">
|
||||
<div class="date-time-configuration">
|
||||
<div class="control-group date">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.date_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{date-picker-future class="date-input" value=date defaultDate="DD-MM-YYYY"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="range">
|
||||
<div class="from">
|
||||
<div class="control-group date">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.date_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{date-picker class="date-input" value=date defaultDate="DD-MM-YYYY"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group time">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.time_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{input type="time" value=time class="time-input"}}
|
||||
<div class="control-group time">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.time_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{input type="time" value=time class="time-input"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="to-indicator"><span>to</span></span>
|
||||
|
||||
<div class="to">
|
||||
<div class="control-group date">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.date_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{date-picker class="date-input" value=toDate defaultDate="DD-MM-YYYY"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group time">
|
||||
<label class="control-label">
|
||||
{{i18n "discourse_local_dates.create.form.time_title"}}
|
||||
</label>
|
||||
<div class="controls">
|
||||
{{input type="time" value=toTime class="time-input"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -60,6 +60,25 @@
|
||||
.date-time-configuration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
.range {
|
||||
.from {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.to {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.to-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
.date-input {
|
||||
@ -76,8 +95,6 @@
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-right: 1em;
|
||||
|
||||
.time-input {
|
||||
margin: 0 0.5em 0 0;
|
||||
width: 120px;
|
||||
@ -86,13 +103,20 @@
|
||||
}
|
||||
|
||||
.preview {
|
||||
flex: 1;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include small-width {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.range .from,
|
||||
.range .to {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.date .date-input .date-picker {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user