Add help text in all the apps + french translation

customize.dist/translations/messages.fr.js

@@ -951,6 +951,50 @@ define(function () {
 
     // Initial states
 
+    out.help = {};
+
+    out.help.title = "Pour bien démarrer";
+    out.help.generic = {
+        more: 'Apprenez-en davantage sur le fonctionnement de CryptPad en lisant notre <a href="/faq.html" target="_blank">FAQ</a>',
+        share: 'Utilisez le menu partage (<span class="fa fa-share-alt"></span>) pour générer un lien afin que les collaborateurs puissant voir ou modifier ce pad',
+        stored: 'Chaque pad que vous visitez est stocké automatiquement dans votre <a href="/drive/" target="_blank">CryptDrive</a>'
+    };
+
+    out.help.text = {
+        formatting: 'Vous pouvez afficher ou cacher la barre d\'outils de mise en forme du texte en cliquant sur les boutons <span class="fa fa-caret-down"></span> ou <span class="fa fa-caret-up"></span>',
+        embed: 'Les utilisateurs enregistrés peuvent intégrer une image ou un fichier provenant de leur CryptDrive en utilisant le bouton <span class="fa fa-image"></span>',
+        history: 'Vous pouvez utiliser l\'historique (<span class="fa fa-history"></span>) pour voir ou restaurer les versions précédentes du pad'
+    };
+
+    out.help.pad = {
+        export: 'Vous pouvez exporter le contenu en tant que PDF avec le bouton <span class="fa fa-print"></span> de la barre d\'outils de mise en forme du texte'
+    };
+
+    out.help.code = {
+        modes: 'Utilisez le sous-menu <span class="fa fa-ellipsis-h"></span> pour changer le mode de coloration syntaxique ou le thème de couleur'
+    };
+
+    out.help.slide = {
+        markdown: 'Rédigez vos slides en <a href="http://www.markdowntutorial.com/">Markdown</a> et séparez les avec une ligne contenant <code>---</code>',
+        present: 'Démarrez la présentation en utilisant le bouton <span class="fa fa-play-circle"></span>',
+        settings: 'Modifiez les préférences de la présentation (image de fond, transitions, numéro de pages, ...) avec le bouton <span class="fa fa-cog"></span> dans le sous-menu <span class="fa fa-ellipsis-h"></span>',
+        colors: 'Modifiez la couleur du texte ou du fond en utilisant les boutons <span class="fa fa-i-cursor"></span> et <span class="fa fa-square"></span>'
+    };
+
+    out.help.poll = {
+        decisions: 'Prenez des décisions en privé avec des personnes de confiance',
+        options: 'Proposez des options et exprimez vos préférences',
+        choices: 'Cliquez sur les cellules de votre colonne pour modifier leur valeur entre oui (<strong>✔</strong>), non (<strong>✖</strong>) ou peut-être (<strong>~</strong>)',
+        submit: 'Cliquez sur <b>Ajouter</b> pour rendre vos choix visibles aux autres'
+    };
+
+    out.help.whiteboard = {
+        colors: 'Double-cliquez sur les couleurs pour changer la palette',
+        mode: 'Vous pouvez désactiver le mode dessin pour déplacer, redimensionner, ou supprimer des éléments du dessin',
+        embed: 'Intégrez des images de votre disque <span class="fa fa-file-image-o"></span> ou de votre CryptDrive <span class="fa fa-image"></span> et exporter le contenu en tant que PNG sur votre disque <span class="fa fa-download"></span> ou votre CryptDrive <span class="fa fa-cloud-upload"></span>'
+    };
+
+
     out.initialState = [
         '<p>',
         'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',

customize.dist/translations/messages.js

@@ -993,9 +993,11 @@ define(function () {
     out.header_logoTitle = out.updated_0_header_logoTitle;
     out.header_homeTitle = 'Go to CryptPad homepage';
 
+    // Initial states
 
     out.help = {};
 
+    out.help.title = "Getting started";
     out.help.generic = {
         more: 'Learn more about how CryptPad can work for you by reading our <a href="/faq.html" target="_blank">FAQ</a>',
         share: 'Use the share menu (<span class="fa fa-share-alt"></span>) to generate a link so collaborators can view or edit this pad',
@@ -1036,7 +1038,6 @@ define(function () {
         embed: 'Embed images from your disk <span class="fa fa-file-image-o"></span> or your CryptDrive <span class="fa fa-image"></span> and export them as PNG to your disk <span class="fa fa-download"></span> or your CryptDrive <span class="fa fa-cloud-upload"></span>'
     };
 
-    // Initial states
 
     out.initialState = [
         '<p>',

www/code/inner.js

@@ -82,11 +82,9 @@ define([
     };
     var mkHelpMenu = function (framework) {
         var $codeMirrorContainer = $('#cp-app-code-container');
-        var helpMenu = framework._.sfCommon.createHelpMenu();
+        var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'code']);
         $codeMirrorContainer.prepend(helpMenu.menu);
 
-        $(helpMenu.text).html(DiffMd.render(Messages.codeInitialState));
-
         framework._.toolbar.$drawer.append(helpMenu.button);
     };
     var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {

www/common/common-ui-elements.js

@@ -890,10 +890,49 @@ define([
         };
     };
 
-    UIElements.createHelpMenu = function (common) {
+    UIElements.createHelpMenu = function (common, categories) {
         var type = common.getMetadataMgr().getMetadata().type || 'pad';
 
-        var text = h('p.cp-help-text');
+        var setHTML = function (e, html) {
+            e.innerHTML = html;
+            return e;
+        };
+
+        var elements = [];
+        if (Messages.help && Messages.help.generic) {
+            Object.keys(Messages.help.generic).forEach(function (el) {
+                elements.push(setHTML(h('li'), Messages.help.generic[el]));
+            });
+        }
+        if (categories) {
+            categories.forEach(function (cat) {
+                var msgs = Messages.help[cat];
+                if (msgs) {
+                    Object.keys(msgs).forEach(function (el) {
+                        elements.push(setHTML(h('li'), msgs[el]));
+                    });
+                }
+            });
+        }
+
+        var text = h('p.cp-help-text', [
+            h('h1', Messages.help.title),
+            h('ul', elements)
+        ]);
+
+        var origin = common.getMetadataMgr().getPrivateData().origin || '';
+        $(text).find('a').click(function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var href = $(this).attr('href');
+            var absolute = /^https?:\/\//i;
+            if (!absolute.test(href)) {
+                if (href.slice(0,1) !== '/') { href = '/' + href; }
+                href = origin + href;
+            }
+            common.openUnsafeURL(href);
+        });
+
         var closeButton = h('span.cp-help-close.fa.fa-window-close');
         var $toolbarButton = common.createButton('', true, {
             title: Messages.hide_help_button,

www/pad/inner.js

@@ -138,11 +138,9 @@ define([
 
     var mkHelpMenu = function (framework) {
         var $toolbarContainer = $('.cke_toolbox_main');
-        var helpMenu = framework._.sfCommon.createHelpMenu();
+        var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'pad']);
         $toolbarContainer.before(helpMenu.menu);
 
-        $(helpMenu.text).html(Messages.initialState);
-
         framework._.toolbar.$drawer.append(helpMenu.button);
     };
 

www/poll/inner.js

@@ -1199,19 +1199,9 @@ define([
         var $export = common.createButton('export', true, {}, exportFile);
         $drawer.append($export);
 
-        var helpMenu = common.createHelpMenu();
+        var helpMenu = common.createHelpMenu(['poll']);
         $('#cp-app-poll-form').prepend(helpMenu.menu);
         $drawer.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, {

www/slide/inner.js

@@ -432,11 +432,9 @@ define([
 
     var mkHelpMenu = function (framework) {
         var $codeMirrorContainer = $('#cp-app-slide-editor-container');
-        var helpMenu = framework._.sfCommon.createHelpMenu();
+        var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'slide']);
         $codeMirrorContainer.prepend(helpMenu.menu);
 
-        $(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
-
         framework._.toolbar.$drawer.append(helpMenu.button);
     };
 

www/whiteboard/inner.js

@@ -454,13 +454,10 @@ define([
             var $properties = common.createButton('properties', true);
             toolbar.$drawer.append($properties);
 
-            if (Messages.whiteboardHelp) {
+            var $appContainer = $('#cp-app-whiteboard-container');
-                var $appContainer = $('#cp-app-whiteboard-container');
+            var helpMenu = common.createHelpMenu(['whiteboard']);
-                var helpMenu = common.createHelpMenu();
+            $appContainer.prepend(helpMenu.menu);
-                $appContainer.prepend(helpMenu.menu);
+            toolbar.$drawer.append(helpMenu.button);
-                $(helpMenu.text).html(Messages.whiteboardHelp);
-                toolbar.$drawer.append(helpMenu.button);
-            }
 
             if (!readOnly) {
                 makeColorButton($rightside);