Use a consistent toolbar across all apps

customize.dist/DecorateToolbar.js

@@ -10,7 +10,7 @@ define([
     var main = function () {
         var url = window.location.pathname;
         var isHtml = /\.html/.test(url) || url === '/' || url === '';
-        var isPoll = /\/poll\//.test(url) || /\/file\//.test(url);
+        var isPoll = /\/poll\//.test(url);
         if (!isHtml && !isPoll) {
             Messages._applyTranslation();
             return;

customize.dist/main.css

@@ -1,3 +1,204 @@
+.alertify-logs > * {
+  padding: 12px 48px;
+  color: #fafafa;
+  font-weight: bold;
+  font-size: large;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 1px;
+}
+.alertify-logs > *,
+.alertify-logs > *.default {
+  background: rgba(0, 0, 0, 0.8);
+}
+.alertify-logs > *.error {
+  background: #FF0073;
+}
+.alertify-logs > *.success {
+  background: #46E981;
+  color: #302B28;
+}
+.alertify {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.3);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+}
+.alertify.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+.alertify,
+.alertify.show {
+  box-sizing: border-box;
+  transition: all 0.33s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.alertify,
+.alertify * {
+  box-sizing: border-box;
+}
+.alertify .dialog {
+  padding: 12px;
+}
+.alertify .dialog,
+.alertify .alert {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.alertify .dialog > div,
+.alertify .alert > div {
+  background-color: #685d56;
+  border-radius: 5px;
+}
+.alertify .dialog > *,
+.alertify .alert > * {
+  width: 400px;
+  max-width: 95%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 12px;
+  background: #fff;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084);
+}
+.alertify .dialog .msg,
+.alertify .alert .msg {
+  padding: 12px;
+  margin-bottom: 12px;
+  margin: 0;
+  text-align: left;
+}
+.alertify .dialog input:not(.form-control),
+.alertify .alert input:not(.form-control) {
+  background-color: #302B28;
+  color: #fafafa;
+  border: 0px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  width: 100%;
+  font-size: 100%;
+  padding: 12px;
+}
+.alertify .dialog nav,
+.alertify .alert nav {
+  text-align: right;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button),
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+  background-color: transparent;
+  box-sizing: border-box;
+  position: relative;
+  outline: 0;
+  border: 0;
+  display: inline-block;
+  align-items: center;
+  padding: 0 6px;
+  margin: 6px 8px;
+  line-height: 36px;
+  min-height: 36px;
+  white-space: nowrap;
+  min-width: 88px;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 14px;
+  text-decoration: none;
+  cursor: pointer;
+  color: #fafafa;
+  border: 1px solid #302B28;
+  border-radius: 5px;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus {
+  border: 1px dotted #302B28;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner {
+  border: 0;
+}
+.alertify .dialog nav button.btn,
+.alertify .alert nav button.btn {
+  margin: 6px 4px;
+}
+.alertify-logs {
+  position: fixed;
+  z-index: 99999;
+}
+.alertify-logs.bottom,
+.alertify-logs:not(.top) {
+  bottom: 16px;
+}
+.alertify-logs.left,
+.alertify-logs:not(.right) {
+  left: 16px;
+}
+.alertify-logs.left > *,
+.alertify-logs:not(.right) > * {
+  float: left;
+  transform: translate3d(0, 0, 0);
+  height: auto;
+}
+.alertify-logs.left > *.show,
+.alertify-logs:not(.right) > *.show {
+  left: 0;
+}
+.alertify-logs.left > *,
+.alertify-logs:not(.right) > *,
+.alertify-logs.left > *.hide,
+.alertify-logs:not(.right) > *.hide {
+  left: -110%;
+}
+.alertify-logs.right {
+  right: 16px;
+}
+.alertify-logs.right > * {
+  float: right;
+  transform: translate3d(0, 0, 0);
+}
+.alertify-logs.right > *.show {
+  right: 0;
+  opacity: 1;
+}
+.alertify-logs.right > *,
+.alertify-logs.right > *.hide {
+  right: -110%;
+  opacity: 0;
+}
+.alertify-logs.top {
+  top: 0;
+}
+.alertify-logs > * {
+  box-sizing: border-box;
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+  clear: both;
+  backface-visibility: hidden;
+  perspective: 1000;
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.alertify-logs > *.show {
+  margin-top: 12px;
+  opacity: 1;
+  max-height: 1000px;
+  padding: 12px;
+  pointer-events: auto;
+}
 a.github-corner > svg {
   fill: #46E981;
   color: #302B28;

customize.dist/src/cryptpad.less

@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import "./alertify.less";
 
 .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
     @font-face{

customize.dist/src/toolbar.less

@@ -9,8 +9,21 @@
     user-select: none;
 }
 
+.toolbar-container {
+    .cryptpad-lag {
+        position: relative;
+        top: -2px;
+    }
+    font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
+    background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(#f5f5f5, #DDDDDD); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */
+}
+
 .cryptpad-toolbar {
     box-sizing: border-box;
+    padding: 0px 6px;
 
     .unselectable;
 
@@ -75,6 +88,7 @@
 
     .cryptpad-state {
         line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
+        float: left;
     }
 
     .rightside-button {
@@ -120,9 +134,11 @@
             line-height: 32px;
         }
         .pencilIcon {
-            display: none;
+            //display: none;
+            margin-left: 11px;
             &:hover {
                 color: #999;
+                margin-left: 0px;
             }
             span {
                 cursor: pointer;

customize.dist/toolbar.css

@@ -6,8 +6,24 @@
   -ms-user-select: none;
   user-select: none;
 }
+.toolbar-container {
+  font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif;
+  background: -webkit-linear-gradient(#EEEEEE, #DADADA);
+  /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(#f5f5f5, #DDDDDD);
+  /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(#f5f5f5, #DDDDDD);
+  /* For Firefox 3.6 to 15 */
+  background: linear-gradient(#f5f5f5, #DDDDDD);
+  /* Standard syntax */
+}
+.toolbar-container .cryptpad-lag {
+  position: relative;
+  top: -2px;
+}
 .cryptpad-toolbar {
   box-sizing: border-box;
+  padding: 0px 6px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -78,6 +94,7 @@
 .cryptpad-toolbar .cryptpad-state {
   line-height: 30px;
   /* equivalent to 26px + 2*2px margin used for buttons */
+  float: left;
 }
 .cryptpad-toolbar .rightside-button {
   float: right;
@@ -120,10 +137,11 @@
   line-height: 32px;
 }
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
-  display: none;
+  margin-left: 11px;
 }
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover {
   color: #999;
+  margin-left: 0px;
 }
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
   cursor: pointer;

www/code/inner.html

@@ -47,19 +47,6 @@
       .CodeMirror {
         height: 100%;
       }
-      .cryptpad-toolbar {
-        padding: 0px 6px;
-      }
-      #cme_toolbox div.cryptpad-lag {
-        line-height: 24px;
-      }
-      #cme_toolbox {
-        font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-        background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
-        background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
-        background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */
-        background: linear-gradient(white, #DDDDDD); /* Standard syntax */
-      }
       .CodeMirror-focused .cm-matchhighlight {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
         background-position: bottom;
@@ -68,7 +55,7 @@
     </style>
 </head>
 <body>
-  <div id="cme_toolbox"></div>
+  <div id="cme_toolbox" class="toolbar-container"></div>
   <textarea id="editor1" name="editor1"></textarea>
 </body>
 </html>

www/common/cryptpad-common.js

@@ -105,7 +105,7 @@ define([
     });
 
     // var isArray = function (o) { return Object.prototype.toString.call(o) === '[object Array]'; };
-    var isArray = $.isArray;
+    var isArray = common.isArray = $.isArray;
 
     var fixHTML = common.fixHTML = function (html) {
         return html.replace(/</g, '&lt;');
@@ -886,22 +886,9 @@ define([
     /*
      *  Alertifyjs
      */
-    var styleAlerts = common.styleAlerts = function (href) {
-        var $link = $('link[href="/customize/alertify.css"]');
-        if ($link.length) {
-            return;
-            /*$link.attr('href', '');
-            $link.attr('href', '/customize/alertify.css');
-            return;*/
-        }
 
-        href = href || '/customize/alertify.css';
+    // TODO: remove styleAlerts in all the apps
-        $('head').append($('<link>', {
+    var styleAlerts = common.styleAlerts = function () {};
-            rel: 'stylesheet',
-            id: 'alertifyCSS',
-            href: href,
-        }));
-    };
 
     var findCancelButton = common.findCancelButton = function () {
         return $('button.cancel');
@@ -933,7 +920,6 @@ define([
     };
 
     common.alert = function (msg, cb) {
-        common.styleAlerts();
         cb = cb || function () {};
         var keyHandler = listenForKeys(function (e) { // yes
             findOKButton().click();
@@ -945,7 +931,6 @@ define([
     };
 
     common.prompt = function (msg, def, cb, opt) {
-        common.styleAlerts();
         opt = opt || {};
         cb = cb || function () {};
 
@@ -969,7 +954,6 @@ define([
     };
 
     common.confirm = function (msg, cb, opt) {
-        common.styleAlerts();
         opt = opt || {};
         cb = cb || function () {};
         var keyHandler = listenForKeys(function (e) {

www/common/toolbar.js

@@ -56,7 +56,6 @@ define([
 
     var styleToolbar = function ($container, href) {
         href = href || '/customize/toolbar.css';
-
         $.ajax({
             url: href,
             dataType: 'text',
@@ -163,11 +162,10 @@ define([
     };
 
     var createUserList = function ($container, readOnly) {
-        var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
         var $userlist = $('<div>', {
             'class': USER_LIST_CLS,
             id: uid(),
-        }).append($state);
+        });
         createUserButtons($userlist, readOnly);
         $container.append($userlist);
         return $userlist[0];
@@ -199,14 +197,17 @@ define([
         if (n === 1) { return '; + ' + Messages.oneViewer; }
         return '; + ' + Messages._getKey('viewers', [n]);
     };
-    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) {
+
+    var checkSynchronizing = function (userList, myUserName, $stateElement) {
         var meIdx = userList.indexOf(myUserName);
         if (meIdx === -1) {
-            console.log('nok');
             $stateElement.text(Messages.synchronizing);
             return;
         }
         $stateElement.text('');
+    };
+
+    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
         // Make sure the elements are displayed
         var $userButtons = $(userlistElement).find("#userButtons");
         $userButtons.attr('display', 'inline');
@@ -283,11 +284,11 @@ define([
     };
 
     var createLagElement = function ($container) {
-        var $lag = $('<div>', {
+        var $lag = $('<span>', {
             'class': LAG_ELEM_CLS,
             id: uid(),
         });
-        $container.before($lag);
+        $container.prepend($lag);
         return $lag[0];
     };
 
@@ -332,8 +333,7 @@ define([
         }).appendTo($topContainer);
         var $imgTag = $('<img>', {
             src: "/customize/cryptofist_mini.png",
-            alt: "Cryptpad",
+            alt: "Cryptpad"
-            'class': "cryptofist"
         });
 
         // We need to override the "a" tag action here because it is inside the iframe!
@@ -361,6 +361,10 @@ define([
             'class': USER_CLS
         }).appendTo($topContainer);
 
+        var $state = $('<span>', {
+            'class': STATE_CLS
+        }).text(Messages.synchronizing).appendTo($userContainer);
+
         var $span = $('<span>' , {
             'class': 'cryptpad-language'
         });
@@ -388,21 +392,24 @@ define([
     };
 
     var createTitle = function ($container, readOnly, config, Cryptpad) {
-        config = config || {};
+        var $titleContainer = $('<span>', {
+            id: 'toolbarTitle',
+            'class': TITLE_CLS
+        }).appendTo($container);
+
+        if (!config || typeof config !== "object") { return; }
+
         var callback = config.onRename;
         var placeholder = config.defaultName;
         var suggestName = config.suggestName;
 
         // Buttons
-        var $titleContainer = $('<span>', {
-            id: 'toolbarTitle',
-            'class': TITLE_CLS
-        }).appendTo($container);
         var $text = $('<span>', {
             'class': 'title'
         }).appendTo($titleContainer);
         var $pencilIcon = $('<span>', {
-            'class': 'pencilIcon'
+            'class': 'pencilIcon',
+            'title': Messages.clickToEdit
         });
         if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
         var $input = $('<input>', {
@@ -439,19 +446,19 @@ define([
                     callback(null, newtitle);
                     $input.hide();
                     $text.show();
-                    $pencilIcon.css('display', '');
+                    //$pencilIcon.css('display', '');
                 });
             }
             else if (e.which === 27) {
                 $input.hide();
                 $text.show();
-                $pencilIcon.css('display', '');
+                //$pencilIcon.css('display', '');
             }
         });
 
         var displayInput = function () {
             $text.hide();
-            $pencilIcon.css('display', 'none');
+            //$pencilIcon.css('display', 'none');
             var inputVal = suggestName() || "";
             $input.val(inputVal);
             $input.show();
@@ -468,17 +475,17 @@ define([
         var Cryptpad = config.common;
 
         var toolbar = createRealtimeToolbar($container);
-        var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
+        var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined;
-        var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
-        var lagElement = createLagElement($(userListElement));
         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 lagElement = createLagElement($userAdminElement);
+        var spinner = createSpinner($userAdminElement);
         var userData = config.userData;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
         var saveElement;
         var loadElement;
-        var $stateElement = $(userListElement).find('.' + STATE_CLS);
+        var $stateElement = $userAdminElement.find('.' + STATE_CLS);
 
         var connected = false;
 
@@ -490,7 +497,7 @@ define([
                 $container.find('.cryptpad-dropdown').hide();
             };
             var cancelEditTitle = function (e) {
-                if ($(e.target).parents('.' + TITLE_CLS).length) {
+                if ($(e.target).parents('.' + TITLE_CLS).length || !$titleElement) {
                     return;
                 }
                 $titleElement.find('input').hide();
@@ -508,6 +515,7 @@ define([
         }
 
         // Update user list
+        if (config.userData) {
             userList.change.push(function (newUserData) {
                 var users = userList.users;
                 if (users.indexOf(myUserName) !== -1) { connected = true; }
@@ -515,8 +523,17 @@ define([
                 /*if (newUserData) { // Someone has changed his name/color
                     userData = newUserData;
                 }*/
-            updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement, $userAdminElement);
+                checkSynchronizing(users, myUserName, $stateElement);
+                updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement);
             });
+        } else {
+            userList.change.push(function () {
+                var users = userList.users;
+                if (users.indexOf(myUserName) !== -1) { connected = true; }
+                if (!connected) { return; }
+                checkSynchronizing(users, myUserName, $stateElement);
+            });
+        }
         // Display notifications when users are joining/leaving the session
         var oldUserData;
         if (typeof Cryptpad !== "undefined") {

www/file/file.css

@@ -12,6 +12,14 @@ html, body {
 }
 
 body {
+    display: flex;
+    flex-flow: column;
+}
+
+.app-container {
+    flex: 1;
+    overflow: auto;
+    width: 100%;
     display: flex;
     flex-flow: row;
 }

www/file/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <title>CryptFiles</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="icon" type="image/png"
         href="/customize/main-favicon.png"
@@ -21,12 +22,12 @@
         }
         #pad-iframe {
             position:fixed;
-            top:2.5em;
+            top:0;
             left:0px;
             bottom:0px;
             right:0px;
             width:100%;
-            height:calc(100% - 2.5em);
+            height:100%;
             border:none;
             margin:0;
             padding:0;

www/file/inner.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="file.css" />
 </head>
 <body>
+    <div id="toolbar" class="toolbar-container"></div>
+    <div class="app-container">
         <div id="tree">
         </div>
         <div id="content">
@@ -42,6 +44,7 @@
                 <li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li>
             </ul>
         </div>
+    </div>
 </body>
 </html>
 

www/file/main.js

@@ -8,8 +8,9 @@ define([
     'json.sortify',
     '/common/cryptpad-common.js',
     '/file/fileObject.js',
+    '/common/toolbar.js',
     '/customize/pad.js'
-], function (Config, Listmap, Crypto, TextPatcher, Messages, JSONSortify, Cryptpad, FO) {
+], function (Config, Listmap, Crypto, TextPatcher, Messages, JSONSortify, Cryptpad, FO, Toolbar) {
     var module = window.MODULE = {};
 
     var $ = window.jQuery;
@@ -17,6 +18,10 @@ define([
     var $iframe = $('#pad-iframe').contents();
     var ifrw = $('#pad-iframe')[0].contentWindow;
 
+    var APP = window.APP = {
+        $bar: $iframe.find('#toolbar')
+    };
+
     var ROOT = "root";
     var ROOT_NAME = Messages.fm_rootName;
     var UNSORTED = "unsorted";
@@ -42,7 +47,7 @@ define([
         console.error.apply(console, arguments);
     };
     var log = config.log = Cryptpad.log;
-    var DEBUG_LS = module.DEBUG_LS = {
+    var DEBUG_LS = APP.DEBUG_LS = {
         resetLocalStorage : function () {
             delete localStorage[LOCALSTORAGE_OPENED];
             delete localStorage[LOCALSTORAGE_LAST];
@@ -132,6 +137,40 @@ define([
 
         var error = filesOp.error;
 
+        // TOOLBAR
+
+        var getLastName = function (cb) {
+            cb(null, files['cryptpad.username'] || '');
+        };
+
+        var setName = APP.setName = function (newName) {
+            if (typeof(newName) !== 'string') { return; }
+            var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
+            if(myUserNameTemp.length > 32) {
+                myUserNameTemp = myUserNameTemp.substr(0, 32);
+            }
+            var myUserName = myUserNameTemp;
+            files['cryptpad.username'] = myUserName;
+            APP.userName.lastName = myUserName;
+            var $button = APP.$userNameButton;
+            var $span = $('<div>').append($button.find('span').clone()).html();
+            $button.html($span + myUserName);
+        };
+
+        var $userBlock = APP.$bar.find('.' + Toolbar.constants.username);
+
+        // Store the object sent for the "change username" button so that we can update the field value correctly
+        var userNameButtonObject = APP.userName = {};
+        /* add a "change username" button */
+        getLastName(function (err, lastName) {
+            userNameButtonObject.lastName = lastName;
+            var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
+            $userBlock.append($username);
+            $username.append(lastName);
+            $username.show();
+        });
+
+        // FILE MANAGER
         var currentPath = module.currentPath = getLastOpenedFolder();
         var lastSelectTime;
         var selectedElement;
@@ -578,7 +617,6 @@ define([
             else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; }
             else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; }
             else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); }
-            document.title = name;
             var $title = $('<h1>').text(name);
             if (path.length > 1) {
                 var $parentFolder = $upIcon.clone().addClass("parentFolder")
@@ -1349,15 +1387,12 @@ define([
         refresh();
     };
 
-    /*
-    initLSOpened();
-    init(filesObject);
-    */
-
 
 
     // don't initialize until the store is ready.
     Cryptpad.ready(function () {
+        Cryptpad.styleAlerts();
+
         if (window.location.hash && window.location.hash === "#iframe") {
             $('.top-bar').hide();
             $('#pad-iframe').css({
@@ -1395,6 +1430,23 @@ define([
                 realtime: realtime,
                 logging: true,
             });
+
+            var readOnly = false;
+            userList = APP.userList = info.userList;
+            var config = {
+                readOnly: readOnly,
+                ifrw: window,
+                common: Cryptpad,
+                hideShare: true
+            };
+            var toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
+
+            var $bar = APP.$bar;
+            var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+            var $userBlock = $bar.find('.' + Toolbar.constants.username);
+            var $editShare = $bar.find('.' + Toolbar.constants.editShare);
+            var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
+
         }).on('ready', function () {
             module.files = rt.proxy;
             if (JSON.stringify(rt.proxy) === '{}') {

www/poll/test/index.html

@@ -95,7 +95,7 @@
 </head>
 <body>
 
-<div id="toolbar"></div>
+<div id="toolbar" class="toolbar-container"></div>
 
 <div id="howItWorks">
     <h1 id="mainTitle">CryptPoll</h1>

www/poll/test/main.js

@@ -12,7 +12,7 @@ define([
     '/common/notify.js',
     '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/jquery/dist/jquery.min.js',
-    //'/customize/pad.js'
+    '/customize/pad.js'
 ], function (Config, Messages, TextPatcher, Listmap, Crypto, Cryptpad, Hyperjson, Render, Toolbar) {
     var $ = window.jQuery;
 
@@ -26,7 +26,7 @@ define([
         Toolbar: Toolbar,
         Hyperjson: Hyperjson,
         Render: Render,
-        $bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }),
+        $bar: $('#toolbar'),
         editable: {
             row: [],
             col: []

www/slide/inner.html

@@ -118,19 +118,6 @@
       .CodeMirror {
         height: 100%;
       }
-      .cryptpad-toolbar {
-        padding: 0px 6px;
-      }
-      #cme_toolbox div.cryptpad-lag {
-        line-height: 24px;
-      }
-      #cme_toolbox {
-        font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-        background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
-        background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
-        background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */
-        background: linear-gradient(white, #DDDDDD); /* Standard syntax */
-      }
       .CodeMirror-focused .cm-matchhighlight {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
         background-position: bottom;
@@ -144,7 +131,7 @@
 <body>
     <div id="bar"></div>
 <!--    <textarea></textarea>-->
-    <div id="cme_toolbox"></div>
+    <div id="cme_toolbox" class="toolbar-container"></div>
     <textarea id="editor1" name="editor1"></textarea>
     <div id="modal">
         <div id="content"></div>