Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/pages.js

@@ -278,10 +278,6 @@ define([
     };
     loadingScreen = loadingScreen; // TODO use this
 
-    Pages['/settings/'] = Pages['/settings/index.html'] = function () {
-        return h('div#container');
-    };
-
     Pages['/user/'] = Pages['/user/index.html'] = function () {
         return h('div#container');
     };
@@ -509,5 +505,13 @@ define([
         return loadingScreen();
     };
 
+    Pages['/settings/'] = Pages['/settings/index.html'] = function () {
+        return [
+            h('div#toolbar'),
+            h('div#container'),
+            loadingScreen()
+        ];
+    };
+
     return Pages;
 });

customize.dist/src/less/cryptpad.less

@@ -15,7 +15,6 @@ html.cp, .cp body {
     background-color: @page-white; //@base;
     color: @fore;
 
-    font-family: Ubuntu,Georgia,Cambria,serif;
     height: 100%;
 }
 .fa {
@@ -27,6 +26,11 @@ html.cp, .cp body {
 // override bootstrap colors
 .btn-primary {
     background-color: @cp-blue;
+    &:hover {
+        color: #fff;
+        background-color: #025aa5;
+        border-color: #01549b;
+    }
 }
 
 body {
@@ -567,10 +571,12 @@ noscript {
 
 /* Pin limit */
 .limit-container {
+    display: inline-flex;
+    flex-flow: column-reverse;
+    width: 100%;
+    margin-top: 20px;
     .cryptpad-limit-bar {
         display: inline-block;
-        height: 26px;
-        width: 200px;
         max-width: 40vw;
         margin: 3px;
         box-sizing: border-box;
@@ -578,8 +584,10 @@ noscript {
         background: white;
         position: relative;
         text-align: center;
-        line-height: 24px;
         vertical-align: middle;
+        width: ~"calc(100% - 6px)";
+        height: 25px;
+        line-height: 25px;
         .usage {
             height: 100%;
             display: inline-block;
@@ -602,12 +610,16 @@ noscript {
             color: black;
             text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
             z-index: 2;
-            font-size: 16px;
+            font-size: @main-font-size;
             font-weight: bold;
         }
     }
     .upgrade {
-        margin-left: 10px;
+        padding: 0;
+        line-height: 25px;
+        height: 25px;
+        margin: 0 3px;
+        border-radius: 0;
     }
 }
 
@@ -619,10 +631,10 @@ noscript {
     background-color: rgba(0,0,0,0.5);
     color: white;
     opacity: 0.7;
-    font-family: Ubuntu,Georgia,Cambria,serif;
     box-sizing: border-box;
     z-index:10000;
     display: none;
+    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     #uploadStatus {
         width: 80vw;
         border: 1px solid black;

customize.dist/src/less/mixins.less

@@ -1,3 +1,5 @@
+@import "/customize/src/less/variables.less";
+
 .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
     @font-face {
         font-family: @family;
@@ -76,8 +78,7 @@
         height: @width;
         justify-content: center;
         align-items: center;
-        margin-right: 5px;
+        border-radius: @width / 2px;
-        border-radius: @width / 30px;
         overflow: hidden;
         box-sizing: content-box;
     }
@@ -85,7 +86,7 @@
         .unselectable();
         background: white;
         color: black;
-        font-size: 40px;
+        font-size: @width/1.2;
     }
     .right-col {
         flex: 1;
@@ -118,3 +119,21 @@
     }
     }
 }
+
+.leftsideCategory {
+    .unselectable();
+    padding: 5px 20px;
+    margin: 15px 0;
+    cursor: pointer;
+    height: @toolbar-line-height;
+    line-height: @toolbar-line-height - 10px;
+    .fa {
+        width: 25px;
+    }
+    &:hover {
+        background: rgba(0,0,0,0.05);
+    }
+    &.active {
+        background: white;
+    }
+}

customize.dist/src/less/toolbar.less

@@ -24,6 +24,7 @@
 .friendsColor { color: @toolbar-friends-bg; }
 .whiteboardColor { color: @toolbar-whiteboard-bg; }
 .driveColor { color: @toolbar-drive-bg; }
+.settingsColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
 
 .toolbar-container {
@@ -56,7 +57,7 @@
 }
 
 body .userlist-drawer {
-    font: normal normal normal 16px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
     min-width: 175px;
     width: 175px;
     display: block;
@@ -95,7 +96,7 @@ body .userlist-drawer {
     }
 
     & > p {
-        font: normal normal normal 16px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+        font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
         margin: 0;
         padding: 0;
         display: block;
@@ -110,8 +111,9 @@ body .userlist-drawer {
             padding: 5px;
             margin: 2px 0;
             background: rgba(0,0,0,0.1);
-            .avatar(50px);
+            .avatar(30px);
             .default, media-tag {
+                margin-right: 5px;
                 border: 1px solid black;
             }
         }
@@ -143,7 +145,7 @@ body {
                 }
             }
             .cryptpad-spinner, .cryptpad-state {
-                font-size: 16px;
+                font-size: @main-font-size;
                 color: @color;
             }
             .cryptpad-limit {
@@ -261,6 +263,11 @@ body {
         @color: @toolbar-friends-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-settings {
+        @bgcolor: @toolbar-settings-bg;
+        @color: @toolbar-settings-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 
@@ -465,7 +472,7 @@ body .cryptpad-toolbar {
     }
 
     button, select, .rightside-element {
-        height: 32px;
+        height: @toolbar-line-height;
         box-sizing: border-box;
         padding: 3px 10px;
         margin: 0;
@@ -575,7 +582,7 @@ body .cryptpad-toolbar {
                     flex: auto;
                     width: 100%;
                     order: 10;
-                    height: 32px;
+                    height: @toolbar-line-height;
                     line-height: initial;
                     margin: 0;
                     .hoverable {
@@ -586,24 +593,24 @@ body .cryptpad-toolbar {
                         display: inline-block;
                         overflow: hidden;
                         text-overflow: ellipsis;
-                        font-size: 16px;
+                        font-size: @main-font-size;
-                        height: 32px;
+                        height: @toolbar-line-height;
                         box-sizing: border-box;
                         line-height: 20px;
                     }
                     .pencilIcon, .saveIcon {
                         box-sizing: border-box;
-                        height: 32px;
+                        height: @toolbar-line-height;
-                        line-height: 16px;
+                        line-height: @main-font-size;
                         display: inline-block;
 
                         .fa {
-                            font-size: 16px;
+                            font-size: @main-font-size;
                         }
                     }
                     input {
-                        height: 32px;
+                        height: @toolbar-line-height;
-                        font-size: 16px;
+                        font-size: @main-font-size;
                         flex: 1;
                         max-width: none;
                     }
@@ -640,6 +647,9 @@ body .cryptpad-toolbar {
             line-height: 25px;
             white-space: nowrap;
         }
+        .pageTitle {
+            padding: 0 5px;
+        }
         .pencilIcon, .saveIcon {
             display: flex;
             align-items: center;
@@ -785,7 +795,7 @@ body .cryptpad-toolbar {
             vertical-align: top;
         }
         .cryptpad-upgrade {
-            height: 32px;
+            height: @toolbar-line-height;
             vertical-align: middle;
             cursor: pointer;
         }
@@ -819,7 +829,10 @@ body .cryptpad-toolbar {
                     font-size: 32px;
                 }
                 &.avatar {
-                    .avatar(64px);
+                    .avatar(48px);
+                    media-tag {
+                        margin: 8px;
+                    }
                     border: 0;
                 }
             }
@@ -835,7 +848,7 @@ body .cryptpad-toolbar {
     }
 }
 .cryptpad-toolbar-leftside {
-    height: 32px;
+    height: @toolbar-line-height;
     &:empty {
         height: 0;
     }
@@ -870,7 +883,7 @@ body .cryptpad-toolbar {
     }
 }
 .cryptpad-toolbar-rightside {
-    min-height: 32px;
+    min-height: @toolbar-line-height;
     overflow: hidden;
     &:empty {
         min-height: 0;
@@ -890,7 +903,7 @@ body .cryptpad-toolbar {
         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
         position: absolute;
         right:0px;
-        margin-top: 32px;
+        margin-top: @toolbar-line-height;
         min-width: 50px;
         background: @dropdown-bg;
         display: flex;
@@ -903,7 +916,7 @@ body .cryptpad-toolbar {
         &> span {
             box-sizing: border-box;
             min-width: 150px;
-            height: 32px;
+            height: @toolbar-line-height;
             border-radius: 0;
             border: 0;
         }

customize.dist/src/less/variables.less

@@ -7,6 +7,8 @@
 @old-base: #302B28;
 @old-fore: #fafafa;
 
+@main-font-size: 16px;
+
 @cp-green: #46E981;
 @cp-accent: lighten(@cp-green, 20%);
 
@@ -73,7 +75,7 @@
 
 // Dropdown
 
-@dropdown-font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@dropdown-font: @main-font-size -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 @dropdown-bg: #f9f9f9;
 @dropdown-color: black;
 @dropdown-bg-hover: #f1f1f1;
@@ -101,6 +103,8 @@
 @toolbar-friends-color: #fff;
 @toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;
+@toolbar-settings-bg: #0087ff;
+@toolbar-settings-color: #fff;
 
 
 @topbar-back: #fff;
@@ -129,3 +133,5 @@
     -ms-user-select: none;
     user-select: none;
 }
+
+@toolbar-line-height: 32px;

customize.dist/template.js

@@ -12,7 +12,7 @@ $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
-        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive)\/$/.test(location.pathname);
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -160,6 +160,9 @@ $(function () {
                 } else if (/slide/.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/slide/main.js' ], ready);
+                } else if (/^\/settings\//.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/settings/main.js', ], ready);
                 }
             });
 
@@ -173,9 +176,7 @@ $(function () {
     ], function () {
         $body.append($topbar).append($main).append($footer);
 
-        if (/^\/settings\//.test(pathname)) {
+        if (/^\/profile\//.test(pathname)) {
-            require([ '/settings/main.js', ], function () {});
-        } else if (/^\/profile\//.test(pathname)) {
             require([ '/profile/main.js'], function () {});
         } else if (/^\/user\//.test(pathname)) {
             require([ '/user/main.js'], function () {});

customize.dist/translations/messages.fr.js

@@ -9,7 +9,7 @@ define(function () {
     out.type.code = 'Code';
     out.type.poll = 'Sondage';
     out.type.slide = 'Présentation';
-    out.type.drive = 'Drive';
+    out.type.drive = 'CryptDrive';
     out.type.whiteboard = "Tableau Blanc";
     out.type.file = "Fichier";
     out.type.media = "Média";
@@ -294,7 +294,7 @@ define(function () {
     out.updated_0_fm_info_trash = "Vider la corbeille permet de libérer de l'espace dans votre CryptDrive";
     out.fm_info_trash = out.updated_0_fm_info_trash;
     out.fm_info_allFiles = 'Contient tous les fichiers de "Documents", "Fichiers non triés" et "Corbeille". Vous ne pouvez pas supprimer ou déplacer des fichiers depuis cet endroit.'; // Same here
-    out.fm_info_anonymous = 'Vous n\'êtes pas connectés, ces pads risquent donc d\'être supprimés (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">découvrez pourquoi</a>). ' +
+    out.fm_info_anonymous = 'Vous n\'êtes pas connecté, ces pads risquent donc d\'être supprimés (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">découvrez pourquoi</a>). ' +
                             '<a href="/register/">Inscrivez-vous</a> ou <a href="/login/">connectez-vous</a> pour les maintenir en vie.';
     out.fm_alert_backupUrl = "Lien de secours pour ce CryptDrive.<br>" +
                              "Il est <strong>fortement recommandé</strong> de garder ce lien pour vous-même.<br>" +
@@ -375,27 +375,36 @@ define(function () {
     ];
 
     // Settings
+    out.settings_cat_account = "Compte";
+    out.settings_cat_drive = "CryptDrive";
     out.settings_title = "Préférences";
     out.settings_save = "Sauver";
+
+    out.settings_backupCategory = "Sauvegarde";
     out.settings_backupTitle = "Créer ou restaurer une sauvegarde de vos données";
-    out.settings_backup = "Créer une sauvegarde";
+    out.settings_backup = "Sauvegarder";
-    out.settings_restore = "Restaurer une sauvegarde";
+    out.settings_restore = "Restaurer";
-    out.settings_resetTitle = "Vider votre drive";
+
+    out.settings_resetNewTitle = "Vider CryptDrive";
+    out.settings_resetButotn = "Supprimer";
     out.settings_reset = "Supprimer tous les fichiers et dossiers de votre CryptDrive";
     out.settings_resetPrompt = "Cette action va supprimer tous les pads de votre drive.<br>"+
                                "Êtes-vous sûr de vouloir continuer ?<br>" +
                                "Tapez “<em>I love CryptPad</em>” pour confirmer.";
     out.settings_resetDone = "Votre drive est désormais vide!";
     out.settings_resetError = "Texte de vérification incorrect. Votre CryptDrive n'a pas été modifié.";
-    out.settings_resetTips = "Astuces et informations dans CryptDrive";
+
+    out.settings_resetTipsAction  ="Réinitialiser";
+    out.settings_resetTips = "Astuces";
     out.settings_resetTipsButton = "Réinitialiser les astuces visibles dans CryptDrive";
     out.settings_resetTipsDone = "Toutes les astuces sont de nouveau visibles.";
 
-    out.settings_importTitle = "Importer les pads récents de ce navigateur dans mon CryptDrive";
+    out.settings_importTitle = "Importer les pads récents de ce navigateur dans votre CryptDrive";
     out.settings_import = "Importer";
     out.settings_importConfirm = "Êtes-vous sûr de vouloir importer les pads récents de ce navigateur dans le CryptDrive de votre compte utilisateur ?";
     out.settings_importDone = "Importation terminée";
 
+    out.settings_userFeedbackTitle = "Retour d'expérience";
     out.settings_userFeedbackHint1 = "CryptPad peut envoyer des retours d'expérience très limités vers le serveur, de manière à nous permettre d'améliorer l'expérience des utilisateurs. ";
     out.settings_userFeedbackHint2 = "Le contenu de vos pads et les clés de déchiffrement ne seront jamais partagés avec le serveur.";
     out.settings_userFeedback = "Activer l'envoi de retours d'expérience";
@@ -409,10 +418,12 @@ define(function () {
     out.settings_pinningError = "Un problème est survenu";
     out.settings_usageAmount = "Vos pads épinglés occupent {0} Mo";
 
+    out.settings_logoutEverywhereButton = "Se déconnecter";
     out.settings_logoutEverywhereTitle = "Se déconnecter partout";
-    out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions.";
+    out.settings_logoutEverywhere = "Se déconnecter de force de toutes les autres sessions.";
     out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils.";
 
+    out.upload_title = "Hébergement de fichiers";
     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'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?";
     out.upload_success = "Votre fichier ({0}) a été importé avec succès et ajouté à votre CryptDrive.";

customize.dist/translations/messages.js

@@ -9,7 +9,7 @@ define(function () {
     out.type.code = 'Code';
     out.type.poll = 'Poll';
     out.type.slide = 'Presentation';
-    out.type.drive = 'Drive';
+    out.type.drive = 'CryptDrive';
     out.type.whiteboard = 'Whiteboard';
     out.type.file = 'File';
     out.type.media = 'Media';
@@ -387,27 +387,36 @@ define(function () {
     out.register_alreadyRegistered = "This user already exists, do you want to log in?";
 
     // Settings
+    out.settings_cat_account = "Account";
+    out.settings_cat_drive = "CryptDrive";
     out.settings_title = "Settings";
     out.settings_save = "Save";
+
+    out.settings_backupCategory = "Backup";
     out.settings_backupTitle = "Backup or restore all your data";
     out.settings_backup = "Backup";
     out.settings_restore = "Restore";
-    out.settings_resetTitle = "Clean your drive";
+
+    out.settings_resetNewTitle = "Clean CryptDrive";
+    out.settings_resetButton = "Remove";
     out.settings_reset = "Remove all the files and folders from your CryptDrive";
     out.settings_resetPrompt = "This action will remove all the pads from your drive.<br>"+
                                "Are you sure you want to continue?<br>" +
                                "Type “<em>I love CryptPad</em>” to confirm.";
     out.settings_resetDone = "Your drive is now empty!";
     out.settings_resetError = "Incorrect verification text. Your CryptDrive has not been changed.";
-    out.settings_resetTips = "Tips in CryptDrive";
+
+    out.settings_resetTipsAction = "Reset";
+    out.settings_resetTips = "Tips";
     out.settings_resetTipsButton = "Reset the available tips in CryptDrive";
     out.settings_resetTipsDone = "All the tips are now visible again.";
 
-    out.settings_importTitle = "Import this browser's recent pads in my CryptDrive";
+    out.settings_importTitle = "Import this browser's recent pads in your CryptDrive";
     out.settings_import = "Import";
     out.settings_importConfirm = "Are you sure you want to import recent pads from this browser to your user account's CryptDrive?";
     out.settings_importDone = "Import completed";
 
+    out.settings_userFeedbackTitle = "Feedback";
     out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience. ";
     out.settings_userFeedbackHint2 = "Your pad's content will never be shared with the server.";
     out.settings_userFeedback = "Enable user feedback";
@@ -421,10 +430,12 @@ define(function () {
     out.settings_pinningError = "Something went wrong";
     out.settings_usageAmount = "Your pinned pads occupy {0}MB";
 
+    out.settings_logoutEverywhereButton = "Log out";
     out.settings_logoutEverywhereTitle = "Log out everywhere";
-    out.settings_logoutEverywhere = "Log out of all other web sessions";
+    out.settings_logoutEverywhere = "Force log out of all other web sessions";
     out.settings_logoutEverywhereConfirm = "Are you sure? You will need to log in with all your devices.";
 
+    out.upload_title = "File upload";
     out.upload_serverError = "Server Error: unable to upload your file at this time.";
     out.upload_uploadPending = "You already have an upload in progress. Cancel it and upload your new file?";
     out.upload_success = "Your file ({0}) has been successfully uploaded and added to your drive.";

www/code/inner.js

@@ -6,6 +6,7 @@ define([
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
+    'less!/customize/src/less/cryptpad.less',
     'css!cm/lib/codemirror.css',
     'css!cm/addon/dialog/dialog.css',
     'css!cm/addon/fold/foldgutter.css',

www/code/main.js

@@ -364,6 +364,21 @@ define([
                     return;
                 }
                 UserList.getLastName(toolbar.$userNameButton, isNew);
+                var fmConfig = {
+                    dropArea: $iframe.find('.CodeMirror'),
+                    body: $iframe.find('body'),
+                    onUploaded: function (ev, data) {
+                        //var cursor = editor.getCursor();
+                        //var cleanName = data.name.replace(/[\[\]]/g, '');
+                        //var text = '!['+cleanName+']('+data.url+')';
+                        var parsed = Cryptpad.parsePadUrl(data.url);
+                        var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                        var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                        var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                        editor.replaceSelection(mt);
+                    }
+                };
+                APP.FM = Cryptpad.createFileManager(fmConfig);
             };
 
             config.onRemote = function () {

www/common/cryptpad-common.js

@@ -1657,7 +1657,7 @@ define([
                 content: Messages.user_rename
             });
         }
-        if (account) {
+        if (account && parsed && (!parsed.type || parsed.type !== 'profile')) {
             options.push({
                 tag: 'a',
                 attributes: {'class': 'profile'},

www/common/diffMarked.js

@@ -143,7 +143,17 @@ define([
     DiffMd.apply = function (newHtml, $content) {
         var id = $content.attr('id');
         if (!id) { throw new Error("The element must have a valid id"); }
-        var $div = $('<div>', {id: id}).append(newHtml);
+        var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
+        var newHtmlFixed = newHtml.replace(pattern, function (all, tag, src) {
+            var mt = tag;
+            if (mediaMap[src]) {
+                mediaMap[src].forEach(function (n) {
+                    mt += n.outerHTML;
+                });
+            }
+            return mt + '</media-tag>';
+        });
+        var $div = $('<div>', {id: id}).append(newHtmlFixed);
         var Dom = domFromHTML($('<div>').append($div).html());
         var oldDom = domFromHTML($content[0].outerHTML);
         var patch = makeDiff(oldDom, Dom, id);
@@ -154,9 +164,11 @@ define([
             var $mts = $content.find('media-tag:not(:has(*))');
             $mts.each(function (i, el) {
                 MediaTag(el);
+                console.log(el.outerHTML);
                 var observer = new MutationObserver(function(mutations) {
                     mutations.forEach(function(mutation) {
                         if (mutation.type === 'childList') {
+                            console.log(el.outerHTML);
                             var list_values = [].slice.call(el.children);
                             mediaMap[el.getAttribute('src')] = list_values;
                         }

www/common/toolbar2.js

@@ -600,6 +600,21 @@ define([
         return $titleContainer;
     };
 
+    var createPageTitle = function (toolbar, config) {
+        if (config.title || !config.pageTitle) { return; }
+        var $titleContainer = $('<span>', {
+            id: 'toolbarTitle',
+            'class': TITLE_CLS
+        }).appendTo(toolbar.$top);
+
+        var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
+
+        // Buttons
+        $('<span>', {
+            'class': 'title pageTitle'
+        }).appendTo($hoverable).text(config.pageTitle);
+    };
+
     var createLinkToMain = function (toolbar) {
         var $linkContainer = $('<span>', {
             'class': "cryptpad-link"
@@ -823,7 +838,6 @@ define([
                             console.error(err);
                             return;
                         }
-                        updateDisplayName(toolbar, config);
                         Cryptpad.changeDisplayName(newName, true);
                     });
                 });
@@ -831,6 +845,7 @@ define([
         });
         Cryptpad.onDisplayNameChanged(function () {
             Cryptpad.findCancelButton().click();
+            updateDisplayName(toolbar, config);
         });
 
         updateDisplayName(toolbar, config);
@@ -1020,6 +1035,7 @@ define([
         tb['share'] = createShare;
         tb['fileshare'] = createFileShare;
         tb['title'] = createTitle;
+        tb['pageTitle'] = createPageTitle;
         tb['lag'] = createLag;
         tb['spinner'] = createSpinner;
         tb['state'] = createState;

www/drive/file.less

@@ -37,7 +37,7 @@ html, body {
     padding: 0;
     margin: 0;
     position: relative;
-    font-size: 16px;
+    font-size: @main-font-size;
     overflow: auto;
 }
 
@@ -72,7 +72,7 @@ img.icon {
             width: 100%;
             max-width: unset;
             border-bottom: 1px solid @toolbar-border-col;
-            .category2 {
+            .category {
                 margin-top: 0.5em;
             }
         }
@@ -93,8 +93,6 @@ div:focus {
 }
 
 .fa {
-    /*min-width: 17px;*/
-    margin-right: 3px;
     font-family: FontAwesome;
 }
 
@@ -111,17 +109,13 @@ li {
     user-select: none;
 }
 
-.folder, .file {
-    margin-right: 5px;
-}
-
 .contextMenu {
     display: none;
     position: absolute;
     z-index: 500;
     li {
         padding: 0;
-        font-size: 16px;
+        font-size: @main-font-size;
         a {
             cursor: pointer;
         }
@@ -164,6 +158,7 @@ span {
 
 
 #tree {
+    font-size: @main-font-size;
     //border-right: 1px solid #ccc;
     box-sizing: border-box;
     background: @tree-bg;
@@ -187,9 +182,12 @@ span {
         margin-bottom: 3px;
         margin-left: -2px;
     }
-    li {
+    .docTree {
-        padding: 0 0 0 5px;
+        margin-top: 20px;
+        padding: 0 0 0 20px;
         cursor: auto;
+        &li, li {
+            padding: 0;
             &.collapsed ul {
                 display: none;
             }
@@ -197,38 +195,63 @@ span {
                 width: ~"calc(100% - 30px)";
             }
             & > span.element-row {
-            min-width: ~"calc(100% + 5px)";
+                overflow: hidden;
+                text-overflow: ellipsis;
+                //min-width: ~"calc(100% + 5px)";
+                .leftsideCategory();
+                width: ~"calc(100% + 5px)";
+                margin: 0;
+                margin-bottom: -6px;
                 display: inline-block;
                 cursor: pointer;
                 margin-left: -5px;
                 padding-left: 5px;
             }
             & > span.element-row:not(.selected):not(.active):hover {
-            background-color: @drive-hover;
+                //background-color: @drive-hover;
+            }
         }
     }
     span.element {
         cursor: pointer;
     }
-    .active {
+    /*.active {
         &:not(.selected):not(.droppable) {
             background-color: darken(@drive-hover, 15%);
         }
-    }
+    }*/
-    .category2 {
+    .category {
-        margin-top: 2em;
+        margin: 0;
+        margin-top: 15px;
         .root {
             &> .fa {
                 min-width: 30px;
                 cursor: pointer;
             }
         }
+        li {
+            padding: 0;
+            .element-row {
+                display: block;
+                padding-left: 20px;
+                .leftsideCategory();
+                margin: 0;
+                .fa {
+                    width: 25px;
+                }
+            }
+        }
+    }
+    .category:last-child {
+        margin-bottom: 20px;
     }
     #allfilesTree {
         margin-top: 0;
     }
+    .limit-container {
+        margin-top: 0;
+    }
     #searchContainer {
-        margin-bottom: 20px;
         text-align: center;
         padding: 0;
         position: relative;
@@ -243,7 +266,7 @@ span {
             border: 0;
             border-right: 1px solid lighten(@toolbar-drive-bg, 16%);
             //border-right: 0;
-            height: 32px;
+            height: @toolbar-line-height;
             padding: 0 5px;
             padding-left: 45px;
             &:focus {
@@ -262,9 +285,9 @@ span {
         font-size: 14px;
         position: absolute;
         left: -20px;
-        top: 9px;
+        top: 10px;
-        width: auto;
+        width: 11px !important;
-        height: 11px;
+        height: 11px !important;
         padding: 0;
         margin: 0;
         background: white;
@@ -277,7 +300,7 @@ span {
     }
 
     // Expand/collapse lines
-    ul {
+    .docTree ul {
         margin: 0px 0px 0px 10px;
         list-style: none;
         padding-left: 10px;
@@ -286,13 +309,13 @@ span {
             &:before {
                 position: absolute;
                 left: -15px;
-                top: -0.25em;
+                top: -11px;
                 content: '';
                 display: block;
                 border-left: 1px solid @tree-lines-col;
-                height: 1em;
+                height: ~"calc(1em + 11px)";
                 border-bottom: 1px solid @tree-lines-col;
-                width: 17.5px;
+                width: 15px;
             }
             &:after {
                 position: absolute;
@@ -317,27 +340,6 @@ span {
             }
         }
     }
-    .limit-container {
-        display: inline-flex;
-        flex-flow: column-reverse;
-        width: 100%;
-        margin-top: 20px;
-        .upgrade {
-            padding: 0;
-            line-height: 25px;
-            height: 25px;
-            margin: 0 3px;
-            border-radius: 0;
-        }
-        .cryptpad-limit-bar {
-            width: ~"calc(100% - 6px)";
-            height: 25px;
-            line-height: 25px;
-            .usage {
-                height: 100%;
-            }
-        }
-    }
 }
 
 /* CONTENT */
@@ -347,7 +349,8 @@ span {
     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;}
+    min-width: 0;
+}
 #content {
     box-sizing: border-box;
     background: @content-bg;
@@ -535,8 +538,10 @@ span {
                 padding: 0 5px;
                 display: table-cell;
             }
+            &:not(.header) {
+                height: @toolbar-line-height;
+                line-height: @toolbar-line-height;
             }
-        li {
             &.header {
                 cursor: default;
                 color: @table-header-fg;
@@ -611,7 +616,7 @@ span {
     //flex-flow: row;
     z-index: 100;
     box-sizing: border-box;
-    height: 32px;
+    height: @toolbar-line-height;
     padding: 0;
     display: flex;
     flex-flow: row;
@@ -640,20 +645,20 @@ span {
             margin: 0;
         }
         button {
-            height: 32px;
+            height: @toolbar-line-height;
             padding: 0 10px;
             border: none;
             border-radius: 0;
             box-sizing: border-box;
             background: transparent;
-            font-size: 17px;
+            font-size: @main-font-size;
             color: @toolbar-drive-color;
             transition: all 0.15s;
             .drawer {
                 display: none;
             }
             .fa, span {
-                font-size: 17px;
+                font-size: @main-font-size;
             }
             &:hover {
                 background: @toolbar-drive-bg;
@@ -686,7 +691,7 @@ span {
             }
             .buttonTitle {
                 display: inline-flex;
-                height: 32px;
+                height: @toolbar-line-height;
                 align-items: center;
                 span:not(.fa) {
                     line-height: 23px;
@@ -718,8 +723,8 @@ span {
     .path {
         flex: 1;
         width: 100%;
-        height: 32px;
+        height: @toolbar-line-height;
-        line-height: 32px;
+        line-height: @toolbar-line-height;
         cursor: default;
         width: auto;
         overflow: hidden;
@@ -729,9 +734,9 @@ span {
         text-align: left;
         .element {
             display: inline-block;
-            height: 32px;
+            height: @toolbar-line-height;
-            line-height: 32px;
+            line-height: @toolbar-line-height;
-            font-size: 17px;
+            font-size: @main-font-size;
             padding: 0 5px;
             border: 0;
             background: darken(@toolbar-drive-bg, 10%);

www/drive/main.js

@@ -161,7 +161,7 @@ define([
     //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
     var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
     var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
-    var $trashIcon = $('<span>', {"class": "fa fa-trash"});
+    var $trashIcon = $('<span>', {"class": "fa fa-trash-o"});
     var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
     //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
     var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
@@ -1650,8 +1650,10 @@ define([
         // and they don't hav a hierarchical structure (folder/subfolders)
         var displayHrefArray = function ($container, rootName, draggable) {
             var unsorted = files[rootName];
+            if (unsorted.length) {
                 var $fileHeader = getFileListHeader(false);
                 $container.append($fileHeader);
+            }
             var keys = unsorted;
             var sortBy = Cryptpad.getLSAttribute(SORT_FILE_BY);
             sortBy = sortBy === "" ? sortBy = 'name' : sortBy;
@@ -2011,7 +2013,9 @@ define([
             }
             $elementRow.data('path', path);
             addDragAndDropHandlers($elementRow, path, true, droppable);
-            if (active) { $elementRow.addClass('active'); }
+            if (active) {
+                $elementRow.addClass('active');
+            }
             return $element;
         };
 
@@ -2031,7 +2035,7 @@ define([
                 var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, false, isRootOpened);
                 $rootElement.addClass('root');
                 $rootElement.find('>.element-row').contextmenu(openDirectoryContextMenu);
-                $('<ul>').append($rootElement).appendTo($container);
+                $('<ul>', {'class': 'docTree'}).append($rootElement).appendTo($container);
                 $container = $rootElement;
             } else if (filesOp.isFolderEmpty(root)) { return; }
 
@@ -2061,7 +2065,7 @@ define([
             var isOpened = filesOp.comparePath(path, currentPath);
             var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
             $element.addClass('root');
-            var $list = $('<ul>', { id: 'templateTree', 'class': 'category2' }).append($element);
+            var $list = $('<ul>', { id: 'templateTree', 'class': 'category' }).append($element);
             $container.append($list);
         };
 
@@ -2070,7 +2074,7 @@ define([
             var isOpened = filesOp.comparePath(path, currentPath);
             var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
             $allfilesElement.addClass('root');
-            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category2' }).append($allfilesElement);
+            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category' }).append($allfilesElement);
             $container.append($allfilesList);
         };
 
@@ -2080,7 +2084,7 @@ define([
             var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
             $trashElement.addClass('root');
             $trashElement.find('>.element-row').contextmenu(openTrashTreeContextMenu);
-            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category2' }).append($trashElement);
+            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category' }).append($trashElement);
             $container.append($trashList);
         };
 
@@ -2719,7 +2723,7 @@ define([
 
             var userList = APP.userList = info.userList;
             var config = {
-                displayed: ['useradmin', 'spinner', 'lag', 'state', 'limit', 'newpad'],
+                displayed: ['useradmin', 'spinner', 'lag', 'state', 'limit', 'newpad', 'pageTitle'],
                 userList: {
                     list: userList,
                     userNetfluxId: info.myID
@@ -2729,7 +2733,8 @@ define([
                 ifrw: window,
                 realtime: info.realtime,
                 network: info.network,
-                $container: APP.$bar
+                $container: APP.$bar,
+                pageTitle: Messages.type.drive
             };
             var toolbar = APP.toolbar = Toolbar.create(config);
 

www/file/main.js

@@ -67,9 +67,15 @@ define([
             displayed: displayed,
             ifrw: ifrw,
             common: Cryptpad,
-            hideDisplayName: true,
+            //hideDisplayName: true,
-            $container: $bar
+            $container: $bar,
         };
+
+        if (uploadMode) {
+            displayed.push('pageTitle');
+            configTb.pageTitle = Messages.upload_title;
+        }
+
         var toolbar = APP.toolbar = Toolbar.create(configTb);
         toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
 
@@ -83,6 +89,7 @@ define([
                 if (e) { return void console.error(e); }
                 var title = document.title = metadata.name;
                 Title.updateTitle(title || Title.defaultTitle);
+                toolbar.addElement(['pageTitle'], {pageTitle: title});
 
                 var displayFile = function (ev, sizeMb) {
                     var $mt = $dlview.find('media-tag');

www/friends/main.less

@@ -67,7 +67,7 @@ body {
 }
 
 #friendList .friend, #messaging .header {
-    .avatar(50px);
+    .avatar(30px);
     &.avatar {
         display: flex;
     }

www/profile/main.less

@@ -30,7 +30,7 @@
             height: 300px;
             width: 300px;
             border: 1px solid black;
-            border-radius: 10px;
+            border-radius: 150px;
             overflow: hidden;
             position: relative;
             .delete {

www/settings/main.js

@@ -3,14 +3,15 @@ define([
     '/common/cryptpad-common.js',
     '/common/cryptget.js',
     '/common/mergeDrive.js',
+    '/common/toolbar2.js',
     '/bower_components/file-saver/FileSaver.min.js',
-    '/customize/header.js',
 
     'less!/customize/src/less/cryptpad.less',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/customize/src/less/toolbar.less',
     'less!/settings/main.less',
-], function ($, Cryptpad, Crypt, Merge) {
+], function ($, Cryptpad, Crypt, Merge, Toolbar) {
     var saveAs = window.saveAs;
 
     var USERNAME_KEY = 'cryptpad.username';
@@ -34,36 +35,45 @@ define([
         });
     };
 
-    // Title block
+    var categories = {
-    var createTitle = function () {
+        'account': [
-        return $('<h1>').text(Messages.settings_title);
+            'infoBlock',
+            'displayName',
+            'languageSelector',
+            'logoutEverywhere',
+            'resetTips',
+            'userFeedback'
+        ],
+        'drive': [
+            'backupDrive',
+            'importLocalPads',
+            'resetDrive'
+        ]
     };
 
     var createInfoBlock = function (store) {
         var obj = store.proxy;
         var $div = $('<div>', {'class': 'infoBlock'});
 
+        var $account = $('<div>', {'class': 'element'}).appendTo($div);
         var accountName = obj.login_name || localStorage[Cryptpad.userNameKey];
-        var $label = $('<span>', {'class': 'label'}).text(Messages.user_accountName + ':');
+        var $label = $('<span>', {'class': 'label'}).text(Messages.user_accountName);
         var $name = $('<span>').text(accountName || '');
         if (!accountName) {
             $label.text('');
             $name.text(Messages.settings_anonymous);
         }
-
+        $account.append($label).append($name);
-        $div.append($label).append($name);
 
         var publicKey = obj.edPublic;
         if (publicKey) {
+            var $key = $('<div>', {'class': 'element'}).appendTo($div);
             var userHref = Cryptpad.getUserHrefFromKeys(accountName, publicKey);
             var $pubLabel = $('<span>', {'class': 'label'})
-                .text(Messages.settings_publicSigningKey + ':');
+                .text(Messages.settings_publicSigningKey);
             var $pubKey = $('<input>', {type: 'text', readonly: true})
-                .css({
-                    width: '28em'
-                })
                 .val(userHref);
-            $div.append('<br>').append($pubLabel).append($pubKey);
+            $key.append($pubLabel).append($pubKey);
         }
 
         return $div;
@@ -72,14 +82,14 @@ define([
     // Create the block containing the display name field
     var createDisplayNameInput = function (store) {
         var obj = store.proxy;
-        var $div = $('<div>', {'class': 'displayName'});
+        var $div = $('<div>', {'class': 'displayName element'});
         $('<label>', {'for' : 'displayName'}).text(Messages.user_displayName).appendTo($div);
-        $('<br>').appendTo($div);
+        var $inputBlock = $('<div>', {'class': 'inputBlock'}).appendTo($div);
         var $input = $('<input>', {
             'type': 'text',
             'id': 'displayName',
-            'placeholder': Messages.anonymous}).appendTo($div);
+            'placeholder': Messages.anonymous}).appendTo($inputBlock);
-        var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($div);
+        var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($inputBlock);
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
 
@@ -91,6 +101,7 @@ define([
             displayName = $input.val();
             if (displayName === obj[USERNAME_KEY]) { return; }
             obj[USERNAME_KEY] = displayName;
+            Cryptpad.changeDisplayName(displayName);
             $spinner.show();
             Cryptpad.whenRealtimeSyncs(store.info.realtime, function () {
                 $spinner.hide();
@@ -115,11 +126,12 @@ define([
         return $div;
     };
     var createResetTips = function () {
-        var $div = $('<div>', {'class': 'resetTips'});
+        var $div = $('<div>', {'class': 'resetTips element'});
         $('<label>', {'for' : 'resetTips'}).text(Messages.settings_resetTips).appendTo($div);
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
-        var $button = $('<button>', {'id': 'resetTips', 'class': 'btn btn-primary'})
             .text(Messages.settings_resetTipsButton).appendTo($div);
+        var $button = $('<button>', {'id': 'resetTips', 'class': 'btn btn-primary'})
+            .text(Messages.settings_resetTipsAction).appendTo($div);
 
         $button.click(function () {
             Object.keys(localStorage).forEach(function (k) {
@@ -134,7 +146,7 @@ define([
     };
     var createBackupDrive = function (store) {
         var obj = store.proxy;
-        var $div = $('<div>', {'class': 'backupDrive'});
+        var $div = $('<div>', {'class': 'backupDrive element'});
 
         var exportFile = function () {
             var sjson = JSON.stringify(obj);
@@ -155,27 +167,29 @@ define([
             });
         };
 
-        $('<label>', {'for' : 'exportDrive'}).text(Messages.settings_backupTitle).appendTo($div);
+        $('<label>', {'for' : 'exportDrive'}).text(Messages.settings_backupCategory).appendTo($div);
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
+            .text(Messages.settings_backupTitle).appendTo($div);
         /* add an export button */
         var $export = Cryptpad.createButton('export', true, {}, exportFile);
-        $export.addClass('btn').addClass('btn-success').append(Messages.settings_backup);
+        $export.attr('class', 'btn btn-success').text(Messages.settings_backup);
         $div.append($export);
 
         /* add an import button */
         var $import = Cryptpad.createButton('import', true, {}, importFile);
-        $import.addClass('btn').addClass('btn-warning').append(Messages.settings_restore);
+        $import.attr('class', 'btn btn-success').text(Messages.settings_restore);
         $div.append($import);
 
         return $div;
     };
 
     var createResetDrive = function (obj) {
-        var $div = $('<div>', {'class': 'resetDrive'});
+        var $div = $('<div>', {'class': 'resetDrive element'});
-        $('<label>', {'for' : 'resetDrive'}).text(Messages.settings_resetTitle).appendTo($div);
+        $('<label>', {'for' : 'resetDrive'}).text(Messages.settings_resetNewTitle).appendTo($div);
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
-        var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'})
             .text(Messages.settings_reset).appendTo($div);
+        var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'})
+            .text(Messages.settings_resetButton).appendTo($div);
 
         $button.click(function () {
             Cryptpad.prompt(Messages.settings_resetPrompt, "", function (val) {
@@ -192,14 +206,16 @@ define([
     };
 
     var createUserFeedbackToggle = function (obj) {
-        var $div = $('<div>', { 'class': 'userFeedback', });
+        var $div = $('<div>', { 'class': 'userFeedback element'});
-        var $label = $('<label>', { 'for': 'userFeedback'})
-            .text(Messages.settings_userFeedback);
 
-        $div.html('<hr />' + Messages.settings_userFeedbackHint1 + '<br />' +
+        $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
-            Messages.settings_userFeedbackHint2).appendTo($div);
+
+        var $label = $('<label>', { 'for': 'userFeedback', 'class': 'noTitle' })
+            .text(Messages.settings_userFeedback);
 
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
+            .append(Messages.settings_userFeedbackHint1)
+            .append(Messages.settings_userFeedbackHint2).appendTo($div);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
@@ -229,25 +245,21 @@ define([
     };
 
     var createUsageButton = function () {
-        var $div = $('<div>', { 'class': 'pinned-usage' })
-            .text(Messages.settings_usageTitle)
-            .append('<br>');
-
         Cryptpad.createUsageBar(function (err, $bar) {
-            $div.find('.limit-container').remove();
+            if (err) { return void console.error(err); }
-            $div.append($bar);
+            APP.$usage.html('').append($bar);
         }, true);
-        return $div;
     };
 
     var createLogoutEverywhere = function (obj) {
         var proxy = obj.proxy;
-        var $div = $('<div>', { 'class': 'logoutEverywhere', });
+        var $div = $('<div>', { 'class': 'logoutEverywhere element'});
         $('<label>', { 'for': 'logoutEverywhere'})
             .text(Messages.settings_logoutEverywhereTitle).appendTo($div);
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
+            .text(Messages.settings_logoutEverywhere).appendTo($div);
         var $button = $('<button>', { id: 'logoutEverywhere', 'class': 'btn btn-primary' })
-            .text(Messages.settings_logoutEverywhere)
+            .text(Messages.settings_logoutEverywhereButton)
             .appendTo($div);
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
@@ -279,9 +291,10 @@ define([
 
     var createImportLocalPads = function (obj) {
         if (!Cryptpad.isLoggedIn()) { return; }
-        var $div = $('<div>', {'class': 'importLocalPads'});
+        var $div = $('<div>', {'class': 'importLocalPads element'});
-        $('<label>', {'for' : 'importLocalPads'}).text(Messages.settings_importTitle).appendTo($div);
+        $('<label>', {'for' : 'importLocalPads'}).text(Messages.settings_import).appendTo($div);
-        $('<br>').appendTo($div);
+        $('<span>', {'class': 'description'})
+            .text(Messages.settings_importTitle).appendTo($div);
         var $button = $('<button>', {'id': 'importLocalPads', 'class': 'btn btn-primary'})
             .text(Messages.settings_import).appendTo($div);
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
@@ -304,31 +317,90 @@ define([
     };
 
     var createLanguageSelector = function () {
-        var $div = $('<div>', {'class': 'importLocalPads'});
+        var $div = $('<div>', {'class': 'languageSelector element'});
         $('<label>').text(Messages.language).appendTo($div);
-        $('<br>').appendTo($div);
         var $b = Cryptpad.createLanguageSelector().appendTo($div);
         $b.find('button').addClass('btn btn-secondary');
         return $div;
     };
 
+
+    var hideCategories = function () {
+        APP.$rightside.find('> div').hide();
+    };
+    var showCategories = function (cat) {
+        hideCategories();
+        cat.forEach(function (c) {
+            APP.$rightside.find('.'+c).show();
+        });
+    };
+
+    var createLeftside = function () {
+        var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
+        APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
+        var active = 'account';
+        Object.keys(categories).forEach(function (key) {
+            var $category = $('<div>', {'class': 'category'}).appendTo($categories);
+            if (key === 'account') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
+            if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+
+            if (key === active) {
+                $category.addClass('active');
+            }
+
+            $category.click(function () {
+                active = key;
+                $categories.find('.active').removeClass('active');
+                $category.addClass('active');
+                showCategories(categories[key]);
+            });
+
+            $category.append(Messages['settings_cat_'+key]);
+        });
+        showCategories(categories[active]);
+    };
+
+    var createToolbar = function () {
+        var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'];
+        var configTb = {
+            displayed: displayed,
+            ifrw: window,
+            common: Cryptpad,
+            $container: APP.$toolbar,
+            pageTitle: Messages.settings_title
+        };
+        var toolbar = APP.toolbar = Toolbar.create(configTb);
+        toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+    };
+
     var andThen = function (obj) {
-        APP.$container.append(createTitle());
+        APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
-        APP.$container.append(createInfoBlock(obj));
+        var $rightside = APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
-        APP.$container.append(createDisplayNameInput(obj));
+
-        APP.$container.append(createLanguageSelector());
+        createToolbar();
+
+        //$rightside.append(createTitle());
+        $rightside.append(createInfoBlock(obj));
+        $rightside.append(createDisplayNameInput(obj));
+        $rightside.append(createLanguageSelector());
 
         if (Cryptpad.isLoggedIn()) {
-            APP.$container.append(createLogoutEverywhere(obj));
+            $rightside.append(createLogoutEverywhere(obj));
         }
-        APP.$container.append(createResetTips());
+        $rightside.append(createResetTips());
-        APP.$container.append(createUsageButton(obj));
+        $rightside.append(createBackupDrive(obj));
-        APP.$container.append(createBackupDrive(obj));
+        $rightside.append(createImportLocalPads(obj));
-        APP.$container.append(createImportLocalPads(obj));
+        $rightside.append(createResetDrive(obj));
-        APP.$container.append(createResetDrive(obj));
+        $rightside.append(createUserFeedbackToggle(obj));
-        APP.$container.append(createUserFeedbackToggle(obj));
+
         obj.proxy.on('change', [], refresh);
         obj.proxy.on('remove', [], refresh);
+        Cryptpad.onDisplayNameChanged(refresh);
+
+        createLeftside();
+        createUsageButton();
+
+        Cryptpad.removeLoadingScreen();
     };
 
     $(function () {
@@ -342,6 +414,7 @@ define([
         $main.removeClass('hidden');
 
         APP.$container = $('#container');
+        APP.$toolbar = $('#toolbar');
 
         Cryptpad.ready(function () {
             //if (!Cryptpad.getUserHash()) { return redirectToMain(); }

www/settings/main.less

@@ -1,31 +1,99 @@
 @import '/customize/src/less/variables.less';
+@import '/customize/src/less/mixins.less';
 
 @border: 1px solid #555;
 
+@leftside-bg: #eee;
+@leftside-color: #000;
+@rightside-color: #000;
+@description-color: #777;
+
+@button-width: 400px;
+@button-bg: #3066e5;
+@button-alt-bg: #fff;
+@button-red-bg: #e54e4e;
+
+
 .cp {
     input[type="text"] {
         padding-left: 10px;
     }
-    #mainBlock {
-        z-index: 1;
-        width: 1000px;
-        max-width: 90%;
-        margin: auto;
-
     #container {
-            .infoBlock {
+        font-size: 16px;
-                padding: 15px;
+        display: flex;
-                border: @border;
+        flex: 1;
-                background: @dark-base;
+        min-height: 0;
-                .label {
+        #leftSide {
+            color: @leftside-color;
+            width: 250px;
+            background: @leftside-bg;
+            display: flex;
+            flex-flow: column;
+            .categories {
+                flex: 1;
+                .category {
+                    .leftsideCategory();
+                }
+            }
+        }
+        #rightSide {
+            flex: 1;
+            padding: 5px 20px;
+            color: @rightside-color;
+            overflow: auto;
+            .element {
+                label:not(.noTitle), .label {
+                    display: block;
                     font-weight: bold;
-                    text-decoration: underline;
+                    margin-bottom: 0;
-                    margin-right: 5px;
                 }
+                .description {
+                    display: block;
+                    color: @description-color;
+                    margin-bottom: 5px;
                 }
-            .displayName {
+                margin-bottom: 20px;
-                input, button {
+            }
+            [type="text"], button {
                 vertical-align: middle;
+                height: 40px;
+                box-sizing: border-box;
+            }
+            .userFeedback {
+                input {
+                    vertical-align: middle;
+                    margin-right: 5px;
+                }
+            }
+            .languageSelector {
+                button.btn {
+                    width: @button-width;
+                    background-color: @button-alt-bg;
+                    border-color: #adadad;
+                    color: black;
+                    &:hover {
+                        background-color: darken(@button-alt-bg, 15%);
+                    }
+                }
+            }
+            .infoBlock {
+                [type="text"] {
+                    width: @button-width;
+                }
+            }
+            .inputBlock {
+                display: inline-flex;
+                width: @button-width;
+                input {
+                    flex: 1;
+                    border-radius: 0.25em 0 0 0.25em;
+                    border: 1px solid #adadad;
+                    border-right: 0px;
+                }
+                button {
+                    border-radius: 0 0.25em 0.25em 0;
+                    //border: 1px solid #adadad;
+                    border-left: 0px;
                 }
             }
             .backupDrive {
@@ -36,6 +104,22 @@
                     margin-right: 5px;
                 }
             }
+            button.btn {
+                background-color: @button-bg;
+                border-color: darken(@button-bg, 10%);
+                color: white;
+                &:hover {
+                    background-color: darken(@button-bg, 10%);
+                }
+                &.btn-danger {
+                    background-color: @button-red-bg;
+                    border-color: darken(@button-red-bg, 10%);
+                    color: white;
+                    &:hover {
+                        background-color: darken(@button-red-bg, 10%);
+                    }
+                }
+            }
             &>div {
                 margin: 10px 0;
             }

www/slide/main.js

@@ -230,11 +230,15 @@ define([
                         var $span = $('<span>', {'class': 'element'}).appendTo($container);
                         var $inner = $('<span>').text(name);
                         $span.append($inner).click(function () {
-                            var cleanName = name.replace(/[\[\]]/g, '');
+                            var parsed = Cryptpad.parsePadUrl(data.href);
-                            var text = '!['+cleanName+']('+data.href+')';
+                            var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
-                            editor.replaceSelection(text);
+                            var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                            var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                            editor.replaceSelection(mt);
+                            //var cleanName = name.replace(/[\[\]]/g, '');
+                            //var text = '!['+cleanName+']('+data.href+')';
+                            //editor.replaceSelection(text);
                             $block.hide();
-                            console.log(data.href);
                         });
                     });
                 };
@@ -622,12 +626,13 @@ define([
                     body: $iframe.find('body'),
                     onUploaded: function (ev, data) {
                         //var cursor = editor.getCursor();
-                        var cleanName = data.name.replace(/[\[\]]/g, '');
+                        //var cleanName = data.name.replace(/[\[\]]/g, '');
-                        var text = '!['+cleanName+']('+data.url+')';
+                        //var text = '!['+cleanName+']('+data.url+')';
-                        /*if (data.mediatag) {
+                        var parsed = Cryptpad.parsePadUrl(data.url);
-                            text = '!'+text;
+                        var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
-                        }*/
+                        var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
-                        editor.replaceSelection(text);
+                        var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                        editor.replaceSelection(mt);
                     }
                 };
                 APP.FM = Cryptpad.createFileManager(fmConfig);

www/slide/slide.less

@@ -279,7 +279,7 @@ div#modal #content, #print {
         * {
             .size(2.75);
             * {
-                font-size: 100%;
+                font-size: 1em;
                 line-height: 1em;
             }
         }
@@ -396,22 +396,25 @@ div#modal #content, #print {
 }
 
 p {
-  display: flex;
+    //display: flex;
-  flex-flow: column;
+    //flex-flow: row wrap;
     padding: 0;
     margin: 0;
     min-height:0;
-  flex: 1;
+    min-width:0;
+    //flex: 1;
 }
 
 media-tag {
     min-height: 0;
     flex: 1;
-  display: block;
+    display: flex;
+    flex-flow: column;
     text-align: center;
 }
 
 media-tag img {
+    flex: 1;
     max-height: 100% !important;
 }