New toolbar

customize.dist/ckeditor-config.js

@@ -8,7 +8,8 @@ CKEDITOR.editorConfig = function( config ) {
     config.removeButtons= 'Source,Maximize';
     // magicline plugin inserts html crap into the document which is not part of the
     // document itself and causes problems when it's sent across the wire and reflected back
-    config.removePlugins= 'resize';
+    config.removePlugins= 'resize,elementspath';
+    config.resize_enabled= false; //bottom-bar
     config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
     config.toolbarGroups= [
         // {"name":"clipboard","groups":["clipboard","undo"]},

customize.dist/main.css

@@ -435,7 +435,7 @@
   display: block;
 }
 .dropdown-bar .dropdown-bar-content a {
-  color: black !important;
+  color: black;
   padding: 5px 16px;
   text-decoration: none;
   display: block;
@@ -449,11 +449,11 @@
 }
 .dropdown-bar .dropdown-bar-content a:hover {
   background-color: #f1f1f1;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content a.active {
   background-color: #e8e8e8;
-  color: black !important;
+  color: black;
 }
 .dropdown-bar .dropdown-bar-content hr {
   margin: 5px 0px;

customize.dist/src/less/dropdown.less

@@ -42,7 +42,7 @@
         }
 
         a {
-            color: black !important;
+            color: black;
             padding: 5px 16px;
             text-decoration: none;
             display: block;
@@ -56,12 +56,12 @@
 
             &:hover {
                 background-color: #f1f1f1;
-                color: black !important;
+                color: black;
             }
 
             &.active {
                 background-color: #e8e8e8;
-                color: black !important;
+                color: black;
             }
         }
 

customize.dist/src/less/toolbar.less

@@ -32,72 +32,157 @@
 
     //background-color: #BBBBFF;
     background-color: @toolbar-default-bg;
-    color: @toolbar-default-color;
+    color: @toolbar-default-color;/*
     &.pad {
-        @color: @toolbar-pad-bg;
+        @bgcolor: @toolbar-pad-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        @color: @toolbar-pad-color;
-        border-bottom: 2px solid @color;
+        background-color: @bgcolor;
+        color: @color;
     }
     &.code {
-        @color: @toolbar-code-bg;
+        @bgcolor: @toolbar-code-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        @color: @toolbar-code-color;
-        border-bottom: 2px solid @color;
+        background-color: @bgcolor;
+        color: @color;
+        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
+            lighten($bgcolor, 15%);
+        }
     }
     &.slide {
-        @color: @toolbar-slide-bg;
+        @bgcolor: @toolbar-slide-bg;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        @color: @toolbar-slide-color;
+        background-color: @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.poll {
-        @color: @toolbar-poll-bg;
+        @bgcolor: @toolbar-poll-bg;
+        @color: @toolbar-poll-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.whiteboard {
-        @color: @toolbar-whiteboard-bg;
+        @bgcolor: @toolbar-whiteboard-bg;
+        @color: @toolbar-whiteboard-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.drive {
-        @color: @toolbar-drive-bg;
+        @bgcolor: @toolbar-drive-bg;
+        @color: @toolbar-drive-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
     }
     &.file {
-        @color: @toolbar-file-bg;
+        @bgcolor: @toolbar-file-bg;
+        @color: @toolbar-file-color;
         background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
         border-bottom: 2px solid @color;
+    }*/
+
+    .addToolbarColors (@color, @bg-color) {
+        background-color: @bgcolor;
+        color: @color;
+        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
+            background-color: lighten(@bgcolor, 8%);
+            button:hover {
+                background-color: @bgcolor;
             }
-/*
+        }
+        .hoverable:hover {
+            .editable {
+                cursor: text;
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+            }
+            .pencilIcon {
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+                &:hover {
+                    background: darken(@bgcolor, 5%);
+                }
+            }
+        }
+        .saveIcon {
+            border: 1px solid lighten(@bgcolor, 15%);
+            background: darken(@bgcolor, 10%);
+            color: @color;
+            &:hover {
+                background: darken(@bgcolor, 5%);
+            }
+        }
+        input {
+            border: 1px solid lighten(@bgcolor, 15%);
+            background: darken(@bgcolor, 10%);
+            color: @color;
+        }
+        .dropdown-bar-content {
+            line-height: 14px;
+            background: darken(@bgcolor, 5%);
+            border: 1px solid @color;
+            color: @color;
+            a {
+                color: @color;
+                &.active {
+                    background-color: darken(@bgcolor, 10%);
+                    color: @color;
+                }
+                &:hover {
+                    background-color: @bgcolor;
+                    color: @color;
+                }
+            }
+            hr {
+                background-color: darken(@bgcolor, 15%);
+            }
+            p {
+                h2 {
+                    background-color: darken(@bgcolor, 10%);
+                }
+                .accountData {
+                    background-color: @bgcolor;
+                }
+            }
+        }
+    }
+
     &.pad {
-        background-color: @toolbar-pad-bg;
+        @bgcolor: @toolbar-pad-bg;
-        color: @toolbar-pad-color;
+        @color: @toolbar-pad-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.code {
-        background-color: @toolbar-code-bg;
+        @bgcolor: @toolbar-code-bg;
-        color: @toolbar-code-color;
+        @color: @toolbar-code-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.slide {
-        background-color: @toolbar-slide-bg;
+        @bgcolor: @toolbar-slide-bg;
-        color: @toolbar-slide-color;
+        @color: @toolbar-slide-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.poll {
-        background-color: @toolbar-poll-bg;
+        @bgcolor: @toolbar-poll-bg;
-        color: @toolbar-poll-color;
+        @color: @toolbar-poll-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.whiteboard {
-        background-color: @toolbar-whiteboard-bg;
+        @bgcolor: @toolbar-whiteboard-bg;
-        color: @toolbar-whiteboard-color;
+        @color: @toolbar-whiteboard-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.drive {
-        background-color: @toolbar-drive-bg;
+        @bgcolor: @toolbar-drive-bg;
-        color: @toolbar-drive-color;
+        @color: @toolbar-drive-color;
+        .addToolbarColors(@color, @bgcolor);
     }
     &.file {
-        background-color: @toolbar-file-bg;
+        @bgcolor: @toolbar-file-bg;
-        color: @toolbar-file-color;
+        @color: @toolbar-file-color;
+        .addToolbarColors(@color, @bgcolor);
     }
-*/
+
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -121,10 +206,25 @@
             height: 100%;
             border-radius: 0;
             margin: 0;
+            background: transparent;
         }
     }
 
+    .separator {
+        content: '';
+        display: inline-block;
+        background: #888;
+        margin: 7px 4px;
+        height: 18px;
+        width: 1px;
+        vertical-align: top;
+    }
+    .separator:last-child {
+        display: none;
+    }
+
     button {
+        .unselectable();
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
             color: #fff;
@@ -162,21 +262,24 @@
         &.hidden {
             display: none;
         }
-
         // Bootstrap 4 colors (btn-secondary)
         border: 1px solid transparent;
         border-radius: .25rem;
-        color: #000;
+        color: inherit;
-        background-color: #fff;
-        border-color: #ccc;
         font: @toolbar-button-font;
         * {
-            color: #000;
+            color: inherit;
             font: @toolbar-button-font;
         }
+    }
+    .cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
+        //background-color: #fff;
+        //border-color: #ccc;
+        background: transparent;
         &:hover {
-            color: #292b2c;
+            //color: #292b2c;
-            background-color: #e6e6e6;
+            background-color: rgba(50,50,50,0.3);
+            //background-color: #e6e6e6;
             border-color: #adadad;
         }
     }
@@ -204,68 +307,95 @@
     }
 
     .clag () {
-        background: transparent;
+        background: transparent
     }
 
+    .cryptpad-state {
+        line-height: @toolbar-top-height;
+    }
     .cryptpad-lag {
-        height: 20px;
-        width: 23px;
-        background: transparent;
         display: inline-block;
-        padding: 3px;
-        margin: 3px;
         vertical-align: top;
         box-sizing: content-box;
         text-align: center;
+        line-height: @toolbar-top-height;
+        .disconnected {
+            display: none;
+            color: inherit;
+            width: 28px;
+            margin: 8px;
+            font-size: 28px;
+            text-align: center;
+            vertical-align: middle;
+        }
+        .bars {
+            margin: 8px;
+            height: 26px;
+            line-height: 26px;
+            display: inline-block;
             span {
                 display: inline-block;
-            width: 4px;
+                width: 6px;
                 margin: 0;
                 margin-right: 1px;
-            background: black;
+                background: white;
                 vertical-align: bottom;
                 box-sizing: border-box;
                 border: 1px solid black;
+                visibility: hidden;
                 transition: background 1s, border 1s;
                 &:last-child {
                     margin-right: 0;
                 }
-            &.bar1 { height: 5px; }
+                &.bar1 { height: 6px; }
-            &.bar2 { height: 10px; }
+                &.bar2 { height: 12px; }
-            &.bar3 { height: 15px; }
+                &.bar3 { height: 18px; }
-            &.bar4 { height: 20px; }
+                &.bar4 { height: 24px; }
+            }
+        }
+        &.dc {
+            .disconnected {
+                display: inline;
+            }
+            .bars {
+                display: none
+            }
         }
         &.lag0 {
-            span {
+            span span {
                 .clag();
-                border-color: red;
+                //border-color: red;
             }
         }
         &.lag1 {
             .bar2, .bar3, .bar4 { .clag(); }
-            span {
+            span span {
-                background-color: orange;
+                visibility: visible;
-                border-color: orange;
+                //background-color: orange;
+                //border-color: orange;
             }
         }
         &.lag2 {
             .bar3, .bar4 { .clag(); }
-            span {
+            span span {
-                background-color: orange;
+                visibility: visible;
-                border-color: orange;
+                //background-color: orange;
+                //border-color: orange;
             }
         }
         &.lag3 {
             .bar4 { .clag(); }
-            span {
+            span span {
-                background-color: @toolbar-green;
+                visibility: visible;
-                border-color: @toolbar-green;
+                //background-color: @toolbar-green;
+                //border-color: @toolbar-green;
             }
         }
         &.lag4 {
-            span {
+            span span {
-                background-color: @toolbar-green;
+                visibility: visible;
-                border-color: @toolbar-green;
+                //background-color: @toolbar-green;
+                //border-color: @toolbar-green;
             }
         }
     }
@@ -287,15 +417,6 @@
         box-sizing: border-box;
     }
 
-    .dropdown-bar-content {
-        margin-top: -3px;
-        margin-right: 2px;
-    }
-
-    .cryptpad-state {
-        line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
-    }
-
     .rightside-button {
         float: right;
         cursor: pointer;
@@ -381,7 +502,8 @@
 }
 
 .cryptpad-toolbar:not(.notitle) {
-    .cryptpad-toolbar-top {
+    // TODO
+    /*.cryptpad-toolbar-top {
         @media screen and (max-width: @media-medium-screen) {
             height: 67px;
         }
@@ -393,116 +515,174 @@
                 top: 0px;
             }
         }
-    }
+    }*/
 }
 
 .cryptpad-toolbar-top {
-    display: block;
+    display: flex;
-    text-align: center;
+    flex-flow: row;
-    height: 32px;
+    height: @toolbar-top-height;
     position: relative;
     .cryptpad-title {
+        order: 3;
+        height: 100%;
+        display: inline-block;
+        line-height: @toolbar-top-height;
+        flex: 1;
+        margin-left: 20px;
         .title, .pencilIcon, .saveIcon {
-            font-size: 1.5em;
+            font-size: 25px;
             vertical-align: middle;
-            line-height: 32px;
+            line-height: 25px;
         }
         .pencilIcon {
-            margin-left: 11px;
+            cursor: pointer;
-            &:hover {
+            border: 1px solid transparent;
-                color: #999;
+            border-radius: 0px 2px 2px 0px;
-                margin-left: 0px;
+            padding: 5px;
-            }
+            border-collapse: collapse;
             span {
+                font-size: 25px;
                 cursor: pointer;
             }
         }
         .saveIcon {
             cursor: pointer;
-            border: 1px solid black;
             border-radius: 0px 2px 2px 0px;
-            background: white;
             padding: 5px;
-            display: inline;
-            margin-left: -1px;
             border-collapse: collapse;
-            &:hover {
-                color: #999;
-            }
             span {
+                font-size: 25px;
                 cursor: pointer;
             }
         }
-        &:not(input):hover {
         .editable {
-                border: 1px solid #888;
+            border: 1px solid transparent;
             border-radius: 2px 0px 0px 2px;
-                background: white;
             padding: 5px;
             border-collapse: collapse;
         }
-            .pencilIcon {
-                cursor: pointer;
-                border: 1px solid #888;
-                border-radius: 0px 2px 2px 0px;
-                background: white;
-                padding: 5px;
-                display: inline;
-                margin-left: -1px;
-                border-collapse: collapse;
-            }
-        }
         input {
             font-size: 1.5em;
             vertical-align: middle;
             box-sizing: border-box;
-            border: 1px solid black;
-            background: #fff;
             cursor: auto;
             width: 300px;
+            font-size: 25px;
             padding: 5px 5px;
+            height: 40px;
+        }
+    }
+    .cryptpad-link, .cryptpad-new {
+        font-size: 48px;
+        line-height: 64px;
+        width: @toolbar-top-height;
+        height: @toolbar-top-height;
+        padding: 0;
+        box-sizing: border-box;
+        display: inline-block;
+
+        color: white;
+        transition: all 0.15s;
+    }
+    .cryptpad-new {
+        background-color: rgba(0,0,0,0.2);
+        &:hover {
+            background-color: rgba(0,0,0,0.3);
+        }
+        order: 2;
+        text-align: center;
+        &> button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 64px;
+            height: 64px !important; // Allows us to have a nice square outline when focused
+            font-size: 1em;
+            color: inherit;
+            height: auto;
+            padding: 0px;
+            margin: 0;
+            &::before {
+                padding-top: 4px;
+            }
+            &:hover {
+                background-color: initial;
+                border-color: transparent;
+            }
+            span {
+                vertical-align: top;
+                font-size: 1em;
+                text-decoration: none;
+                color: inherit;
+            }
+        }
+        .dropdown-bar-content {
+            font-size: 12px;
+            line-height: 14px;
         }
     }
     .cryptpad-link {
-        position: absolute;
+        display: inline-flex;
-        left: 0px;
+        align-items: center;
-        height: 32px;
+        justify-content: center;
-        background: @toolbar-drive-bg;
+        cursor: pointer;
-
+        background-color: rgba(0,0,0,0.4);
+        &:hover {
+            background-color: rgba(0,0,0,0.5);
+        }
+        order: 1;
         a.cryptpad-logo {
             cursor: pointer;
-            height: 32px;
+            font-size: 1em;
+            height: auto;
             padding: 0px 5px;
             text-decoration: none;
             color: inherit;
-            &:hover {
-                span {
-                    text-decoration: underline;
-                }
-            }
-            img {
-                vertical-align: middle;
-                height: 32px;
-                cursor: pointer;
-            }
-            span {
-                font-size: 1.5em;
-                margin-left: 5px;
-                vertical-align: middle;
-                cursor: pointer;
-            }
         }
     }
     .cryptpad-user {
         height: 100%;
-        position: absolute;
+        display: inline-block;
-        right: 0;
+        order: 4;
-        :not(.cryptpad-lag) span {
+        line-height: @toolbar-top-height;
+        &> * {
+            display: inline-block;
+            height: 100%;
             vertical-align: top;
         }
+        .cryptpad-upgrade {
+            height: 32px;
+            vertical-align: middle;
+            cursor: pointer;
+        }
+        .cryptpad-user-dropdown {
+            margin-left: 20px;
+            height: 64px;
+            width: 64px;
+            padding: 0px;
+            box-sizing: border-box;
+            text-align: center;
+            background-color: rgba(0,0,0,0.3);
+            &:hover {
+                background-color: rgba(0,0,0,0.4);
+            }
+            .dropdown-bar-content {
+                margin: 0;
+            }
             button {
-            span.fa {
+                display: flex;
-                vertical-align: baseline;
+                justify-content: center;
+                align-items: center;
+                height: 64px;
+                width: 64px;
+                padding: 0;
+                span {
+                    font-size: 32px;
+                    .fa {
+                        margin-left: 3px;
+                    }
+                }
             }
         }
     }
@@ -533,7 +713,28 @@
         margin: 0;
         border-radius: 0;
         padding: 0 10px;
-
+    }
+    .drawer-content {
+        position: absolute;
+        right:0px;
+        top:96px;
+        width: 50px;
+        background: white;
+        border: 1px solid black;
+        display: none;
+        button {
+            text-align: center;
+            width: 100%;
+            margin: 0;
+            border-radius: 0;
+            border: 1px solid transparent;
+            &:hover {
+                border: 1px solid transparent;
+            }
+            &:not(:last-child) {
+                border-bottom: 1px solid rgba(0,0,0,0.2);
+            }
+        }
     }
 }
 .cryptpad-toolbar-history {
@@ -567,13 +768,16 @@
         border-radius: 5px;
     }
 }
-.cryptpad-spinner > span {
+.cryptpad-spinner {
+    line-height: @toolbar-top-height;
+    &> span {
         height: 16px;
         width: 16px;
         margin: 8px;
         line-height: 16px;
         font-size: 16px;
         text-align: center;
+    }
 }
 .cryptpad-readonly {
     margin-right: 5px;
@@ -582,7 +786,6 @@
 }
 .cryptpad-user {
     p.accountData {
-        background: #f0f0f0;
         &> span {
             font-weight: bold;
             span {
@@ -590,14 +793,6 @@
             }
         }
     }
-    .buttonTitle {
-        .fa:not(.fa-caret-down) {
-            margin-right: 5px;
-        }
-        .account-name {
-            margin-left: 5px;
-        }
-    }
 }
 .cryptpad-dropdown-share {
     a {

customize.dist/src/less/variables.less

@@ -99,6 +99,8 @@
 @topbar-button-color: #fff;
 @topbar-height: 50px;
 
+@toolbar-top-height: 64px;
+
 @main-border-width: 15vw;
 @cp-darkblue: #3333ff;
 @cp-accent2: darken(@cp-darkblue, 20%);
@@ -108,3 +110,12 @@
 @main-bg: url('/customize/bg3.jpg') no-repeat center center;
 
 @category-bg: #f4f4f4;
+
+.unselectable () {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

customize.dist/translations/messages.fr.js

@@ -74,7 +74,7 @@ define(function () {
 
     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.redLight = "Vous êtes déconnecté de la session";
 
     out.pinLimitReached = "Vous avez atteint votre limite de stockage";
     out.updated_0_pinLimitReachedAlert = "Vous avez atteint votre limite de stockage. Les nouveaux pads ne seront pas enregistrés dans votre CryptDrive.<br>" +

www/common/common-hash.js

@@ -100,6 +100,8 @@ Version 1
 
         var ret = {};
 
+    if (typeof href !== "string") { console.error(href); }
+
         if (!href) { return ret; }
         if (href.slice(-1) !== '/') { href += '/'; }
 

www/common/cryptpad-common.js

@@ -530,7 +530,7 @@ define([
     };
 
     common.setPadTitle = function (name, padHref, cb) {
-        var href = padHref || window.location.href;
+        var href = typeof padHref === "string" ? padHref : window.location.href;
         var parsed = parsePadUrl(href);
         if (!parsed.hash) { return; }
         href = getRelativeHref(href);
@@ -924,6 +924,7 @@ define([
     common.createButton = function (type, rightside, data, callback) {
         var button;
         var size = "17px";
+        console.log(type);
         switch (type) {
             case 'export':
                 button = $('<button>', {
@@ -1096,6 +1097,13 @@ define([
                     });
                 }
                 break;
+            case 'more':
+                button = $('<button>', {
+                    title: Messages.moreActions || 'TODO',
+                    'class': "fa fa-ellipsis-h",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
@@ -1143,9 +1151,9 @@ define([
         var $button = $('<button>', {
             'class': ''
         }).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
-        $('<span>', {
+        /*$('<span>', {
             'class': 'fa fa-caret-down',
-        }).appendTo($button);
+        }).appendTo($button);*/
 
         // Menu
         var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
@@ -1186,7 +1194,7 @@ define([
             }
         };
 
-        $button.click(function (e) {
+        $container.click(function (e) {
             e.stopPropagation();
             var state = $innerblock.is(':visible');
             $('.dropdown-bar-content').hide();
@@ -1365,15 +1373,19 @@ define([
                 content: Messages.login_register
             });
         }
-        var $icon = $('<span>', {'class': 'fa fa-user'});
+        var $icon = $('<span>', {'class': 'fa fa-user-secret'});
-        var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
+        //var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
-        var $userButton = $('<div>').append($icon).append($userbig);
+        var $userButton = $('<div>').append($icon);//.append($userbig);
-        if (account && config.displayNameCls) {
+        if (account) {
+
+            $userButton = $('<div>').append(accountName.slice(0,1).toUpperCase());
+        }
+        /*if (account && config.displayNameCls) {
             $userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
         } else if (account) {
             // If no display name, do not display the parentheses
             $userbig.append($('<span>', {'class': 'account-name'}).text(accountName));
-        }
+        }*/
         var dropdownConfigUser = {
             text: $userButton.html(), // Button initial text
             options: options, // Entries displayed in the menu

www/common/toolbar2.js

@@ -17,6 +17,7 @@ define([
     var TOP_CLS = Bar.constants.top = 'cryptpad-toolbar-top';
     var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
     var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
+    var DRAWER_CLS = Bar.constants.drawer = 'drawer-content';
     var HISTORY_CLS = Bar.constants.history = 'cryptpad-toolbar-history';
 
     // Userlist
@@ -81,7 +82,7 @@ define([
         $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
-        $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        //$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer)
@@ -89,6 +90,15 @@ define([
         .append($('<div>', {'class': RIGHTSIDE_CLS}))
         .append($('<div>', {'class': HISTORY_CLS}));
 
+        var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
+        if (!config.hideDrawer) {
+            var $drawerContent = $('<div>', {'class': 'drawer-content'}).appendTo($rightside);
+            var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
+            $drawer.click(function (e) {
+                $drawerContent.toggle();
+            });
+        }
+
         // The 'notitle' class removes the line added for the title with a small screen
         if (!config.title || typeof config.title !== "object") {
             $toolbar.addClass('notitle');
@@ -216,9 +226,11 @@ define([
         var fa_viewusers = '<span class="fa fa-eye"></span>';
         var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
         var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
-        var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
+        //var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
-        var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
+        //var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
-        $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
+        //$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
+        var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
+        $userButtons.find('.buttonTitle').html('').append($spansmall);
 
         // Change username in useradmin dropdown
         if (config.displayed.indexOf('useradmin') !== -1) {
@@ -269,6 +281,7 @@ define([
         };
         var $block = Cryptpad.createDropdown(dropdownConfig);
         $block.attr('id', 'userButtons');
+        toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
         toolbar.$leftside.prepend($block);
 
         return $block;
@@ -282,7 +295,6 @@ define([
         }
         Cryptpad.getRecentPads(function (err, recent) {
             var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-            var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
             var hashes = Cryptpad.getHashes(channel, secret);
             var options = [];
 
@@ -342,11 +354,11 @@ define([
                 });
             }
             var dropdownConfigShare = {
-                text: $('<div>').append($shareIcon).append($span).html(),
+                text: $('<div>').append($shareIcon).html(),
                 options: options
             };
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
-            $shareBlock.find('button').attr('id', 'shareButton');
+            //$shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
 
             if (hashes.editHash) {
@@ -401,6 +413,8 @@ define([
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
+        var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
+
         if (typeof config.title !== "object") {
             console.error("config.title", config);
             throw new Error("config.title is not an object");
@@ -412,7 +426,7 @@ define([
         // Buttons
         var $text = $('<span>', {
             'class': 'title'
-        }).appendTo($titleContainer);
+        }).appendTo($hoverable);
         var $pencilIcon = $('<span>', {
             'class': 'pencilIcon',
             'title': Messages.clickToEdit
@@ -425,7 +439,7 @@ define([
         var $input = $('<input>', {
             type: 'text',
             placeholder: placeholder
-        }).appendTo($titleContainer).hide();
+        }).appendTo($hoverable).hide();
         if (config.readOnly !== 1) {
             $text.attr("title", Messages.clickToEdit);
             $text.addClass("editable");
@@ -433,12 +447,12 @@ define([
                 'class': 'fa fa-pencil readonly',
                 style: 'font-family: FontAwesome;'
             });
-            $pencilIcon.append($icon).appendTo($titleContainer);
+            $pencilIcon.append($icon).appendTo($hoverable);
             var $icon2 = $('<span>', {
                 'class': 'fa fa-check readonly',
                 style: 'font-family: FontAwesome;'
             });
-            $saveIcon.append($icon2).appendTo($titleContainer);
+            $saveIcon.append($icon2).appendTo($hoverable);
         }
 
         // Events
@@ -454,15 +468,14 @@ define([
             if (name === "") {
                 name = $input.attr('placeholder');
             }
-            Cryptpad.renamePad(name, function (err, newtitle) {
+            Cryptpad.renamePad(name, null, function (err, newtitle) {
-                if (err) { return; }
+                if (err) { return console.error(err); }
                 $text.text(newtitle);
                 callback(null, newtitle);
                 $input.hide();
                 $text.show();
                 $pencilIcon.show();
                 $saveIcon.hide();
-                //$pencilIcon.css('display', '');
             });
         };
         $input.on('keyup', function (e) {
@@ -498,20 +511,13 @@ define([
         var $linkContainer = $('<span>', {
             'class': "cryptpad-link"
         }).appendTo(toolbar.$top);
-        var $imgTag = $('<img>', {
-            src: "/customize/cryptofist_mini.png",
-            alt: "Cryptpad"
-        });
 
         // We need to override the "a" tag action here because it is inside the iframe!
-        var $aTagSmall = $('<a>', {
+        var $aTag = $('<a>', {
             href: "/",
             title: Messages.header_logoTitle,
-            'class': "cryptpad-logo"
+            'class': "cryptpad-logo fa fa-hdd-o"
-        }).append($imgTag);
+        });
-        //var $span = $('<span>').text('CryptDrive');
-        var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
-        $aTagSmall.addClass('narrow');
         var onClick = function (e) {
             e.preventDefault();
             if (e.ctrlKey) {
@@ -523,10 +529,9 @@ define([
 
         var onContext = function (e) { e.stopPropagation(); };
 
-        $aTagBig.click(onClick).contextmenu(onContext);
+        $aTag.click(onClick).contextmenu(onContext);
-        $aTagSmall.click(onClick).contextmenu(onContext);
 
-        $linkContainer.append($aTagSmall).append($aTagBig);
+        $linkContainer.append($aTag);
 
         return $linkContainer;
     };
@@ -539,9 +544,6 @@ define([
         if(typeof getLag === "function") {
             lag = getLag();
         }
-        var lagLight = $('<div>', {
-            'class': 'lag'
-        });
         var title;
         if (lag && toolbar.connected) {
             $lag.attr('class', LAG_CLS);
@@ -566,9 +568,10 @@ define([
         }
         else if (!toolbar.firstConnection) {
             $lag.attr('class', LAG_CLS);
-            // Display the red light at the 2nd failed attemp to get the lag
+            $lag.addClass('dc');
-            lagLight.addClass('lag-red');
             title = Messages.redLight;
+        } else {
+            $lag.addClass('lag4');
         }
         if (title) {
             $lag.attr('title', title);
@@ -576,10 +579,12 @@ define([
     };
     var createLag = function (toolbar, config) {
         var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
-        $('<span>', {'class': 'bar1'}).appendTo($a);
+        var $container = $('<span>', {'class': 'bars'}).appendTo($a);
-        $('<span>', {'class': 'bar2'}).appendTo($a);
+        $('<span>', {'class': 'bar1'}).appendTo($container);
-        $('<span>', {'class': 'bar3'}).appendTo($a);
+        $('<span>', {'class': 'bar2'}).appendTo($container);
-        $('<span>', {'class': 'bar4'}).appendTo($a);
+        $('<span>', {'class': 'bar3'}).appendTo($container);
+        $('<span>', {'class': 'bar4'}).appendTo($container);
+        $('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
         if (config.realtime) {
             checkLag(toolbar, config, $a);
             setInterval(function () {
@@ -664,7 +669,9 @@ define([
     };
 
     var createNewPad = function (toolbar) {
-        var $newPad = toolbar.$userAdmin.find('.'+NEWPAD_CLS).show();
+        var $newPad = $('<span>', {
+            'class': "cryptpad-new dropdown-bar"
+        }).appendTo(toolbar.$top);
 
         var pads_options = [];
         Config.availablePadTypes.forEach(function (p) {
@@ -680,18 +687,14 @@ define([
                 content: Messages.type[p]
             });
         });
-        var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
-        var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
-        var $newButton = $('<div>').append($plusIcon).append($newbig);
         var dropdownConfig = {
-            text: $newButton.html(), // Button initial text
+            text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu
-            left: true, // Open to the left of the button,
             container: $newPad
         };
         var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
         $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
-        $newPadBlock.find('button').attr('id', 'newdoc');
+        $newPadBlock.find('button').addClass('fa fa-plus');
         return $newPadBlock;
     };
 
@@ -901,6 +904,7 @@ define([
         var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
         toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
         toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
+        toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
         toolbar.$top = $toolbar.find('.'+Bar.constants.top);
         toolbar.$history = $toolbar.find('.'+Bar.constants.history);
 

www/pad/main.js

@@ -472,6 +472,7 @@ define([
                 Title.setToolbar(toolbar);
 
                 var $rightside = toolbar.$rightside;
+                var $drawer = toolbar.$drawer;
 
                 var editHash;
 
@@ -513,7 +514,7 @@ define([
                     $toolbar: $bar
                 };
                 var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-                $rightside.append($hist);
+                $drawer.append($hist);
 
                 /* save as template */
                 if (!Cryptpad.isTemplate(window.location.href)) {
@@ -528,12 +529,12 @@ define([
 
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportFile);
-                $rightside.append($export);
+                $drawer.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
                     var $import = Cryptpad.createButton('import', true, {}, importFile);
-                    $rightside.append($import);
+                    $drawer.append($import);
                 }
 
                 /* add a forget button */