One toolbar color per app

customize.dist/src/less/toolbar.less

@@ -21,7 +21,9 @@
         }
     }
 }
-
+.cke_reset_all * {
+    color: inherit;
+}
 .cryptpad-toolbar {
     @toolbar-green: #5cb85c;
 
@@ -29,7 +31,37 @@
     padding: 0px 6px;
 
     //background-color: #BBBBFF;
-    background-color: #FF0073;
+    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;
@@ -39,7 +71,6 @@
     .unselectable;
 
     font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
-    color: #000;
     width: 100%;
     z-index: 9001;
 
@@ -48,10 +79,6 @@
     }
 
     button {
-        font: @toolbar-button-font;
-        * {
-            font: @toolbar-button-font;
-        }
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
             color: #fff;
@@ -96,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;

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,10 +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: #FF0073;
+  background-color: #fff;
+  color: #000;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -109,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;
@@ -121,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,
@@ -174,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;

customize.dist/translations/messages.fr.js

@@ -108,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";
@@ -241,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";
@@ -393,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";
@@ -404,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

@@ -110,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";
@@ -244,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

www/drive/file.css

@@ -461,6 +461,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 +481,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 +512,7 @@ span.fa-folder-open {
   margin-right: 2px;
 }
 #driveToolbar .leftside {
-  width: 250px;
+  width: auto;
   margin: 0;
   padding: 0;
   display: inline-block;
@@ -527,6 +524,7 @@ span.fa-folder-open {
   float: right;
 }
 #driveToolbar .path {
+  flex: 1;
   width: 100%;
   height: 30px;
   line-height: 30px;

www/drive/file.less

@@ -533,6 +533,8 @@ span {
     z-index: 100;
     box-sizing: content-box;
     padding: 0 6px;
+    display: flex;
+    flex-flow: row;
 
     .newPadContainer {
         display: inline-block;
@@ -549,15 +551,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 +585,7 @@ span {
     }
 
     .leftside {
-        width: 250px;
+        width: auto;
         margin: 0;
         padding: 0;
         display: inline-block;
@@ -600,6 +597,7 @@ span {
         float: right;
     }
     .path {
+        flex: 1;
         width: 100%;
         height: 30px;
         line-height: 30px;

www/drive/main.js

@@ -650,7 +650,9 @@ define([
         };
 
         var updatePathSize = function () {
-            $driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)');
+            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 - 50px)');
         };
 
         var getSelectedPaths = function ($element) {
@@ -1339,10 +1341,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 +1383,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 +1435,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 +1459,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 +1632,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 +1858,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 +1894,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/pad/inner.html

@@ -17,7 +17,7 @@
     #cke_1_toolbox {
         display: inline-block;
         width: 100%;
-        background-color: lightgoldenrodyellow;
+        background-color: #c1e7ff;
     }
     #cke_1_toolbox .cke_toolbar {
         height: 28px;