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,