infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Form improvements

Browse Source
pull/1/head
yflory 4 years ago
parent 4117274e59
commit 0929b5db47
2 changed files with 150 additions and 9 deletions
Show Stats Download Patch File Download Diff File

29
www/form/app-form.less
Unescape Escape View File

@ -464,6 +464,16 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
position: relative; position: relative;
#cp-form-response-msg {
background: @cp_form-bg1;
margin-bottom: 20px;
padding: 10px;
p:last-child {
margin-bottom: 0;
}
}
.cp-form-creator-results-controls { .cp-form-creator-results-controls {
margin-bottom: 20px; margin-bottom: 20px;
//background: @cp_form-bg1; //background: @cp_form-bg1;
@ -677,6 +687,16 @@
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.cp-form-poll-option, .cp-poll-time-day {
flex-flow: column;
text-align: center;
.cp-form-weekday-separator {
display: none;
}
}
.cp-poll-time-day {
height: 50px;
}
} }
&.cp-form-poll-switch { &.cp-form-poll-switch {
display: flex; display: flex;
@ -706,12 +726,21 @@
} }
.cp-form-poll-option, .cp-poll-switch { .cp-form-poll-option, .cp-poll-switch {
width: 200px; width: 200px;
.cp-form-weekday-separator {
margin-right: 5px;
margin-left: 5px;
}
} }
.cp-poll-time-day { .cp-poll-time-day {
flex-basis: 40px; flex-basis: 40px;
border-right: none; border-right: none;
border-right: 1px solid @cryptpad_text_col; border-right: 1px solid @cryptpad_text_col;
border-bottom: 0px; border-bottom: 0px;
flex-flow: column;
text-align: center;
.cp-form-weekday-separator {
display: none;
}
} }
} }
.cp-form-poll-choice, .cp-form-poll-answer { .cp-form-poll-choice, .cp-form-poll-answer {

130
www/form/inner.js
Unescape Escape View File

@ -575,6 +575,19 @@ define([
]; ];
}; };
var getWeekDays = function (large) {
var baseDate = new Date(2017, 0, 1); // just a Sunday
var weekDays = [];
for(var i = 0; i < 7; i++) {
weekDays.push(baseDate.toLocaleDateString(undefined, { weekday: 'long' }));
baseDate.setDate(baseDate.getDate() + 1);
}
if (!large) {
weekDays = weekDays.map(function (day) { return day.slice(0,3); });
}
return weekDays.map(function (day) { return day.replace(/^./, function (str) { return str.toUpperCase(); }); });
};
var makePollTable = function (answers, opts) { var makePollTable = function (answers, opts) {
// Sort date values // Sort date values
if (opts.type !== "text") { if (opts.type !== "text") {
@ -583,18 +596,25 @@ define([
}); });
} }
// Create first line with options // Create first line with options
var allDays = getWeekDays(true);
var els = opts.values.map(function (data) { var els = opts.values.map(function (data) {
var _date;
if (opts.type === "day") { if (opts.type === "day") {
var _date = new Date(data); _date = new Date(data);
data = _date.toLocaleDateString(); data = _date.toLocaleDateString();
} }
if (opts.type === "time") { if (opts.type === "time") {
var _dateT = new Date(data); _date = new Date(data);
data = Flatpickr.formatDate(_dateT, timeFormat); data = Flatpickr.formatDate(_date, timeFormat);
} }
var day = allDays[_date.getDay()];
return h('div.cp-poll-cell.cp-form-poll-option', { return h('div.cp-poll-cell.cp-form-poll-option', {
title: Util.fixHTML(data) title: Util.fixHTML(data)
}, data); }, [
opts.type === 'day' ? h('span.cp-form-weekday', day) : undefined,
opts.type === 'day' ? h('span.cp-form-weekday-separator', ' - ') : undefined,
h('span', data)
]);
}); });
// Insert axis switch button // Insert axis switch button
var switchAxis = h('button.btn.btn-default', [ var switchAxis = h('button.btn.btn-default', [
@ -611,13 +631,20 @@ define([
opts.values.forEach(function (d) { opts.values.forEach(function (d) {
var date = new Date(d); var date = new Date(d);
var day = date.toLocaleDateString(); var day = date.toLocaleDateString();
_days[day] = _days[day] || 0; _days[day] = {
_days[day]++; n: (_days[day] && _days[day].n) || 0,
name: allDays[date.getDay()]
};
_days[day].n++;
}); });
Object.keys(_days).forEach(function (day) { Object.keys(_days).forEach(function (day) {
days.push(h('div.cp-poll-cell.cp-poll-time-day', { days.push(h('div.cp-poll-cell.cp-poll-time-day', {
style: 'flex-grow:'+(_days[day]-1)+';' style: 'flex-grow:'+(_days[day].n - 1)+';'
}, day)); }, [
h('span.cp-form-weekday', _days[day].name),
h('span.cp-form-weekday-separator', ' - '),
h('span', day)
]));
}); });
lines.unshift(h('div', days)); lines.unshift(h('div', days));
} }
@ -1704,6 +1731,12 @@ define([
return; return;
} }
if (content.answers.msg) {
var description = h('div.cp-form-creator-results-description#cp-form-response-msg');
var $desc = $(description).appendTo($container);
DiffMd.apply(DiffMd.render(content.answers.msg), $desc, APP.common);
}
var controls = h('div.cp-form-creator-results-controls'); var controls = h('div.cp-form-creator-results-controls');
var $controls = $(controls).appendTo($container); var $controls = $(controls).appendTo($container);
var exportButton = h('button.btn.btn-secondary', Messages.exportButton); // XXX form_exportCSV; var exportButton = h('button.btn.btn-secondary', Messages.exportButton); // XXX form_exportCSV;
@ -1835,7 +1868,7 @@ define([
}; };
var addResultsButton = function (framework, content) { var addResultsButton = function (framework, content) {
var $res = $(h('button.cp-toolbar-appmenu', [ var $res = $(h('button.cp-toolbar-appmenu.cp-toolbar-form-button', [
h('i.fa.fa-bar-chart'), h('i.fa.fa-bar-chart'),
h('span.cp-button-name', Messages.form_results) h('span.cp-button-name', Messages.form_results)
])); ]));
@ -2003,6 +2036,18 @@ define([
APP.formBlocks = []; APP.formBlocks = [];
if (APP.isClosed && content.answers.privateKey && !APP.isEditor) {
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
$('body').addClass('cp-app-form-results');
$('.cp-toolbar-form-button').remove();
renderResults(content, answers);
});
return;
}
var evOnChange = Util.mkEvent(); var evOnChange = Util.mkEvent();
if (!APP.isEditor) { if (!APP.isEditor) {
var _answers = Util.clone(answers || {}); var _answers = Util.clone(answers || {});
@ -2453,6 +2498,71 @@ define([
}; };
refreshPublic(); refreshPublic();
var responseMsg = h('div.cp-form-response-msg-container');
var $responseMsg = $(responseMsg);
var refreshResponse = function () {
$responseMsg.empty();
Messages.form_updateMsg = "Update response message"; // XXX
Messages.form_addMsg = "Add response message";
Messages.form_responseMsg = "Add a message that will be displayed in the response page.";
var text = content.answers.msg ? Messages.form_updateMsg : Messages.form_addMsg;
var btn = h('button.btn.btn-secondary', text);
$(btn).click(function () {
var editor;
if (!APP.responseModal) {
var t = h('textarea');
var div = h('div', [
h('p', Messages.form_responseMsg),
t
]);
var cm = SFCodeMirror.create("gfm", CMeditor, t);
editor = APP.responseEditor = cm.editor;
editor.setOption('lineNumbers', true);
editor.setOption('lineWrapping', true);
editor.setOption('styleActiveLine', true);
editor.setOption('readOnly', false);
setTimeout(function () {
editor.setValue(content.answers.msg || '');
editor.refresh();
editor.save();
editor.focus();
});
var buttons = [{
className: 'primary',
name: Messages.settings_save,
onClick: function () {
var v = editor.getValue();
content.answers.msg = v.trim(0, 2000); // XXX max length?
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
refreshResponse();
});
},
//keys: []
}, {
className: 'cancel',
name: Messages.cancel,
onClick: function () {},
keys: [27]
}];
APP.responseModal = UI.dialog.customModal(div, { buttons: buttons });
} else {
editor = APP.responseEditor;
setTimeout(function () {
editor.setValue(content.answers.msg || '');
editor.refresh();
editor.save();
editor.focus();
});
}
UI.openCustomModal(APP.responseModal);
});
$responseMsg.append(btn);
};
refreshResponse();
// Allow anonymous answers // Allow anonymous answers
var privacyContainer = h('div.cp-form-privacy-container'); var privacyContainer = h('div.cp-form-privacy-container');
var $privacy = $(privacyContainer); var $privacy = $(privacyContainer);
@ -2548,11 +2658,13 @@ define([
evOnChange.reg(refreshPublic); evOnChange.reg(refreshPublic);
evOnChange.reg(refreshPrivacy); evOnChange.reg(refreshPrivacy);
evOnChange.reg(refreshEndDate); evOnChange.reg(refreshEndDate);
evOnChange.reg(refreshResponse);
return [ return [
endDateContainer, endDateContainer,
privacyContainer, privacyContainer,
resultsType, resultsType,
responseMsg
]; ];
}; };

Write Preview
Loading…
Cancel
Save