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

remove hacky experiments with charts.css 

...and finalize forms changes
pull/1/head
ansuz 2021-08-16 17:21:45 +05:30
parent 1e12b85b7c
commit cad514cc17
8 changed files with 84 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
customize.dist/src/less2/include/charts.less
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
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
View File

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

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

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

170
www/form/inner.js
View File

@ -23,7 +23,6 @@ define([
'/common/inner/share.js',
'/common/inner/access.js',
'/common/inner/properties.js',
'/common/inner/charts.js',
'/lib/datepicker/flatpickr.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/fold/foldgutter.css',
'css!/lib/datepicker/flatpickr.min.css',
//'css!/lib/chart/charts.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/form/app-form.less',
], function (
@ -62,7 +60,7 @@ define([
DiffMd,
SFCodeMirror,
CMeditor,
Share, Access, Properties, Charts,
Share, Access, Properties,
Flatpickr,
Sortable
)
@ -805,7 +803,7 @@ define([
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) {
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;
};
var CLASSIC_MODE = true;
var renderTally = function (tally, empty, caption) {
var rows = [];
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 barGraphic = function (itemScale) {
return h('span.cp-bar-container', h('div.cp-bar', {
style: 'width: ' + (itemScale * 100) + '%',
}, ' '));
};
var renderTally = function (tally, empty, showBar) {
var rows = [];
var counts = Util.values(tally);
var max = arrayMax(counts);
Object.keys(tally).forEach(function (value) {
var itemCount = tally[value];
var itemScale = (itemCount / max);
Object.keys(tally).forEach(function (answer) {
rows.push(Charts.row(answer, tally[answer] / max, tally[answer]));
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';
var table = Charts.table([
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,
];
if (empty) { rows.push(getEmpty(empty)); }
return rows;
};
var TYPES = {
@ -1042,10 +1026,10 @@ define([
if (!answer || !answer.trim()) { return empty++; }
Util.inc(tally, answer);
});
var counts = Util.values(tally);
var max = arrayMax(counts);
//var counts = Util.values(tally);
//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) {
var obj = answers[author];
var answer = obj.msg[uid];
@ -1054,10 +1038,11 @@ define([
});
results.push(getEmpty(empty));
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);
*/
},
icon: h('i.cptools.cptools-form-text')
},
@ -1181,10 +1166,11 @@ define([
};
},
printResults: function (answers, uid) {
printResults: function (answers, uid, form, content) {
// results radio
var empty = 0;
var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
@ -1192,10 +1178,8 @@ define([
Util.inc(count, answer);
});
var rendered = renderTally(count, empty/*, caption */);
return h('div.cp-form-results-type-radio', {
style: CLASSIC_MODE? '': 'width: 100%',
}, rendered);
var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered);
},
icon: h('i.cptools.cptools-form-list-radio')
},
@ -1304,21 +1288,20 @@ define([
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
if (CLASSIC_MODE) {
var values = Object.keys(c).map(function (res) {
return h('div.cp-form-results-type-radio-data', [
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),
h('span.cp-mr-value', values)
]));
return;
}
var values = Object.keys(c).map(function (res) {
var itemCount = c[res];
return h('div.cp-form-results-type-radio-data', [
h('span.cp-value', res),
h('span.cp-count', itemCount),
//barGraphic((itemCount / max) * 100)
]);
});
results.push(h('div.cp-form-results-type-multiradio-data', [
h('span.cp-mr-q', q),
h('span.cp-mr-value', values)
]));
return;
/*
var table = Charts.table([
h('caption', {
style: 'color: var(--msg-color)',
@ -1337,12 +1320,11 @@ define([
results.push(h('div.cp-form-results-type-multiradio-data', {
style: 'width: 100%',
}, table));
*/
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', {
style: CLASSIC_MODE? '': 'width: 100%',
}, results);
return h('div.cp-form-results-type-radio', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1424,10 +1406,11 @@ define([
};
},
printResults: function (answers, uid) {
printResults: function (answers, uid, form, content) {
// results checkbox
var empty = 0;
var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
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);
},
icon: h('i.cptools.cptools-form-list-check')
@ -1560,21 +1543,17 @@ define([
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
if (CLASSIC_MODE) {
var values = Object.keys(c).map(function (res) {
return h('div.cp-form-results-type-radio-data', [
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),
h('span.cp-mr-value', values)
]));
return;
}
var values = Object.keys(c).map(function (res) {
return h('div.cp-form-results-type-radio-data', [
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),
h('span.cp-mr-value', values)
]));
/*
var table = Charts.table([
h('caption', {
style: 'color: var(--msg-color)',
@ -1593,12 +1572,11 @@ define([
results.push(h('div.cp-form-results-type-multiradio-data', {
style: 'width: 100%',
}, table));
*/
});
results.push(getEmpty(empty));
return h('div.cp-form-results-type-radio', {
style: CLASSIC_MODE? '': 'width: 100%',
}, results);
return h('div.cp-form-results-type-radio', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
@ -1636,7 +1614,7 @@ define([
into concatenating strings, which quickly turns the sortable list
into complete nonsense.
*/
Util.shuffleArray(opts.values); // XXX
Util.shuffleArray(opts.values);
}
var els = opts.values.map(function (data) {
var uid = Util.uid();
@ -1713,13 +1691,14 @@ define([
};
},
printResults: function (answers, uid, form) {
printResults: function (answers, uid, form, content) {
// results sort
var opts = form[uid].opts || TYPES.sort.defaultOpts;
var l = (opts.values || []).length;
//var results = [];
var empty = 0;
var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
@ -1730,10 +1709,8 @@ define([
});
});
var rendered = renderTally(count, empty /*, caption */);
return h('div.cp-form-results-type-radio', {
style: CLASSIC_MODE? '': 'width: 100%',
}, rendered);
var rendered = renderTally(count, empty, showBars);
return h('div.cp-form-results-type-radio', rendered);
},
icon: h('i.cptools.cptools-form-list-ordered')
},
@ -1897,8 +1874,7 @@ define([
return A;
};
Messages.form_timelineLabel = "{0} ({1})"; // XXX
Messages.form_totalResponses = "Total responses: {0}"; // XXX
Messages.form_timelineLabel = "{0} ({1})"; // TODO investigate whether this needs translation
var makeTimeline = APP.makeTimeline = function (answers) {
// 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);
$controls.hide().append(switchMode);
var show = function (answers, header) {
var show = function (answers, header) { // XXX
var elements = content.order.map(function (uid) {
var block = form[uid];
var type = block.type;
@ -1999,7 +1975,7 @@ define([
if (!model || !model.printResults) { return; }
// 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);
@ -2016,7 +1992,7 @@ define([
$results.empty().append(elements);
if (header) { $results.prepend(header); }
};
show(answers);
show(answers); // XXX
if (APP.isEditor || APP.isAuditor) { $controls.show(); }
@ -2074,7 +2050,7 @@ define([
}
var span = UI.setHTML(h('span'), text);
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 () {
var res = {};
res[curve] = obj;
@ -2083,7 +2059,7 @@ define([
summary = true;
$s.click();
});
var header = h('div.cp-form-individual', [
var header = h('div.cp-form-individual', [ // XXX
span.cloneNode(true),
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
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
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))));
});