New settings page

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

@@ -27,6 +27,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 +572,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 +585,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;
@@ -607,7 +616,11 @@ noscript {
         }
     }
     .upgrade {
-        margin-left: 10px;
+        padding: 0;
+        line-height: 25px;
+        height: 25px;
+        margin: 0 3px;
+        border-radius: 0;
     }
 }
 

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 {
@@ -261,6 +262,11 @@ body {
         @color: @toolbar-friends-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-settings {
+        @bgcolor: @toolbar-settings-bg;
+        @color: @toolbar-settings-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -101,6 +101,8 @@
 @toolbar-friends-color: #fff;
 @toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;
+@toolbar-settings-bg: #0087ff;
+@toolbar-settings-color: #fff;
 
 
 @topbar-back: #fff;

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

@@ -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,8 +418,9 @@ 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_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";

customize.dist/translations/messages.js

@@ -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,8 +430,9 @@ 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_serverError = "Server Error: unable to upload your file at this time.";

www/drive/file.less

@@ -317,27 +317,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 */

www/settings/main.js

@@ -3,14 +3,16 @@ define([
     '/common/cryptpad-common.js',
     '/common/cryptget.js',
     '/common/mergeDrive.js',
+    '/common/toolbar2.js',
     '/bower_components/file-saver/FileSaver.min.js',
-    '/customize/header.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,6 +36,22 @@ define([
         });
     };
 
+    var categories = {
+        'account': [
+            'infoBlock',
+            'displayName',
+            'languageSelector',
+            'logoutEverywhere',
+            'resetTips',
+            'userFeedback'
+        ],
+        'drive': [
+            'backupDrive',
+            'importLocalPads',
+            'resetDrive'
+        ]
+    };
+
     // Title block
     var createTitle = function () {
         return $('<h1>').text(Messages.settings_title);
@@ -43,27 +61,25 @@ define([
         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 +88,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);
 
@@ -115,11 +131,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 +151,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 +172,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 +211,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);
 
-        $('<br>').appendTo($div);
+        var $label = $('<label>', { 'for': 'userFeedback', 'class': 'noTitle' })
+            .text(Messages.settings_userFeedback);
+
+        $('<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 +250,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 +296,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 +322,89 @@ 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'];
+        var configTb = {
+            displayed: displayed,
+            ifrw: window,
+            common: Cryptpad,
+            hideDisplayName: true,
+            $container: APP.$toolbar
+        };
+        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);
+
+        createLeftside();
+        createUsageButton();
+
+        Cryptpad.removeLoadingScreen();
     };
 
     $(function () {
@@ -342,6 +418,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,110 @@
 @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 {
+                    .unselectable();
+                    padding: 5px 20px;
+                    margin: 15px 0;
+                    cursor: pointer;
+                    .fa {
+                        width: 20px;
+                    }
+                    &:hover {
+                        background: rgba(0,0,0,0.05);
+                    }
+                    &.active {
+                        background: white;
+                    }
+                }
+            }
+        }
+        #rightSide {
+            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;
+                }
+                margin-bottom: 20px;
+            }
+            [type="text"], button {
+                vertical-align: middle;
+                height: 40px;
+                box-sizing: border-box;
             }
-            .displayName {
+            .userFeedback {
-                input, button {
+                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 +115,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;
             }