From 9d03d0effb5d2acc1381408086fa15bc2ec2d109 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 21 Apr 2020 16:07:04 +0200 Subject: [PATCH] Update rich text app structure to add a comments container --- www/pad/app-pad.less | 51 +++++++++++++++++++++++++++++++--------- www/pad/comments.js | 4 ++-- www/pad/inner.html | 4 ++++ www/pad/inner.js | 56 ++++++++++---------------------------------- 4 files changed, 58 insertions(+), 57 deletions(-) diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 3f6e0b455..730517f74 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -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; } } } diff --git a/www/pad/comments.js b/www/pad/comments.js index e930f65f5..8c4119f92 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -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(); diff --git a/www/pad/inner.html b/www/pad/inner.html index 3e93b9028..76def97dc 100644 --- a/www/pad/inner.html +++ b/www/pad/inner.html @@ -42,7 +42,11 @@ +
+
+
+
diff --git a/www/pad/inner.js b/www/pad/inner.js index 3cbd7c1c9..b9b63a330 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -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*/) {