From 99e20edc1bc4220de31a20135005dd7070a7b012 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Mon, 6 Jan 2025 16:02:56 +0100 Subject: [PATCH 01/22] Added arrow buttons for moving question blocks and disabled drag on mobile --- www/form/app-form.less | 10 ++++++++++ www/form/inner.js | 28 +++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 2042999ce..64ab479b2 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -971,6 +971,16 @@ i { margin-right: 5px; } background: fade(@cryptpad_text_col, 10%); } + .cp-form-block-arrows { + + float: left; + padding: 5px; + margin-top: -35px; + margin-left: -10px; + border-radius: 0px @variables_radius 0px 0px; + .direction-arrow { margin: 5px; } + background: fade(@cryptpad_text_col, 10%); + } } .cp-form-type-radio, .cp-form-type-checkbox { diff --git a/www/form/inner.js b/www/form/inner.js index 661b0ee98..af60b65be 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4260,12 +4260,38 @@ define([ } } } + let shiftButtons; + if ('ontouchstart' in window) { + var upButton = h('div.kanban-edit-item.fa.fa-arrow-up.direction-arrow'); + var downButton = h('div.kanban-edit-item.fa.fa-arrow-down.direction-arrow'); + var shiftBlock = function(direction) { + var blockIndex = content.order.indexOf(uid); + if (direction === 'up' && blockIndex > 0) { + content.order.splice(blockIndex-1, 0, content.order.splice(blockIndex, 1)[0]); + } else if (direction === 'down' && blockIndex < content.order.length-1) { + content.order.splice(blockIndex+1, 0, content.order.splice(blockIndex, 1)[0]); + } + framework.localChange(); + updateForm(framework, content, true); + }; + $(upButton).click(function () { + shiftBlock('up'); + }); + $(downButton).click(function () { + shiftBlock('down'); + }); + shiftButtons = h('div.cp-form-block-arrows', [ + upButton, + downButton + ]); + } var editableCls = editable ? ".editable" : ""; elements.push(h('div.cp-form-block'+editableCls, { 'data-id':uid, 'data-type':type }, [ APP.isEditor ? dragHandle : undefined, + shiftButtons, changeType, isStatic ? undefined : q, h('div.cp-form-block-content', [ @@ -4505,7 +4531,7 @@ define([ return true; }); - if (editable) { + if (editable && !('ontouchstart' in window)) { if (APP.mainSortable) { APP.mainSortable.destroy(); } var grabHandle; if (window.matchMedia("(pointer: coarse)").matches) { From 0d5e6f0baedc15fc24cb5533e8fc94d390fb7099 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 7 Jan 2025 13:20:07 +0100 Subject: [PATCH 02/22] Arrow layout --- www/form/app-form.less | 9 +++++---- www/form/inner.js | 10 ++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 64ab479b2..588731a3c 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -972,13 +972,14 @@ background: fade(@cryptpad_text_col, 10%); } .cp-form-block-arrows { - - float: left; + max-width: fit-content; + margin-inline: auto; padding: 5px; margin-top: -35px; - margin-left: -10px; border-radius: 0px @variables_radius 0px 0px; - .direction-arrow { margin: 5px; } + .direction-arrow-down { + margin-left: 20px; + } background: fade(@cryptpad_text_col, 10%); } } diff --git a/www/form/inner.js b/www/form/inner.js index af60b65be..00129c85c 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4020,10 +4020,8 @@ define([ var changeType; if (editable) { // Drag handle - dragHandle = h('span.cp-form-block-drag-handle', [ - h('i.fa.fa-ellipsis-h'), - h('i.fa.fa-ellipsis-h'), - ]); + var dragEllipses = 'ontouchstart' in window ? undefined : [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] + dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); // Question var inputQ = h('input', { @@ -4262,8 +4260,8 @@ define([ } let shiftButtons; if ('ontouchstart' in window) { - var upButton = h('div.kanban-edit-item.fa.fa-arrow-up.direction-arrow'); - var downButton = h('div.kanban-edit-item.fa.fa-arrow-down.direction-arrow'); + var upButton = h('div.kanban-edit-item.fa.fa-arrow-up'); + var downButton = h('div.kanban-edit-item.fa.fa-arrow-down.direction-arrow-down'); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { From 03acd8d6d19b8d1ef2c9756ffb50c8aaa5dfee63 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 21 Jan 2025 16:12:27 +0100 Subject: [PATCH 03/22] UI improvements --- customize.dist/translations/messages.js | 4 ++++ www/form/app-form.less | 5 ++--- www/form/inner.js | 15 ++++++++++----- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index df4096367..a7866bdfd 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -13,6 +13,10 @@ define(['/common/translations/messages.js'], function (Messages) { // Replace the existing keys in your copied file here: // Messages.button_newpad = "New Rich Text Document"; + //NOTE: these keys are also added to the Kanban mobile UI PR #1753 + Messages.moveItemUp = 'Move item up'; // XXX + Messages.moveitemDown = 'Move item down'; // XXX + return Messages; }); diff --git a/www/form/app-form.less b/www/form/app-form.less index 588731a3c..f90ed7334 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -974,13 +974,12 @@ .cp-form-block-arrows { max-width: fit-content; margin-inline: auto; - padding: 5px; + padding: 6px; margin-top: -35px; border-radius: 0px @variables_radius 0px 0px; - .direction-arrow-down { + .fa-arrow-down { margin-left: 20px; } - background: fade(@cryptpad_text_col, 10%); } } diff --git a/www/form/inner.js b/www/form/inner.js index 00129c85c..aa1f028cd 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4022,7 +4022,6 @@ define([ // Drag handle var dragEllipses = 'ontouchstart' in window ? undefined : [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); - // Question var inputQ = h('input', { value: block.q || Messages.form_default @@ -4260,8 +4259,12 @@ define([ } let shiftButtons; if ('ontouchstart' in window) { - var upButton = h('div.kanban-edit-item.fa.fa-arrow-up'); - var downButton = h('div.kanban-edit-item.fa.fa-arrow-down.direction-arrow-down'); + var upButton = h('div.fa.fa-arrow-up', { + 'title': Messages.moveItemUp + }); + var downButton = h('div.fa.fa-arrow-down', { + 'title': Messages.moveitemDown + }); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { @@ -4284,7 +4287,8 @@ define([ ]); } var editableCls = editable ? ".editable" : ""; - elements.push(h('div.cp-form-block'+editableCls, { + var draggable = 'ontouchstart' in window ? '.nodrag' : ''; + elements.push(h('div.cp-form-block'+editableCls+draggable, { 'data-id':uid, 'data-type':type }, [ @@ -4529,13 +4533,14 @@ define([ return true; }); - if (editable && !('ontouchstart' in window)) { + if (editable) { if (APP.mainSortable) { APP.mainSortable.destroy(); } var grabHandle; if (window.matchMedia("(pointer: coarse)").matches) { grabHandle = '.cp-form-block-drag-handle'; } else { grabHandle = null; + } APP.mainSortable = Sortable.create($container[0], { handle: grabHandle, From 14d7d187142f4292d2f2c1c8a0d484e7ca90c455 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 21 Jan 2025 16:13:49 +0100 Subject: [PATCH 04/22] Linting --- www/form/inner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/form/inner.js b/www/form/inner.js index aa1f028cd..5839c7b76 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4020,7 +4020,7 @@ define([ var changeType; if (editable) { // Drag handle - var dragEllipses = 'ontouchstart' in window ? undefined : [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] + var dragEllipses = 'ontouchstart' in window ? undefined : [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')]; dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); // Question var inputQ = h('input', { From b878d8f9c5a38bc9fcb3a334c37846e7d53e44f4 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 21 Jan 2025 16:15:09 +0100 Subject: [PATCH 05/22] Remove newlines --- www/form/inner.js | 1 - 1 file changed, 1 deletion(-) diff --git a/www/form/inner.js b/www/form/inner.js index 5839c7b76..c28419f3c 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4540,7 +4540,6 @@ define([ grabHandle = '.cp-form-block-drag-handle'; } else { grabHandle = null; - } APP.mainSortable = Sortable.create($container[0], { handle: grabHandle, From 82d8f617a246bc0b33aadde034bc029995ce3158 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 21 Jan 2025 16:32:11 +0100 Subject: [PATCH 06/22] Corrected translation keys note --- customize.dist/translations/messages.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index a7866bdfd..a4aa81611 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -13,7 +13,7 @@ define(['/common/translations/messages.js'], function (Messages) { // Replace the existing keys in your copied file here: // Messages.button_newpad = "New Rich Text Document"; - //NOTE: these keys are also added to the Kanban mobile UI PR #1753 + //NOTE: these keys are also added to the Kanban mobile UI PR #1727 Messages.moveItemUp = 'Move item up'; // XXX Messages.moveitemDown = 'Move item down'; // XXX From b7a0eb3c3a7056ae1ca937ca93c70e9b5c8e2690 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 21 Jan 2025 17:31:50 +0100 Subject: [PATCH 07/22] Added aria-hidden --- www/form/inner.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index c28419f3c..3d92f90d4 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4259,11 +4259,13 @@ define([ } let shiftButtons; if ('ontouchstart' in window) { - var upButton = h('div.fa.fa-arrow-up', { - 'title': Messages.moveItemUp + var upButton = h('i.fa.fa-arrow-up', { + 'title': Messages.moveItemUp, + 'aria-hidden': true }); - var downButton = h('div.fa.fa-arrow-down', { - 'title': Messages.moveitemDown + var downButton = h('i.fa.fa-arrow-down', { + 'title': Messages.moveitemDown, + 'aria-hidden': true }); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); From efdf1c3032cb1b10459f67005d9a2299e417a138 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Thu, 6 Feb 2025 18:33:34 +0100 Subject: [PATCH 08/22] Added toggle --- customize.dist/translations/messages.js | 4 ++- www/form/app-form.less | 43 +++++++++++++++++++------ www/form/inner.js | 42 ++++++++++++++++++------ 3 files changed, 69 insertions(+), 20 deletions(-) diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index a4aa81611..4a6cf36c2 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -15,7 +15,9 @@ define(['/common/translations/messages.js'], function (Messages) { //NOTE: these keys are also added to the Kanban mobile UI PR #1727 Messages.moveItemUp = 'Move item up'; // XXX - Messages.moveitemDown = 'Move item down'; // XXX + Messages.moveItemDown = 'Move item down'; // XXX + Messages.toggleArrows = 'Switch to arrow view'; // XXX + Messages.toggleDrag = 'Switch to drag view'; // XXX return Messages; }); diff --git a/www/form/app-form.less b/www/form/app-form.less index f90ed7334..b04222231 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -203,10 +203,27 @@ //flex-wrap: wrap; overflow: auto; + .cp-form-view-drag { + width: 30px; + height: 30px; + border: none; + border-radius: 5px 0px 0px 5px; + background-color: @cp_form-bg1; + color: @cryptpad_text_col; + &.toggle-active { + color: @cp_form-bg1 !important; + background-color: @cryptpad_text_col; + } + } + #toggle-drag-on { + border-radius: 0px 5px 5px 0px !important; + } + @media screen and (max-width: 1000px) { flex-wrap: wrap; justify-content: flex-start; .cp-form-creator-control { + width: 100% !important; .cp-form-creator-settings { display: flex; @@ -223,6 +240,7 @@ flex: 1; padding-right: 20px; } + } } } @@ -587,6 +605,21 @@ } } } + .cp-form-block-arrows { + .cp-form-arrow { + background-color: transparent; + border: none; + color:@cryptpad_text_col; + } + max-width: fit-content; + margin-inline: auto; + padding: 6px; + margin-top: -35px; + border-radius: 0px @variables_radius 0px 0px; + .fa-arrow-down { + margin-left: 20px; + } + } &.sortable-ghost { visibility: hidden; } &.sortable-drag { opacity: 0.9 !important; } @@ -971,16 +1004,6 @@ i { margin-right: 5px; } background: fade(@cryptpad_text_col, 10%); } - .cp-form-block-arrows { - max-width: fit-content; - margin-inline: auto; - padding: 6px; - margin-top: -35px; - border-radius: 0px @variables_radius 0px 0px; - .fa-arrow-down { - margin-left: 20px; - } - } } .cp-form-type-radio, .cp-form-type-checkbox { diff --git a/www/form/inner.js b/www/form/inner.js index 3d92f90d4..db327b26d 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4020,7 +4020,8 @@ define([ var changeType; if (editable) { // Drag handle - var dragEllipses = 'ontouchstart' in window ? undefined : [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')]; + let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; + var dragEllipses = drag ? [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] : undefined dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); // Question var inputQ = h('input', { @@ -4258,15 +4259,16 @@ define([ } } let shiftButtons; - if ('ontouchstart' in window) { - var upButton = h('i.fa.fa-arrow-up', { + let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; + if (!drag) { + var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { 'title': Messages.moveItemUp, 'aria-hidden': true - }); - var downButton = h('i.fa.fa-arrow-down', { - 'title': Messages.moveitemDown, + })) + var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { + 'title': Messages.moveItemDown, 'aria-hidden': true - }); + })) var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { @@ -4274,7 +4276,6 @@ define([ } else if (direction === 'down' && blockIndex < content.order.length-1) { content.order.splice(blockIndex+1, 0, content.order.splice(blockIndex, 1)[0]); } - framework.localChange(); updateForm(framework, content, true); }; $(upButton).click(function () { @@ -4289,7 +4290,9 @@ define([ ]); } var editableCls = editable ? ".editable" : ""; - var draggable = 'ontouchstart' in window ? '.nodrag' : ''; + var draggable = drag ? '' : '.nodrag'; + console.log("draggable", draggable) + elements.push(h('div.cp-form-block'+editableCls+draggable, { 'data-id':uid, 'data-type':type @@ -4563,6 +4566,8 @@ define([ } } }); + let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; + APP.mainSortable.options.disabled = drag ? false : true; return; } @@ -5129,9 +5134,28 @@ define([ editableStr ]); + var toggleOffclass = 'ontouchstart' in window ? 'toggle-active' : 'toggle-inactive'; + var toggleOnclass = 'ontouchstart' in window ? 'toggle-inactive' : 'toggle-active'; + var toggleDragOff = h(`button#toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); + $(toggleDragOff).click(function() { + $(toggleDragOff).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOff).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOn).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined + updateForm(framework, content, true) + }); + var toggleDragOn = h(`button#toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); + $(toggleDragOn).click(function() { + $(toggleDragOn).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOn).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOff).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined + updateForm(framework, content, true) + }); + + var drag = h('div', [ + toggleDragOff, + toggleDragOn + ]) + return [ preview, previewSettings, + drag, colorTheme ]; }; From 14d495cd1774add5fde1681ad6e093880c673af2 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Fri, 7 Feb 2025 12:18:23 +0100 Subject: [PATCH 09/22] Linting --- www/form/app-form.less | 2 -- www/form/inner.js | 36 ++++++++++++++++++++---------------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index b04222231..fc0b26f4b 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -223,7 +223,6 @@ flex-wrap: wrap; justify-content: flex-start; .cp-form-creator-control { - width: 100% !important; .cp-form-creator-settings { display: flex; @@ -240,7 +239,6 @@ flex: 1; padding-right: 20px; } - } } } diff --git a/www/form/inner.js b/www/form/inner.js index db327b26d..32238a8a6 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3903,7 +3903,7 @@ define([ var updateAddInline = APP.updateAddInline = function () { $container.find('.cp-form-creator-add-inline').remove(); // Add before existing question - $container.find('.cp-form-block:not(.nodrag)').each(function (i, el) { + $container.find('.cp-form-block').each(function (i, el) { var $el = $(el); var uid = $el.attr('data-id'); $el.before(getFormCreator(uid)); @@ -4021,7 +4021,7 @@ define([ if (editable) { // Drag handle let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; - var dragEllipses = drag ? [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] : undefined + var dragEllipses = drag ? [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] : undefined; dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); // Question var inputQ = h('input', { @@ -4259,16 +4259,18 @@ define([ } } let shiftButtons; - let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; + let drag; + if (editable) { + drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; if (!drag) { var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { 'title': Messages.moveItemUp, 'aria-hidden': true - })) + })); var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { 'title': Messages.moveItemDown, 'aria-hidden': true - })) + })); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { @@ -4289,10 +4291,10 @@ define([ downButton ]); } + } + var editableCls = editable ? ".editable" : ""; var draggable = drag ? '' : '.nodrag'; - console.log("draggable", draggable) - elements.push(h('div.cp-form-block'+editableCls+draggable, { 'data-id':uid, 'data-type':type @@ -4566,8 +4568,8 @@ define([ } } }); - let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; - APP.mainSortable.options.disabled = drag ? false : true; + APP.mainSortable.options.disabled = 'ontouchstart' in window ? true : false; + return; } @@ -5137,20 +5139,22 @@ define([ var toggleOffclass = 'ontouchstart' in window ? 'toggle-active' : 'toggle-inactive'; var toggleOnclass = 'ontouchstart' in window ? 'toggle-inactive' : 'toggle-active'; var toggleDragOff = h(`button#toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); - $(toggleDragOff).click(function() { - $(toggleDragOff).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOff).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOn).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined - updateForm(framework, content, true) - }); var toggleDragOn = h(`button#toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); + $(toggleDragOff).click(function() { + $(toggleDragOff).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOff).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOn).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined; + updateForm(framework, content, true); + APP.mainSortable.options.disabled = true; + }); $(toggleDragOn).click(function() { - $(toggleDragOn).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOn).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOff).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined - updateForm(framework, content, true) + $(toggleDragOn).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOn).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOff).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined; + updateForm(framework, content, true); + APP.mainSortable.options.disabled = false; }); var drag = h('div', [ toggleDragOff, toggleDragOn - ]) + ]); return [ preview, From 2f2e97c51ceda31f797afedb7b5c13f1bfc2cf8b Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Tue, 11 Feb 2025 16:23:07 +0100 Subject: [PATCH 10/22] Corrections --- customize.dist/messages.js | 7 ++ customize.dist/translations/messages.js | 6 -- www/form/app-form.less | 30 +++--- www/form/inner.js | 122 ++++++++++++++---------- 4 files changed, 97 insertions(+), 68 deletions(-) diff --git a/customize.dist/messages.js b/customize.dist/messages.js index be65e98a9..ba160c5ee 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -135,6 +135,13 @@ define(req, function(AppConfig, Default, Language) { return text; } }; + + //NOTE: these keys are also added to the Kanban mobile UI PR #1727 + Messages.moveItemUp = 'Move item up'; // XXX + Messages.moveItemDown = 'Move item down'; // XXX + Messages.toggleArrows = 'Switch to arrow view'; // XXX + Messages.toggleDrag = 'Switch to drag view'; // XXX + return Messages; }); diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 4a6cf36c2..df4096367 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -13,12 +13,6 @@ define(['/common/translations/messages.js'], function (Messages) { // Replace the existing keys in your copied file here: // Messages.button_newpad = "New Rich Text Document"; - //NOTE: these keys are also added to the Kanban mobile UI PR #1727 - Messages.moveItemUp = 'Move item up'; // XXX - Messages.moveItemDown = 'Move item down'; // XXX - Messages.toggleArrows = 'Switch to arrow view'; // XXX - Messages.toggleDrag = 'Switch to drag view'; // XXX - return Messages; }); diff --git a/www/form/app-form.less b/www/form/app-form.less index fc0b26f4b..03cb1ae4f 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -207,16 +207,22 @@ width: 30px; height: 30px; border: none; - border-radius: 5px 0px 0px 5px; + border-radius: @variables_radius 0px 0px @variables_radius; background-color: @cp_form-bg1; color: @cryptpad_text_col; - &.toggle-active { - color: @cp_form-bg1 !important; + @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px) { + border-radius: @variables_radius @variables_radius 0px 0px; + } + &.cp-toggle-active { + color: @cp_form-bg1; background-color: @cryptpad_text_col; } } - #toggle-drag-on { - border-radius: 0px 5px 5px 0px !important; + #cp-toggle-drag-on { + border-radius: 0px @variables_radius @variables_radius 0px !important; + @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px) { + border-radius: 0px 0px @variables_radius @variables_radius !important; + } } @media screen and (max-width: 1000px) { @@ -604,18 +610,18 @@ } } .cp-form-block-arrows { - .cp-form-arrow { - background-color: transparent; - border: none; - color:@cryptpad_text_col; - } + justify-content: space-between; max-width: fit-content; margin-inline: auto; padding: 6px; margin-top: -35px; border-radius: 0px @variables_radius 0px 0px; - .fa-arrow-down { - margin-left: 20px; + display: flex; + column-gap: 20px; + .cp-form-arrow { + background-color: transparent; + border: none; + color: @cryptpad_text_col; } } diff --git a/www/form/inner.js b/www/form/inner.js index 32238a8a6..17b5d57cc 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4018,11 +4018,46 @@ define([ var changeType; + let shiftButtons; if (editable) { + // Arrows + var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { + 'title': Messages.moveItemUp, + 'aria-hidden': true + })); + var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { + 'title': Messages.moveItemDown, + 'aria-hidden': true + })); + var shiftBlock = function(direction) { + var blockIndex = content.order.indexOf(uid); + if (direction === 'up' && blockIndex > 0) { + content.order.splice(blockIndex-1, 0, content.order.splice(blockIndex, 1)[0]); + } else if (direction === 'down' && blockIndex < content.order.length-1) { + content.order.splice(blockIndex+1, 0, content.order.splice(blockIndex, 1)[0]); + } + updateForm(framework, content, true); + }; + $(upButton).click(function () { + shiftBlock('up'); + }); + $(downButton).click(function () { + shiftBlock('down'); + }); + shiftButtons = h('div.cp-form-block-arrows', + {style: 'display: none'}, [ + upButton, + downButton + ]); + // Drag handle - let drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; - var dragEllipses = drag ? [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] : undefined; + var drag = APP.drag + var dragEllipses = [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); + if (!drag) { + $(shiftButtons).css({display: 'flex'}) + $(dragEllipses).css({display: 'none'}) + } // Question var inputQ = h('input', { value: block.q || Messages.form_default @@ -4258,40 +4293,9 @@ define([ } } } - let shiftButtons; - let drag; - if (editable) { - drag = $('#toggle-drag-off').attr('class').indexOf('toggle-active') !== -1 ? false : true; - if (!drag) { - var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { - 'title': Messages.moveItemUp, - 'aria-hidden': true - })); - var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { - 'title': Messages.moveItemDown, - 'aria-hidden': true - })); - var shiftBlock = function(direction) { - var blockIndex = content.order.indexOf(uid); - if (direction === 'up' && blockIndex > 0) { - content.order.splice(blockIndex-1, 0, content.order.splice(blockIndex, 1)[0]); - } else if (direction === 'down' && blockIndex < content.order.length-1) { - content.order.splice(blockIndex+1, 0, content.order.splice(blockIndex, 1)[0]); - } - updateForm(framework, content, true); - }; - $(upButton).click(function () { - shiftBlock('up'); - }); - $(downButton).click(function () { - shiftBlock('down'); - }); - shiftButtons = h('div.cp-form-block-arrows', [ - upButton, - downButton - ]); - } - } + + + var editableCls = editable ? ".editable" : ""; var draggable = drag ? '' : '.nodrag'; @@ -5136,20 +5140,38 @@ define([ editableStr ]); - var toggleOffclass = 'ontouchstart' in window ? 'toggle-active' : 'toggle-inactive'; - var toggleOnclass = 'ontouchstart' in window ? 'toggle-inactive' : 'toggle-active'; - var toggleDragOff = h(`button#toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); - var toggleDragOn = h(`button#toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); - $(toggleDragOff).click(function() { - $(toggleDragOff).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOff).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOn).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined; - updateForm(framework, content, true); - APP.mainSortable.options.disabled = true; - }); - $(toggleDragOn).click(function() { - $(toggleDragOn).attr('class').indexOf('toggle-inactive') !== -1 ? $(toggleDragOn).toggleClass('toggle-inactive').toggleClass('toggle-active') && $(toggleDragOff).toggleClass('toggle-active').toggleClass('toggle-inactive') : undefined; - updateForm(framework, content, true); - APP.mainSortable.options.disabled = false; - }); + var toggleOffclass; + var toggleOnclass; + if ('ontouchstart' in window) { + toggleOffclass = 'cp-toggle-active' + APP.drag = false + } else { + toggleOnclass = 'cp-toggle-active' + APP.drag = true + } + + var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); + var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); + // var container = $('.cp-form-creator-content') + // $(container).addClass('cp-drag') + const updateDrag = state => { + return function () { + $(toggleDragOn).toggleClass('cp-toggle-active', state); + $(toggleDragOff).toggleClass('cp-toggle-active', !state); + APP.mainSortable.options.disabled = !state; + APP.drag = state + if (state) { + $('.cp-form-block-arrows').css({display: 'none'}) + $('.fa-ellipsis-h').css({display: 'block'}) + + } else { + $('.cp-form-block-arrows').css({display: 'flex'}) + $('.fa-ellipsis-h').css({display: 'none'}) + } + }; + }; + $(toggleDragOn).click(updateDrag(true)); + $(toggleDragOff).click(updateDrag(false)); var drag = h('div', [ toggleDragOff, From 3f8edc1c486277205e792c0c20fe5a9ecfe91be9 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Fri, 14 Feb 2025 14:41:47 +0100 Subject: [PATCH 11/22] More corrections --- www/form/app-form.less | 34 ++++++++++++++++---------- www/form/inner.js | 54 +++++++++++++++--------------------------- 2 files changed, 40 insertions(+), 48 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 03cb1ae4f..a579db161 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -391,6 +391,26 @@ display: flex; flex-flow: column; flex: 1 1 1000px; + &.cp-no-drag { + .cp-form-block-arrows { + justify-content: space-between; + max-width: fit-content; + margin-inline: auto; + padding: 6px; + margin-top: -35px; + border-radius: 0px @variables_radius 0px 0px; + display: flex !important; + column-gap: 20px; + .cp-form-arrow { + background-color: transparent; + border: none; + color: @cryptpad_text_col; + } + } + .fa-ellipsis-h { + display: none !important; + } + } .cp-form-creator-add-inline { display: flex; @@ -610,19 +630,7 @@ } } .cp-form-block-arrows { - justify-content: space-between; - max-width: fit-content; - margin-inline: auto; - padding: 6px; - margin-top: -35px; - border-radius: 0px @variables_radius 0px 0px; - display: flex; - column-gap: 20px; - .cp-form-arrow { - background-color: transparent; - border: none; - color: @cryptpad_text_col; - } + display: none; } &.sortable-ghost { visibility: hidden; } diff --git a/www/form/inner.js b/www/form/inner.js index 17b5d57cc..4954bf914 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3775,7 +3775,7 @@ define([ }); $body.addClass('cp-form-palette-'+color); - $container.attr('class', 'cp-form-creator-content'+(APP.isEditor? ' cp-form-iseditor': '')); + $container.attr('class', 'cp-form-creator-content'+(APP.isEditor? ' cp-form-iseditor': '')+ ('ontouchstart' in window ? ' cp-no-drag' : '')); if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) { var sframeChan = framework._.sfCommon.getSframeChannel(); @@ -3903,7 +3903,7 @@ define([ var updateAddInline = APP.updateAddInline = function () { $container.find('.cp-form-creator-add-inline').remove(); // Add before existing question - $container.find('.cp-form-block').each(function (i, el) { + $container.find('.cp-form-block:not(.cp-form-submit-message)').each(function (i, el) { var $el = $(el); var uid = $el.attr('data-id'); $el.before(getFormCreator(uid)); @@ -4033,10 +4033,13 @@ define([ var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { content.order.splice(blockIndex-1, 0, content.order.splice(blockIndex, 1)[0]); + updateForm(framework, content, true); + framework.localChange(); } else if (direction === 'down' && blockIndex < content.order.length-1) { content.order.splice(blockIndex+1, 0, content.order.splice(blockIndex, 1)[0]); + updateForm(framework, content, true); + framework.localChange(); } - updateForm(framework, content, true); }; $(upButton).click(function () { shiftBlock('up'); @@ -4044,20 +4047,15 @@ define([ $(downButton).click(function () { shiftBlock('down'); }); - shiftButtons = h('div.cp-form-block-arrows', - {style: 'display: none'}, [ + shiftButtons = h('div.cp-form-block-arrows', [ upButton, downButton ]); // Drag handle - var drag = APP.drag - var dragEllipses = [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')] + var dragEllipses = [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')]; dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); - if (!drag) { - $(shiftButtons).css({display: 'flex'}) - $(dragEllipses).css({display: 'none'}) - } + // Question var inputQ = h('input', { value: block.q || Messages.form_default @@ -4294,11 +4292,8 @@ define([ } } - - - var editableCls = editable ? ".editable" : ""; - var draggable = drag ? '' : '.nodrag'; + var draggable = APP.drag ? '' : '.nodrag'; elements.push(h('div.cp-form-block'+editableCls+draggable, { 'data-id':uid, 'data-type':type @@ -5140,36 +5135,25 @@ define([ editableStr ]); - var toggleOffclass; - var toggleOnclass; - if ('ontouchstart' in window) { - toggleOffclass = 'cp-toggle-active' - APP.drag = false - } else { - toggleOnclass = 'cp-toggle-active' - APP.drag = true - } - + var toggleOffclass = 'ontouchstart' in window ? 'cp-toggle-active' : undefined; + var toggleOnclass = 'ontouchstart' in window ? undefined : 'cp-toggle-active'; var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); - // var container = $('.cp-form-creator-content') - // $(container).addClass('cp-drag') const updateDrag = state => { return function () { + var $container = $('.cp-form-creator-content'); $(toggleDragOn).toggleClass('cp-toggle-active', state); $(toggleDragOff).toggleClass('cp-toggle-active', !state); APP.mainSortable.options.disabled = !state; - APP.drag = state + APP.drag = state; if (state) { - $('.cp-form-block-arrows').css({display: 'none'}) - $('.fa-ellipsis-h').css({display: 'block'}) - + $container.removeClass('cp-no-drag'); } else { - $('.cp-form-block-arrows').css({display: 'flex'}) - $('.fa-ellipsis-h').css({display: 'none'}) + $container.addClass('cp-no-drag'); } }; }; + $(toggleDragOn).click(updateDrag(true)); $(toggleDragOff).click(updateDrag(false)); @@ -5297,7 +5281,7 @@ define([ fillerContainer = h('div.cp-form-filler-container'); } - var contentContainer = h('div.cp-form-creator-content' + (APP.isEditor ? '.cp-form-iseditor' : '')); + var contentContainer = h('div.cp-form-creator-content' + (APP.isEditor ? '.cp-form-iseditor' : '') + ('ontouchstart' in window ? '.cp-no-drag' : '')); var resultsContainer = h('div.cp-form-creator-results'); var answeredContainer = h('div.cp-form-creator-answered', { style: 'display: none;' @@ -5567,7 +5551,7 @@ define([ var editButtons = h('div.cp-form-edit-buttons-container', [ preview, edit, del ]); var editDiv, previewDiv; - var div = h('div.cp-form-block.editable.nodrag', [ + var div = h('div.cp-form-block.editable.nodrag.cp-form-submit-message', [ h('div.cp-form-block-content', [ p, editDiv = h('div.cp-form-response-modal', t), From 9fd649fb8ceeceddf3637af2b49a8350f9067e68 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Thu, 20 Feb 2025 11:44:59 +0100 Subject: [PATCH 12/22] Fixed container class and button accessibility --- www/form/inner.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index 4954bf914..67a0d1efd 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3774,8 +3774,8 @@ define([ } }); $body.addClass('cp-form-palette-'+color); - - $container.attr('class', 'cp-form-creator-content'+(APP.isEditor? ' cp-form-iseditor': '')+ ('ontouchstart' in window ? ' cp-no-drag' : '')); + var containerDragClass = ('ontouchstart' in window || APP.drag === false) ? ' cp-no-drag' : '' + $container.attr('class', 'cp-form-creator-content'+(APP.isEditor? ' cp-form-iseditor': '')+ containerDragClass); if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) { var sframeChan = framework._.sfCommon.getSframeChannel(); @@ -4023,11 +4023,13 @@ define([ // Arrows var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { 'title': Messages.moveItemUp, - 'aria-hidden': true + 'aria-hidden': true, + 'tabindex': 0 })); var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { 'title': Messages.moveItemDown, - 'aria-hidden': true + 'aria-hidden': true, + 'tabindex': 0 })); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); @@ -5137,8 +5139,8 @@ define([ var toggleOffclass = 'ontouchstart' in window ? 'cp-toggle-active' : undefined; var toggleOnclass = 'ontouchstart' in window ? undefined : 'cp-toggle-active'; - var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows}); - var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag}); + var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows, 'tabindex': 0}); + var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag, 'tabindex': 0}); const updateDrag = state => { return function () { var $container = $('.cp-form-creator-content'); From b3fb8b748a027993ddc908fe89ef946bce7e6c65 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Thu, 27 Feb 2025 14:12:14 +0100 Subject: [PATCH 13/22] Screen width formatting --- www/form/app-form.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index a579db161..3e000c997 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -210,7 +210,7 @@ border-radius: @variables_radius 0px 0px @variables_radius; background-color: @cp_form-bg1; color: @cryptpad_text_col; - @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px) { + @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px), (max-width:379px) and (min-width:350px) { border-radius: @variables_radius @variables_radius 0px 0px; } &.cp-toggle-active { @@ -220,7 +220,7 @@ } #cp-toggle-drag-on { border-radius: 0px @variables_radius @variables_radius 0px !important; - @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px) { + @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px), (max-width:379px) and (min-width:350px) { border-radius: 0px 0px @variables_radius @variables_radius !important; } } From 242383853cdec3822d1d47a741072d8a0e241d09 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Thu, 27 Feb 2025 15:03:59 +0100 Subject: [PATCH 14/22] Toggle styled horizontally --- www/form/app-form.less | 35 +++++++++++++++++------------------ www/form/inner.js | 2 +- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 3e000c997..e7a3b3427 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -203,25 +203,24 @@ //flex-wrap: wrap; overflow: auto; - .cp-form-view-drag { - width: 30px; - height: 30px; - border: none; - border-radius: @variables_radius 0px 0px @variables_radius; - background-color: @cp_form-bg1; - color: @cryptpad_text_col; - @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px), (max-width:379px) and (min-width:350px) { - border-radius: @variables_radius @variables_radius 0px 0px; + .cp-drag-container { + display: flex; + flex-direction: row; + + .cp-form-view-drag { + width: 30px; + height: 30px; + border: none; + border-radius: @variables_radius 0px 0px @variables_radius; + background-color: @cp_form-bg1; + color: @cryptpad_text_col; + &.cp-toggle-active { + color: @cp_form-bg1; + background-color: @cryptpad_text_col; + } } - &.cp-toggle-active { - color: @cp_form-bg1; - background-color: @cryptpad_text_col; - } - } - #cp-toggle-drag-on { - border-radius: 0px @variables_radius @variables_radius 0px !important; - @media (max-width:723px) and (min-width:693px), (max-width:553px) and (min-width:524px), (max-width:379px) and (min-width:350px) { - border-radius: 0px 0px @variables_radius @variables_radius !important; + #cp-toggle-drag-on { + border-radius: 0px @variables_radius @variables_radius 0px !important; } } diff --git a/www/form/inner.js b/www/form/inner.js index 67a0d1efd..b36f21d7e 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -5159,7 +5159,7 @@ define([ $(toggleDragOn).click(updateDrag(true)); $(toggleDragOff).click(updateDrag(false)); - var drag = h('div', [ + var drag = h('div.cp-drag-container', [ toggleDragOff, toggleDragOn ]); From 04fa1d1e7bda615e6fdab0d4610f45274f41f4bd Mon Sep 17 00:00:00 2001 From: David Benque Date: Wed, 5 Mar 2025 14:21:38 +0000 Subject: [PATCH 15/22] Fix toggle appearance on iOS 1808 --- www/form/app-form.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index e7a3b3427..e977c73d8 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -207,7 +207,9 @@ display: flex; flex-direction: row; - .cp-form-view-drag { + button.cp-form-view-drag { + margin: 0; + padding: 1px 4px; width: 30px; height: 30px; border: none; From d774de4b28f6afa8e5a723c09467bd81476887b3 Mon Sep 17 00:00:00 2001 From: David Benque Date: Thu, 6 Mar 2025 17:23:01 +0000 Subject: [PATCH 16/22] Accessibilty fixes to form arrows --- www/form/inner.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index b36f21d7e..93bf582fc 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4021,16 +4021,14 @@ define([ let shiftButtons; if (editable) { // Arrows - var upButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-up', { + var upButton = h('button.cp-form-arrow', { 'title': Messages.moveItemUp, - 'aria-hidden': true, - 'tabindex': 0 - })); - var downButton = h('button.cp-form-arrow', h('i.fa.fa-arrow-down', { + 'aria-label': Messages.moveItemUp + }, [h('i.fa.fa-arrow-up', {'aria-hidden': true})]); + var downButton = h('button.cp-form-arrow', { 'title': Messages.moveItemDown, - 'aria-hidden': true, - 'tabindex': 0 - })); + 'aria-label': Messages.moveItemDown + }, [h('i.fa.fa-arrow-down', {'aria-hidden': true})]); var shiftBlock = function(direction) { var blockIndex = content.order.indexOf(uid); if (direction === 'up' && blockIndex > 0) { From 7f6956e267a0d3a979748987e74871af6c404825 Mon Sep 17 00:00:00 2001 From: zuzanna-maria Date: Mon, 10 Mar 2025 14:14:57 +0100 Subject: [PATCH 17/22] Fixed focus outline color --- www/form/app-form.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index e977c73d8..35801c18c 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -215,7 +215,10 @@ border: none; border-radius: @variables_radius 0px 0px @variables_radius; background-color: @cp_form-bg1; - color: @cryptpad_text_col; + color: @cryptpad_text_col; + &:focus-visible { + outline: @variables_focus_style; + } &.cp-toggle-active { color: @cp_form-bg1; background-color: @cryptpad_text_col; @@ -406,6 +409,9 @@ background-color: transparent; border: none; color: @cryptpad_text_col; + &:focus-visible { + outline: @variables_focus_style; + } } } .fa-ellipsis-h { From 813029353f1a87e6b4cbd6eceba055b66ca67d7e Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 10 Mar 2025 18:39:39 +0100 Subject: [PATCH 18/22] Disable tippy on move up/down buttons --- www/form/inner.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/www/form/inner.js b/www/form/inner.js index 93bf582fc..1511342d1 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4022,10 +4022,12 @@ define([ if (editable) { // Arrows var upButton = h('button.cp-form-arrow', { + 'data-notippy':1, 'title': Messages.moveItemUp, 'aria-label': Messages.moveItemUp }, [h('i.fa.fa-arrow-up', {'aria-hidden': true})]); var downButton = h('button.cp-form-arrow', { + 'data-notippy':1, 'title': Messages.moveItemDown, 'aria-label': Messages.moveItemDown }, [h('i.fa.fa-arrow-down', {'aria-hidden': true})]); From 44e86da914cca154504384c764348f8d0d14740f Mon Sep 17 00:00:00 2001 From: daria Date: Tue, 11 Mar 2025 12:09:51 +0200 Subject: [PATCH 19/22] remove `aria-hidden` + add missing semi-colon --- www/form/inner.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index 1511342d1..18add5e38 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3774,7 +3774,7 @@ define([ } }); $body.addClass('cp-form-palette-'+color); - var containerDragClass = ('ontouchstart' in window || APP.drag === false) ? ' cp-no-drag' : '' + var containerDragClass = ('ontouchstart' in window || APP.drag === false) ? ' cp-no-drag' : ''; $container.attr('class', 'cp-form-creator-content'+(APP.isEditor? ' cp-form-iseditor': '')+ containerDragClass); if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) { @@ -5139,8 +5139,8 @@ define([ var toggleOffclass = 'ontouchstart' in window ? 'cp-toggle-active' : undefined; var toggleOnclass = 'ontouchstart' in window ? undefined : 'cp-toggle-active'; - var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'aria-hidden': true, 'title': Messages.toggleArrows, 'tabindex': 0}); - var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'aria-hidden': true, 'title': Messages.toggleDrag, 'tabindex': 0}); + var toggleDragOff = h(`button#cp-toggle-drag-off.cp-form-view-drag.${toggleOffclass}.fa.fa-arrows`, {'title': Messages.toggleArrows, 'tabindex': 0}); + var toggleDragOn = h(`button#cp-toggle-drag-on.cp-form-view-drag.${toggleOnclass}.fa.fa-hand-o-up`, {'title': Messages.toggleDrag, 'tabindex': 0}); const updateDrag = state => { return function () { var $container = $('.cp-form-creator-content'); From f5a02278e9a06cdd0f6ed87ef8a0ab2b498af588 Mon Sep 17 00:00:00 2001 From: David Benque Date: Wed, 12 Mar 2025 17:09:26 +0000 Subject: [PATCH 20/22] Fix small gap above question type label --- www/form/app-form.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 35801c18c..46509e96c 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -400,7 +400,7 @@ justify-content: space-between; max-width: fit-content; margin-inline: auto; - padding: 6px; + padding: 5px; margin-top: -35px; border-radius: 0px @variables_radius 0px 0px; display: flex !important; From 2ab210eb193c9a87fd7417d4c3da2041b25b1f3b Mon Sep 17 00:00:00 2001 From: daria Date: Thu, 13 Mar 2025 16:01:00 +0200 Subject: [PATCH 21/22] add border radius to arrow buttons --- www/form/app-form.less | 1 + 1 file changed, 1 insertion(+) diff --git a/www/form/app-form.less b/www/form/app-form.less index 46509e96c..c4fe74265 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -410,6 +410,7 @@ border: none; color: @cryptpad_text_col; &:focus-visible { + border-radius: @variables_radius; outline: @variables_focus_style; } } From 41997439a6b84c13abb59bb86f5bedf56ed11506 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 18 Mar 2025 15:46:32 +0100 Subject: [PATCH 22/22] Fix form arrows UI with long question type --- www/form/app-form.less | 74 +++++++++++++++++++++++++++--------------- www/form/inner.js | 15 +++++---- 2 files changed, 56 insertions(+), 33 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index c4fe74265..42f2c1bd7 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -133,6 +133,19 @@ } } + .cp-form-iseditor { + .cp-form-block header { + display: flex !important; + } + } + .cp-form-creator-results { + .cp-form-block-type { + float: right; + margin-top: -10px; + margin-right: -10px; + } + } + &.cp-form-readonly { .cp-form-creator-inline-add { display: none; @@ -321,7 +334,6 @@ div.cp-form-creator-content { position: relative; .cp-form-block-type { - margin-top: -35px; &.editable { cursor: pointer; } @@ -396,27 +408,26 @@ flex-flow: column; flex: 1 1 1000px; &.cp-no-drag { - .cp-form-block-arrows { - justify-content: space-between; - max-width: fit-content; - margin-inline: auto; - padding: 5px; - margin-top: -35px; - border-radius: 0px @variables_radius 0px 0px; - display: flex !important; - column-gap: 20px; - .cp-form-arrow { - background-color: transparent; - border: none; - color: @cryptpad_text_col; - &:focus-visible { - border-radius: @variables_radius; - outline: @variables_focus_style; + .cp-form-block { + .cp-form-block-arrows { + padding-left: 5px; + border-radius: 0px @variables_radius 0px 0px; + display: flex; + column-gap: 10px; + .cp-form-arrow { + display: block; + background-color: transparent; + border: none; + color: @cryptpad_text_col; + &:focus-visible { + border-radius: @variables_radius; + outline: @variables_focus_style; + } } } - } - .fa-ellipsis-h { - display: none !important; + .cp-form-block-drag-handle { + display: none !important; + } } } @@ -610,6 +621,14 @@ margin-bottom: 20px; } + header { + display: none; + justify-content: space-between; + margin-top: -10px; + margin-left: -10px; + margin-right: -10px; + } + .cp-form-disabled { .cp-form-poll-choice, .cp-form-type-sort { cursor: not-allowed !important; @@ -625,15 +644,16 @@ .cp-form-block-drag-handle { display: flex; flex-flow: column; - height: 25px; - align-items: center; + width: 50px; + justify-content: center; + padding-left: 10px; + font-size: 20px; color: @cp_sidebar-hint; i { cursor: grab; &:first-child { height: 3px; - margin-top: -10px; - margin-bottom: 1px; + margin-bottom: 2px; } } } @@ -1016,10 +1036,10 @@ } } .cp-form-block-type { - float: right; + //float: right; padding: 5px; - margin-top: -10px; - margin-right: -10px; + //margin-top: -10px; + //margin-right: -10px; border-radius: 0px @variables_radius 0px 0px; i { margin-right: 5px; } background: fade(@cryptpad_text_col, 10%); diff --git a/www/form/inner.js b/www/form/inner.js index 18add5e38..0f87f4f2c 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4020,7 +4020,7 @@ define([ var changeType; let shiftButtons; if (editable) { - // Arrows + // Arrows var upButton = h('button.cp-form-arrow', { 'data-notippy':1, 'title': Messages.moveItemUp, @@ -4049,13 +4049,14 @@ define([ $(downButton).click(function () { shiftBlock('down'); }); - shiftButtons = h('div.cp-form-block-arrows', [ + shiftButtons = h('div.cp-form-block-arrows', [ upButton, downButton ]); + // Drag handle - var dragEllipses = [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')]; + var dragEllipses = [h('i.fa.fa-ellipsis-h'), h('i.fa.fa-ellipsis-h')]; dragHandle = h('span.cp-form-block-drag-handle', dragEllipses); // Question @@ -4300,9 +4301,11 @@ define([ 'data-id':uid, 'data-type':type }, [ - APP.isEditor ? dragHandle : undefined, - shiftButtons, - changeType, + h('header', [ + APP.isEditor ? dragHandle : undefined, + shiftButtons, + changeType + ]), isStatic ? undefined : q, h('div.cp-form-block-content', [ APP.isEditor && !isStatic ? requiredDiv : undefined,