Move initial state into a help block

This commit is contained in:
yflory 2018-02-27 17:38:29 +01:00
parent 5c53868c3b
commit 60b2384885
22 changed files with 251 additions and 206 deletions

View File

@ -819,12 +819,6 @@ define([
appToolbar(),
h('div#cp-app-poll-content', [
h('div#cp-app-poll-form', [
h('div#cp-app-poll-help', [
h('h1', 'CryptPoll'),
setHTML(h('h2'), Msg.poll_subtitle),
h('p', Msg.poll_p_save),
h('p', Msg.poll_p_encryption)
]),
h('div.cp-app-poll-realtime', [
h('br'),
h('div', [

View File

@ -3,28 +3,9 @@
.cke_reset_all * {
color: inherit;
}
#cke_editor1 .cke_inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column;
}
.cke_toolbox_main {
display: inline-block;
}
#cke_1_contents {
flex: 1;
margin-top: -1px;
display: flex;
overflow: visible;
iframe {
min-height: 100%;
width: 100%;
}
}
.cke_toolbox .cp-toolbar-history {
input.gotoInput { // TODO
padding: 3px 3px;

View File

@ -255,6 +255,38 @@
&.cp-markdown-help { float: right; }
}
}
// TODO put in a different less file
.cp-help-container {
position: relative;
background-color: lighten(@bg-color, 15%);
&.cp-help-hidden {
display: none;
}
.cp-help-close {
position: absolute;
top: 5px;
right: 5px;
}
.cp-help-text {
color: @color;
margin: 0;
padding: 15px;
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
ul, ol, p { margin: 0; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;

View File

@ -714,13 +714,8 @@ define(function () {
'<p>',
'Αυτό είναι&nbsp;<strong>CryptPad</strong>, ο συνεργατικός επεξεργαστής πραγματικού χρόνου Zero Knowledge. Τα πάντα αποθηκεύονται καθώς πληκτρολογείτε.',
'<br>',
'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Share&nbsp;</span> για να μοιραστείτε ένα κείμενο με δικαιώματα <em>read-only link</em>&nbsp;το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.',
'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί <span class="fa fa-share-alt"></span> για να μοιραστείτε ένα κείμενο με δικαιώματα <em>read-only link</em>&nbsp;το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.',
'</p>',
'<p><em>',
'Εμπρός, απλά ξεκινήστε να πληκτρολογείτε...',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');
out.codeInitialState = [
@ -732,14 +727,6 @@ define(function () {
out.slideInitialState = [
'# CryptSlide\n',
'* Αυτός είναι ένας συνεργατικός επεξεργαστής πραγματικού χρόνου με τεχνολογία zero knowledge.\n',
'* Ό,τι πληκτρολογείτε εδώ είναι κρυπτογραφημένο έτσι ώστε μόνο οι άνθρωποι που έχουν τον σύνδεσμο να μπορούν να έχουν πρόσβαση.\n',
'* Ακόμη κι ο διακομιστής δεν μπορεί να δει τι πληκτρολογείτε.\n',
'* Ό,τι δείτε εδώ, ό,τι ακούσετε εδώ, όταν φύγετε από εδώ, θα παραμείνει εδώ.\n',
'\n',
'---',
'\n',
'# Πως να το χρησιμοποιήσετε\n',
'1. Γράψτε τα περιεχόμενα των slides σας χρησιμοποιώντας σύνταξη markdown\n',
' - Μάθετε περισσότερα για την σύνταξη markdown [εδώ](http://www.markdowntutorial.com/)\n',
'2. Διαχωρίστε τα slides σας με ---\n',

View File

@ -294,17 +294,12 @@ define(function () {
'<p>',
'Esto es&nbsp;<strong>CryptPad</strong>, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.',
'<br>',
'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Compartir&nbsp;</span> para obtener un <em>enlace sólo lectura</em>&nbsp;que permite leer pero no escribir.',
'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt"></span> para obtener un <em>enlace sólo lectura</em>&nbsp;que permite leer pero no escribir.',
'</p>',
'<p><em>',
'Vamos, empieza a escribir...',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');
out.codeInitialState = "/*\n Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n Incluso el servidor no puede ver lo que escribes.\n Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n*/";
out.slideInitialState = "# CryptSlide\n* Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n* Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n* Incluso el servidor no puede ver lo que escribes.\n* Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n\n---\n# Cómo utilizarlo\n1. Escribe tu contenido en Markdown\n - Puedes aprender más sobre Markdown [aquí](http://www.markdowntutorial.com/)\n2. Separa tus diapositivas con ---\n3. Haz clic en \"Presentar\" para ver el resultado - Tus diapositivas se actualizan en tiempo real";
out.slideInitialState = "# CryptSlide\n1. Escribe tu contenido en Markdown\n - Puedes aprender más sobre Markdown [aquí](http://www.markdowntutorial.com/)\n2. Separa tus diapositivas con ---\n3. Haz clic en \"Presentar\" para ver el resultado - Tus diapositivas se actualizan en tiempo real";
out.driveReadmeTitle = "¿Qué es CryptPad?";
out.readme_welcome = "¡Bienvenido a CryptPad!";
out.readme_p1 = "Bienvenido a CryptPad, aquí podrás anotar cosas solo o con otra gente.";

View File

@ -780,13 +780,8 @@ define(function () {
'<p>',
'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',
'<br>',
'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Partager&nbsp;</span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt"></span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
'</p>',
'<p>',
'<em>',
'Lancez-vous, commencez à taper...',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');
out.codeInitialState = [
@ -798,14 +793,6 @@ define(function () {
out.slideInitialState = [
'# CryptSlide\n',
'* Voici CryptPad, l\'éditeur collaboratif en temps-réel Zero Knowledge.\n',
'* Ce que vous tapez ici est chiffré de manière que seules les personnes avec le lien peuvent y accéder.\n',
'* Même le serveur est incapable de voir ce que vous tapez.\n',
'* Ce que vous voyez ici, ce que vous entendez, quand vous partez, ça reste ici.\n',
'\n',
'---',
'\n',
'# Comment l\'utiliser\n',
'1. Écrivez le contenu de votre présentation avec la syntaxe Markdown\n',
' - Apprenez à utiliser markdown en cliquant [ici](http://www.markdowntutorial.com/)\n',
'2. Séparez vos slides avec ---\n',

View File

@ -816,13 +816,8 @@ define(function () {
'<p>',
'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
'<br>',
'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt"></span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
'</p>',
'<p><em>',
'Go ahead, just start typing...',
'</em></p>',
'<p>&nbsp;<br></p>'
].join('');
out.codeInitialState = [
@ -834,14 +829,6 @@ define(function () {
out.slideInitialState = [
'# CryptSlide\n',
'* This is a zero knowledge realtime collaborative editor.\n',
'* What you type here is encrypted so only people who have the link can access it.\n',
'* Even the server cannot see what you type.\n',
'* What you see here, what you hear here, when you leave here, let it stay here.\n',
'\n',
'---',
'\n',
'# How to use\n',
'1. Write your slides content using markdown syntax\n',
' - Learn more about markdown syntax [here](http://www.markdowntutorial.com/)\n',
'2. Separate your slides with ---\n',

View File

@ -486,13 +486,8 @@ define(function () {
'<p>',
'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
'<br>',
'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt"></span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
'</p>',
'<p><span style="color:#808080;"><em>',
'Go ahead, just start typing...',
'</em></span></p>',
'<p>&nbsp;<br></p>'
].join('');
out.codeInitialState = [
@ -504,14 +499,6 @@ define(function () {
out.slideInitialState = [
'# CryptSlide\n',
'* This is a zero knowledge realtime collaborative editor.\n',
'* What you type here is encrypted so only people who have the link can access it.\n',
'* Even the server cannot see what you type.\n',
'* What you see here, what you hear here, when you leave here, let it stay here.\n',
'\n',
'---',
'\n',
'# How to use\n',
'1. Write your slides content using markdown syntax\n',
' - Learn more about markdown syntax [here](http://www.markdowntutorial.com/)\n',
'2. Separate your slides with ---\n',

View File

@ -4,16 +4,6 @@ define(function () {
out.main_title = "CryptPad: Zero Knowledge, Colaborare în timp real";
out.main_slogan = "Puterea stă în cooperare - Colaborarea este cheia";
out.type = {};
out.pad = "Rich text";
out.code = "Code";
out.poll = "Poll";
out.slide = "Presentation";
out.drive = "Drive";
out.whiteboard = "Whiteboard";
out.file = "File";
out.media = "Media";
out.button_newpad = "Filă Text Nouă";
out.button_newcode = "Filă Cod Nouă";
out.button_newpoll = "Sondaj Nou";
@ -330,9 +320,9 @@ define(function () {
out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
out.header_logoTitle = "Mergi la pagina principală";
out.initialState = "<p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p>&nbsp;<br></p>";
out.initialState = "<p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\"></span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p>";
out.codeInitialState = "/*\n Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele - Slide-urile tale sunt actualizate în timp real.";
out.slideInitialState = "# CryptSlide\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu ---\n3. Click pe butonul \"Play\" pentru a vedea rezultatele - Slide-urile tale sunt actualizate în timp real.";
out.driveReadmeTitle = "Ce este CryptPad?";
out.readme_welcome = "Bine ai venit n CryptPad !";
out.readme_p1 = "Bine ai venit în CryptPad, acesta este locul unde îți poți lua notițe, singur sau cu prietenii.";

View File

@ -469,13 +469,8 @@ define(function () {
'<p>',
'這是&nbsp;<strong>CryptPad</strong>, 零知識即時協作編輯平台,當你輸入時一切已即存好。',
'<br>',
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;分享&nbsp;</span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
'</p>',
'<p><em>',
'來吧, 開始打字輸入吧...',
'</em></p>',
'<p>&nbsp;<br></p>'
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt"></span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
'</p>'
].join('');
out.codeInitialState = [
@ -487,14 +482,6 @@ define(function () {
out.slideInitialState = [
'# CryptSlide\n',
'* 它是零知識即時協作編輯平台。\n',
'* 你所輸入的東西會予以加密,僅有知道此網頁連結者可以接取這份文件。\n',
'* 即便是本站伺服器也不知道你輸入了什麼內容。\n',
'* 你在這裏看到的、你在這裏聽到的、當你離開本站時,讓它就留在這裏吧。\n',
'\n',
'---',
'\n',
'# 如何使用\n',
'1. 使用 markdown 語法來寫下你的投影片內容\n',
' - 進一步學習 markdown 語法 [here](http://www.markdowntutorial.com/)\n',
'2. 利用 --- 來區隔不同的投影片\n',

View File

@ -74,6 +74,24 @@
}
}
.markdown_main();
.cp-app-code-preview-empty {
display: none;
}
&.cp-app-code-preview-isempty {
display: flex;
align-items: center;
justify-content: center;
#cp-app-code-preview-content {
display: none;
}
.cp-app-code-preview-empty {
//flex: 1 1 auto;
max-height: 100%;
max-width: 100%;
display: block;
opacity: 0.2;
}
}
}
#cp-app-code-preview-content {

View File

@ -63,6 +63,31 @@ define([
'xml',
]);
var mkMarkdownTb = function (editor, framework) {
var $codeMirrorContainer = $('#cp-app-code-container');
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
framework._.toolbar.$rightside.append(markdownTb.button);
var modeChange = function (mode) {
if (['markdown', 'gfm'].indexOf(mode) !== -1) { return void markdownTb.setState(true); }
markdownTb.setState(false);
};
return {
modeChange: modeChange
};
};
var mkHelpMenu = function (framework) {
var $codeMirrorContainer = $('#cp-app-code-container');
var helpMenu = framework._.sfCommon.createHelpMenu();
$codeMirrorContainer.prepend(helpMenu.menu);
$(helpMenu.text).html(DiffMd.render(Messages.codeInitialState));
framework._.toolbar.$rightside.append(helpMenu.button);
};
var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
var $previewContainer = $('#cp-app-code-preview');
var $preview = $('#cp-app-code-preview-content');
@ -70,12 +95,20 @@ define([
var $codeMirrorContainer = $('#cp-app-code-container');
var $codeMirror = $('.CodeMirror');
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
$('<img>', {
src: '/customize/main-favicon.png',
alt: '',
class: 'cp-app-code-preview-empty'
}).appendTo($previewContainer);
var $previewButton = framework._.sfCommon.createButton(null, true);
var forceDrawPreview = function () {
try {
if (editor.getValue() === '') {
$previewContainer.addClass('cp-app-code-preview-isempty');
return;
}
$previewContainer.removeClass('cp-app-code-preview-isempty');
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
} catch (e) { console.error(e); }
};
@ -118,7 +151,7 @@ define([
}
});
framework._.toolbar.$rightside.append($previewButton).append(markdownTb.button);
framework._.toolbar.$rightside.append($previewButton);
$preview.click(function (e) {
if (!e.target) { return; }
@ -145,7 +178,6 @@ define([
}
}
});
markdownTb.setState(true);
return;
}
$editorContainer.removeClass('cp-app-code-present');
@ -153,7 +185,6 @@ define([
$previewContainer.hide();
$previewButton.removeClass('active');
$codeMirrorContainer.addClass('cp-app-code-fullpage');
markdownTb.setState(false);
};
var isVisible = function () {
@ -252,8 +283,12 @@ define([
var common = framework._.sfCommon;
var previewPane = mkPreviewPane(editor, CodeMirror, framework, isPresentMode);
var markdownTb = mkMarkdownTb(editor, framework);
mkHelpMenu(framework);
var evModeChange = Util.mkEvent();
evModeChange.reg(previewPane.modeChange);
evModeChange.reg(markdownTb.modeChange);
mkIndentSettings(editor, framework._.cpNfInner.metadataMgr);
CodeMirror.init(framework.localChange, framework._.title, framework._.toolbar);
@ -315,7 +350,7 @@ define([
});
framework.onDefaultContentNeeded(function () {
editor.setValue(Messages.codeInitialState);
editor.setValue(''); //Messages.codeInitialState);
});
framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);

View File

@ -855,6 +855,45 @@ define([
};
};
UIElements.createHelpMenu = function (common) {
var type = common.getMetadataMgr().getMetadata().type || 'pad';
var text = h('p.cp-help-text');
var closeButton = h('span.cp-help-close.fa.fa-window-close');
var $toolbarButton = common.createButton('', true).addClass('cp-toolbar-button-active');
var help = h('div.cp-help-container', [
closeButton,
text
]);
var toggleHelp = function (forceClose) {
if ($(help).hasClass('cp-help-hidden')) {
if (forceClose) { return; }
common.setAttribute(['hideHelp', type], false);
$toolbarButton.addClass('cp-toolbar-button-active');
return void $(help).removeClass('cp-help-hidden');
}
$toolbarButton.removeClass('cp-toolbar-button-active');
$(help).addClass('cp-help-hidden');
common.setAttribute(['hideHelp', type], true);
};
$(closeButton).click(function () { toggleHelp(true); });
$toolbarButton.click(function () {
toggleHelp();
});
common.getAttribute(['hideHelp', type], function (err, val) {
if (val === true) { toggleHelp(true); }
});
return {
menu: help,
button: $toolbarButton,
text: text
};
};
// Avatars
// Enable mediatags

View File

@ -141,7 +141,6 @@ define([
mode: defaultMode || "javascript",
readOnly: true
});
//editor.setValue(Messages.codeInitialState);
editor.focus();
var setMode = exp.setMode = function (mode, cb) {

View File

@ -90,6 +90,7 @@ define([
funcs.updateTags = callWithCommon(UIElements.updateTags);
funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
funcs.createHelpMenu = callWithCommon(UIElements.createHelpMenu);
funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
funcs.onServerError = callWithCommon(UIElements.onServerError);

View File

@ -377,38 +377,15 @@ define([
config.$contentContainer.prepend($content);
}
var $ck = config.$container.find('.cke_toolbox_main');
var mobile = $('body').width() <= 600;
var hide = function () {
$content.hide();
$button.removeClass('cp-toolbar-button-active');
$ck.css({
'padding-left': '',
});
};
var show = function () {
if (Bar.isEmbed) { $content.hide(); return; }
$content.show();
if (mobile) {
$ck.hide();
}
$button.addClass('cp-toolbar-button-active');
$ck.css({
'padding-left': '175px',
});
var h = $ck.is(':visible') ? -$ck.height() : 0;
$content.css('margin-top', h+'px');
};
$(window).on('cryptpad-ck-toolbar', function () {
if (mobile && $ck.is(':visible')) { return void hide(); }
if ($content.is(':visible')) { return void show(); }
hide();
});
$(window).on('resize', function () {
mobile = $('body').width() <= 600;
var h = $ck.is(':visible') ? -$ck.height() : 0;
$content.css('margin-top', h+'px');
});
$closeIcon.click(function () {
Common.setAttribute(['toolbar', 'userlist-drawer'], false);
hide();
@ -423,7 +400,7 @@ define([
});
show();
Common.getAttribute(['toolbar', 'userlist-drawer'], function (err, val) {
if (val === false || mobile) { return void hide(); }
if (val === false) { return void hide(); }
show();
});

View File

@ -15,19 +15,41 @@
padding: 0px;
display: flex;
}
#cke_1_toolbox {
display: inline-flex;
width: 100%;
flex-flow: column;
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
}
#cke_1_toolbox .cke_toolbar {
height: 28px;
padding: 2px 0;
.cke_toolbar {
height: 28px;
padding: 2px 0;
}
}
.cke_wysiwyg_frame {
min-width: 60%;
}
#cke_1_toolbox {
flex: 1;
}
#cke_editor1 {
display: flex;
flex-flow: column;
height: 100%;
border: 0;
> .cke_inner {
flex: 1;
position: unset;
display: flex;
margin-top: -1px;
#cke_1_contents {
flex: 1;
display: flex;
flex-flow: column;
height: auto !important;
iframe {
flex: 1;
}
}
}
}
}
.cke_wysiwyg_frame {

View File

@ -136,6 +136,16 @@ define([
check();
};
var mkHelpMenu = function (framework) {
var $toolbarContainer = $('.cke_toolbox_main');
var helpMenu = framework._.sfCommon.createHelpMenu();
$toolbarContainer.before(helpMenu.menu);
$(helpMenu.text).html(Messages.initialState);
framework._.toolbar.$rightside.append(helpMenu.button);
};
var mkDiffOptions = function (cursor, readOnly) {
return {
preDiffApply: function (info) {
@ -269,8 +279,6 @@ define([
element: $bar.find('.cke_toolbox_main')
};
var onClick = function (visible) {
$(window).trigger('resize');
$(window).trigger('cryptpad-ck-toolbar');
framework._.sfCommon.setAttribute(['pad', 'showToolbar'], visible);
};
framework._.sfCommon.getAttribute(['pad', 'showToolbar'], function (err, data) {
@ -324,12 +332,12 @@ 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 $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());
}
var ml = Ckeditor.instances.editor1.plugins.magicline.backdoor.that.line.$;
[ml, ml.parentElement].forEach(function (el) {
el.setAttribute('class', 'non-realtime');
@ -352,6 +360,8 @@ define([
}
};
mkHelpMenu(framework);
framework.onEditableChange(function (unlocked) {
if (!framework.isReadOnly()) {
$(inner).attr('contenteditable', '' + Boolean(unlocked));
@ -421,7 +431,7 @@ define([
$bar.find('#cke_1_toolbar_collapser').hide();
if (!framework.isReadOnly()) {
addToolbarHideBtn(framework, $bar);
addToolbarHideBtn(framework, $contentContainer);
} else {
$('.cke_toolbox_main').hide();
}
@ -466,9 +476,7 @@ define([
});
});
framework.onDefaultContentNeeded(function () {
documentBody.innerHTML = Messages.initialState;
});
framework.onDefaultContentNeeded(function () { });
var importMediaTags = function (dom, cb) {
var $dom = $(dom);
@ -561,9 +569,9 @@ define([
nThen(function (waitFor) {
Framework.create({
toolbarContainer: '#cke_1_toolbox',
contentContainer: '#cke_1_contents',
contentContainer: '#cke_editor1 > .cke_inner',
patchTransformer: ChainPad.NaiveJSONTransformer,
thumbnail: {
/*thumbnail: {
getContainer: function () { return $('iframe').contents().find('html')[0]; },
filter: function (el, before) {
if (before) {
@ -584,7 +592,7 @@ define([
var range = module.cursor.makeRange();
module.cursor.fixSelection(sel, range);
}
}
}*/
}, waitFor(function (fw) { window.APP.framework = framework = fw; }));
nThen(function (waitFor) {
@ -624,6 +632,14 @@ define([
height: Messages.pad_mediatagHeight
};
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');
}).nThen(waitFor());
}).nThen(function (/*waitFor*/) {

View File

@ -14,6 +14,7 @@ define([
'/common/sframe-common-codemirror.js',
'/common/common-thumbnail.js',
'/common/common-interface.js',
'/common/hyperscript.js',
'/customize/messages.js',
'cm/lib/codemirror',
'/common/test.js',
@ -43,6 +44,7 @@ define([
SframeCM,
Thumb,
UI,
h,
Messages,
CMeditor,
Test)
@ -61,8 +63,6 @@ define([
var debug = $.noop; //console.log;
var HIDE_INTRODUCTION_TEXT = "hide-text";
var metadataMgr;
var Title;
var common;
@ -628,29 +628,6 @@ define([
APP.editor.refresh();
};
var updateHelpButton = function () {
if (!APP.$helpButton) { return; }
var help = $('#cp-app-poll-help').is(':visible');
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
APP.$helpButton.attr('title', msg);
if (help) {
APP.$helpButton.addClass('cp-toolbar-button-active');
return;
}
APP.$helpButton.removeClass('cp-toolbar-button-active');
};
var showHelp = function(help) {
if (typeof help === 'undefined') {
help = !$('#cp-app-poll-help').is(':visible');
}
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
$('#cp-app-poll-help').toggle(help);
$('#cp-app-poll-action-help').text(msg);
updateHelpButton();
};
var setEditable = function (editable) {
APP.locked = APP.readOnly || !editable;
@ -1221,10 +1198,19 @@ define([
var $export = common.createButton('export', true, {}, exportFile);
$drawer.append($export);
var $help = common.createButton('', true).click(function () { showHelp(); })
.appendTo($rightside);
APP.$helpButton = $help;
updateHelpButton();
var helpMenu = common.createHelpMenu();
$('#cp-app-poll-form').prepend(helpMenu.menu);
$rightside.append(helpMenu.button);
var setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
var help = h('div', [
setHTML(h('h1'), Messages.poll_subtitle),
h('p', Messages.poll_p_save),
h('p', Messages.poll_p_encryption)
]);
$(helpMenu.text).html($(help).html());
if (APP.readOnly) { publish(true); return; }
var $publish = common.createButton('', true)
@ -1344,18 +1330,6 @@ define([
})
.on('disconnect', onDisconnect)
.on('reconnect', onReconnect);
common.getAttribute(['poll', HIDE_INTRODUCTION_TEXT], function (e, value) {
if (e) { console.error(e); }
if (!value) {
common.setAttribute(['poll', HIDE_INTRODUCTION_TEXT], "1", function (e) {
if (e) { console.error(e); }
});
showHelp(true);
} else {
showHelp(false);
}
});
});
};
main();

View File

@ -221,6 +221,16 @@ div#cp-app-slide-modal {
background-color: black;
color: white;
.cp-app-slide-isempty {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
}
}
/* Navigation buttons */
.cp-app-slide-modal-button {
position: absolute;

View File

@ -9,6 +9,7 @@ define([
'/common/common-util.js',
'/common/common-hash.js',
'/common/common-interface.js',
'/common/diffMarked.js',
'/customize/messages.js',
'cm/lib/codemirror',
@ -53,6 +54,7 @@ define([
Util,
Hash,
UI,
DiffMd,
Messages,
CMeditor)
{
@ -426,6 +428,16 @@ define([
framework._.toolbar.$rightside.append(markdownTb.button);
};
var mkHelpMenu = function (framework) {
var $codeMirrorContainer = $('#cp-app-slide-editor-container');
var helpMenu = framework._.sfCommon.createHelpMenu();
$codeMirrorContainer.prepend(helpMenu.menu);
$(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
framework._.toolbar.$rightside.append(helpMenu.button);
};
var activateLinks = function ($content, framework) {
$content.click(function (e) {
if (!e.target) { return; }
@ -465,6 +477,7 @@ define([
mkFilePicker(framework, editor);
mkSlidePreviewPane(framework, $contentContainer);
mkMarkdownToolbar(framework, editor);
mkHelpMenu(framework);
CodeMirror.configureTheme(common);
@ -519,7 +532,7 @@ define([
});
framework.onDefaultContentNeeded(function () {
CodeMirror.contentUpdate({ content: Messages.slideInitialState });
CodeMirror.contentUpdate({ content: '' });
});
Slide.setTitle(framework._.title);

View File

@ -75,6 +75,20 @@ define([
if (typeof(Slide.content) !== 'string') { return; }
var c = Slide.content;
if (c === '') {
var $empty = $('<img>', {
src: '/customize/main-favicon.png',
alt: '',
class: 'cp-app-code-preview-empty'
});
$content.html('').append($empty);
$content.addClass('cp-app-slide-isempty');
return;
//c = $('<div>').append($empty).html();
}
$content.removeClass('cp-app-slide-isempty');
var mediatagBg = '';
if (options.background && options.background.mt) {
mediatagBg = options.background.mt;