Remove the top bar and move its content in the applications' toolbars

customize.dist/DecorateToolbar.js

@@ -10,6 +10,11 @@ define([
     var main = function () {
         var url = window.location.pathname;
         var isHtml = /\.html/.test(url) || url === '/' || url === '';
+        var isPoll = /\/poll\//.test(url);
+        if (!isHtml && !isPoll) {
+            Messages._applyTranslation();
+            return;
+        }
         $.ajax({
             url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
             success: function (ret) {

customize.dist/languageSelector.js

@@ -20,8 +20,8 @@ define(['/bower_components/jquery/dist/jquery.min.js'], function() {
         return getStoredLanguage() || getBrowserLanguage();
     };
 
-    var main = out.main = function () {
+    var main = out.main = function ($select) {
-        var selector = $('#language-selector');
+        var selector = $select || $('#language-selector');
         if (!selector.length) { return; }
 
         // Select the current language in the list

customize.dist/messages.js

@@ -22,6 +22,15 @@ define(['/customize/languageSelector.js',
         messages = $.extend(true, {}, Default, map[language]);
     }
 
+    messages._languages = {
+        'en': Default._languageName
+    }
+    for (var l in map) {
+        messages._languages[l] = map[l]._languageName || l;
+    }
+
+    messages._initSelector = LS.main;
+
     // Get keys with parameters
     messages._getKey = function (key, argArray) {
         if (!messages[key]) { return '?'; }

customize.dist/src/toolbar.less

@@ -39,7 +39,7 @@
         }
     }
 
-    button, .rightside-element {
+    button, select, .rightside-element {
         height: 26px;
         padding-right: 5px;
         padding-left: 5px;
@@ -108,28 +108,92 @@
 .cryptpad-toolbar-top {
     display: block;
     text-align: center;
+    height: 3em;
+    position: relative;
+    margin-bottom: 3px;
+    @media screen and (max-width: 400px) {
+        height: 6em;
+    }
     .cryptpad-title {
-        text-align: center;
+        span {
+            font-size: 1.5em;
+            vertical-align: middle;
+            line-height: 2em;
+            &:hover {
+                border: 1px solid #888;
+                border-radius: 2px;
+                background: white;
+                padding: 5px;
+            }
+        }
         input {
+            font-size: 1.5em;
+            vertical-align: middle;
+            height: 100%;
+            box-sizing: border-box;
             border: 1px solid black;
             background: #fff;
             cursor: auto;
             width: 300px;
-            padding: 5px;
+            padding: 0px 5px;
-            -webkit-touch-callout: text;
+        }
-            -webkit-user-select: text;
+    }
-            -khtml-user-select: text;
+    .cryptpad-link {
-            -moz-user-select: text;
+        position: absolute;
-            -ms-user-select: text;
+        left: 0px;
-            user-select: text;
+        height: 3em;
-            &:focus {
+        @media screen and (max-width: 400px) {
-                -webkit-touch-callout: text;
+            top: 3em;
-                -webkit-user-select: text;
+        }
-                -khtml-user-select: text;
+        @media screen and (min-width: 401px) {
-                -moz-user-select: text;
+            top: 0px;
-                -ms-user-select: text;
+        }
-                user-select: text;
+
+        a.cryptpad-logo {
+            cursor: pointer;
+            height: 3em;
+            border: 1px solid #aaa;
+            border-radius: @border-radius;
+            padding: 0px 5px;
+            text-decoration: none;
+            color: inherit;
+            img {
+                vertical-align: middle;
+                height: 3em;
+                cursor: pointer;
             }
+            span {
+                font-size: 1.5em;
+                margin-left: 5px;
+                vertical-align: middle;
+                cursor: pointer;
+            }
+        }
+        .big {
+            @media screen and (max-width: 400px) {
+                display: none;
+            }
+            @media screen and (min-width: 401px) {
+                display: inline-block;
+            }
+        }
+        .small {
+            @media screen and (max-width: 400px) {
+                display: inline-block;
+            }
+            @media screen and (min-width: 401px) {
+                display: none;
+            }
+        }
+    }
+    .cryptpad-user {
+        position: absolute;
+        right: 0;
+        @media screen and (max-width: 400px) {
+            top: 3em;
+        }
+        @media screen and (min-width: 401px) {
+            top: 0px;
         }
     }
 }

customize.dist/toolbar.css

@@ -38,6 +38,7 @@
   margin: 2px 0px 2px 4px;
 }
 .cryptpad-toolbar button,
+.cryptpad-toolbar select,
 .cryptpad-toolbar .rightside-element {
   height: 26px;
   padding-right: 5px;
@@ -104,30 +105,105 @@
 .cryptpad-toolbar-top {
   display: block;
   text-align: center;
+  height: 3em;
+  position: relative;
+  margin-bottom: 3px;
 }
-.cryptpad-toolbar-top .cryptpad-title {
+@media screen and (max-width: 400px) {
-  text-align: center;
+  .cryptpad-toolbar-top {
+    height: 6em;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-title span {
+  font-size: 1.5em;
+  vertical-align: middle;
+  line-height: 2em;
+}
+.cryptpad-toolbar-top .cryptpad-title span:hover {
+  border: 1px solid #888;
+  border-radius: 2px;
+  background: white;
+  padding: 5px;
 }
 .cryptpad-toolbar-top .cryptpad-title input {
+  font-size: 1.5em;
+  vertical-align: middle;
+  height: 100%;
+  box-sizing: border-box;
   border: 1px solid black;
   background: #fff;
   cursor: auto;
   width: 300px;
-  padding: 5px;
+  padding: 0px 5px;
-  -webkit-touch-callout: text;
-  -webkit-user-select: text;
-  -khtml-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
 }
-.cryptpad-toolbar-top .cryptpad-title input:focus {
+.cryptpad-toolbar-top .cryptpad-link {
-  -webkit-touch-callout: text;
+  position: absolute;
-  -webkit-user-select: text;
+  left: 0px;
-  -khtml-user-select: text;
+  height: 3em;
-  -moz-user-select: text;
+}
-  -ms-user-select: text;
+@media screen and (max-width: 400px) {
-  user-select: text;
+  .cryptpad-toolbar-top .cryptpad-link {
+    top: 3em;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link {
+    top: 0px;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
+  cursor: pointer;
+  height: 3em;
+  border: 1px solid #aaa;
+  border-radius: 1px;
+  padding: 0px 5px;
+  text-decoration: none;
+  color: inherit;
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo img {
+  vertical-align: middle;
+  height: 3em;
+  cursor: pointer;
+}
+.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo span {
+  font-size: 1.5em;
+  margin-left: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-link .big {
+    display: none;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link .big {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-link .small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-link .small {
+    display: none;
+  }
+}
+.cryptpad-toolbar-top .cryptpad-user {
+  position: absolute;
+  right: 0;
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar-top .cryptpad-user {
+    top: 3em;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar-top .cryptpad-user {
+    top: 0px;
+  }
 }
 .cryptpad-toolbar-leftside {
   float: left;

customize.dist/translations/messages.fr.js

@@ -1,6 +1,8 @@
 define(function () {
     var out = {};
 
+    out._languageName = "Français";
+
     out.main_title = "Cryptpad: Editeur collaboratif en temps réel, zero knowledge";
 
     out.type = {};

customize.dist/translations/messages.js

@@ -1,6 +1,8 @@
 define(function () {
     var out = {};
 
+    out._languageName = 'English';
+
     out.main_title = "Cryptpad: Zero Knowledge, Collaborative Real Time Editing";
 
     out.type = {};

www/code/index.html

@@ -21,7 +21,7 @@
         }
         #iframe-container {
             position: fixed;
-            top: 2.6em;
+            top: 0px;
             bottom: 0px;
             right: 0px;
             left: 0px;

www/code/main.js

@@ -45,10 +45,13 @@ define([
         var andThen = function (CMeditor) {
             var CodeMirror = module.CodeMirror = CMeditor;
             CodeMirror.modeURL = "/bower_components/codemirror/mode/%N/%N.js";
-
             var $pad = $('#pad-iframe');
             var $textarea = $pad.contents().find('#editor1');
 
+            var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
+            var parsedHash = Cryptpad.parsePadUrl(window.location.href);
+            var defaultName = Cryptpad.getDefaultName(parsedHash);
+
             var editor = module.editor = CMeditor.fromTextArea($textarea[0], {
                 lineNumbers: true,
                 lineWrapping: true,
@@ -176,6 +179,9 @@ define([
                 if (!isDefaultTitle()) {
                     obj.metadata.title = document.title;
                 }
+                else {
+                    obj.metadata.title = "";
+                }
 
                 // set mode too...
                 obj.highlightMode = module.highlightMode;
@@ -256,13 +262,10 @@ define([
             };
 
             var suggestName = function () {
-                var parsed = Cryptpad.parsePadUrl(window.location.href);
+                if (Cryptpad.isDefaultName(parsedHash, document.title)) {
-                var name = Cryptpad.getDefaultName(parsed, []);
+                    return getHeadingText() || defaultName;
-
-                if (Cryptpad.isDefaultName(parsed, document.title)) {
-                    return getHeadingText() || document.title;
                 } else {
-                    return document.title || getHeadingText() || name;
+                    return document.title || getHeadingText() || defaultName;
                 }
             };
 
@@ -308,13 +311,23 @@ define([
                 onLocal();
             };
 
+            var renameCb = function (err, title) {
+                if (err) { return; }
+                document.title = title;
+                onLocal();
+            };
+
             var onInit = config.onInit = function (info) {
-                var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
                     readOnly: readOnly,
-                    ifrw: ifrw
+                    ifrw: ifrw,
+                    title: {
+                        onRename: renameCb,
+                        defaultName: defaultName
+                    },
+                    common: Cryptpad
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
@@ -336,8 +349,8 @@ define([
                 /* add a "change username" button */
                 getLastName(function (err, lastName) {
                     userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName);
+                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username).hide();
+                    $userBlock.append($username);
                 });
 
                 /* add an export button */
@@ -350,11 +363,6 @@ define([
                     $rightside.append($import);
 
                     /* add a rename button */
-                    var renameCb = function (err, title) {
-                        if (err) { return; }
-                        document.title = title;
-                        onLocal();
-                    };
                     var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
                     $rightside.append($setTitle);
                 }
@@ -454,14 +462,7 @@ define([
                         console.error(err);
                         return;
                     }
-                    document.title = title || info.channel.slice(0, 8);
+                    updateTitle(title || defaultName);
-                    Cryptpad.setPadTitle(title, function (err, data) {
-                        if (err) {
-                            console.log("Unable to set pad title");
-                            console.error(err);
-                            return;
-                        }
-                    });
                 });
             };
 
@@ -470,13 +471,16 @@ define([
                 // Change the title now, and set it back to the old value if there is an error
                 var oldTitle = document.title;
                 document.title = newTitle;
-                Cryptpad.setPadTitle(newTitle, function (err, data) {
+                Cryptpad.renamePad(newTitle, function (err, data) {
                     if (err) {
                         console.log("Couldn't set pad title");
                         console.error(err);
                         document.title = oldTitle;
                         return;
                     }
+                    document.title = data;
+                    $bar.find('.' + Toolbar.constants.title).find('span').text(data);
+                    $bar.find('.' + Toolbar.constants.title).find('input').val(data);
                 });
             };
 
@@ -489,7 +493,7 @@ define([
                         // Update the local user data
                         addToUserList(userData);
                     }
-                    if (json.metadata.title) {
+                    if (typeof json.metadata.title !== "undefined") {
                         updateTitle(json.metadata.title);
                     }
                 }
@@ -652,6 +656,9 @@ define([
                     if (!isDefaultTitle()) {
                         hjson2.metadata.title = document.title;
                     }
+                    else {
+                        hjson2.metadata.title = "";
+                    }
                     var shjson2 = stringify(hjson2);
                     if (shjson2 !== shjson) {
                         console.error("shjson2 !== shjson");

www/common/toolbar.js

@@ -36,6 +36,7 @@ define([
     var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container";
     var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown";
     var TITLE_CLS = Bar.constants.title = "cryptpad-title";
+    var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
 
     /** Key in the localStore which indicates realtime activity should be disallowed. */
     // TODO remove? will never be used in cryptpad
@@ -195,7 +196,7 @@ define([
         if (n === 1) { return '; + ' + Messages.oneViewer; }
         return '; + ' + Messages._getKey('viewers', [n]);
     };
-    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement) {
+    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) {
         var meIdx = userList.indexOf(myUserName);
         if (meIdx === -1) {
             $stateElement.text(Messages.synchronizing);
@@ -206,7 +207,7 @@ define([
         // Make sure the user block elements are displayed
         var $userButtons = $(userlistElement).find("#userButtons");
         $userButtons.show();
-        var $userElement = $(userlistElement).find('.' + USERNAME_CLS);
+        var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
         $userElement.show();
 
         var numberOfUsers = userList.length;
@@ -261,7 +262,7 @@ define([
             if (!name) {
                 name = Messages.anonymous;
             }
-            $userElement.find("button").html(icon + ' ' + name);
+            $userElement.find("button").html(icon + ' ' + name).show();
         }
     };
 
@@ -303,7 +304,60 @@ define([
         $(lagElement).append(lagLight);
     };
 
+    var createLinkToMain = function ($topContainer) {
+        var $linkContainer = $('<span>', {
+            'class': "cryptpad-link"
+        }).appendTo($topContainer);
+        var $imgTag = $('<img>', {
+            src: "/customize/cryptofist_mini.png",
+            alt: "Cryptpad",
+            'class': "cryptofist"
+        });
+        var $aTagSmall = $('<a>', {
+            href: "/",
+            title: Messages.header_logoTitle,
+            'class': "cryptpad-logo"
+        }).append($imgTag);
+        $span = $('<span>').text('CryptPad');
+        var $aTagBig = $aTagSmall.clone().addClass('big').append($span);
+        $aTagSmall.addClass('small');
+
+        $linkContainer.append($aTagSmall).append($aTagBig);
+    };
+
+    var createUserAdmin = function ($topContainer) {
+        var $userContainer = $('<span>', {
+            'class': USER_CLS
+        }).appendTo($topContainer);
+
+        var $span = $('<span>' , {
+            'class': 'cryptpad-language'
+        });
+        var $select = $('<select>', {
+            'id': 'language-selector'
+        }).appendTo($userContainer);
+
+        var languages = Messages._languages;
+        for (var l in languages) {
+            $('<option>', {
+                value: l
+            }).text(languages[l]).appendTo($select);
+        }
+
+        Messages._initSelector($select);
+
+        $select.on('mousedown', function (e) {
+            e.stopPropagation();
+            return true;
+        });
+
+        var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
+
+        return $userContainer;
+    };
+
     var createTitle = function ($container, readOnly, config, Cryptpad) {
+        config = config || {};
         var callback = config.onRename;
         var placeholder = config.defaultName;
 
@@ -311,8 +365,10 @@ define([
             id: 'toolbarTitle',
             'class': TITLE_CLS
         }).appendTo($container);
-        var $text = $('<span>').appendTo($titleContainer);
+        var $text = $('<span>', {
-        if (readOnly === 1 || typeof(Cryptpad) === "unedfined") { return; }
+            title: "CLick to edit" //TODO translate
+        }).appendTo($titleContainer);
+        if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return; }
         var $input = $('<input>', {
             type: 'text',
             placeholder: placeholder
@@ -335,6 +391,10 @@ define([
                     $text.show();
                 });
             }
+            else if (e.which === 27) {
+                $input.hide();
+                $text.show();
+            }
         });
         $text.on('click', function () {
             $text.hide();
@@ -342,9 +402,11 @@ define([
             $input.show();
             $input.focus();
         });
+        return $titleContainer;
     };
 
     var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
+        config = config || {};
         var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
         var Cryptpad = config.common;
 
@@ -353,6 +415,8 @@ define([
         var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
         var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
         var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
+        var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
+        var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS));
         var userData = config.userData;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
         var saveElement;
@@ -368,7 +432,15 @@ define([
                 }
                 $container.find('.cryptpad-dropdown').hide();
             };
-            $(config.ifrw).on('click',removeDropdowns);
+            var cancelEditTitle = function (e) {
+                if ($(e.target).parents('.' + TITLE_CLS).length) {
+                    return;
+                }
+                $titleElement.find('input').hide();
+                $titleElement.find('span').show();
+            };
+            $(config.ifrw).on('click', removeDropdowns);
+            $(config.ifrw).on('click', cancelEditTitle);
             if (config.ifrw.$('iframe').length) {
                 var innerIfrw = config.ifrw.$('iframe').each(function (i, el) {
                     $(el.contentWindow).on('click', removeDropdowns);
@@ -383,7 +455,7 @@ define([
           if(newUserData) { // Someone has changed his name/color
             userData = newUserData;
           }
-          updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement);
+          updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement, $userAdminElement);
         };
 
         var ks = function () {

www/pad/index.html

@@ -21,7 +21,7 @@
         }
         #pad-iframe {
             position:fixed;
-            top:2.5em;
+            top:0px;
             left:0px;
             bottom:0px;
             right:0px;

www/pad/main.js

@@ -253,7 +253,7 @@ define([
             };
 
             var initializing = true;
-            var userList = module.userList = {}; // List of pretty name of all users (mapped with their server ID)
+            var userList = module.userList = {}; // List of pretty names for all users (mapped with their ID)
             var toolbarList; // List of users still connected to the channel (server IDs)
             var addToUserList = function(data) {
                 var users = module.users;
@@ -556,8 +556,8 @@ define([
                 /* add a "change username" button */
                 getLastName(function (err, lastName) {
                     userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName);
+                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username).hide();
+                    $userBlock.append($username);
                 });
 
                 /* add an export button */
@@ -604,8 +604,7 @@ define([
                         console.log("Couldn't get pad title");
                         return;
                     }
-                    updateTitle(title || info.channel.slice(0, 8));
+                    updateTitle(title || defaultName);
-                    document.title = title || info.channel.slice(0, 8);
                 });
             };
 

www/slide/index.html

@@ -21,7 +21,7 @@
         }
         #iframe-container {
             position: fixed;
-            top: 2.6em;
+            top: 0px;
             bottom: 0px;
             right: 0px;
             left: 0px;

www/slide/main.js

@@ -62,10 +62,13 @@ define([
         var andThen = function (CMeditor) {
             var CodeMirror = module.CodeMirror = CMeditor;
             CodeMirror.modeURL = "/bower_components/codemirror/mode/%N/%N.js";
-
             var $pad = $('#pad-iframe');
             var $textarea = $pad.contents().find('#editor1');
 
+            var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
+            var parsedHash = Cryptpad.parsePadUrl(window.location.href);
+            var defaultName = Cryptpad.getDefaultName(parsedHash);
+
             var editor = module.editor = CMeditor.fromTextArea($textarea[0], {
                 lineNumbers: true,
                 lineWrapping: true,
@@ -211,6 +214,9 @@ define([
                 if (!isDefaultTitle()) {
                     obj.metadata.title = APP.title;
                 }
+                else {
+                    obj.metadata.title = "";
+                }
                 if (textColor) {
                     obj.metadata.color = textColor;
                 }
@@ -286,13 +292,10 @@ define([
             };
 
             var suggestName = function () {
-                var parsed = Cryptpad.parsePadUrl(window.location.href);
+                if (Cryptpad.isDefaultName(parsedHash, APP.title)) {
-                var name = Cryptpad.getDefaultName(parsed, []);
+                    return getHeadingText() || defaultName;
-
-                if (Cryptpad.isDefaultName(parsed, APP.title)) {
-                    return getHeadingText() || APP.title;
                 } else {
-                    return APP.title || getHeadingText() || name;
+                    return APP.title || getHeadingText() || defaultName;
                 }
             };
 
@@ -344,7 +347,7 @@ define([
                 var oldTitle = APP.title;
                 APP.title = newTitle;
                 setTabTitle();
-                Cryptpad.setPadTitle(newTitle, function (err, data) {
+                Cryptpad.renamePad(newTitle, function (err, data) {
                     if (err) {
                         console.log("Couldn't set pad title");
                         console.error(err);
@@ -352,6 +355,10 @@ define([
                         setTabTitle();
                         return;
                     }
+                    APP.title = data;
+                    setTabTitle();
+                    $bar.find('.' + Toolbar.constants.title).find('span').text(data);
+                    $bar.find('.' + Toolbar.constants.title).find('input').val(data);
                 });
             };
 
@@ -378,20 +385,31 @@ define([
                         // Update the local user data
                         addToUserList(userData);
                     }
-                    if (json.metadata.title) {
+                    if (typeof json.metadata.title !== "undefined") {
                         updateTitle(json.metadata.title);
                     }
                     updateColors(json.metadata.color, json.metadata.backColor);
                 }
             };
 
+            var renameCb = function (err, title) {
+                if (err) { return; }
+                APP.title = title;
+                setTabTitle();
+                onLocal();
+            };
+
             var onInit = config.onInit = function (info) {
-                var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
                     readOnly: readOnly,
-                    ifrw: $('#pad-iframe')[0].contentWindow
+                    ifrw: ifrw,
+                    title: {
+                        onRename: renameCb,
+                        defaultName: defaultName
+                    },
+                    common: Cryptpad
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
@@ -413,8 +431,8 @@ define([
                 /* add a "change username" button */
                 getLastName(function (err, lastName) {
                     userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName);
+                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username).hide();
+                    $userBlock.append($username);
                 });
 
                 /* add an export button */
@@ -427,12 +445,6 @@ define([
                     $rightside.append($import);
 
                     /* add a rename button */
-                    var renameCb = function (err, title) {
-                        if (err) { return; }
-                        APP.title = title;
-                        setTabTitle();
-                        onLocal();
-                    };
                     var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
                     $rightside.append($setTitle);
                 }
@@ -576,14 +588,7 @@ define([
                         console.error(err);
                         return;
                     }
-                    document.title = APP.title = title || info.channel.slice(0, 8);
+                    updateTitle(title || defaultName);
-                    Cryptpad.setPadTitle(title, function (err, data) {
-                        if (err) {
-                            console.log("Unable to set pad title");
-                            console.error(err);
-                            return;
-                        }
-                    });
                 });
             };