mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Formatting date time editor
Summary: Formatting date and datetime editor. Changing styles for Timezone, DateFormat and TimeFormat section. Test Plan: Existing tests Reviewers: georgegevoian, dsagal Reviewed By: georgegevoian, dsagal Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2899
This commit is contained in:
Jarosław Sadziński
parent
5d461a4df2
commit
09b4aaa90e
@ -8,7 +8,10 @@ var AbstractWidget = require('./AbstractWidget');
|
||||
|
||||
const {fromKoSave} = require('app/client/lib/fromKoSave');
|
||||
const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
|
||||
const {cssRow} = require('app/client/ui/RightPanel');
|
||||
const {cssRow, cssLabel} = require('app/client/ui/RightPanel');
|
||||
const {cssTextInput} = require("app/client/ui2018/editableLabel");
|
||||
const {styled, fromKo} = require('grainjs');
|
||||
const {select} = require('app/client/ui2018/menus');
|
||||
|
||||
/**
|
||||
* DateTextBox - The most basic widget for displaying simple date information.
|
||||
@ -54,13 +57,10 @@ _.extend(DateTextBox.prototype, AbstractWidget.prototype);
|
||||
DateTextBox.prototype.buildDateConfigDom = function() {
|
||||
var self = this;
|
||||
return dom('div',
|
||||
kf.row(
|
||||
1, dom('div.glyphicon.glyphicon-calendar.config_icon'),
|
||||
8, kf.label('Date Format'),
|
||||
9, dom(kf.select(self.standardDateFormat, self.dateFormatOptions), dom.testId("Widget_dateFormat"))
|
||||
),
|
||||
cssLabel("Date Format"),
|
||||
cssRow(dom(select(fromKo(self.standardDateFormat), self.dateFormatOptions), dom.testId("Widget_dateFormat"))),
|
||||
kd.maybe(self.isCustomDateFormat, function() {
|
||||
return dom(kf.text(self.dateFormat), dom.testId("Widget_dateCustomFormat"));
|
||||
return cssRow(dom(textbox(self.dateFormat), dom.testId("Widget_dateCustomFormat")));
|
||||
})
|
||||
);
|
||||
};
|
||||
@ -86,4 +86,33 @@ DateTextBox.prototype.buildDom = function(row) {
|
||||
);
|
||||
};
|
||||
|
||||
// clean up old koform styles
|
||||
const cssClean = styled('div', `
|
||||
flex: 1;
|
||||
margin: 0px;
|
||||
`)
|
||||
|
||||
// override focus - to look like modern ui
|
||||
const cssFocus = styled('div', `
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 3px 2px var(--grist-color-cursor);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
`)
|
||||
|
||||
// helper method to create old style textbox that looks like a new one
|
||||
function textbox(value) {
|
||||
const textDom = kf.text(value);
|
||||
const tzInput = textDom.querySelector('input');
|
||||
dom(tzInput,
|
||||
kd.cssClass(cssTextInput.className),
|
||||
kd.cssClass(cssFocus.className)
|
||||
);
|
||||
dom(textDom,
|
||||
kd.cssClass(cssClean.className)
|
||||
);
|
||||
return textDom;
|
||||
}
|
||||
|
||||
module.exports = DateTextBox;
|
||||
|
||||
@ -12,7 +12,11 @@ var gutil = require('app/common/gutil');
|
||||
const {fromKoSave} = require('app/client/lib/fromKoSave');
|
||||
const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
|
||||
const {testId} = require('app/client/ui2018/cssVars');
|
||||
const {cssRow} = require('app/client/ui/RightPanel');
|
||||
const {cssRow, cssLabel} = require('app/client/ui/RightPanel');
|
||||
const {cssTextInput} = require("app/client/ui2018/editableLabel");
|
||||
const {styled, fromKo} = require('grainjs');
|
||||
const {select} = require('app/client/ui2018/menus');
|
||||
|
||||
|
||||
/**
|
||||
* DateTimeTextBox - The most basic widget for displaying date and time information.
|
||||
@ -77,12 +81,16 @@ DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
|
||||
var self = this;
|
||||
|
||||
// Set up autocomplete for the timezone entry.
|
||||
var textDom = kf.text(self.timezone);
|
||||
var textDom = textbox(self.timezone);
|
||||
var tzInput = textDom.querySelector('input');
|
||||
$(tzInput).autocomplete({
|
||||
source: self.timezoneOptions,
|
||||
classes : {
|
||||
"ui-autocomplete": cssAutocomplete.className
|
||||
},
|
||||
minLength: 1,
|
||||
delay: 10,
|
||||
position : { my: "left top", at: "left bottom+4" },
|
||||
select: function(event, ui) {
|
||||
self.timezone(ui.item.value);
|
||||
return false;
|
||||
@ -90,22 +98,24 @@ DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
|
||||
});
|
||||
|
||||
return dom('div',
|
||||
kf.row(
|
||||
1, dom('div.glyphicon.glyphicon-globe.config_icon'),
|
||||
8, kf.label('Timezone'),
|
||||
9, dom(textDom,
|
||||
cssLabel("Timezone"),
|
||||
cssRow(
|
||||
dom(textDom,
|
||||
kd.toggleClass('invalid-text', this.isInvalidTimezone),
|
||||
dom.testId("Widget_tz"),
|
||||
testId('widget-tz'))
|
||||
dom.on('keydown', (e) => {
|
||||
switch (e.keyCode) {
|
||||
case 13: $(tzInput).autocomplete('close'); break;
|
||||
}
|
||||
}),
|
||||
testId('widget-tz')
|
||||
)
|
||||
),
|
||||
self.buildDateConfigDom(),
|
||||
kf.row(
|
||||
1, dom('div.glyphicon.glyphicon-dashboard.config_icon'),
|
||||
8, kf.label('Time Format'),
|
||||
9, dom(kf.select(self.standardTimeFormat, self.timeFormatOptions), dom.testId("Widget_timeFormat"))
|
||||
),
|
||||
cssLabel("Time Format"),
|
||||
cssRow(dom(select(fromKo(self.standardTimeFormat), self.timeFormatOptions), dom.testId("Widget_timeFormat"))),
|
||||
kd.maybe(self.isCustomTimeFormat, function() {
|
||||
return dom(kf.text(self.timeFormat), dom.testId("Widget_timeCustomFormat"));
|
||||
return cssRow(dom(textbox(self.timeFormat), dom.testId("Widget_timeCustomFormat")));
|
||||
}),
|
||||
isTransformConfig ? null : cssRow(
|
||||
alignmentSelect(fromKoSave(this.alignment))
|
||||
@ -117,4 +127,63 @@ DateTimeTextBox.prototype.buildTransformConfigDom = function() {
|
||||
return this.buildConfigDom(true);
|
||||
};
|
||||
|
||||
// clean up old koform styles
|
||||
const cssClean = styled('div', `
|
||||
flex: 1;
|
||||
margin: 0px;
|
||||
`)
|
||||
|
||||
// override focus - to look like modern ui
|
||||
const cssFocus = styled('div', `
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 3px 2px #5e9ed6;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
`)
|
||||
|
||||
// override styles for jquery auto-complete - to make it look like weasel select menu
|
||||
const cssAutocomplete = styled('ui', `
|
||||
min-width: 208px;
|
||||
font-family: var(--grist-font-family);
|
||||
font-size: var(--grist-medium-font-size);
|
||||
line-height: initial;
|
||||
max-width: 400px;
|
||||
border: 0px !important;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
margin-top: 3px;
|
||||
padding: 8px 0px 16px 0px;
|
||||
box-shadow: 0 2px 20px 0 rgb(38 38 51 / 60%);
|
||||
& li {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
& li:hover {
|
||||
background: #5AC09C;
|
||||
}
|
||||
& li div {
|
||||
border: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
& li:hover div {
|
||||
background: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
`)
|
||||
|
||||
|
||||
// helper method to create old style textbox that looks like a new one
|
||||
function textbox(value) {
|
||||
const textDom = kf.text(value);
|
||||
const tzInput = textDom.querySelector('input');
|
||||
dom(tzInput,
|
||||
kd.cssClass(cssTextInput.className),
|
||||
kd.cssClass(cssFocus.className)
|
||||
);
|
||||
dom(textDom,
|
||||
kd.cssClass(cssClean.className)
|
||||
);
|
||||
return textDom;
|
||||
}
|
||||
|
||||
module.exports = DateTimeTextBox;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user