diff --git a/www/form/app-form.less b/www/form/app-form.less index e4c308674..b87c47190 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -530,19 +530,21 @@ } .cp-form-poll-body { flex-flow: column; - max-height: 200px; + max-height: 225px; overflow: auto; + & > div { display: flex; } } .cp-poll-cell { width: 100px; - height: 40px; + height: 35px; display: inline-flex; align-items: center; justify-content: center; - margin:5px; + margin-top:5px; + margin-left:5px; &:first-child { width: 200px; } @@ -556,6 +558,12 @@ transform: rotate(-45deg); } } + .cp-form-total-yes { + margin-right: 5px; + } + &.cp-poll-best { + font-weight: bold; + } } .cp-poll-answer-name { padding: 0 5px; @@ -576,7 +584,22 @@ flex-basis: 100px; border-bottom: 1px solid @cryptpad_text_col; } + &:not(.cp-form-poll-switch) { + & > div { + &:last-child { + margin-bottom: 5px; + } + } + .cp-form-poll-body { + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + } &.cp-form-poll-switch { + display: flex; flex-flow: row; .cp-avatar { .avatar_main(20px); @@ -585,7 +608,7 @@ flex-flow: column; &.cp-form-poll-body { flex-flow: row; - max-width: 500px; + max-width: 550px; max-height: unset; scroll-snap-type: x mandatory; & > div { diff --git a/www/form/inner.js b/www/form/inner.js index d14c1da08..065df1998 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -87,6 +87,7 @@ define([ Messages.form_poll_day = "Day"; Messages.form_poll_time = "Time"; Messages.form_poll_switch = "Switch axes" // XXX DB + Messages.form_pollTotal = "Total"; Messages.form_pollYourAnswers = "Your answers"; @@ -678,7 +679,9 @@ define([ var _dateT = new Date(data); data = Flatpickr.formatDate(_dateT, timeFormat); } - return h('div.cp-poll-cell.cp-form-poll-option', data); + return h('div.cp-poll-cell.cp-form-poll-option', { + title: Util.fixHTML(data) + }, data); }); // Insert axis switch button var switchAxis = h('button.btn.btn-default', [ @@ -730,7 +733,9 @@ define([ }, v); return cell; }); - els.unshift(h('div.cp-poll-cell.cp-poll-answer-name', [ + els.unshift(h('div.cp-poll-cell.cp-poll-answer-name', { + title: Util.fixHTML(name) + }, [ avatar, h('span', name) ])); @@ -746,6 +751,56 @@ define([ return lines; }; + var makePollTotal = function (answers, opts) { + if (!Array.isArray(answers)) { return; } + var totals = {}; + var totalEls = opts.values.map(function (data) { + var y = 0; // Yes + var m = 0; // Maybe + answers.forEach(function (answerObj) { + var answer = answerObj.results; + if (!answer || !answer.values) { return; } + var values = answer.values || {}; + var res = Number(values[data]) || 0; + if (res === 1) { y++; } + else if (res === 2) { m++; } + }); + totals[data] = { + y: y, + m: m + }; + + return h('div.cp-poll-cell', { + 'data-id': data + }, [ + h('span.cp-form-total-yes', y), + h('span.cp-form-total-maybe', '('+m+')'), + ]); + }); + + var totalMax = { + value: 0, + data: [] + }; + Object.keys(totals).forEach(function (k) { + var obj = totals[k]; + if (obj.y === totalMax.value) { + totalMax.data.push(k); + } else if (obj.y > totalMax.value) { + totalMax.value = obj.y; + totalMax.data = [k]; + } + }); + totalEls.unshift(h('div.cp-poll-cell', Messages.form_pollTotal)); + var total = h('div.cp-poll-total', totalEls); + if (totalMax.value) { + totalMax.data.forEach(function (k) { + $(total).find('[data-id="'+k+'"]').addClass('cp-poll-best'); + }); + } + + return total; + }; var getEmpty = function (empty) { if (empty) { @@ -1450,6 +1505,9 @@ define([ addLine.unshift(h('div.cp-poll-cell', nameInput)); lines.push(h('div', addLine)); + var total = makePollTotal(answers, opts); + if (total) { lines.push(h('div', total)); } + var tag = h('div.cp-form-type-poll-container', h('div.cp-form-type-poll', lines)); var $tag = $(tag); @@ -1491,6 +1549,10 @@ define([ printResults: function (answers, uid, form) { var _answers = getBlockAnswers(answers, uid); var lines = makePollTable(_answers, form[uid].opts); + + var total = makePollTotal(_answers, form[uid].opts); + if (total) { lines.push(h('div', total)); } + return h('div.cp-form-type-poll', lines); }, icon: h('i.cptools.cptools-form-poll')