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

2016-09-28 15:28:25 +02:00 · 2016-09-28 15:28:25 +02:00 · f03018f3bc
parent 3d54413343
commit f03018f3bc
18 changed files with 72 additions and 129 deletions
--- a/customize.dist/DecorateToolbar.js
+++ b/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'
-                }));
+                $('body').append(ret);
                LS.main();
                Messages._applyTranslation();
            }
--- a/customize.dist/Header.html
+++ b/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>
-    </div> -->
+      <p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
+    </div>
    <div class="bottom-bar-right">
-      <p data-localization="bottom_support">
+      <p data-localization="header_support">
      </p>
    </div>
  </div>
--- a/customize.dist/logo-xwiki.png
+++ b/customize.dist/logo-xwiki.png
--- a/customize.dist/main.css
+++ b/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;
--- a/customize.dist/src/cryptpad.less
+++ b/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;
-    margin-right: auto;
-    width: 20%
+    width: 20%;
+    position: absolute;
+    left: 40%;
+    text-align: center;
 }
 .bottom-bar-heart {
    top: 2px;
--- a/customize.dist/src/toolbar.less
+++ b/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;
--- a/customize.dist/toolbar.css
+++ b/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;
--- a/customize.dist/translations/messages.fr.js
+++ b/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;
 });
--- a/customize.dist/translations/messages.js
+++ b/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;
 });
--- a/www/code/index.html
+++ b/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;
--- a/www/code/inner.html
+++ b/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">
--- a/www/code/main.js
+++ b/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>', {
-                    title: Messages.exportButtonTitle,
-                })
-                    .text(Messages.exportButton)
-                    .addClass('rightside-button')
-                    .click(exportText);
+                var $export = Cryptpad.createButton('export', true).click(exportText);
                $rightside.append($export);

                if (!readOnly) {
                    /* add an import button */
-                    var $import = $('<button>',{
-                        title: Messages.importButtonTitle
-                    })
-                        .text(Messages.importButton)
-                        .addClass('rightside-button')
+                    var $import = Cryptpad.createButton('import', true)
                        .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>', {
-                        id: 'name-pad',
-                        title: Messages.renameButtonTitle,
-                    })
-                    .addClass('rightside-button')
-                    .text(Messages.renameButton)
+                var $setTitle = Cryptpad.createButton('rename', true)
                    .click(function () {
                        var suggestion = suggestName();

@ -384,12 +366,7 @@ define([
                $rightside.append($setTitle);

                /* add a forget button */
-                var $forgetPad = $('<button>', {
-                        id: 'cryptpad-forget',
-                        title: Messages.forgetButtonTitle,
-                    })
-                    .text(Messages.forgetButton)
-                    .addClass('cryptpad-forget rightside-button')
+                var $forgetPad = Cryptpad.createButton('forget', true)
                    .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>', {
-                        title: Messages.getViewButtonTitle
-                    })
-                        .text(Messages.getViewButton)
-                        .addClass('rightside-button')
+                    var $links = Cryptpad.createButton('readonly', true)
                        .click(function () {
                            var baseUrl = window.location.origin + window.location.pathname + '#';
                            var content = '<b>' + Messages.readonlyUrl + '</b><br><a>' + baseUrl + viewHash + '</a><br>';
--- a/www/common/toolbar.js
+++ b/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) {
--- a/www/pad/index.html
+++ b/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({
--- a/www/pad/main.js
+++ b/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);

--- a/www/poll/index.html
+++ b/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>
--- a/www/poll/main.js
+++ b/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);
        };
--- a/www/slide/index.html
+++ b/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;