From 60b2384885258f3413057d811343e89b49545d3e Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 27 Feb 2018 17:38:29 +0100 Subject: [PATCH] Move initial state into a help block --- customize.dist/pages.js | 6 -- .../src/less2/include/ckeditor-fix.less | 19 ------- customize.dist/src/less2/include/toolbar.less | 32 +++++++++++ customize.dist/translations/messages.el.js | 15 +---- customize.dist/translations/messages.es.js | 9 +-- customize.dist/translations/messages.fr.js | 15 +---- customize.dist/translations/messages.js | 15 +---- customize.dist/translations/messages.pt-br.js | 15 +---- customize.dist/translations/messages.ro.js | 14 +---- customize.dist/translations/messages.zh.js | 17 +----- www/code/app-code.less | 18 ++++++ www/code/inner.js | 47 ++++++++++++++-- www/common/common-ui-elements.js | 39 +++++++++++++ www/common/sframe-common-codemirror.js | 1 - www/common/sframe-common.js | 1 + www/common/toolbar3.js | 25 +-------- www/pad/app-pad.less | 38 ++++++++++--- www/pad/inner.js | 36 ++++++++---- www/poll/inner.js | 56 +++++-------------- www/slide/app-slide.less | 10 ++++ www/slide/inner.js | 15 ++++- www/slide/slide.js | 14 +++++ 22 files changed, 251 insertions(+), 206 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 37bdc5b42..32eab821d 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -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', [ diff --git a/customize.dist/src/less2/include/ckeditor-fix.less b/customize.dist/src/less2/include/ckeditor-fix.less index 96e6d893f..98672bd86 100644 --- a/customize.dist/src/less2/include/ckeditor-fix.less +++ b/customize.dist/src/less2/include/ckeditor-fix.less @@ -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; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index f8cd43fd0..a070c8af6 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -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; diff --git a/customize.dist/translations/messages.el.js b/customize.dist/translations/messages.el.js index 1e30248ec..36a19da87 100644 --- a/customize.dist/translations/messages.el.js +++ b/customize.dist/translations/messages.el.js @@ -714,13 +714,8 @@ define(function () { '

', 'Αυτό είναι CryptPad, ο συνεργατικός επεξεργαστής πραγματικού χρόνου Zero Knowledge. Τα πάντα αποθηκεύονται καθώς πληκτρολογείτε.', '
', - 'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί  Share  για να μοιραστείτε ένα κείμενο με δικαιώματα read-only link το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.', + 'Μοιραστείτε τον σύνδεσμο σε αυτό το pad για να το επεξεργαστείτε με φίλους ή χρησιμοποιήστε το κουμπί για να μοιραστείτε ένα κείμενο με δικαιώματα read-only link το οποίο επιτρέπει να το αναγνώσει κάποιος αλλά όχι να το επεξεργαστεί.', '

', - - '

', - 'Εμπρός, απλά ξεκινήστε να πληκτρολογείτε...', - '

', - '

 

' ].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', diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index 6df44d691..9e246294f 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -294,17 +294,12 @@ define(function () { '

', 'Esto es CryptPad, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.', '
', - 'Comparte el enlace a este pad para editar con amigos o utiliza el botón  Compartir  para obtener un enlace sólo lectura que permite leer pero no escribir.', + 'Comparte el enlace a este pad para editar con amigos o utiliza el botón para obtener un enlace sólo lectura que permite leer pero no escribir.', '

', - - '

', - 'Vamos, empieza a escribir...', - '

', - '

 

' ].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."; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 5e681e699..08b974821 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -780,13 +780,8 @@ define(function () { '

', 'Voici CryptPad, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.', '
', - 'Partagez le lien vers ce pad avec des amis ou utilisez le bouton  Partager  pour obtenir le lien de lecture-seule, qui permet la lecture mais non la modification.', + 'Partagez le lien vers ce pad avec des amis ou utilisez le bouton pour obtenir le lien de lecture-seule, qui permet la lecture mais non la modification.', '

', - '

', - '', - 'Lancez-vous, commencez à taper...', - '

', - '

 

' ].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', diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index c5f7bcd8c..1e15eac1c 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -816,13 +816,8 @@ define(function () { '

', 'This is CryptPad, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.', '
', - 'Share the link to this pad to edit with friends or use the  Share  button to share a read-only link which allows viewing but not editing.', + 'Share the link to this pad to edit with friends or use the button to share a read-only link which allows viewing but not editing.', '

', - - '

', - 'Go ahead, just start typing...', - '

', - '

 

' ].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', diff --git a/customize.dist/translations/messages.pt-br.js b/customize.dist/translations/messages.pt-br.js index 79ba513c3..fbf63d067 100644 --- a/customize.dist/translations/messages.pt-br.js +++ b/customize.dist/translations/messages.pt-br.js @@ -486,13 +486,8 @@ define(function () { '

', 'This is CryptPad, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.', '
', - 'Share the link to this pad to edit with friends or use the  Share  button to share a read-only link which allows viewing but not editing.', + 'Share the link to this pad to edit with friends or use the button to share a read-only link which allows viewing but not editing.', '

', - - '

', - 'Go ahead, just start typing...', - '

', - '

 

' ].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', diff --git a/customize.dist/translations/messages.ro.js b/customize.dist/translations/messages.ro.js index 14a55f8ab..56ec8b05d 100644 --- a/customize.dist/translations/messages.ro.js +++ b/customize.dist/translations/messages.ro.js @@ -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 = "With \"love\" from \"Franța\"/ by \"XWiki"; out.header_support = " \"OpenPaaS-ng\""; out.header_logoTitle = "Mergi la pagina principală"; - out.initialState = "

Acesta este CryptPad, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.
Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește  Share  butonul pentru a partaja read-only link permițând vizualizarea dar nu și editarea.

Îndrăznește, începe să scrii...

 

"; + out.initialState = "

Acesta este CryptPad, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.
Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește butonul pentru a partaja read-only link permițând vizualizarea dar nu și editarea.

"; 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."; diff --git a/customize.dist/translations/messages.zh.js b/customize.dist/translations/messages.zh.js index c7ac7915a..25b7fe8c8 100644 --- a/customize.dist/translations/messages.zh.js +++ b/customize.dist/translations/messages.zh.js @@ -469,13 +469,8 @@ define(function () { '

', '這是 CryptPad, 零知識即時協作編輯平台，當你輸入時一切已即存好。', '
', - '分享這個工作檔案的網址連結給友人或是使用、  分享  按鈕分享唯讀的連結 其只能看不能編寫。', - '

', - - '

', - '來吧, 開始打字輸入吧...', - '

', - '

 

' + '分享這個工作檔案的網址連結給友人或是使用、 按鈕分享唯讀的連結 其只能看不能編寫。', + '

' ].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', diff --git a/www/code/app-code.less b/www/code/app-code.less index 463bb07a3..f4153e95d 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -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 { diff --git a/www/code/inner.js b/www/code/inner.js index e7f080c02..091baa0e8 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -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); + $('', { + 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); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 2a892cae6..502f18bea 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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 diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js index cb507c2a8..4386e22f0 100644 --- a/www/common/sframe-common-codemirror.js +++ b/www/common/sframe-common-codemirror.js @@ -141,7 +141,6 @@ define([ mode: defaultMode || "javascript", readOnly: true }); - //editor.setValue(Messages.codeInitialState); editor.focus(); var setMode = exp.setMode = function (mode, cb) { diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index df6f77e87..d8804349b 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -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); diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index df97cf072..a09d13239 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -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(); }); diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 742163285..9e1b1da78 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -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 { diff --git a/www/pad/inner.js b/www/pad/inner.js index 22ec21e40..c1a2adbf2 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -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*/) { diff --git a/www/poll/inner.js b/www/poll/inner.js index 94d732a7f..2c7c4d7e0 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -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(); diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 8926f52eb..14090e9bc 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -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; diff --git a/www/slide/inner.js b/www/slide/inner.js index 173726d34..b41496024 100644 --- a/www/slide/inner.js +++ b/www/slide/inner.js @@ -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); diff --git a/www/slide/slide.js b/www/slide/slide.js index adc0a808b..ed63ac2e4 100644 --- a/www/slide/slide.js +++ b/www/slide/slide.js @@ -75,6 +75,20 @@ define([ if (typeof(Slide.content) !== 'string') { return; } var c = Slide.content; + + if (c === '') { + var $empty = $('', { + src: '/customize/main-favicon.png', + alt: '', + class: 'cp-app-code-preview-empty' + }); + $content.html('').append($empty); + $content.addClass('cp-app-slide-isempty'); + return; + //c = $('
').append($empty).html(); + } + $content.removeClass('cp-app-slide-isempty'); + var mediatagBg = ''; if (options.background && options.background.mt) { mediatagBg = options.background.mt;