Move initial state into a help block

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', [

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;

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;

customize.dist/translations/messages.el.js

@@ -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',

customize.dist/translations/messages.es.js

@@ -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.";

customize.dist/translations/messages.fr.js

@@ -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',

customize.dist/translations/messages.js

@@ -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',

customize.dist/translations/messages.pt-br.js

@@ -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',

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 = "<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.";

customize.dist/translations/messages.zh.js

@@ -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;其只能看不能編寫。',
+        '分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt"></span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
-        '</p>',
+        '</p>'
-
-        '<p><em>',
-        '來吧, 開始打字輸入吧...',
-        '</em></p>',
-        '<p>&nbsp;<br></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',

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 {

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);
+        $('<img>', {
-        $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);

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

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) {

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);

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();
         });
 

www/pad/app-pad.less

@@ -15,19 +15,41 @@
         padding: 0px;
         display: flex;
     }
-    #cke_1_toolbox {
+    .cke_toolbox_main {
-        display: inline-flex;
-        width: 100%;
-        flex-flow: column;
         background-color: @colortheme_pad-toolbar-bg;
-    }
+        .cke_toolbar {
-    #cke_1_toolbox .cke_toolbar {
+            height: 28px;
-        height: 28px;
+            padding: 2px 0;
-        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 {

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 () {
+        framework.onDefaultContentNeeded(function () { });
-            documentBody.innerHTML = Messages.initialState;
-        });
 
         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*/) {

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(); })
+        var helpMenu = common.createHelpMenu();
-            .appendTo($rightside);
+        $('#cp-app-poll-form').prepend(helpMenu.menu);
-        APP.$helpButton = $help;
+        $rightside.append(helpMenu.button);
-        updateHelpButton();
+        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();

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;

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);

www/slide/slide.js

@@ -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;