github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 22:43:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improves local-dates modal form UI

Browse Source
This commit is contained in:
Joffrey JAFFEUX
2018-05-30 19:05:41 +02:00
committed by GitHub
parent 8128cbd7db
commit c3ec758107
7 changed files with 225 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6
View File

@ -18,6 +18,7 @@ export default Ember.Component.extend({
this.set("date", moment().format(this.dateFormat));
this.set("time", moment().format(this.timeFormat));
this.set("currentMoment", moment());
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("|"));
@ -34,6 +35,16 @@ export default Ember.Component.extend({
return moment.tz.guess();
},
@computed("formats")
previewedFormats(formats) {
return formats.map(format => {
return {
format: format,
preview: moment().format(format)
};
});
},
@computed
recurringOptions() {
return [
@ -88,6 +99,11 @@ export default Ember.Component.extend({
return dateTime.isValid();
},
@computed("advancedMode")
toggleModeBtnLabel(advancedMode) {
return advancedMode ? "discourse_local_dates.create.form.simple_mode" : "discourse_local_dates.create.form.advanced_mode";
},
actions: {
advancedMode() {
this.toggleProperty("advancedMode");

87
plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
View File

@ -5,56 +5,78 @@
style="overflow: auto"}}
<div class="form">
<div class="control-group">
<div class="controls date-time">
{{date-picker-future class="date" value=date defaultDate="DD-MM-YYYY"}}
{{input type="time" value=time class="time"}}
<span>{{currentUserTimezone}}</span>
<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="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>
<span class="preview">{{currentUserTimezone}}</span>
</div>
<h3>{{i18n "discourse_local_dates.create.form.recurring_title"}}</h3>
<div class="control-group">
{{#unless validDate}}
<span class="validation-error">{{i18n "discourse_local_dates.create.form.invalid_date"}}</span>
{{/unless}}
<div class="control-group recurrence">
<label class="control-label">
{{i18n "discourse_local_dates.create.form.recurring_title"}}
</label>
{{#if advancedMode}}
<label>{{{i18n "discourse_local_dates.create.form.recurring_description"}}}</label>
<p>{{{i18n "discourse_local_dates.create.form.recurring_description"}}}</p>
{{/if}}
<div class="controls">
{{combo-box content=recurringOptions value=recurring none="discourse_local_dates.create.form.recurring_none"}}
{{combo-box content=recurringOptions class="recurrence-input" value=recurring none="discourse_local_dates.create.form.recurring_none"}}
</div>
</div>
{{d-button
class="advanced-mode-btn"
action=(action "advancedMode")
icon="cog"
label="discourse_local_dates.create.form.advanced_mode"}}
{{#if advancedMode}}
<div class="advanced-options">
<div class="control-group">
<label>
<div class="control-group format">
<label>{{i18n "discourse_local_dates.create.form.format_title"}}</label>
<p>
{{i18n "discourse_local_dates.create.form.format_description"}}
(<a target="_blank" rel="noopener" href="https://momentjs.com/docs/#/parsing/string-format/">?</a>)
</label>
<a target="_blank" rel="noopener" href="https://momentjs.com/docs/#/parsing/string-format/">
{{d-icon "question-circle"}}
</a>
</p>
<div class="controls">
{{text-field value=format}}
{{text-field value=format class="format-input"}}
</div>
</div>
<div class="control-group">
<ul class="formats">
{{#each formats as |format|}}
{{#each previewedFormats as |previewedFormat|}}
<li class="format">
<a href {{action "fillFormat" format}}>{{format}}</a>
<a class="moment-format" href {{action "fillFormat" previewedFormat.format}}>
{{previewedFormat.format}}
</a>
<span class="previewed-format">
{{previewedFormat.preview}}
</span>
</li>
{{/each}}
</ul>
</div>
<h3>{{i18n "discourse_local_dates.create.form.timezones_title"}}</h3>
<div class="control-group">
<label>{{i18n "discourse_local_dates.create.form.timezones_description"}}</label>
<div class="control-group timezones">
<label>{{i18n "discourse_local_dates.create.form.timezones_title"}}</label>
<p>{{i18n "discourse_local_dates.create.form.timezones_description"}}</p>
<div class="controls">
{{multi-select allowAny=false maximum=5 content=allTimezones values=timezones}}
{{multi-select class="timezones-input" allowAny=false maximum=5 content=allTimezones values=timezones}}
</div>
</div>
</div>
@ -63,16 +85,19 @@
{{/d-modal-body}}
<div class="modal-footer discourse-local-dates-create-modal-footer">
{{#if validDate}}
{{d-button class="btn"
action="save"
label="discourse_local_dates.create.form.insert"}}
{{else}}
<span class="validation-error">{{i18n "discourse_local_dates.create.form.invalid_date"}}</span>
{{/if}}
<a href {{action "cancel"}}>
{{i18n 'cancel'}}
<a class="cancel-action" href {{action "cancel"}}>
{{i18n "cancel"}}
</a>
{{d-button
class="advanced-mode-btn"
action=(action "advancedMode")
icon="cog"
label=toggleModeBtnLabel}}
</div>