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

remove hacky experiments with charts.css

Browse Source 
...and finalize forms changes
pull/1/head
ansuz 3 years ago
parent 1e12b85b7c
commit cad514cc17
8 changed files with 85 additions and 256 deletions
Show Stats Download Patch File Download Diff File

19
customize.dist/src/less2/include/charts.less
Unescape Escape View File

@ -50,23 +50,4 @@
} }
} }
} }
&.bar {
th {
//width: 200px !important;
font-size: 10px; // XXX
}
td {
margin-top: 0.25em;
background: @cryptpad_color_brand_fade !important;
color: @cryptpad_color_grey_100 !important; //text_col !important;
font-weight: bold;
}
}
} }

54
www/common/inner/charts.js
Unescape Escape View File

@ -1,54 +0,0 @@
define([
'/common/hyperscript.js',
], function (h) {
var Charts = {};
Charts.table = function (content, classes) {
var classString = Array.isArray(classes)? '.' + classes.filter(Boolean).join('.'): '';
return h('table' + classString, content);
};
Charts.columns = function (rows) {
return Charts.table([
//h('caption', "Front-End Developer Salary"),
h('tbody', rows.map(function (n) {
return h('tr', h('td', {
style: '--size: ' + (n / 100),
}, h('span.data', n)));
})),
], [
'charts-css',
'column',
'show-heading',
]);
};
Charts.row = function (text, count, data) {
return h('tr', [
h('th', {
scope: 'row',
}, text),
h('td', {
style: '--size: ' + count,
}, [
//text,
typeof(data) !== 'undefined'? h('span.data', data): text,
])
]);
};
// table.charts-css.bar.reverse
/*
Charts.bars = function (rows) {
return Charts.table([
], [
]);
};
*/
return Charts;
});

6
www/common/toolbar.js
Unescape Escape View File

@ -455,10 +455,6 @@ MessengerUI, Messages, Pages) {
return $container; return $container;
}; };
//Messages.collapse = Messages.admin_support_collapse;
Messages.ui_collapse = "Collapse toolbar"; // XXX
Messages.ui_expand = "Expand toolbar"; // XXX
createCollapse = function (toolbar) { createCollapse = function (toolbar) {
var up = h('i.fa.fa-chevron-up', {title: Messages.ui_collapse}); var up = h('i.fa.fa-chevron-up', {title: Messages.ui_collapse});
var down = h('i.fa.fa-chevron-down', {title: Messages.ui_expand}); var down = h('i.fa.fa-chevron-down', {title: Messages.ui_expand});
@ -1383,7 +1379,7 @@ MessengerUI, Messages, Pages) {
toolbar.$file.show(); toolbar.$file.show();
addElement([ addElement([
'chat', 'chat',
'collapse', // XXX 'collapse',
'userlist', 'title', 'useradmin', 'spinner', 'userlist', 'title', 'useradmin', 'spinner',
'newpad', 'share', 'access', 'limit', 'unpinnedWarning', 'newpad', 'share', 'access', 'limit', 'unpinnedWarning',
'notifications' 'notifications'

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

@ -590,6 +590,16 @@
&.cp-value { &.cp-value {
min-width: 200px; min-width: 200px;
} }
&.cp-bar-container {
width: 99%;
padding: 0px;
position: relative;
.cp-bar {
position: absolute;
background: @cryptpad_color_brand;
height: 100%;
}
}
} }
} }
} }

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

@ -23,7 +23,6 @@ define([
'/common/inner/share.js', '/common/inner/share.js',
'/common/inner/access.js', '/common/inner/access.js',
'/common/inner/properties.js', '/common/inner/properties.js',
'/common/inner/charts.js',
'/lib/datepicker/flatpickr.js', '/lib/datepicker/flatpickr.js',
'/bower_components/sortablejs/Sortable.min.js', '/bower_components/sortablejs/Sortable.min.js',
@ -38,7 +37,6 @@ define([
'css!/bower_components/codemirror/addon/dialog/dialog.css', 'css!/bower_components/codemirror/addon/dialog/dialog.css',
'css!/bower_components/codemirror/addon/fold/foldgutter.css', 'css!/bower_components/codemirror/addon/fold/foldgutter.css',
'css!/lib/datepicker/flatpickr.min.css', 'css!/lib/datepicker/flatpickr.min.css',
//'css!/lib/chart/charts.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/form/app-form.less', 'less!/form/app-form.less',
], function ( ], function (
@ -62,7 +60,7 @@ define([
DiffMd, DiffMd,
SFCodeMirror, SFCodeMirror,
CMeditor, CMeditor,
Share, Access, Properties, Charts, Share, Access, Properties,
Flatpickr, Flatpickr,
Sortable Sortable
) )
@ -805,7 +803,7 @@ define([
return total; return total;
}; };
var getEmpty = function (empty) { // XXX don't include this in the scrollable area var getEmpty = function (empty) { // TODO don't include this in the scrollable area
if (empty) { if (empty) {
return UI.setHTML(h('div.cp-form-results-type-text-empty'), Messages._getKey('form_notAnswered', [empty])); return UI.setHTML(h('div.cp-form-results-type-text-empty'), Messages._getKey('form_notAnswered', [empty]));
} }
@ -959,42 +957,28 @@ define([
return Array.isArray(A)? Math.max.apply(null, A): NaN; return Array.isArray(A)? Math.max.apply(null, A): NaN;
}; };
var CLASSIC_MODE = true; var barGraphic = function (itemScale) {
var renderTally = function (tally, empty, caption) { return h('span.cp-bar-container', h('div.cp-bar', {
var rows = []; style: 'width: ' + (itemScale * 100) + '%',
if (CLASSIC_MODE) { }, ' '));
Object.keys(tally).forEach(function (value) { };
rows.push(h('div.cp-form-results-type-radio-data', [
h('span.cp-value', value),
h('span.cp-count', tally[value])
]));
});
if (empty) { rows.push(getEmpty(empty)); }
return rows;
}
var renderTally = function (tally, empty, showBar) {
var rows = [];
var counts = Util.values(tally); var counts = Util.values(tally);
var max = arrayMax(counts); var max = arrayMax(counts);
Object.keys(tally).forEach(function (value) {
Object.keys(tally).forEach(function (answer) { var itemCount = tally[value];
rows.push(Charts.row(answer, tally[answer] / max, tally[answer])); var itemScale = (itemCount / max);
rows.push(h('div.cp-form-results-type-radio-data', [
h('span.cp-value', value),
h('span.cp-count', itemCount),
showBar? barGraphic(itemScale): undefined,
]));
}); });
var hasCaption = typeof(caption) !== 'undefined'; if (empty) { rows.push(getEmpty(empty)); }
var table = Charts.table([ return rows;
hasCaption ? h('caption', caption): undefined,
h('tbody', rows)
], [
'charts-css',
'bar',
hasCaption? 'show-heading': undefined,
'show-labels',
'show-data-on-hover',
]);
return [
table,
empty? getEmpty(empty): undefined,
];
}; };
var TYPES = { var TYPES = {
@ -1042,10 +1026,10 @@ define([
if (!answer || !answer.trim()) { return empty++; } if (!answer || !answer.trim()) { return empty++; }
Util.inc(tally, answer); Util.inc(tally, answer);
}); });
var counts = Util.values(tally); //var counts = Util.values(tally);
var max = arrayMax(counts); //var max = arrayMax(counts);
if (CLASSIC_MODE || max < 2) { // there are no duplicates, so just return text //if (max < 2) { // there are no duplicates, so just return text
Object.keys(answers).forEach(function (author) { Object.keys(answers).forEach(function (author) {
var obj = answers[author]; var obj = answers[author];
var answer = obj.msg[uid]; var answer = obj.msg[uid];
@ -1054,10 +1038,11 @@ define([
}); });
results.push(getEmpty(empty)); results.push(getEmpty(empty));
return h('div.cp-form-results-type-text', results); return h('div.cp-form-results-type-text', results);
} //}
/*
var rendered = renderTally(tally, empty /*, caption */); var rendered = renderTally(tally, empty);
return h('div.cp-form-results-type-text', rendered); return h('div.cp-form-results-type-text', rendered);
*/
}, },
icon: h('i.cptools.cptools-form-text') icon: h('i.cptools.cptools-form-text')
}, },
@ -1181,10 +1166,11 @@ define([
}; };
}, },
printResults: function (answers, uid) { printResults: function (answers, uid, form, content) {
// results radio // results radio
var empty = 0; var empty = 0;
var count = {}; var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) { Object.keys(answers).forEach(function (author) {
var obj = answers[author]; var obj = answers[author];
var answer = obj.msg[uid]; var answer = obj.msg[uid];
@ -1192,10 +1178,8 @@ define([
Util.inc(count, answer); Util.inc(count, answer);
}); });
var rendered = renderTally(count, empty/*, caption */); var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', { return h('div.cp-form-results-type-radio', rendered);
style: CLASSIC_MODE? '': 'width: 100%',
}, rendered);
}, },
icon: h('i.cptools.cptools-form-list-radio') icon: h('i.cptools.cptools-form-list-radio')
}, },
@ -1304,21 +1288,20 @@ define([
var q = findItem(opts.items, q_uid); var q = findItem(opts.items, q_uid);
var c = count[q_uid]; var c = count[q_uid];
var values = Object.keys(c).map(function (res) {
if (CLASSIC_MODE) { var itemCount = c[res];
var values = Object.keys(c).map(function (res) { return h('div.cp-form-results-type-radio-data', [
return h('div.cp-form-results-type-radio-data', [ h('span.cp-value', res),
h('span.cp-value', res), h('span.cp-count', itemCount),
h('span.cp-count', c[res]) //barGraphic((itemCount / max) * 100)
]); ]);
}); });
results.push(h('div.cp-form-results-type-multiradio-data', [ results.push(h('div.cp-form-results-type-multiradio-data', [
h('span.cp-mr-q', q), h('span.cp-mr-q', q),
h('span.cp-mr-value', values) h('span.cp-mr-value', values)
])); ]));
return; return;
} /*
var table = Charts.table([ var table = Charts.table([
h('caption', { h('caption', {
style: 'color: var(--msg-color)', style: 'color: var(--msg-color)',
@ -1337,12 +1320,11 @@ define([
results.push(h('div.cp-form-results-type-multiradio-data', { results.push(h('div.cp-form-results-type-multiradio-data', {
style: 'width: 100%', style: 'width: 100%',
}, table)); }, table));
*/
}); });
results.push(getEmpty(empty)); results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', { return h('div.cp-form-results-type-radio', results);
style: CLASSIC_MODE? '': 'width: 100%',
}, results);
}, },
exportCSV: function (answer, form) { exportCSV: function (answer, form) {
var opts = form.opts || {}; var opts = form.opts || {};
@ -1424,10 +1406,11 @@ define([
}; };
}, },
printResults: function (answers, uid) { printResults: function (answers, uid, form, content) {
// results checkbox // results checkbox
var empty = 0; var empty = 0;
var count = {}; var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) { Object.keys(answers).forEach(function (author) {
var obj = answers[author]; var obj = answers[author];
var answer = obj.msg[uid]; var answer = obj.msg[uid];
@ -1437,7 +1420,7 @@ define([
}); });
}); });
var rendered = renderTally(count, empty /*, caption */); var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered); return h('div.cp-form-results-type-radio', rendered);
}, },
icon: h('i.cptools.cptools-form-list-check') icon: h('i.cptools.cptools-form-list-check')
@ -1560,21 +1543,17 @@ define([
var q = findItem(opts.items, q_uid); var q = findItem(opts.items, q_uid);
var c = count[q_uid]; var c = count[q_uid];
var values = Object.keys(c).map(function (res) {
if (CLASSIC_MODE) { return h('div.cp-form-results-type-radio-data', [
var values = Object.keys(c).map(function (res) { h('span.cp-value', res),
return h('div.cp-form-results-type-radio-data', [ h('span.cp-count', c[res])
h('span.cp-value', res), ]);
h('span.cp-count', c[res]) });
]); results.push(h('div.cp-form-results-type-multiradio-data', [
}); h('span.cp-mr-q', q),
results.push(h('div.cp-form-results-type-multiradio-data', [ h('span.cp-mr-value', values)
h('span.cp-mr-q', q), ]));
h('span.cp-mr-value', values) /*
]));
return;
}
var table = Charts.table([ var table = Charts.table([
h('caption', { h('caption', {
style: 'color: var(--msg-color)', style: 'color: var(--msg-color)',
@ -1593,12 +1572,11 @@ define([
results.push(h('div.cp-form-results-type-multiradio-data', { results.push(h('div.cp-form-results-type-multiradio-data', {
style: 'width: 100%', style: 'width: 100%',
}, table)); }, table));
*/
}); });
results.push(getEmpty(empty)); results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', { return h('div.cp-form-results-type-radio', results);
style: CLASSIC_MODE? '': 'width: 100%',
}, results);
}, },
exportCSV: function (answer, form) { exportCSV: function (answer, form) {
var opts = form.opts || {}; var opts = form.opts || {};
@ -1636,7 +1614,7 @@ define([
into concatenating strings, which quickly turns the sortable list into concatenating strings, which quickly turns the sortable list
into complete nonsense. into complete nonsense.
*/ */
Util.shuffleArray(opts.values); // XXX Util.shuffleArray(opts.values);
} }
var els = opts.values.map(function (data) { var els = opts.values.map(function (data) {
var uid = Util.uid(); var uid = Util.uid();
@ -1713,13 +1691,14 @@ define([
}; };
}, },
printResults: function (answers, uid, form) { printResults: function (answers, uid, form, content) {
// results sort // results sort
var opts = form[uid].opts || TYPES.sort.defaultOpts; var opts = form[uid].opts || TYPES.sort.defaultOpts;
var l = (opts.values || []).length; var l = (opts.values || []).length;
//var results = []; //var results = [];
var empty = 0; var empty = 0;
var count = {}; var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) { Object.keys(answers).forEach(function (author) {
var obj = answers[author]; var obj = answers[author];
var answer = obj.msg[uid]; var answer = obj.msg[uid];
@ -1730,10 +1709,8 @@ define([
}); });
}); });
var rendered = renderTally(count, empty /*, caption */); var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', { return h('div.cp-form-results-type-radio', rendered);
style: CLASSIC_MODE? '': 'width: 100%',
}, rendered);
}, },
icon: h('i.cptools.cptools-form-list-ordered') icon: h('i.cptools.cptools-form-list-ordered')
}, },
@ -1897,8 +1874,7 @@ define([
return A; return A;
}; };
Messages.form_timelineLabel = "{0} ({1})"; // XXX Messages.form_timelineLabel = "{0} ({1})"; // TODO investigate whether this needs translation
Messages.form_totalResponses = "Total responses: {0}"; // XXX
var makeTimeline = APP.makeTimeline = function (answers) { var makeTimeline = APP.makeTimeline = function (answers) {
// Randomly changing date of answers to get a more realistic example of timeline // Randomly changing date of answers to get a more realistic example of timeline
@ -1991,7 +1967,7 @@ define([
var switchMode = h('button.btn.btn-secondary', Messages.form_showIndividual); var switchMode = h('button.btn.btn-secondary', Messages.form_showIndividual);
$controls.hide().append(switchMode); $controls.hide().append(switchMode);
var show = function (answers, header) { var show = function (answers, header) { // XXX
var elements = content.order.map(function (uid) { var elements = content.order.map(function (uid) {
var block = form[uid]; var block = form[uid];
var type = block.type; var type = block.type;
@ -1999,7 +1975,7 @@ define([
if (!model || !model.printResults) { return; } if (!model || !model.printResults) { return; }
// Only use content if we're not viewing individual answers // Only use content if we're not viewing individual answers
var print = model.printResults(answers, uid, form, !header && content); var print = model.printResults(answers, uid, form, !header && content); // XXX
var q = h('div.cp-form-block-question', block.q || Messages.form_default); var q = h('div.cp-form-block-question', block.q || Messages.form_default);
@ -2016,7 +1992,7 @@ define([
$results.empty().append(elements); $results.empty().append(elements);
if (header) { $results.prepend(header); } if (header) { $results.prepend(header); }
}; };
show(answers); show(answers); // XXX
if (APP.isEditor || APP.isAuditor) { $controls.show(); } if (APP.isEditor || APP.isAuditor) { $controls.show(); }
@ -2074,7 +2050,7 @@ define([
} }
var span = UI.setHTML(h('span'), text); var span = UI.setHTML(h('span'), text);
var viewButton = h('button.btn.btn-secondary.small', Messages.form_viewButton); var viewButton = h('button.btn.btn-secondary.small', Messages.form_viewButton);
var div = h('div.cp-form-individual', [span, viewButton, warning, badge]); var div = h('div.cp-form-individual', [span, viewButton, warning, badge]); // XXX
$(viewButton).click(function () { $(viewButton).click(function () {
var res = {}; var res = {};
res[curve] = obj; res[curve] = obj;
@ -2083,7 +2059,7 @@ define([
summary = true; summary = true;
$s.click(); $s.click();
}); });
var header = h('div.cp-form-individual', [ var header = h('div.cp-form-individual', [ // XXX
span.cloneNode(true), span.cloneNode(true),
back back
]); ]);

1
www/lib/chart/charts.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
www/test/index.html
Unescape Escape View File

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CryptPad</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-main="/test/inner.js" src="/bower_components/requirejs/require.js?ver=2.3.6"></script>
<link href="/lib/chart/charts.min.css" rel="stylesheet" type="text/css">
</head>
<body>

68
www/test/inner.js
Unescape Escape View File

@ -1,68 +0,0 @@
define([
'/common/hyperscript.js',
'/common/inner/charts.js',
], function (h, Charts) {
var wrap = function (content) {
return h('div', {
style: 'height: 500px; width: 500px; padding: 15px; border: 1px solid #222; margin: 15px;'
}, content);
};
var append = function (el) {
document.body.appendChild(el);
};
var data = [
25, 58, 5, 96, 79,
23, 75, 13, 44, 29,
65, 80, 30, 47, 22,
7, 62, 64, 46, 21,
29, 31, 76, 65, 61,
78, 58, 12, 90, 98,
37, 75, 92, 74, 16,
17, 52, 42, 71, 19
];
append(h('h1', 'Charts'));
append(h('hr'));
var cell = (function () {
var i = 0;
return function () {
var val = data[i++];
return h('td', {
style: '--size: ' + (val / 100),
}, val);
};
}());
var multirow = function (n) {
var cells = [];
while (n--) {
cells.push(cell());
}
return h('tr', {
style: 'margin: 15px',
}, cells);
};
append(wrap(Charts.table([
h('tbody', [
multirow(4),
multirow(4),
multirow(4),
multirow(4),
]),
], [
'charts-css',
'bar',
'multiple',
])));
append(h('hr'));
append(wrap(Charts.columns([ 40, 60, 75, 90, 100])));
append(wrap(Charts.columns(data.slice(20))));
});
Write Preview
Loading…
Cancel
Save