infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Update rich text app structure to add a comments container

pull/1/head
yflory 2020-04-21 16:07:04 +02:00
parent fa1e15e7d8
commit 9d03d0effb
4 changed files with 58 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,10 +7,21 @@ body.cp-app-pad {
@color: @colortheme_pad-color
);
#cke_1_top {
overflow: visible;
padding: 0px;
@bg-color: #e3e3e3;
display: flex;
flex-flow: column;
max-height: 100%;
min-height: auto;
#cp-app-pad-editor {
flex: 1;
display: flex;
flex-flow: row;
height: 100%;
overflow: hidden;
}
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
.cke_toolbar {
@ -36,20 +47,38 @@ body.cp-app-pad {
flex-flow: column;
height: 100%;
border: 0;
flex: 1;
> .cke_inner {
overflow: hidden;
flex: 1;
position: unset;
display: flex;
flex-flow: column;
margin-top: -1px;
#cke_1_contents {
flex: 1;
display: flex;
flex-flow: column;
height: auto !important;
iframe {
flex: 1;
}
}
#cke_1_top {
display: none;
}
}
#cke_1_contents {
flex: 1;
display: flex;
height: auto !important;
background-color: @bg-color;
justify-content: center;
iframe {
flex: 1;
min-width: 0;
}
#cp-app-pad-comments {
width: 400px;
background-color: white;
margin: 30px;
}
&.cke_body_width {
iframe {
margin: 0 30px;
max-width: 800px;
}
}
}

4
www/pad/comments.js
View File

@ -30,7 +30,7 @@ define([
var uid;
existing.some(function (id) {
var author = Env.comments.authors[id] || {};
if (author.curvePublic !== curvePublic) { return; }
if (author.curvePublic !== curve) { return; }
uid = Number(id);
return true;
});
@ -76,7 +76,7 @@ define([
};
var md = Util.clone(Env.metadataMgr.getMetadata());
md.comments = Util.clone(Env.comments);
metadataMgr.updateMetadata(md);
Env.metadataMgr.updateMetadata(md);
addMark();

4
www/pad/inner.html
View File

@ -42,7 +42,11 @@
</style>
</head>
<body class="cp-app-pad">
<div id="cp-app-pad-toolbar" class="cp-toolbar-container"></div>
<div id="cp-app-pad-editor">
<textarea style="display:none" id="editor1" name="editor1"></textarea>
<div id="cp-app-pad-comments"></div>
</div>
</body>
</html>

56
www/pad/inner.js
View File

@ -440,9 +440,8 @@ define([
var andThen2 = function (editor, Ckeditor, framework) {
var mediaTagMap = {};
var $bar = $('#cke_1_toolbox');
var $contentContainer = $('#cke_1_contents');
var $html = $bar.closest('html');
var $html = $('html');
var $faLink = $html.find('head link[href*="/bower_components/components-font-awesome/css/font-awesome.min.css"]');
if ($faLink.length) {
$html.find('iframe').contents().find('head').append($faLink.clone());
@ -494,30 +493,10 @@ define([
framework: framework,
metadataMgr: metadataMgr,
common: common,
editor: editor
editor: editor,
container: $('#cp-app-pad-comments')[0]
});
editor.plugins.comments.addComment = function (uid, cb) {
if (!comments) {
comments = Util.clone(COMMENTS);
}
// XXX display input
UI.prompt("Message", "", function (val) {
if (!val) { return; }
if (!editor.getSelection().getSelectedText()) {
// text has been deleted by another user while we were typing our comment?
return void UI.warn(Messages.error);
}
var myId = updateAuthorData();
comments.messages[uid] = {
user: myId,
time: +new Date(),
message: val
};
cb();
});
};
var onLinkClicked = function (e) {
var $target = $(e.target);
if (!$target.is('a')) { return; }
@ -717,7 +696,6 @@ define([
return hjson;
});
$bar.find('#cke_1_toolbar_collapser').hide();
if (!framework.isReadOnly()) {
addToolbarHideBtn(framework, $contentContainer);
} else {
@ -776,7 +754,7 @@ define([
framework._.sfCommon.getAttribute(['pad', 'width'], function (err, data) {
var active = data || typeof(data) === "undefined";
if (active) {
$iframe.find('html').addClass('cke_body_width');
$contentContainer.addClass('cke_body_width');
}
var $width = framework._.sfCommon.createButton('', true, {
icon: 'fa-arrows-h',
@ -784,9 +762,9 @@ define([
name: "pad-width",
},function () {
if (active) {
$iframe.find('html').removeClass('cke_body_width');
$contentContainer.removeClass('cke_body_width');
} else {
$iframe.find('html').addClass('cke_body_width');
$contentContainer.addClass('cke_body_width');
}
active = !active;
var key = active ? Messages.pad_useFullWidth : Messages.pad_usePageWidth;
@ -959,8 +937,8 @@ define([
nThen(function (waitFor) {
Framework.create({
toolbarContainer: '#cke_1_toolbox',
contentContainer: '#cke_editor1 > .cke_inner',
toolbarContainer: '#cp-app-pad-toolbar',
contentContainer: '#cp-app-pad-editor',
patchTransformer: ChainPad.NaiveJSONTransformer,
/*thumbnail: {
getContainer: function () { return $('iframe').contents().find('html')[0]; },
@ -1004,14 +982,6 @@ define([
}
// Used in ckeditor-config.js
Ckeditor.CRYPTPAD_URLARGS = ApiConfig.requireConf.urlArgs;
var backColor = AppConfig.appBackgroundColor;
var newCss = '.cke_body_width { background: '+ backColor +'; height: 100%; overflow: auto;}' +
'.cke_body_width body {' +
'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
'box-sizing: border-box; overflow: auto;'+
'}' +
'.cke_body_width body > *:first-child { margin-top: 0; }';
Ckeditor.addCss(newCss);
Ckeditor._mediatagTranslations = {
title: Messages.pad_mediatagTitle,
width: Messages.pad_mediatagWidth,
@ -1037,13 +1007,11 @@ define([
Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
}).nThen(function () {
// Move ckeditor parts to have a structure like the other apps
var $toolbarContainer = $('#cke_1_top');
var $contentContainer = $('#cke_1_contents');
var $mainContainer = $('#cke_editor1');
$contentContainer.prepend($toolbarContainer.find('.cke_toolbox_main'));
$mainContainer.prepend($toolbarContainer);
$contentContainer.find('.cke_toolbox_main').addClass('cke_reset_all');
$toolbarContainer.removeClass('cke_reset_all');
var $mainContainer = $('#cke_editor1 > .cke_inner');
var $ckeToolbar = $('#cke_1_top').find('.cke_toolbox_main');
$mainContainer.prepend($ckeToolbar.addClass('cke_reset_all'));
$contentContainer.append(h('div#cp-app-pad-comments'));
}).nThen(waitFor());
}).nThen(function (/*waitFor*/) {