Improve Poll UI

customize.dist/src/less2/include/colortheme-dark.less

@@ -64,7 +64,8 @@
 @cryptpad_color_light_green: #c5ffa8;
 @cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%);
 @cryptpad_color_light_yellow: #FFE69C;
-@cryptpad_color_yellow_fade: fade(#FFE69C, 15%);
+@cryptpad_color_yellow_fade: fade(@cryptpad_color_light_yellow, 50%);
+@cryptpad_color_yellow_fader: fade(#FFE69C, 15%); // not in light theme
 @cryptpad_color_lighter_blue: #d2e1f2;
 
 @cryptpad_color_link:@cryptpad_color_brand_300;
@@ -115,7 +116,7 @@
 @cp_forms-disabled: @cryptpad_color_grey_500;
 
 // Bootstrap alerts
-@cp_alerts-warning-bg: @cryptpad_color_yellow_fade;
+@cp_alerts-warning-bg: @cryptpad_color_yellow_fader;
 @cp_alerts-warning-fg: @cryptpad_color_light_yellow;
 @cp_alerts-warning-text: @cryptpad_color_light_yellow;
 @cp_alerts-danger-bg: @cryptpad_color_red_fader;
@@ -432,8 +433,8 @@
 @cp_form-bg2: @cryptpad_color_grey_900;
 @cp_form-border: @cryptpad_color_grey_800;
 @cp_form-poll-color: @cryptpad_color_grey_800;
-@cp_form-poll-no: @cryptpad_color_light_red;
-@cp_form-poll-yes: @cryptpad_color_light_green;
-@cp_form-poll-maybe: @cryptpad_color_light_yellow;
+@cp_form-poll-no: fade(@cryptpad_color_red, 25%);
+@cp_form-poll-yes: fade(@cryptpad_color_green, 25%);
+@cp_form-poll-maybe: @cryptpad_color_grey_700;
 @cp_form-poll-yes-color: @cryptpad_color_green;
 @cp_form-invalid: @cryptpad_color_red;

customize.dist/src/less2/include/colortheme.less

@@ -432,8 +432,8 @@
 @cp_form-bg2: @cryptpad_color_grey_100;
 @cp_form-border: @cryptpad_color_grey_200;
 @cp_form-poll-color: @cryptpad_color_grey_800;
-@cp_form-poll-no: @cryptpad_color_light_red;
-@cp_form-poll-yes: @cryptpad_color_light_green;
-@cp_form-poll-maybe: @cryptpad_color_light_yellow;
+@cp_form-poll-no: fade(@cryptpad_color_light_red, 75%);
+@cp_form-poll-yes: fade(@cryptpad_color_light_green, 75%);
+@cp_form-poll-maybe: @cryptpad_color_grey_300;
 @cp_form-poll-yes-color: @cryptpad_color_green;
 @cp_form-invalid: @cryptpad_color_red;

www/form/app-form.less

@@ -337,6 +337,12 @@
                                 margin-left: 10px;
                             }
                         }
+                        .cp-form-multiple-picker {
+                            margin: 10px 0px 0px 0px;
+                            button {
+                                margin: 10px 10px 0px 0px;
+                            }
+                        }
                     }
                 }
                 .cp-form-edit-max-options {
@@ -568,9 +574,7 @@
         }
         .cp-poll-time-day {
             flex-basis: 100px;
-            border-right: 1px solid @cryptpad_text_col;
-            border-left: 1px solid @cryptpad_text_col;
-            border-top: 1px solid @cryptpad_text_col;
+            border-bottom: 1px solid @cryptpad_text_col;
         }
         &.cp-form-poll-switch {
             flex-flow: row;
@@ -600,9 +604,8 @@
             .cp-poll-time-day {
                 flex-basis: 40px;
                 border-right: none;
-                border-bottom: 1px solid @cryptpad_text_col;
-                border-left: 1px solid @cryptpad_text_col;
-                border-top: 1px solid @cryptpad_text_col;
+                border-right: 1px solid @cryptpad_text_col;
+                border-bottom: 0px;
             }
         }
         .cp-form-poll-choice, .cp-form-poll-answer {

www/form/inner.js

@@ -163,6 +163,7 @@ define([
     Messages.form_add_option = "Add option";
     Messages.form_add_item = "Add item";
     Messages.form_addMultiple = "Add all";
+    Messages.form_addMultipleHint = "Add multiple dates and times"
     Messages.form_clear = "Clear";
 
     Messages.form_page_prev = "Previous";
@@ -443,13 +444,13 @@ define([
 
         // Calendar time
         if (v.type) {
-            var multipleInput = h('input');
+            var multipleInput = h('input', {placeholder: Messages.form_addMultipleHint});
             var multipleClearButton = h('button.btn', Messages.form_clear);
             var addMultipleButton = h('button.btn', [
                 h('i.fa.fa-plus'),
                 h('span', Messages.form_addMultiple)
             ]);
-            addMultiple = h('div', { style: "display: none;" }, [
+            addMultiple = h('div.cp-form-multiple-picker', { style: "display: none;" }, [
                 multipleInput,
                 addMultipleButton,
                 multipleClearButton
@@ -708,6 +709,12 @@ define([
         // Add answers
         var bodyEls = [];
         if (Array.isArray(answers)) {
+            for(var i = 0; i< 20; i++) { // XXX
+                answers.push({
+                    user: { name: 'User '+i },
+                    results: { values: {} }
+                });
+            }
             answers.forEach(function (answerObj) {
                 var answer = answerObj.results;
                 if (!answer || !answer.values) { return; }

www/form/main.js

@@ -230,7 +230,7 @@ define([
                         results[senderCurve] = {
                             msg: parsed,
                             hash: hash,
-                            time: cfg.time
+                            time: cfg && cfg.time
                         };
                     };
                     CPNetflux.start(config);