From d4232a2c17a92b65a1ccbefe429b95c0000dda2c Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 12 Feb 2021 16:46:51 +0100 Subject: [PATCH] Better comments UI for mobile --- www/pad/app-pad.less | 53 +++++++++++++++++++++++++++++++------------- www/pad/comments.js | 26 +++++++++++++++++++++- www/pad/inner.js | 31 ++++++++++++++++++++++---- 3 files changed, 90 insertions(+), 20 deletions(-) diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 2f98506a3..89cdbf145 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -24,6 +24,21 @@ body.cp-app-pad { overflow: hidden; } + @media screen and (max-height: @browser_media-medium-screen), + screen and (max-width: @browser_media-medium-screen) { + #cp-app-pad-toc { + margin: 5px; + &.hidden { + margin: 1px; + } + } + #cp-app-pad-comments { + .cp-pad-show, .cp-pad-hide { + display: none; + } + } + } + #cp-app-pad-toc, #cp-app-pad-comments, #cp-app-pad-resize { .cp-pad-show, .cp-pad-hide { position: absolute; @@ -110,6 +125,29 @@ body.cp-app-pad { } } } + #cp-app-pad-comments { + order: 3; + width: 330px; + //background-color: white; + margin: 10px; + position: relative; + .cp-pad-show, .cp-pad-hide { + left: 0; + } + h2 { + font-size: 1.5rem; + text-align: right; + } + .comments_main(); + } + .cp-app-pad-comments-modal { + display: flex; + flex-flow: column; + max-height: 100%; + h2 { + text-align: left; + } + } .cke_toolbox_main { background-color: @cp_toolbar-bg; @@ -197,21 +235,6 @@ body.cp-app-pad { } } } - #cp-app-pad-comments { - order: 3; - width: 330px; - //background-color: white; - margin: 10px; - position: relative; - .cp-pad-show, .cp-pad-hide { - left: 0; - } - h2 { - font-size: 1.5rem; - text-align: right; - } - .comments_main(); - } &.cke_body_width { div.cp-comment-bubble { button { diff --git a/www/pad/comments.js b/www/pad/comments.js index 72935a92b..8f13c2c7a 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -636,6 +636,8 @@ define([ // If we've clicked on the show/hide buttons, always use our latest local value if (typeof(Env.localHide) === "boolean") { hide = Env.localHide; } + if (Env.mobile) { hide = false; } + Env.$container.removeClass('hidden'); if (hide) { Env.$container.addClass('hidden'); } @@ -644,6 +646,10 @@ define([ $showBtn.addClass('notif'); } + if (Env.mobile && Env.current) { + Env.$container.find('.cp-comment-container[data-uid]').hide(); + Env.$container.find('.cp-comment-container[data-uid="' + Env.current + '"]').show(); + } Env.$container.show(); }; @@ -823,6 +829,9 @@ define([ v: canonicalize(Env.editor.getSelection().getSelectedText()) }] }; + + Env.current = uid; + // There may be a race condition between updateMetadata and addMark that causes // * updateMetadata first: comment not rendered (redrawComments called // before addMark) @@ -839,6 +848,12 @@ define([ Env.$container.show(); Env.$container.find('> h2').after(form); + + if (Env.modal) { + UI.openCustomModal(Env.modal); + Env.current = undefined; + Env.$container.find('.cp-comment-container[data-uid]').hide(); + } }; @@ -934,7 +949,16 @@ define([ var $comment = $(e.target); var uid = $comment.attr('data-uid'); if (!uid) { return; } - Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').click(); + if (Env.modal) { + UI.openCustomModal(Env.modal); + Env.current = uid; + Env.$container.find('.cp-comment-container[data-uid]').hide(); + setTimeout(function () { + Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').show().click(); + }); + } else { + Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').click(); + } }); var call = function(f) { diff --git a/www/pad/inner.js b/www/pad/inner.js index 5d719402b..6d84d9f99 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -101,6 +101,7 @@ define([ logFights: true, fights: [], Cursor: Cursor, + mobile: $('body').width() <= 600 }; // MEDIATAG: Filter elements to serialize @@ -688,10 +689,13 @@ define([ $iframe: $iframe, $inner: $inner, $contentContainer: $contentContainer, - $container: $('#cp-app-pad-comments') + $container: $(APP.commentsEl), + modal: APP.mobile && APP.comments, + mobile: APP.mobile }); var $resize = $('#cp-app-pad-resize'); + if (module.mobile) { $resize.hide(); } var $toc = $('#cp-app-pad-toc'); $toc.show(); @@ -714,6 +718,7 @@ define([ mkHelpMenu(framework); } + /* framework._.sfCommon.getAttribute(['pad', 'width'], function(err, data) { var active = data || typeof(data) === "undefined"; if (active) { @@ -722,6 +727,7 @@ define([ editor.execCommand('pagemode'); } }); + */ framework.onEditableChange(function(unlocked) { if (!framework.isReadOnly()) { @@ -813,9 +819,13 @@ define([ hide = md.defaultWidth === 0; } - // If we've clicking on the show/hide buttons, always use our last value + // If we've clicked on the show/hide buttons, always use our last value if (typeof(localHide) === "boolean") { hide = localHide; } + if (APP.mobile) { + hide = false; + } + $contentContainer.removeClass('cke_body_width'); $resize.removeClass('hidden'); if (hide) { @@ -870,7 +880,7 @@ define([ } else { hide = md.defaultOutline === 0; } - // If we've clicking on the show/hide buttons, always use our last value + // If we've clicked on the show/hide buttons, always use our last value if (typeof(localHide) === "boolean") { hide = localHide; } $toc.removeClass('hidden'); @@ -1401,7 +1411,20 @@ define([ var $ckeToolbar = $('#cke_1_top').find('.cke_toolbox_main'); $mainContainer.prepend($ckeToolbar.addClass('cke_reset_all')); $contentContainer.append(h('div#cp-app-pad-resize')); - $contentContainer.append(h('div#cp-app-pad-comments')); + + var comments = h('div#cp-app-pad-comments'); + APP.commentsEl = comments; + if (APP.mobile) { + APP.comments = UI.dialog.customModal(comments, { + buttons: [{ + name: Messages.filePicker_close, + onClick: function () {} + }] + }); + $(APP.comments).addClass('cp-app-pad-comments-modal'); + } else { + $contentContainer.append(comments); + } $contentContainer.prepend(h('div#cp-app-pad-toc')); $ckeToolbar.find('.cke_button__image_icon').parent().hide();