From 41b71b58a9e1a01e6c360ddee03e67a0d28ec461 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Mon, 11 Jun 2018 13:16:03 +0200 Subject: [PATCH] UX: experimental ranges for local dates --- .../discourse-local-dates-create-form.js.es6 | 117 +++++++++++++++--- .../discourse-local-dates-create-form.hbs | 54 +++++--- .../common/discourse-local-dates.scss | 28 ++++- 3 files changed, 167 insertions(+), 32 deletions(-) diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 index e3c1afefb5e..2027f844171 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 +++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 @@ -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: { diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs index 5b7ae5fa842..9b835945a6a 100644 --- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs +++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs @@ -6,21 +6,47 @@
-
- -
- {{date-picker-future class="date-input" value=date defaultDate="DD-MM-YYYY"}} -
-
+
+
+
+ +
+ {{date-picker class="date-input" value=date defaultDate="DD-MM-YYYY"}} +
+
-
- -
- {{input type="time" value=time class="time-input"}} +
+ +
+ {{input type="time" value=time class="time-input"}} +
+
+
+ + to + +
+
+ +
+ {{date-picker class="date-input" value=toDate defaultDate="DD-MM-YYYY"}} +
+
+ +
+ +
+ {{input type="time" value=toTime class="time-input"}} +
+
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss index c8a5ff0f532..03d434e9b19 100644 --- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss +++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss @@ -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; }