The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

Better comments UI for mobile

Browse Source
This commit is contained in:
yflory 2021-02-12 16:46:51 +01:00
parent 3ead08d460
commit d4232a2c17
3 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
www/pad/app-pad.less
View File

@ -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 {

26
www/pad/comments.js
View File

@ -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) {

31
www/pad/inner.js
View File

@ -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();