Use the APP toolbar in profile

customize.dist/pages.js

@@ -282,10 +282,6 @@ define([
         return h('div#container');
     };
 
-    Pages['/profile/'] = Pages['/profile/index.html'] = function () {
-        return h('div#container');
-    };
-
     Pages['/register/'] = Pages['/register/index.html'] = function () {
         return [h('div#main', [
             h('div.mainOverlay'),
@@ -513,5 +509,13 @@ define([
         ];
     };
 
+    Pages['/profile/'] = Pages['/profile/index.html'] = function () {
+        return [
+            h('div#toolbar'),
+            h('div#container'),
+            loadingScreen()
+        ];
+    };
+
     return Pages;
 });

customize.dist/src/less/sidebar-layout.less

@@ -0,0 +1,97 @@
+@import '/customize/src/less/variables.less';
+@import '/customize/src/less/mixins.less';
+
+@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;
+    }
+    #container {
+        font-size: 16px;
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        #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;
+                    margin-bottom: 0;
+                }
+                .description {
+                    display: block;
+                    color: @description-color;
+                    margin-bottom: 5px;
+                }
+                margin-bottom: 20px;
+            }
+            [type="text"], button {
+                vertical-align: middle;
+                height: 40px;
+                box-sizing: border-box;
+            }
+            .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;
+                }
+            }
+            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;
+            }
+        }
+    }
+}
+

customize.dist/src/less/toolbar.less

@@ -25,6 +25,7 @@
 .whiteboardColor { color: @toolbar-whiteboard-bg; }
 .driveColor { color: @toolbar-drive-bg; }
 .settingsColor { color: @toolbar-settings-bg; }
+.profileColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
 
 .toolbar-container {
@@ -268,6 +269,11 @@ body {
         @color: @toolbar-settings-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-profile {
+        @bgcolor: @toolbar-profile-bg;
+        @color: @toolbar-profile-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -105,6 +105,8 @@
 @toolbar-default-color: #000;
 @toolbar-settings-bg: #0087ff;
 @toolbar-settings-color: #fff;
+@toolbar-profile-bg: #0087ff;
+@toolbar-profile-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|settings)\/$/.test(location.pathname);
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings|profile)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -145,7 +145,7 @@ $(function () {
                 } else if (/drive/.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require(['/drive/main.js'], ready);
-                } else if (/file/.test(pathname)) {
+                } else if (/\/file\//.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/file/main.js' ], ready);
                 } else if (/friends/.test(pathname)) {
@@ -163,6 +163,9 @@ $(function () {
                 } else if (/^\/settings\//.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/settings/main.js', ], ready);
+                } else if (/^\/profile\//.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/profile/main.js', ], ready);
                 }
             });
 
@@ -176,9 +179,7 @@ $(function () {
     ], function () {
         $body.append($topbar).append($main).append($footer);
 
-        if (/^\/profile\//.test(pathname)) {
+        if (/^\/user\//.test(pathname)) {
-            require([ '/profile/main.js'], function () {});
-        } else if (/^\/user\//.test(pathname)) {
             require([ '/user/main.js'], function () {});
         } else if (/^\/register\//.test(pathname)) {
             require([ '/register/main.js' ], function () {});

www/common/cryptpad-common.js

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

www/common/toolbar2.js

@@ -648,7 +648,7 @@ define([
                 window.clearInterval($spin.interval);
                 typing = -1;
                 $spin.text(Messages.saved);
-            }, /*local ? 0 :*/ SPINNER_DISAPPEAR_TIME);
+            }, local ? 0 : SPINNER_DISAPPEAR_TIME);
         };
         if (Cryptpad) {
             Cryptpad.whenRealtimeSyncs(config.realtime, onSynced);

www/profile/main.js

@@ -9,10 +9,14 @@ define([
     '/bower_components/chainpad-listmap/chainpad-listmap.js',
     '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/marked/marked.min.js',
+    '/common/toolbar2.js',
     'cm/lib/codemirror',
     'cm/mode/markdown/markdown',
     'less!/profile/main.less',
-], function ($, Cryptpad, Listmap, Crypto, Marked, CodeMirror) {
+    'less!/customize/src/less/toolbar.less',
+    'less!/customize/src/less/cryptpad.less',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+], function ($, Cryptpad, Listmap, Crypto, Marked, Toolbar, CodeMirror) {
 
     var APP = window.APP = {
         Cryptpad: Cryptpad,
@@ -396,6 +400,38 @@ define([
         $container.append($block);
     };
 
+    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 $category = $('<div>', {'class': 'category'}).appendTo($categories);
+        $category.append($('<span>', {'class': 'fa fa-user'}));
+        $category.addClass('active');
+        $category.append(Messages.profileButton);
+    };
+
+    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 onReady = function () {
         APP.$container.find('#'+CREATE_ID).remove();
@@ -409,22 +445,24 @@ define([
         }
 
         if (!APP.initialized) {
-            var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$container);
+            var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$rightside);
             addAvatar($header);
             var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
             addDisplayName($rightside);
             addLink($rightside);
-            addDescription(APP.$container);
+            addDescription(APP.$rightside);
-            addViewButton(APP.$container); //$rightside);
+            addViewButton(APP.$rightside); //$rightside);
-            addPublicKey(APP.$container);
+            addPublicKey(APP.$rightside);
             APP.initialized = true;
         }
+
+        createLeftside();
+        Cryptpad.removeLoadingScreen();
     };
 
     var onInit = function () {
         
     };
-
     var onDisconnect = function () {};
     var onChange = function () {};
 
@@ -471,6 +509,8 @@ define([
             });
         };
 
+        Cryptpad.removeLoadingScreen();
+
         if (!Cryptpad.isLoggedIn()) {
             var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
             var $a = $('<a>', {
@@ -489,39 +529,29 @@ define([
         APP.$container.append($create);
     };
 
-    $(function () {
+    var onCryptpadReady = function () {
-        var $main = $('#mainBlock');
+        APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
-        // Language selector
+        var $rightside = APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
-        var $sel = $('#language-selector');
-        Cryptpad.createLanguageSelector(undefined, $sel);
-        $sel.find('button').addClass('btn').addClass('btn-secondary');
-        $sel.show();
-
-        // User admin menu
-        var $userMenu = $('#user-menu');
-        var userMenuCfg = {
-            $initBlock: $userMenu,
-            'static': true
-        };
-        var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg);
-        $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
 
+        createToolbar();
+
+        if (window.location.hash) {
+            return void andThen(window.location.hash.slice(1));
+        }
+        getOrCreateProfile();
+    };
+
+    $(function () {
         $(window).click(function () {
             $('.cryptpad-dropdown').hide();
         });
 
-        // main block is hidden in case javascript is disabled
-        $main.removeClass('hidden');
-
         APP.$container = $('#container');
+        APP.$toolbar = $('#toolbar');
 
         Cryptpad.ready(function () {
             Cryptpad.reportAppUsage();
-
+            onCryptpadReady();
-            if (window.location.hash) {
-                return void andThen(window.location.hash.slice(1));
-            }
-            getOrCreateProfile();
         });
     });
 

www/profile/main.less

@@ -1,15 +1,8 @@
+@import '/customize/src/less/variables.less';
+@import '/customize/src/less/mixins.less';
+@import '/customize/src/less/sidebar-layout.less';
+
 .cp {
-    #mainBlock {
-        z-index: 1;
-        width: 1000px;
-        max-width: 90%;
-        margin: auto;
-        #container {
-            font-size: 25px;
-            width: 100%;
-            height: 100%;
-        }
-    }
     #header {
         display: flex;
         #rightside {
@@ -92,6 +85,9 @@
             font-weight: bold;
             font-size: 30px;
         }
+        .link {
+            font-size: 25px;
+        }
         .displayName, .link {
             line-height: 40px;
         }

www/settings/main.js

@@ -404,15 +404,10 @@ define([
     };
 
     $(function () {
-        var $main = $('#mainBlock');
-
         $(window).click(function () {
             $('.cryptpad-dropdown').hide();
         });
 
-        // main block is hidden in case javascript is disabled
-        $main.removeClass('hidden');
-
         APP.$container = $('#container');
         APP.$toolbar = $('#toolbar');
 

www/settings/main.less

@@ -1,64 +1,10 @@
 @import '/customize/src/less/variables.less';
 @import '/customize/src/less/mixins.less';
-
+@import '/customize/src/less/sidebar-layout.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;
-    }
     #container {
-        font-size: 16px;
-        display: flex;
-        flex: 1;
-        min-height: 0;
-        #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;
-                    margin-bottom: 0;
-                }
-                .description {
-                    display: block;
-                    color: @description-color;
-                    margin-bottom: 5px;
-                }
-                margin-bottom: 20px;
-            }
-            [type="text"], button {
-                vertical-align: middle;
-                height: 40px;
-                box-sizing: border-box;
-            }
             .userFeedback {
                 input {
                     vertical-align: middle;
@@ -81,21 +27,6 @@
                     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 {
                 button {
                     span.fa {
@@ -104,25 +35,6 @@
                     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;
-            }
         }
     }
 }