Improve the top bar and use the font awesome icons in /code

customize.dist/DecorateToolbar.js

@@ -9,21 +9,12 @@ define([
     var $ = window.jQuery;
     var main = function () {
         var url = window.location.pathname;
-        var isHtml = /\.html/.test(url) || url === '/';
+        var isHtml = /\.html/.test(url) || url === '/' || url === '';
         $.ajax({
             url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
             success: function (ret) {
                 $('iframe').height('96%');
-                if (isHtml) {
                 $('body').append(ret);
-                }
-                else {
-                    $('body').prepend(ret);
-                }
-                $('head').append($('<link>', {
-                    rel: 'stylesheet',
-                    href: '/customize/main.css'
-                }));
                 LS.main();
                 Messages._applyTranslation();
             }

customize.dist/Header.html

@@ -8,15 +8,14 @@
           <option value="fr">Français</option>
         </select>
       </span>
-      <p data-localization="bottom_france">
+      <p data-localization="header_france">
       </p>
     </div>
-    <!--
     <div class="bottom-bar-center">
-      <p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
+      <p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
-    </div> -->
+    </div>
     <div class="bottom-bar-right">
-      <p data-localization="bottom_support">
+      <p data-localization="header_support">
       </p>
     </div>
   </div>

customize.dist/main.css

@@ -230,7 +230,6 @@ tbody td:last-child {
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 20px;
   display: block;
-  float: right;
   margin-left: 10px;
   padding-top: 3px;
   color: #fafafa;
@@ -253,15 +252,19 @@ tbody td:last-child {
   float: left;
   padding-left: 10px;
 }
+.bottom-bar-left p {
+  float: right;
+}
 .bottom-bar-right {
   display: block;
   float: right;
   padding-right: 20px;
 }
 .bottom-bar-center {
-  margin-left: auto;
-  margin-right: auto;
   width: 20%;
+  position: absolute;
+  left: 40%;
+  text-align: center;
 }
 .bottom-bar-heart {
   top: 2px;

customize.dist/src/cryptpad.less

@@ -267,7 +267,6 @@ tbody {
 
         font-size: 20px;
         display:block;
-        float:right;
         margin-left: 10px;
         padding-top:3px;
         color: @fore;
@@ -291,15 +290,19 @@ tbody {
     float:left;
     padding-left:10px;
 }
+.bottom-bar-left p {
+    float: right;
+}
 .bottom-bar-right {
     display:block;
     float:right;
     padding-right:20px
 }
 .bottom-bar-center {
-    margin-left: auto;
+    width: 20%;
-    margin-right: auto;
+    position: absolute;
-    width: 20%
+    left: 40%;
+    text-align: center;
 }
 .bottom-bar-heart {
     top: 2px;

customize.dist/src/toolbar.less

@@ -16,7 +16,7 @@
 
     color: #666;
     font-weight: bold;
-    height: 26px;
+    height: 30px;
     margin-bottom: -3px;
     display: inline-block;
     width: 100%;
@@ -27,7 +27,7 @@
     }
 
     div {
-        padding: 0 10px;
+        padding: 0 3px;
         height: 1.5em;
         line-height: 25px;
         height: 100%;
@@ -40,7 +40,7 @@
     }
 
     button {
-        height: 100%;
+        height: 26px;
         background-color: inherit;
         background-image: linear-gradient(to bottom,#fff,#e4e4e4);
         border: 1px solid #A6A6A6;

customize.dist/toolbar.css

@@ -16,7 +16,7 @@
   user-select: none;
   color: #666;
   font-weight: bold;
-  height: 26px;
+  height: 30px;
   margin-bottom: -3px;
   display: inline-block;
   width: 100%;
@@ -26,7 +26,7 @@
   float: right;
 }
 .cryptpad-toolbar div {
-  padding: 0 10px;
+  padding: 0 3px;
   height: 1.5em;
   line-height: 25px;
   height: 100%;
@@ -38,7 +38,7 @@
   color: #000;
 }
 .cryptpad-toolbar button {
-  height: 100%;
+  height: 26px;
   background-color: inherit;
   background-image: linear-gradient(to bottom, #fff, #e4e4e4);
   border: 1px solid #A6A6A6;

customize.dist/translations/messages.fr.js

@@ -33,6 +33,10 @@ define(function () {
     out.viewers = '{0} lecteurs';
     out.anonymous = "Vous êtes actuellement anonyme";
 
+    out.greenLight = "Tout fonctionne bien";
+    out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur"
+    out.redLight = "Vous êtes déconnectés de la session";
+
     out.importButton = 'IMPORTER';
     out.importButtonTitle = 'Importer un document depuis un fichier local';
 
@@ -183,5 +187,11 @@ define(function () {
     out.bottom_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
     out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">Un projet <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs</a> avec le soutien de <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>';
 
+    // Header.html
+
+    out.header_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" title="France" alt="France" src="/customize/fr.png" /> par <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 = "Aller vers la page d'accueil";
+
     return out;
 });

customize.dist/translations/messages.js

@@ -33,6 +33,10 @@ define(function () {
     out.viewers = '{0} viewers';
     out.anonymous = "You are currently anonymous";
 
+    out.greenLight = "Everything is working fine";
+    out.orangeLight = "Your slow connection may impact your experience";
+    out.redLight = "You are disconnected from the session";
+
     out.importButton = 'IMPORT';
     out.importButtonTitle = 'Import a document from a local file';
 
@@ -183,5 +187,11 @@ define(function () {
     out.bottom_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" /> in <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
     out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">An <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs Project </a> with the support of <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>';
 
+    // Header.html
+
+    out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" /> from <img class="bottom-bar-fr" src="/customize/fr.png" title="France" alt="France"/> 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 = 'Go to the main page';
+
     return out;
 });

www/code/index.html

@@ -14,13 +14,14 @@
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
+    <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
             overflow-y: hidden;
         }
         #pad-iframe {
             position:fixed;
-            top:0px;
+            top:2.5em;
             left:0px;
             bottom:0px;
             right:0px;

www/code/inner.html

@@ -2,6 +2,7 @@
 <html style="height: 100%;">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script src="codemirror-5.16.0/lib/codemirror.js"></script>
     <link rel="stylesheet" href="codemirror-5.16.0/lib/codemirror.css">

www/code/main.js

@@ -176,7 +176,7 @@ define([
             };
 
             var setName = module.setName = function (newName) {
-                if (!(typeof(newName) === 'string' && newName.trim())) { return; }
+                if (typeof(newName) !== 'string') { return; }
                 var myUserNameTemp = newName.trim();
                 if(newName.trim().length > 32) {
                   myUserNameTemp = myUserNameTemp.substr(0, 32);
@@ -202,18 +202,6 @@ define([
                 });
             };
 
-            var createChangeName = function(id, $container) {
-                var buttonElmt = $container.find('#'+id)[0];
-
-                getLastName(function (err, lastName) {
-                    buttonElmt.addEventListener("click", function() {
-                        Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
-                            setName(newName);
-                        });
-                    });
-                });
-            };
-
             var getHeadingText = function () {
                 var lines = editor.getValue().split(/\n/);
 
@@ -283,12 +271,10 @@ define([
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
-                    changeNameID: Toolbar.constants.changeName,
                     readOnly: readOnly
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
-                if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
 
                 var $rightside = $bar.find('.' + Toolbar.constants.rightside);
 
@@ -299,22 +285,23 @@ define([
                     editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
                 }
 
+                getLastName(function (err, lastName) {
+                    var $username = Cryptpad.createButton('username', true)
+                        .click(function() {
+                        Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
+                            setName(newName);
+                        });
+                    });
+                    $rightside.append($username);
+                });
+
                 /* add an export button */
-                var $export = $('<button>', {
+                var $export = Cryptpad.createButton('export', true).click(exportText);
-                    title: Messages.exportButtonTitle,
-                })
-                    .text(Messages.exportButton)
-                    .addClass('rightside-button')
-                    .click(exportText);
                 $rightside.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
-                    var $import = $('<button>',{
+                    var $import = Cryptpad.createButton('import', true)
-                        title: Messages.importButtonTitle
-                    })
-                        .text(Messages.importButton)
-                        .addClass('rightside-button')
                         .click(Cryptpad.importContent('text/plain', function (content, file) {
                             var mode;
                             var mime = CodeMirror.findModeByMIME(file.type);
@@ -344,12 +331,7 @@ define([
                 }
 
                 /* add a rename button */
-                var $setTitle = $('<button>', {
+                var $setTitle = Cryptpad.createButton('rename', true)
-                        id: 'name-pad',
-                        title: Messages.renameButtonTitle,
-                    })
-                    .addClass('rightside-button')
-                    .text(Messages.renameButton)
                     .click(function () {
                         var suggestion = suggestName();
 
@@ -384,12 +366,7 @@ define([
                 $rightside.append($setTitle);
 
                 /* add a forget button */
-                var $forgetPad = $('<button>', {
+                var $forgetPad = Cryptpad.createButton('forget', true)
-                        id: 'cryptpad-forget',
-                        title: Messages.forgetButtonTitle,
-                    })
-                    .text(Messages.forgetButton)
-                    .addClass('cryptpad-forget rightside-button')
                     .click(function () {
                         var href = window.location.href;
                         Cryptpad.confirm(Messages.forgetPrompt, function (yes) {
@@ -409,11 +386,7 @@ define([
 
                 if (!readOnly && viewHash) {
                     /* add a 'links' button */
-                    var $links = $('<button>', {
+                    var $links = Cryptpad.createButton('readonly', true)
-                        title: Messages.getViewButtonTitle
-                    })
-                        .text(Messages.getViewButton)
-                        .addClass('rightside-button')
                         .click(function () {
                             var baseUrl = window.location.origin + window.location.pathname + '#';
                             var content = '<b>' + Messages.readonlyUrl + '</b><br><a>' + baseUrl + viewHash + '</a><br>';

www/common/toolbar.js

@@ -11,9 +11,6 @@ define([
     /** Id of the div containing the user list. */
     var USER_LIST_CLS = Bar.constants.userlist = 'cryptpad-user-list';
 
-    /** Id of the button to change my username. */
-    var USERNAME_BUTTON_GROUP = Bar.constants.changeName = 'cryptpad-changeName';
-
     /** Id of the div containing the lag info. */
     var LAG_ELEM_CLS = Bar.constants.lag = 'cryptpad-lag';
 
@@ -23,8 +20,6 @@ define([
     var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
     var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
 
-    var BACK_CLS = Bar.constants.back = 'cryptpad-back';
-
     var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
 
     var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
@@ -70,17 +65,6 @@ define([
         return $toolbar;
     };
 
-    var createEscape = function ($container) {
-        var $back = $('<div>', {
-            'class': BACK_CLS,
-            id: uid(),
-        }).html(Messages.back).click(function () {
-            window.location.href = '/';
-        });
-        $container.append($back);
-        return $back[0];
-    };
-
     var createSpinner = function ($container) {
         var $spinner = $('<div>', {
             id: uid(),
@@ -126,20 +110,6 @@ define([
       return (i > 0) ? list.slice(0, -2) : list;
     };
 
-    var createChangeName = function($container, buttonID) {
-        var $span = $('<span>', {
-            id: uid(),
-        });
-        var $button = $('<button>', {
-            id: buttonID,
-            'class': 'rightside-button',
-        }).text(Messages.changeNameButton);
-
-        $container.append($button);
-        $button.after($span);
-        return $span[0];
-    };
-
     var arrayIntersect = function(a, b) {
         return $.grep(a, function(i) {
             return $.inArray(i, b) > -1;
@@ -215,15 +185,15 @@ define([
           var title = Messages.lag + ' : ' + lag + ' ms\n';
           if (lag.waiting || lag > 1000) {
             lagLight.addClass('lag-orange');
-            title += 'Your connection to the server is slow, it may impact the performance of the collaborative editor.';
+            title += Messages.orangeLight;
           } else {
             lagLight.addClass('lag-green');
-            title += "Everything is working fine";
+            title += Messages.greenLight;
           }
         }
         else if (!firstConnection){
           lagLight.addClass('lag-red');
-          title = "You are disconnected from the server!";
+          title = Messages.redLight;
         }
         lagLight.attr('title', title);
         $(lagElement).html('');
@@ -232,26 +202,15 @@ define([
 
     var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
         var toolbar = createRealtimeToolbar($container);
-        createEscape(toolbar.find('.' + LEFTSIDE_CLS));
         var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS));
         var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
         var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
         var userData = config.userData;
-        var changeNameID = config.changeNameID;
-        var saveContentID = config.saveContentID || config.exportContentID;
-        var loadContentID = config.loadContentID || config.importContentID;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
         var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
         var saveElement;
         var loadElement;
 
-        // Check if the user is allowed to change his name
-        if(changeNameID) {
-            // Create the button and update the element containing the user list
-            //userListElement = createChangeName($container, userListElement, changeNameID);
-            createChangeName(toolbar.find('.' + RIGHTSIDE_CLS), changeNameID);
-        }
-
         var connected = false;
 
         userList.onChange = function(newUserData) {

www/pad/index.html

@@ -7,6 +7,7 @@
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
+    <link rel="stylesheet" href="/customize/main.css" />
     <script data-main="main" src="/bower_components/requirejs/require.js"></script>
     <script>
         require.config({

www/pad/main.js

@@ -82,10 +82,10 @@ define([
             removePlugins: 'resize',
             extraPlugins: 'autolink,colorbutton,colordialog,font',
             //skin: 'moono',
+            toolbarGroups: [{"name":"clipboard","groups":["clipboard","undo"]},{"name":"editing","groups":["find","selection"]},{"name":"links"},{"name":"insert"},{"name":"forms"},{"name":"tools"},{"name":"document","groups":["mode","document","doctools"]},{"name":"others"},{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"paragraph","groups":["list","indent","blocks","align","bidi"]},{"name":"styles"},{"name":"colors"},{"name":"about"}]
         });
 
         editor.on('instanceReady', function (Ckeditor) {
-
             if (readOnly) {
                 $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox > .cke_toolbar').hide();
             }
@@ -294,11 +294,6 @@ define([
                 });
             };
 
-            var createChangeName = function(id, $container) {
-                var buttonElmt = $container.find('#'+id)[0];
-                //var lastName = getLastName();
-            };
-
             var DD = new DiffDom(diffOptions);
 
             // apply patches, and try not to lose the cursor in the process!
@@ -504,12 +499,10 @@ define([
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
-                    //changeNameID: Toolbar.constantdds.changeName,
                     readOnly: readOnly
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
-                //if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
 
                 var $rightside = $bar.find('.' + Toolbar.constants.rightside);
 

www/poll/index.html

@@ -19,9 +19,10 @@
     <style>
         html, body {
             width: 100;
+            margin-top: 1.25em;
+            height: auto;
         }
         #main {
-            width: 90%;
             margin: auto;
         }
         .clickable {
@@ -38,7 +39,6 @@
 <div id="main">
 
 <div id="toolbar" class="buttons">
-    <sub><a href="/"></a></sub>
 </div>
 <h1 id="mainTitle">CryptPoll</h1>
 <h2 data-localization="poll_subtitle"></h2>

www/poll/main.js

@@ -689,8 +689,6 @@ define([
 
         var $toolbar = $('#toolbar');
 
-        $toolbar.find('sub a').text(Messages.backToCryptpad);
-
         var Button = function (opt) {
             return $('<button>', opt);
         };

www/slide/index.html

@@ -16,6 +16,7 @@
             width: 100%;
             padding: 0px;
             margin: 0px;
+            margin-top: 1.25em;
             overflow: hidden;
             box-sizing: border-box;
             position: relative;