From e2adf44a1f6d1cc86789cab8327b64cd352b6773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Wed, 1 Sep 2021 14:37:02 +0100 Subject: [PATCH 1/4] Responsive form settings layout --- www/form/app-form.less | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index d763ed204..03fde2389 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -116,8 +116,19 @@ width: 100% !important; .cp-form-creator-settings { display: flex; - justify-content: space-evenly; + justify-content: space-between; flex-wrap: wrap; + div { + flex-basis: 33.333333%; + padding-right: 20px; + } + } + } + @media screen and (max-width: 600px) { + .cp-form-creator-settings { + div { + flex-basis: 50%; + } } } } From a79a9bdd6346695f33ffc5ea441e6862298eba2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Wed, 1 Sep 2021 15:15:18 +0100 Subject: [PATCH 2/4] Add shadows to question blocks - increase contrast of light theme - prepares upcoming color themes --- customize.dist/src/less2/include/colortheme.less | 6 +++--- www/form/app-form.less | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 18dcb1c0a..cfc931e47 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -299,7 +299,7 @@ @cp_usergrid-selected-fg: @cryptpad_color_white; // Other -@cp_shadow-color: fade(@cryptpad_color_black, 40%); +@cp_shadow-color: fade(@cryptpad_color_black, 30%); // Apps @cp_app-bg: @cryptpad_color_grey_100; @@ -428,8 +428,8 @@ @cp_calendar-now-fg: @cryptpad_color_grey_200; // Forms -@cp_form-bg1: @cryptpad_color_grey_200; -@cp_form-bg2: @cryptpad_color_grey_100; +@cp_form-bg1: @cryptpad_color_grey_50; +@cp_form-bg2: @cryptpad_color_grey_200; @cp_form-border: @cryptpad_color_grey_200; @cp_form-poll-color: @cryptpad_color_grey_800; @cp_form-poll-no: fade(@cryptpad_color_light_red, 75%); diff --git a/www/form/app-form.less b/www/form/app-form.less index 03fde2389..d2c030df1 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -341,6 +341,7 @@ .cp-form-block { background: @cp_form-bg1; padding: 10px; + box-shadow: 0px 0px 15px @cp_shadow-color; &:not(:last-child) { margin-bottom: 20px; } @@ -699,7 +700,7 @@ margin-top: -10px; margin-right: -10px; i { margin-right: 5px; } - background: fade(@cryptpad_text_col, 15%); + background: fade(@cryptpad_text_col, 10%); } } From d2b24e666dbc5135b1b96fb9e6034b03f38252c9 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 1 Sep 2021 16:25:32 +0200 Subject: [PATCH 3/4] Forms V2 fixes --- www/form/app-form.less | 13 ++++++++++++- www/form/inner.js | 44 +++++++++++++++++++----------------------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index d763ed204..1cc538708 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -165,6 +165,13 @@ } } } + div.cp-form-creator-results { + .cp-form-block { + .cp-form-block-content { + overflow-x: auto; + } + } + } div.cp-form-creator-content, div.cp-form-creator-results { max-width: 1000px; min-width: 300px; @@ -393,7 +400,6 @@ } } .cp-form-block-content { - overflow-x: auto; p { a { color: @cryptpad_color_link; @@ -559,6 +565,11 @@ align-items: center; justify-content: center; flex: 1; + .cp-form-submit-actions { + button:not(:last-child) { + margin-right: 10px; + } + } } div.cp-form-creator-results { display: flex; diff --git a/www/form/inner.js b/www/form/inner.js index f1ad9d89d..ad39af67f 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -157,7 +157,7 @@ define([ h('span', Messages.form_textType), typeSelect[0] ]); - typeSelect.onChange.reg(evOnSave.fire()); + typeSelect.onChange.reg(evOnSave.fire); } setCursorGetter(function () { @@ -2176,7 +2176,8 @@ define([ }; var addResultsButton = function (framework, content) { - var $res = $(h('button.cp-toolbar-appmenu.cp-toolbar-form-button', [ + var $container = $('.cp-forms-results-participant'); + var $res = $(h('button.btn.btn-primary.cp-toolbar-form-button', [ h('i.fa.fa-bar-chart'), h('span.cp-button-name', Messages.form_results) ])); @@ -2190,20 +2191,20 @@ define([ $('body').addClass('cp-app-form-results'); renderResults(content, answers); $res.remove(); - var $editor = $(h('button.cp-toolbar-appmenu', [ + var $editor = $(h('button.btn.btn-primary', [ h('i.fa.fa-pencil'), - h('span.cp-button-name', APP.isEditor ? Messages.form_editor : Messages.form_form) + h('span.cp-button-name', Messages.form_editor) ])); $editor.click(function () { $('body').removeClass('cp-app-form-results'); $editor.remove(); addResultsButton(framework, content); }); - framework._.toolbar.$bottomL.append($editor); + $container.prepend($editor); }); }); - framework._.toolbar.$bottomL.append($res); + $container.prepend($res); }; Messages.form_alreadyAnswered = "You've responded to this form on {0}"; // XXX @@ -2213,7 +2214,7 @@ define([ var $formContainer = $('div.cp-form-creator-content').hide(); var $container = $('div.cp-form-creator-answered').empty().css('display', ''); - var viewOnly = content.answers.cantEdit; + var viewOnly = content.answers.cantEdit || APP.isClosed; var action = h('button.btn.btn-primary', [ viewOnly ? h('i.fa.fa-bar-chart') : h('i.fa.fa-pencil'), h('span', viewOnly ? Messages.form_viewAnswer : Messages.form_editAnswer) @@ -2238,7 +2239,10 @@ define([ // If responses are public, show button to view them var responses; if (content.answers.privateKey) { - responses = h('button.btn.btn-default', Messages.form_results); + responses = h('button.btn.btn-default', [ + h('i.fa.fa-bar-chart'), + h('span.cp-button-name', Messages.form_results) + ]); $(responses).click(function () { var sframeChan = framework._.sfCommon.getSframeChannel(); sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) { @@ -2387,10 +2391,7 @@ define([ } evOnChange.fire(false, true); window.onbeforeunload = undefined; - if (!update && content.answers.privateKey) { - // Add results button - addResultsButton(framework, content); - } + $send.removeAttr('disabled'); //UI.alert(Messages.form_sent); // XXX not needed anymore? $send.text(Messages.form_update); @@ -2509,7 +2510,7 @@ define([ APP.formBlocks = []; - if (APP.isClosed && content.answers.privateKey && !APP.isEditor) { + if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) { var sframeChan = framework._.sfCommon.getSframeChannel(); sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) { var answers = obj && obj.results; @@ -3073,10 +3074,11 @@ define([ var $toolbarContainer = $('#cp-toolbar'); - if (APP.isEditor || priv.form_auditorKey) { - var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'pad']); - $toolbarContainer.after(helpMenu.menu); - framework._.toolbar.$drawer.append(helpMenu.button); + var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'pad']); + $toolbarContainer.after(helpMenu.menu); + framework._.toolbar.$drawer.append(helpMenu.button); + if (!APP.isEditor && !priv.form_auditorKey) { + $(helpMenu.menu).hide(); } var offlineEl = h('div.alert.alert-danger.cp-burn-after-reading', Messages.disconnected); @@ -3126,7 +3128,7 @@ define([ }); }); - Messages.form_makePublicWarning = "Are you sure you want to make responses to this form public? Past and future responses will be visible by participants. This cannot be undone." // XXX existing key + Messages.form_makePublicWarning = "Are you sure you want to make responses to this form public? Past and future responses will be visible by participants. This cannot be undone."; // XXX existing key // Private / public status var resultsType = h('div.cp-form-results-type-container'); var $results = $(resultsType); @@ -3618,9 +3620,6 @@ define([ // If we have a non-anon answer, we can't answer anonymously later if (answers[curve1]) { APP.cantAnon = true; } - // Add results button - if (myAnswers) { addResultsButton(framework, content); } - updateForm(framework, content, false, myAnswers); }); return; @@ -3648,9 +3647,6 @@ define([ APP.hasAnswered = true; // If we have a non-anon answer, we can't answer anonymously later if (!obj._isAnon) { APP.cantAnon = true; } - - // Add results button - if (content.answers.privateKey) { addResultsButton(framework, content); } } checkIntegrity(false); updateForm(framework, content, false, answers); From 415ee6018b4745eb00d98e15dbadba5fad9c1adb Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 1 Sep 2021 16:53:00 +0200 Subject: [PATCH 4/4] Add number of form responses in the button --- www/form/inner.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index ad39af67f..85c3c0bfd 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -2175,11 +2175,18 @@ define([ } }; - var addResultsButton = function (framework, content) { + var getAnswersLength = function (answers) { + return Object.keys(answers || {}).filter(function (key) { + return key && key.slice(0,1) !== "_"; + }).length; + }; + Messages.form_results = "Responses ({0})"; // XXX update key + var addResultsButton = function (framework, content, answers) { var $container = $('.cp-forms-results-participant'); + var l = getAnswersLength(answers); var $res = $(h('button.btn.btn-primary.cp-toolbar-form-button', [ h('i.fa.fa-bar-chart'), - h('span.cp-button-name', Messages.form_results) + h('span.cp-button-name', Messages._getKey('form_results', [l])), ])); $res.click(function () { $res.attr('disabled', 'disabled'); @@ -2198,7 +2205,10 @@ define([ $editor.click(function () { $('body').removeClass('cp-app-form-results'); $editor.remove(); - addResultsButton(framework, content); + sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) { + var answers = obj && obj.results; + addResultsButton(framework, content, answers); + }); }); $container.prepend($editor); }); @@ -2239,12 +2249,18 @@ define([ // If responses are public, show button to view them var responses; if (content.answers.privateKey) { + var l = getAnswersLength(answers); responses = h('button.btn.btn-default', [ h('i.fa.fa-bar-chart'), - h('span.cp-button-name', Messages.form_results) + h('span.cp-button-name', Messages._getKey('form_results', [l])) ]); + var sframeChan = framework._.sfCommon.getSframeChannel(); + sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) { + var answers = obj && obj.results; + var l = getAnswersLength(answers); + $(responses).find('.cp-button-name').text(Messages._getKey('form_results', [l])); + }); $(responses).click(function () { - var sframeChan = framework._.sfCommon.getSframeChannel(); sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) { var answers = obj && obj.results; if (answers) { APP.answers = answers; } @@ -3559,7 +3575,6 @@ define([ } if (APP.isEditor) { - addResultsButton(framework, content); sframeChan.query("Q_FORM_FETCH_ANSWERS", { channel: content.answers.channel, validateKey: content.answers.validateKey, @@ -3567,6 +3582,7 @@ define([ cantEdit: content.answers.cantEdit }, function (err, obj) { var answers = obj && obj.results; + addResultsButton(framework, content, answers); if (answers) { APP.answers = answers; } checkIntegrity(false); updateForm(framework, content, true);