mirror of https://github.com/xwiki-labs/cryptpad
Move initial state into a help block
This commit is contained in:
parent
5c53868c3b
commit
60b2384885
|
@ -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', [
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -714,13 +714,8 @@ define(function () {
|
|||
'<p>',
|
||||
'Αυτό είναι <strong>CryptPad</strong>, ο συνεργατικός επεξεργαστής πραγματικού χρόνου Zero Knowledge. Τα πάντα αποθηκεύονται καθώς πληκτρολογείτε.',
|
||||
'<br>',
|
||||
'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> Share </span> για να μοιραστείτε ένα κείμενο με δικαιώματα <em>read-only link</em> το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.',
|
||||
'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί <span class="fa fa-share-alt"></span> για να μοιραστείτε ένα κείμενο με δικαιώματα <em>read-only link</em> το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.',
|
||||
'</p>',
|
||||
|
||||
'<p><em>',
|
||||
'Εμπρός, απλά ξεκινήστε να πληκτρολογείτε...',
|
||||
'</em></p>',
|
||||
'<p> <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',
|
||||
|
|
|
@ -294,17 +294,12 @@ define(function () {
|
|||
'<p>',
|
||||
'Esto es <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;"> Compartir </span> para obtener un <em>enlace sólo lectura</em> 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> que permite leer pero no escribir.',
|
||||
'</p>',
|
||||
|
||||
'<p><em>',
|
||||
'Vamos, empieza a escribir...',
|
||||
'</em></p>',
|
||||
'<p> <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.";
|
||||
|
|
|
@ -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;"> Partager </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> <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',
|
||||
|
|
|
@ -816,13 +816,8 @@ define(function () {
|
|||
'<p>',
|
||||
'This is <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;"> Share </span> button to share a <em>read-only link</em> 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> which allows viewing but not editing.',
|
||||
'</p>',
|
||||
|
||||
'<p><em>',
|
||||
'Go ahead, just start typing...',
|
||||
'</em></p>',
|
||||
'<p> <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',
|
||||
|
|
|
@ -486,13 +486,8 @@ define(function () {
|
|||
'<p>',
|
||||
'This is <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;"> Share </span> button to share a <em>read-only link</em> 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> which allows viewing but not editing.',
|
||||
'</p>',
|
||||
|
||||
'<p><span style="color:#808080;"><em>',
|
||||
'Go ahead, just start typing...',
|
||||
'</em></span></p>',
|
||||
'<p> <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',
|
||||
|
|
|
@ -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 <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;\"> Share </span> butonul pentru a partaja <em>read-only link</em> permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p> <br></p>";
|
||||
out.initialState = "<p>Acesta este <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> 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.";
|
||||
|
|
|
@ -469,13 +469,8 @@ define(function () {
|
|||
'<p>',
|
||||
'這是 <strong>CryptPad</strong>, 零知識即時協作編輯平台,當你輸入時一切已即存好。',
|
||||
'<br>',
|
||||
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> 分享 </span> 按鈕分享<em>唯讀的連結</em> 其只能看不能編寫。',
|
||||
'</p>',
|
||||
|
||||
'<p><em>',
|
||||
'來吧, 開始打字輸入吧...',
|
||||
'</em></p>',
|
||||
'<p> <br></p>'
|
||||
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt"></span> 按鈕分享<em>唯讀的連結</em> 其只能看不能編寫。',
|
||||
'</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',
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -141,7 +141,6 @@ define([
|
|||
mode: defaultMode || "javascript",
|
||||
readOnly: true
|
||||
});
|
||||
//editor.setValue(Messages.codeInitialState);
|
||||
editor.focus();
|
||||
|
||||
var setMode = exp.setMode = function (mode, cb) {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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*/) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue