Add poll total row

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 {

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')