Merge branch 'newCk' into staging

bower.json

@@ -21,7 +21,7 @@
     "jquery": "~2.1.3",
     "tweetnacl": "~0.12.2",
     "components-font-awesome": "^4.6.3",
-    "ckeditor": "~4.5.6",
+    "ckeditor": "~4",
     "codemirror": "^5.19.0",
     "requirejs": "~2.1.15",
     "marked": "~0.3.5",

customize.dist/ckeditor-config.js

@@ -50,7 +50,7 @@ CKEDITOR.editorConfig = function( config ) {
 
     //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/'
     //skin: 'flat,/pad/themes/flat/'
-    //skin: 'moono-lisa,/pad/themes/moono-lisa/'
+    //config.skin= 'moono-lisa,/pad/themes/moono-lisa/'
     //skin: 'moono-dark,/pad/themes/moono-dark/'
     //skin: 'office2013,/pad/themes/office2013/'
 };

customize.dist/src/less/toolbar.less

@@ -21,13 +21,48 @@
         }
     }
 }
-
+.cke_reset_all * {
+    color: inherit;
+}
 .cryptpad-toolbar {
     @toolbar-green: #5cb85c;
 
     box-sizing: border-box;
     padding: 0px 6px;
 
+    //background-color: #BBBBFF;
+    background-color: @toolbar-default-bg;
+    color: @toolbar-default-color;
+
+    &.pad {
+        background-color: @toolbar-pad-bg;
+        color: @toolbar-pad-color;
+    }
+    &.code {
+        background-color: @toolbar-code-bg;
+        color: @toolbar-code-color;
+    }
+    &.slide {
+        background-color: @toolbar-slide-bg;
+        color: @toolbar-slide-color;
+    }
+    &.poll {
+        background-color: @toolbar-poll-bg;
+        color: @toolbar-poll-color;
+    }
+    &.whiteboard {
+        background-color: @toolbar-whiteboard-bg;
+        color: @toolbar-whiteboard-color;
+    }
+    &.drive {
+        background-color: @toolbar-drive-bg;
+        color: @toolbar-drive-color;
+    }
+    &.file {
+        background-color: @toolbar-file-bg;
+        color: @toolbar-file-color;
+    }
+
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -36,7 +71,6 @@
     .unselectable;
 
     font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
-    color: #000;
     width: 100%;
     z-index: 9001;
 
@@ -45,10 +79,6 @@
     }
 
     button {
-        font: @toolbar-button-font;
-        * {
-            font: @toolbar-button-font;
-        }
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
             color: #fff;
@@ -93,6 +123,11 @@
         color: #000;
         background-color: #fff;
         border-color: #ccc;
+        font: @toolbar-button-font;
+        * {
+            color: #000;
+            font: @toolbar-button-font;
+        }
         &:hover {
             color: #292b2c;
             background-color: #e6e6e6;
@@ -321,13 +356,12 @@
     height: 32px;
     position: relative;
     .cryptpad-title {
-        .title, .pencilIcon {
+        .title, .pencilIcon, .saveIcon {
             font-size: 1.5em;
             vertical-align: middle;
             line-height: 32px;
         }
         .pencilIcon {
-            //display: none;
             margin-left: 11px;
             &:hover {
                 color: #999;
@@ -337,6 +371,22 @@
                 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 {
+                cursor: pointer;
+            }
+        }
         &:not(input):hover {
             .editable {
                 border: 1px solid #888;
@@ -410,6 +460,7 @@
     }
 }
 .cryptpad-toolbar-leftside {
+    height: 32px;
     float: left;
     margin-bottom: -1px;
     .cryptpad-dropdown-users {
@@ -427,6 +478,7 @@
     }
 }
 .cryptpad-toolbar-rightside {
+    height: 32px;
     text-align: right;
 }
 .cryptpad-toolbar-history {

customize.dist/src/less/variables.less

@@ -74,6 +74,25 @@
 @toolbar-gradient-end: #DDDDDD;
 @toolbar-button-font: 12px Ubuntu, Arial, sans-serif;
 
+// Toolbar
+@toolbar-pad-bg: #1c4fa0;
+@toolbar-pad-color: #fff;
+@toolbar-slide-bg: #a01c1c;
+@toolbar-slide-color: #fff;
+@toolbar-code-bg: #ffae00;
+@toolbar-code-color: #000;
+@toolbar-poll-bg: #006304;
+@toolbar-poll-color: #fff;
+@toolbar-whiteboard-bg: #570063;
+@toolbar-whiteboard-color: #fff;
+@toolbar-drive-bg: #0087ff;
+@toolbar-drive-color: #fff;
+@toolbar-file-bg: #ccffa0;
+@toolbar-file-color: #000;
+@toolbar-default-bg: #fff;
+@toolbar-default-color: #000;
+
+
 @topbar-back: #fff;
 @topbar-color: #000;
 @topbar-button-bg: #2E9AFE;

customize.dist/toolbar.css

@@ -98,9 +98,14 @@
 .toolbar-container .cryptpad-toolbar select {
   box-sizing: border-box;
 }
+.cke_reset_all * {
+  color: inherit;
+}
 .cryptpad-toolbar {
   box-sizing: border-box;
   padding: 0px 6px;
+  background-color: #fff;
+  color: #000;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -108,10 +113,37 @@
   -ms-user-select: none;
   user-select: none;
   font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
-  color: #000;
   width: 100%;
   z-index: 9001;
 }
+.cryptpad-toolbar.pad {
+  background-color: #1c4fa0;
+  color: #fff;
+}
+.cryptpad-toolbar.code {
+  background-color: #ffae00;
+  color: #000;
+}
+.cryptpad-toolbar.slide {
+  background-color: #a01c1c;
+  color: #fff;
+}
+.cryptpad-toolbar.poll {
+  background-color: #006304;
+  color: #fff;
+}
+.cryptpad-toolbar.whiteboard {
+  background-color: #570063;
+  color: #fff;
+}
+.cryptpad-toolbar.drive {
+  background-color: #0087ff;
+  color: #fff;
+}
+.cryptpad-toolbar.file {
+  background-color: #ccffa0;
+  color: #000;
+}
 .cryptpad-toolbar .fa {
   font: normal normal normal 14px/1 FontAwesome;
   font-family: FontAwesome;
@@ -120,14 +152,11 @@
   float: right;
 }
 .cryptpad-toolbar button {
-  font: 12px Ubuntu, Arial, sans-serif;
   border: 1px solid transparent;
   border-radius: .25rem;
   color: #000;
   background-color: #fff;
   border-color: #ccc;
-}
-.cryptpad-toolbar button * {
   font: 12px Ubuntu, Arial, sans-serif;
 }
 .cryptpad-toolbar button#shareButton,
@@ -173,6 +202,10 @@
 .cryptpad-toolbar button.hidden {
   display: none;
 }
+.cryptpad-toolbar button * {
+  color: #000;
+  font: 12px Ubuntu, Arial, sans-serif;
+}
 .cryptpad-toolbar button:hover {
   color: #292b2c;
   background-color: #e6e6e6;
@@ -406,7 +439,8 @@
   position: relative;
 }
 .cryptpad-toolbar-top .cryptpad-title .title,
-.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
+.cryptpad-toolbar-top .cryptpad-title .pencilIcon,
+.cryptpad-toolbar-top .cryptpad-title .saveIcon {
   font-size: 1.5em;
   vertical-align: middle;
   line-height: 32px;
@@ -421,6 +455,22 @@
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
   cursor: pointer;
 }
+.cryptpad-toolbar-top .cryptpad-title .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;
+}
+.cryptpad-toolbar-top .cryptpad-title .saveIcon:hover {
+  color: #999;
+}
+.cryptpad-toolbar-top .cryptpad-title .saveIcon span {
+  cursor: pointer;
+}
 .cryptpad-toolbar-top .cryptpad-title:not(input):hover .editable {
   border: 1px solid #888;
   border-radius: 2px 0px 0px 2px;
@@ -485,6 +535,7 @@
   vertical-align: baseline;
 }
 .cryptpad-toolbar-leftside {
+  height: 32px;
   float: left;
   margin-bottom: -1px;
 }
@@ -500,6 +551,7 @@
   margin-top: -1px;
 }
 .cryptpad-toolbar-rightside {
+  height: 32px;
   text-align: right;
 }
 .cryptpad-toolbar-history {

customize.dist/translations/messages.fr.js

@@ -97,6 +97,7 @@ define(function () {
     out.user_accountName = "Nom d'utilisateur";
 
     out.clickToEdit = 'Cliquer pour modifier';
+    out.saveTitle = "Enregistrer le titre (Entrée)";
 
     out.forgetButtonTitle = 'Déplacer ce pad vers la corbeille';
     out.forgetPrompt = 'Cliquer sur OK déplacera ce pad vers la corbeille de votre CryptDrive, êtes-vous sûr ?';
@@ -107,8 +108,8 @@ define(function () {
 
     out.newButton = 'Nouveau';
     out.newButtonTitle = 'Créer un nouveau pad';
-    out.uploadButton = 'Upload';
+    out.uploadButton = 'Importer des fichiers';
-    out.uploadButtonTitle = 'Uploader un nouveau fichier dans le dossier actuel';
+    out.uploadButtonTitle = 'Importer un nouveau fichier dans le dossier actuel';
 
     out.saveTemplateButton = "Sauver en tant que modèle";
     out.saveTemplatePrompt = "Choisir un titre pour ce modèle";
@@ -176,6 +177,9 @@ define(function () {
     out.history_restoreDone = "Document restauré";
     out.history_version = "Version :";
 
+    // Ckeditor links
+    out.openLinkInNewTab = "Ouvrir le lien dans un nouvel onglet";
+
     // Polls
 
     out.poll_title = "Sélecteur de date Zero Knowledge";
@@ -237,8 +241,8 @@ define(function () {
     out.fm_templateName = "Modèles";
     out.fm_searchName = "Recherche";
     out.fm_searchPlaceholder = "Rechercher...";
-    out.fm_newButton = "Nouveau";
+    out.fm_newButton = "Ajouter à ce dossier";
-    out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier";
+    out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
     out.fm_newFolder = "Nouveau dossier";
     out.fm_newFile = "Nouveau pad";
     out.fm_folder = "Dossier";
@@ -389,9 +393,9 @@ define(function () {
     out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions.";
     out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils.";
 
-    out.upload_serverError = "Erreur interne: impossible d'uploader le fichier pour l'instant.";
+    out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";
-    out.upload_uploadPending = "Vous avez déjà un fichier en cours d'upload. Souhaitez-vous l'annuler et uploader ce nouveau fichier ?";
+    out.upload_uploadPending = "Vous avez déjà un fichier en cours d'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?";
-    out.upload_success = "Votre fichier ({0}) a été uploadé avec succès et ajouté à votre CryptDrive.";
+    out.upload_success = "Votre fichier ({0}) a été importé avec succès et ajouté à votre CryptDrive.";
     out.upload_notEnoughSpace = "Il n'y a pas assez d'espace libre dans votre CryptDrive pour ce fichier.";
     out.upload_tooLarge = "Ce fichier dépasse la taille maximale autorisée.";
     out.upload_choose = "Choisir un fichier";
@@ -400,7 +404,7 @@ define(function () {
     out.upload_name = "Nom du fichier";
     out.upload_size = "Taille";
     out.upload_progress = "État";
-    out.upload_mustLogin = "Vous devez vous connecter pour uploader un fichier";
+    out.upload_mustLogin = "Vous devez vous connecter pour importer un fichier";
     out.download_button = "Déchiffrer et télécharger";
 
     // general warnings

customize.dist/translations/messages.js

@@ -99,6 +99,7 @@ define(function () {
     out.user_accountName = "Account name";
 
     out.clickToEdit = "Click to edit";
+    out.saveTitle = "Save the title (enter)";
 
     out.forgetButtonTitle = 'Move this pad to the trash';
     out.forgetPrompt = 'Clicking OK will move this pad to your trash. Are you sure?';
@@ -109,7 +110,7 @@ define(function () {
 
     out.newButton = 'New';
     out.newButtonTitle = 'Create a new pad';
-    out.uploadButton = 'Upload';
+    out.uploadButton = 'Upload files';
     out.uploadButtonTitle = 'Upload a new file to the current folder';
 
     out.saveTemplateButton = "Save as template";
@@ -178,6 +179,9 @@ define(function () {
     out.history_restoreDone = "Document restored";
     out.history_version = "Version:";
 
+    // Ckeditor links
+    out.openLinkInNewTab = "Open Link in New Tab";
+
     // Polls
 
     out.poll_title = "Zero Knowledge Date Picker";
@@ -240,8 +244,8 @@ define(function () {
     out.fm_templateName = "Templates";
     out.fm_searchName = "Search";
     out.fm_searchPlaceholder = "Search...";
-    out.fm_newButton = "New";
+    out.fm_newButton = "Add to this folder";
-    out.fm_newButtonTitle = "Create a new pad or folder";
+    out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
     out.fm_newFolder = "New folder";
     out.fm_newFile = "New pad";
     out.fm_folder = "Folder";

www/common/toolbar2.js

@@ -67,6 +67,11 @@ define([
             id: uid(),
         });
 
+        var parsed = Cryptpad.parsePadUrl(window.location.href);
+        if (typeof parsed.type === "string") {
+            $toolbar.addClass(parsed.type);
+        }
+
         var $topContainer = $('<div>', {'class': TOP_CLS});
         var $userContainer = $('<span>', {
             'class': USER_CLS
@@ -396,7 +401,6 @@ define([
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
-        // TODO: move these functions to toolbar or common?
         if (typeof config.title !== "object") {
             console.error("config.title", config);
             throw new Error("config.title is not an object");
@@ -413,6 +417,10 @@ define([
             'class': 'pencilIcon',
             'title': Messages.clickToEdit
         });
+        var $saveIcon = $('<span>', {
+            'class': 'saveIcon',
+            'title': Messages.saveTitle
+        }).hide();
         if (config.readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
         var $input = $('<input>', {
             type: 'text',
@@ -426,6 +434,11 @@ define([
                 style: 'font-family: FontAwesome;'
             });
             $pencilIcon.append($icon).appendTo($titleContainer);
+            var $icon2 = $('<span>', {
+                'class': 'fa fa-check readonly',
+                style: 'font-family: FontAwesome;'
+            });
+            $saveIcon.append($icon2).appendTo($titleContainer);
         }
 
         // Events
@@ -436,26 +449,34 @@ define([
             e.stopPropagation();
             return true;
         });
+        var save = function () {
+            var name = $input.val().trim();
+            if (name === "") {
+                name = $input.attr('placeholder');
+            }
+            Cryptpad.renamePad(name, function (err, newtitle) {
+                if (err) { return; }
+                $text.text(newtitle);
+                callback(null, newtitle);
+                $input.hide();
+                $text.show();
+                $pencilIcon.show();
+                $saveIcon.hide();
+                //$pencilIcon.css('display', '');
+            });
+        };
         $input.on('keyup', function (e) {
             if (e.which === 13 && toolbar.connected === true) {
-                var name = $input.val().trim();
+                save();
-                if (name === "") {
-                    name = $input.attr('placeholder');
-                }
-                Cryptpad.renamePad(name, null, function (err, newtitle) {
-                    if (err) { return; }
-                    $text.text(newtitle);
-                    callback(null, newtitle);
-                    $input.hide();
-                    $text.show();
-                    //$pencilIcon.css('display', '');
-                });
             } else if (e.which === 27) {
                 $input.hide();
                 $text.show();
+                $pencilIcon.show();
+                $saveIcon.hide();
                 //$pencilIcon.css('display', '');
             }
         });
+        $saveIcon.click(save);
 
         var displayInput = function () {
             if (toolbar.connected === false) { return; }
@@ -465,6 +486,8 @@ define([
             $input.val(inputVal);
             $input.show();
             $input.focus();
+            $pencilIcon.hide();
+            $saveIcon.show();
         };
         $text.on('click', displayInput);
         $pencilIcon.on('click', displayInput);
@@ -486,16 +509,16 @@ define([
             title: Messages.header_logoTitle,
             'class': "cryptpad-logo"
         }).append($imgTag);
-        var $span = $('<span>').text('CryptPad');
+        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) {
-                window.open('/');
+                window.open('/drive');
                 return;
             }
-            window.location = "/";
+            window.location = "/drive";
         };
 
         var onContext = function (e) { e.stopPropagation(); };

www/drive/file.css

@@ -227,6 +227,7 @@ span.fa-folder-open {
   display: flex;
   flex-flow: column;
   flex: 1;
+  min-width: 0;
 }
 #content {
   box-sizing: border-box;
@@ -461,6 +462,8 @@ span.fa-folder-open {
   z-index: 100;
   box-sizing: content-box;
   padding: 0 6px;
+  display: flex;
+  flex-flow: row;
   /* The container <div> - needed to position the dropdown content */
 }
 #driveToolbar .newPadContainer {
@@ -479,15 +482,10 @@ span.fa-folder-open {
   font-family: FontAwesome;
 }
 #driveToolbar button.element {
-  border-radius: 2px;
+  height: 26px;
-  background: #888;
+  width: 26px;
-  color: #eee;
+  padding: 0;
-  font-size: 14px;
+  box-sizing: border-box;
-  border: 1px solid #888;
-  font-weight: bold;
-}
-#driveToolbar button.element:hover {
-  background: #777;
 }
 #driveToolbar button.new {
   padding: 0 5px;
@@ -515,7 +513,7 @@ span.fa-folder-open {
   margin-right: 2px;
 }
 #driveToolbar .leftside {
-  width: 250px;
+  width: auto;
   margin: 0;
   padding: 0;
   display: inline-block;
@@ -527,6 +525,7 @@ span.fa-folder-open {
   float: right;
 }
 #driveToolbar .path {
+  flex: 1;
   width: 100%;
   height: 30px;
   line-height: 30px;

www/drive/file.less

@@ -276,7 +276,9 @@ span {
     display: flex;
     flex-flow: column;
     flex: 1;
-}
+    // Needed to avoid the folder's path to overflows
+    // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
+    min-width: 0;}
 #content {
     box-sizing: border-box;
     background: @content-bg;
@@ -533,6 +535,8 @@ span {
     z-index: 100;
     box-sizing: content-box;
     padding: 0 6px;
+    display: flex;
+    flex-flow: row;
 
     .newPadContainer {
         display: inline-block;
@@ -549,15 +553,10 @@ span {
             font-family: FontAwesome;
         }
         &.element {
-            border-radius: 2px;
+            height: 26px;
-            background: @toolbar-button-bg;
+            width: 26px;
-            color: @toolbar-button-fg;
+            padding: 0;
-            font-size: 14px;
+            box-sizing: border-box;
-            border: 1px solid @toolbar-button-border;
-            font-weight: bold;
-            &:hover {
-                background: @toolbar-button-bg-hover;
-            }
         }
         &.new {
             padding: 0 5px;
@@ -588,7 +587,7 @@ span {
     }
 
     .leftside {
-        width: 250px;
+        width: auto;
         margin: 0;
         padding: 0;
         display: inline-block;
@@ -600,6 +599,7 @@ span {
         float: right;
     }
     .path {
+        flex: 1;
         width: 100%;
         height: 30px;
         line-height: 30px;

www/drive/main.js

@@ -650,7 +650,10 @@ define([
         };
 
         var updatePathSize = function () {
-            $driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)');
+            return;
+            var $tb = $driveToolbar;
+            var w = $tree.width() + $tb.find('.leftside').width() + $tb.find('.rightside').width();
+            $driveToolbar.find('.path').css('max-width', 'calc(100vw - '+w+'px)');
         };
 
         var getSelectedPaths = function ($element) {
@@ -1339,10 +1342,10 @@ define([
             });
 
             var $listButton = $('<button>', {
-                'class': 'element'
+                'class': 'element btn btn-secondary'
             }).append($listIcon.clone());
             var $gridButton = $('<button>', {
-                'class': 'element'
+                'class': 'element btn btn-secondary'
             }).append($gridIcon.clone());
 
             $listButton.click(function () {
@@ -1381,6 +1384,12 @@ define([
                     content: Messages.fm_folder
                 });
                 options.push({tag: 'hr'});
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'uploadFile'},
+                    content: Messages.uploadButton
+                });
+                options.push({tag: 'hr'});
             }
             AppConfig.availablePadTypes.forEach(function (type) {
                 if (type === 'drive') { return; }
@@ -1427,6 +1436,20 @@ define([
                 $block.find('a.newFolder').click(function () {
                     filesOp.addFolder(currentPath, null, onCreated);
                 });
+                $block.find('a.uploadFile').click(function () {
+                    var $input = $('<input>', {
+                        'type': 'file',
+                        'style': 'display: none;'
+                    }).on('change', function (e) {
+                        var file = e.target.files[0];
+                        var ev = {
+                            target: $content[0]
+                        };
+                        APP.FM.handleFile(file, ev);
+                        if (callback) { callback(); }
+                    });
+                    $input.click();
+                });
             }
             $block.find('a.newdoc').click(function () {
                 var type = $(this).attr('data-type') || 'pad';
@@ -1437,16 +1460,6 @@ define([
             return $block;
         };
 
-        var createUploadButton = function () {
-            var inTrash = filesOp.isPathIn(currentPath, [TRASH]);
-            if (inTrash) { return; }
-            var data = {
-                FM: APP.FM,
-                target: $content[0]
-            };
-            return Cryptpad.createButton('upload', false, data);
-        };
-
         var hideNewButton = function () {
             $iframe.find('.dropdown-bar-content').hide();
         };
@@ -1620,8 +1633,8 @@ define([
             var $toolbar = $driveToolbar;
             $toolbar.html('');
             $('<div>', {'class': 'leftside'}).appendTo($toolbar);
-            $('<div>', {'class': 'rightside'}).appendTo($toolbar);
             $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
+            $('<div>', {'class': 'rightside'}).appendTo($toolbar);
             return $toolbar;
         };
 
@@ -1846,6 +1859,9 @@ define([
             }
             var $list = $('<ul>').appendTo($dirContent);
 
+            // NewButton can be undefined if we're in read only mode
+            $toolbar.find('.leftside').append(createNewButton(isInRoot));
+
             createTitle(path).appendTo($toolbar.find('.path'));
             updatePathSize();
 
@@ -1879,11 +1895,6 @@ define([
             }
             updateContextButton();
 
-            // NewButton can be undefined if we're in read only mode
-            $toolbar.find('.leftside').append(createNewButton(isInRoot));
-            $toolbar.find('.leftside').append(createUploadButton());
-
-
             var $folderHeader = getFolderListHeader();
             var $fileHeader = getFileListHeader(true);
 

www/file/file.css

@@ -3,6 +3,9 @@ body {
   margin: 0px;
   height: 100%;
 }
+#toolbar {
+  display: flex;
+}
 body {
   display: flex;
   flex-flow: column;
@@ -17,7 +20,6 @@ body {
   align-items: center;
 }
 .cryptpad-toolbar {
-  margin-bottom: 1px;
   padding: 0px;
   display: inline-block;
 }

www/file/file.less

@@ -7,6 +7,11 @@ html, body {
     margin: 0px;
     height: 100%;
 }
+
+#toolbar {
+    display: flex; // We need this to remove a 3px border at the bottom of the toolbar
+}
+
 body {
     display: flex;
     flex-flow: column;
@@ -21,7 +26,6 @@ body {
     align-items: center;
 }
 .cryptpad-toolbar {
-    margin-bottom: 1px;
     padding: 0px;
     display: inline-block;
 }

www/pad/inner.html

@@ -12,15 +12,19 @@
     }
     #cke_1_top {
         overflow: visible;
-        padding: 0 6px;
+        padding: 0px;
     }
     #cke_1_toolbox {
         display: inline-block;
         width: 100%;
+        background-color: #c1e7ff;
+    }
+    #cke_1_toolbox .cke_toolbar {
+        height: 28px;
+        padding: 2px 0;
     }
     #cke_1_top .cryptpad-toolbar {
-        margin-bottom: 1px;
+        padding: 0 6px;
-        padding: 0px;
         display: inline-block;
     }
     </style>

www/pad/links.js

@@ -1,6 +1,7 @@
-define(function () {
+define(['/common/cryptpad-common.js'], function (Cryptpad) {
     // Adds a context menu entry to open the selected link in a new tab.
     // See https://github.com/xwiki-contrib/application-ckeditor/commit/755d193497bf23ed874d874b4ae92fbee887fc10
+    var Messages = Cryptpad.Messages;
     return {
         addSupportForOpeningLinksInNewTab : function (Ckeditor) {
                 // Returns the DOM element of the active (currently focused) link. It has also support for linked image widgets.
@@ -35,7 +36,7 @@ define(function () {
                 });
                 if (typeof editor.addMenuItem === 'function') {
                     editor.addMenuItem('openLink', {
-                        label: 'Open Link in New Tab',
+                        label: Messages.openLinkInNewTab,
                         command: 'openLink',
                         group: 'link',
                         order: -1