Archives
/
gristlabs_grist-core
mirror of https://github.com/gristlabs/grist-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(core) Formatting date time editor

Browse Source 
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
pull/9/head
Jarosław Sadziński 3 years ago
parent 5d461a4df2
commit 09b4aaa90e
2 changed files with 118 additions and 20 deletions
Show Stats Download Patch File Download Diff File

43
app/client/widgets/DateTextBox.js
Unescape View File

@ -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;

95
app/client/widgets/DateTimeTextBox.js
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save