From 1a60ff01d093ea7c3ac241e947aac72913af0113 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 8 Jun 2021 15:56:40 +0100 Subject: [PATCH] Improve Poll UI --- .../src/less2/include/colortheme-dark.less | 11 ++++++----- customize.dist/src/less2/include/colortheme.less | 6 +++--- www/form/app-form.less | 15 +++++++++------ www/form/inner.js | 11 +++++++++-- www/form/main.js | 2 +- 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index ba80b2d64..a16f9b5ca 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/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; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 1102f6074..a7b103797 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/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; diff --git a/www/form/app-form.less b/www/form/app-form.less index 952b85722..e4c308674 100644 --- a/www/form/app-form.less +++ b/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 { diff --git a/www/form/inner.js b/www/form/inner.js index 5f006fb44..d14c1da08 100644 --- a/www/form/inner.js +++ b/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; } diff --git a/www/form/main.js b/www/form/main.js index 344c5bb0c..0d288dbe3 100644 --- a/www/form/main.js +++ b/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);