From dcfc59c2e2e8db26f35a667b10873386ee7022a2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 11:21:37 +0200
Subject: [PATCH 1/6] Translation key updated

---
 customize.dist/translations/messages.fr.js | 3 ++-
 customize.dist/translations/messages.js    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index c01da201c..52191570a 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -488,7 +488,8 @@ define(function () {
 
     out.header_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" alt="amour" /> en <img class="bottom-bar-fr" title="France" alt="France" src="/customize/fr.png" /> par <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
-    out.header_logoTitle = "Aller vers la page d'accueil";
+    out.updated_0_header_logoTitle = 'Retourner vers votre CryptDrive';
+    out.header_logoTitle = out.updated_0_header_logoTitle;
 
     // Initial states
 
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 42f1613e0..f64153742 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -498,7 +498,8 @@ define(function () {
     out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" alt="love" /> from <img class="bottom-bar-fr" src="/customize/fr.png" title="France" alt="France"/> by <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
 
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
-    out.header_logoTitle = 'Go to the main page';
+    out.updated_0_header_logoTitle = 'Go to your CryptDrive';
+    out.header_logoTitle = out.updated_0_header_logoTitle;
 
     // Initial states
 

From 13288ee18bc080d65ff0557918bdd135c628a096 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 15:52:25 +0200
Subject: [PATCH 2/6] Update the userlist in code, slide and pad

---
 customize.dist/main.css               |    8 -
 customize.dist/src/less/dropdown.less |    6 -
 customize.dist/src/less/toolbar.less  |  274 ++++---
 customize.dist/toolbar.css            | 1083 ++++++++++++++-----------
 www/code/code.css                     |    2 +-
 www/code/code.less                    |    3 +-
 www/code/main.js                      |    4 +-
 www/common/cryptpad-common.js         |    1 -
 www/common/toolbar2.js                |   82 +-
 www/pad/inner.html                    |    2 +-
 www/pad/main.js                       |    6 +-
 www/slide/main.js                     |    4 +-
 12 files changed, 850 insertions(+), 625 deletions(-)

diff --git a/customize.dist/main.css b/customize.dist/main.css
index b02ff7b9c..0f10044a2 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -467,14 +467,6 @@
   white-space: normal;
   text-align: left;
 }
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
-  text-align: baseline;
-}
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
-  font-style: italic;
-}
 .dropdown-bar .dropdown-bar-content p h2 {
   font-weight: bold;
   text-align: center;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 9ea8a3226..46c01e697 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -77,12 +77,6 @@
             margin: 0;
             white-space: normal;
             text-align: left;
-            &.cryptpad-dropdown-users {
-                text-align:baseline;
-                .yourself, .anonymous, .viewer {
-                    font-style: italic;
-                }
-            }
             h2 {
                 font-weight: bold;
                 text-align: center;
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 8626066e0..534341f99 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -24,6 +24,175 @@
 .cke_reset_all * {
     color: inherit;
 }
+
+#cke_1_contents {
+    margin-top: -1px;
+    display: flex;
+}
+
+.userlist-drawer {
+    font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    width: 175px;
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 10px;
+    box-sizing: border-box;
+    h2 {
+        font-size: 1.2em;
+        font-weight: bold;
+        text-align: center;
+        padding: 5px 0px;
+        margin: 5px 0px;
+        font-size: 16px;
+        white-space: normal;
+    }
+    text-align:baseline;
+    .viewer {
+        font-style: italic;
+        padding: 5px;
+        background: rgba(0,0,0,0.1);
+        margin: 2px 0;
+    }
+
+    .userlist-others {
+        display: flex;
+        flex-flow: column;
+        margin: 10px 0;
+        margin-bottom: 20px;
+        &>span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: 5px;
+            background: rgba(0,0,0,0.1);
+            margin: 2px 0;
+        }
+    }
+}
+
+body {
+    .addToolbarColors (@color, @bg-color) {
+        .userlist-drawer {
+            background-color: @bgcolor;
+            color: @color;
+            h2 {
+                background-color: darken(@bgcolor, 10%);
+            }
+        }
+        .cryptpad-toolbar {
+            background-color: @bgcolor;
+            color: @color;
+            .userlist-drawer {
+                background-color: @bgcolor;
+                width: 150px;
+                position: absolute;
+                left: 0;
+                top: 96px;
+                bottom: 0;
+            }
+            .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
+                background-color: lighten(@bgcolor, 8%);
+                button:hover {
+                    background-color: @bgcolor;
+                }
+            }
+            .hoverable:hover {
+                .editable {
+                    cursor: text;
+                    border: 1px solid lighten(@bgcolor, 15%);
+                    background: darken(@bgcolor, 10%);
+                    color: @color;
+                }
+                .pencilIcon {
+                    border: 1px solid lighten(@bgcolor, 15%);
+                    background: darken(@bgcolor, 10%);
+                    color: @color;
+                    &:hover {
+                        background: darken(@bgcolor, 5%);
+                    }
+                }
+            }
+            .saveIcon {
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+                &:hover {
+                    background: darken(@bgcolor, 5%);
+                }
+            }
+            input {
+                border: 1px solid lighten(@bgcolor, 15%);
+                background: darken(@bgcolor, 10%);
+                color: @color;
+            }
+            .dropdown-bar-content {
+                background: darken(@bgcolor, 5%);
+                border: 1px solid @color;
+                color: @color;
+                a {
+                    color: @color;
+                    &.active {
+                        background-color: darken(@bgcolor, 10%);
+                        color: @color;
+                    }
+                    &:hover {
+                        background-color: @bgcolor;
+                        color: @color;
+                    }
+                }
+                hr {
+                    background-color: darken(@bgcolor, 15%);
+                }
+                p {
+                    h2 {
+                        background-color: darken(@bgcolor, 10%);
+                    }
+                    .accountData {
+                        background-color: @bgcolor;
+                    }
+                }
+            }
+        }
+    }
+
+    &.app-pad {
+        @bgcolor: @toolbar-pad-bg;
+        @color: @toolbar-pad-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-code {
+        @bgcolor: @toolbar-code-bg;
+        @color: @toolbar-code-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-slide {
+        @bgcolor: @toolbar-slide-bg;
+        @color: @toolbar-slide-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-poll {
+        @bgcolor: @toolbar-poll-bg;
+        @color: @toolbar-poll-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-whiteboard {
+        @bgcolor: @toolbar-whiteboard-bg;
+        @color: @toolbar-whiteboard-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-drive {
+        @bgcolor: @toolbar-drive-bg;
+        @color: @toolbar-drive-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+    &.app-file {
+        @bgcolor: @toolbar-file-bg;
+        @color: @toolbar-file-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
+
+}
+
 .cryptpad-toolbar {
     @toolbar-green: #5cb85c;
 
@@ -34,108 +203,7 @@
     background-color: @toolbar-default-bg;
     color: @toolbar-default-color;
 
-    .addToolbarColors (@color, @bg-color) {
-        background-color: @bgcolor;
-        color: @color;
-        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
-            background-color: lighten(@bgcolor, 8%);
-            button:hover {
-                background-color: @bgcolor;
-            }
-        }
-        .hoverable:hover {
-            .editable {
-                cursor: text;
-                border: 1px solid lighten(@bgcolor, 15%);
-                background: darken(@bgcolor, 10%);
-                color: @color;
-            }
-            .pencilIcon {
-                border: 1px solid lighten(@bgcolor, 15%);
-                background: darken(@bgcolor, 10%);
-                color: @color;
-                &:hover {
-                    background: darken(@bgcolor, 5%);
-                }
-            }
-        }
-        .saveIcon {
-            border: 1px solid lighten(@bgcolor, 15%);
-            background: darken(@bgcolor, 10%);
-            color: @color;
-            &:hover {
-                background: darken(@bgcolor, 5%);
-            }
-        }
-        input {
-            border: 1px solid lighten(@bgcolor, 15%);
-            background: darken(@bgcolor, 10%);
-            color: @color;
-        }
-        .dropdown-bar-content {
-            background: darken(@bgcolor, 5%);
-            border: 1px solid @color;
-            color: @color;
-            a {
-                color: @color;
-                &.active {
-                    background-color: darken(@bgcolor, 10%);
-                    color: @color;
-                }
-                &:hover {
-                    background-color: @bgcolor;
-                    color: @color;
-                }
-            }
-            hr {
-                background-color: darken(@bgcolor, 15%);
-            }
-            p {
-                h2 {
-                    background-color: darken(@bgcolor, 10%);
-                }
-                .accountData {
-                    background-color: @bgcolor;
-                }
-            }
-        }
-    }
 
-    &.pad {
-        @bgcolor: @toolbar-pad-bg;
-        @color: @toolbar-pad-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.code {
-        @bgcolor: @toolbar-code-bg;
-        @color: @toolbar-code-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.slide {
-        @bgcolor: @toolbar-slide-bg;
-        @color: @toolbar-slide-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.poll {
-        @bgcolor: @toolbar-poll-bg;
-        @color: @toolbar-poll-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.whiteboard {
-        @bgcolor: @toolbar-whiteboard-bg;
-        @color: @toolbar-whiteboard-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.drive {
-        @bgcolor: @toolbar-drive-bg;
-        @color: @toolbar-drive-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
-    &.file {
-        @bgcolor: @toolbar-file-bg;
-        @color: @toolbar-file-color;
-        .addToolbarColors(@color, @bgcolor);
-    }
 
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
@@ -664,7 +732,9 @@
         }
     }
     button {
-        margin: 2px 4px 2px 0px;
+        margin: 0px;
+        border-radius: 0;
+        height: 100%;
     }
     .dropdown-bar-content {
         margin-top: -1px;
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 70bcff7a2..b50c7c0a3 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -59,14 +59,6 @@
   white-space: normal;
   text-align: left;
 }
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
-  text-align: baseline;
-}
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
-.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
-  font-style: italic;
-}
 .dropdown-bar .dropdown-bar-content p h2 {
   font-weight: bold;
   text-align: center;
@@ -101,6 +93,615 @@
 .cke_reset_all * {
   color: inherit;
 }
+#cke_1_contents {
+  margin-top: -1px;
+  display: flex;
+}
+.userlist-drawer {
+  font: normal normal normal 14px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+  width: 175px;
+  display: block;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: baseline;
+}
+.userlist-drawer h2 {
+  font-size: 1.2em;
+  font-weight: bold;
+  text-align: center;
+  padding: 5px 0px;
+  margin: 5px 0px;
+  font-size: 16px;
+  white-space: normal;
+}
+.userlist-drawer .viewer {
+  font-style: italic;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.1);
+  margin: 2px 0;
+}
+.userlist-drawer .userlist-others {
+  display: flex;
+  flex-flow: column;
+  margin: 10px 0;
+  margin-bottom: 20px;
+}
+.userlist-drawer .userlist-others > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.1);
+  margin: 2px 0;
+}
+body.app-pad .userlist-drawer {
+  background-color: #1c4fa0;
+  color: #fff;
+}
+body.app-pad .userlist-drawer h2 {
+  background-color: #143a75;
+}
+body.app-pad .cryptpad-toolbar {
+  background-color: #1c4fa0;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .userlist-drawer {
+  background-color: #1c4fa0;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-pad .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-pad .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-pad .cryptpad-toolbar .drawer-content {
+  background-color: #2260c3;
+}
+body.app-pad .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-pad .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-pad .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #1c4fa0;
+}
+body.app-pad .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #18448a;
+}
+body.app-pad .cryptpad-toolbar .saveIcon {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .saveIcon:hover {
+  background: #18448a;
+}
+body.app-pad .cryptpad-toolbar input {
+  border: 1px solid #2e71da;
+  background: #143a75;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content {
+  background: #18448a;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #143a75;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #1c4fa0;
+  color: #fff;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #112f5f;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #143a75;
+}
+body.app-pad .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #1c4fa0;
+}
+body.app-code .userlist-drawer {
+  background-color: #ffae00;
+  color: #000;
+}
+body.app-code .userlist-drawer h2 {
+  background-color: #cc8b00;
+}
+body.app-code .cryptpad-toolbar {
+  background-color: #ffae00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .userlist-drawer {
+  background-color: #ffae00;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-code .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-code .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-code .cryptpad-toolbar .drawer-content {
+  background-color: #ffbb29;
+}
+body.app-code .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-code .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-code .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #ffae00;
+}
+body.app-code .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #e69d00;
+}
+body.app-code .cryptpad-toolbar .saveIcon {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .saveIcon:hover {
+  background: #e69d00;
+}
+body.app-code .cryptpad-toolbar input {
+  border: 1px solid #ffc64d;
+  background: #cc8b00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content {
+  background: #e69d00;
+  border: 1px solid #000;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content a {
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #cc8b00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #ffae00;
+  color: #000;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #b37a00;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #cc8b00;
+}
+body.app-code .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #ffae00;
+}
+body.app-slide .userlist-drawer {
+  background-color: #e57614;
+  color: #fff;
+}
+body.app-slide .userlist-drawer h2 {
+  background-color: #b65e10;
+}
+body.app-slide .cryptpad-toolbar {
+  background-color: #e57614;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .userlist-drawer {
+  background-color: #e57614;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-slide .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-slide .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-slide .cryptpad-toolbar .drawer-content {
+  background-color: #ed8b34;
+}
+body.app-slide .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-slide .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-slide .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #e57614;
+}
+body.app-slide .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #ce6a12;
+}
+body.app-slide .cryptpad-toolbar .saveIcon {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .saveIcon:hover {
+  background: #ce6a12;
+}
+body.app-slide .cryptpad-toolbar input {
+  border: 1px solid #f09e55;
+  background: #b65e10;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content {
+  background: #ce6a12;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #b65e10;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #e57614;
+  color: #fff;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #9f520e;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #b65e10;
+}
+body.app-slide .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #e57614;
+}
+body.app-poll .userlist-drawer {
+  background-color: #006304;
+  color: #fff;
+}
+body.app-poll .userlist-drawer h2 {
+  background-color: #003002;
+}
+body.app-poll .cryptpad-toolbar {
+  background-color: #006304;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .userlist-drawer {
+  background-color: #006304;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-poll .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-poll .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-poll .cryptpad-toolbar .drawer-content {
+  background-color: #008c06;
+}
+body.app-poll .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-poll .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-poll .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #006304;
+}
+body.app-poll .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #004a03;
+}
+body.app-poll .cryptpad-toolbar .saveIcon {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .saveIcon:hover {
+  background: #004a03;
+}
+body.app-poll .cryptpad-toolbar input {
+  border: 1px solid #00b007;
+  background: #003002;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content {
+  background: #004a03;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #003002;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #006304;
+  color: #fff;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #001701;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #003002;
+}
+body.app-poll .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #006304;
+}
+body.app-whiteboard .userlist-drawer {
+  background-color: #800080;
+  color: #fff;
+}
+body.app-whiteboard .userlist-drawer h2 {
+  background-color: #4d004d;
+}
+body.app-whiteboard .cryptpad-toolbar {
+  background-color: #800080;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .userlist-drawer {
+  background-color: #800080;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-whiteboard .cryptpad-toolbar .drawer-content {
+  background-color: #a900a9;
+}
+body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-whiteboard .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #800080;
+}
+body.app-whiteboard .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #670066;
+}
+body.app-whiteboard .cryptpad-toolbar .saveIcon {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .saveIcon:hover {
+  background: #670066;
+}
+body.app-whiteboard .cryptpad-toolbar input {
+  border: 1px solid #cd00cc;
+  background: #4d004d;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content {
+  background: #670066;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #4d004d;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #800080;
+  color: #fff;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #340033;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #4d004d;
+}
+body.app-whiteboard .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #800080;
+}
+body.app-drive .userlist-drawer {
+  background-color: #0087ff;
+  color: #fff;
+}
+body.app-drive .userlist-drawer h2 {
+  background-color: #006ccc;
+}
+body.app-drive .cryptpad-toolbar {
+  background-color: #0087ff;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .userlist-drawer {
+  background-color: #0087ff;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-drive .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-drive .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-drive .cryptpad-toolbar .drawer-content {
+  background-color: #299aff;
+}
+body.app-drive .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-drive .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-drive .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #0087ff;
+}
+body.app-drive .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #0079e6;
+}
+body.app-drive .cryptpad-toolbar .saveIcon {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .saveIcon:hover {
+  background: #0079e6;
+}
+body.app-drive .cryptpad-toolbar input {
+  border: 1px solid #4dabff;
+  background: #006ccc;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content {
+  background: #0079e6;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #006ccc;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #0087ff;
+  color: #fff;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #005eb3;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #006ccc;
+}
+body.app-drive .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #0087ff;
+}
+body.app-file .userlist-drawer {
+  background-color: #cd2532;
+  color: #fff;
+}
+body.app-file .userlist-drawer h2 {
+  background-color: #a21d27;
+}
+body.app-file .cryptpad-toolbar {
+  background-color: #cd2532;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .userlist-drawer {
+  background-color: #cd2532;
+  width: 150px;
+  position: absolute;
+  left: 0;
+  top: 96px;
+  bottom: 0;
+}
+body.app-file .cryptpad-toolbar .cryptpad-toolbar-leftside,
+body.app-file .cryptpad-toolbar .cryptpad-toolbar-rightside,
+body.app-file .cryptpad-toolbar .drawer-content {
+  background-color: #dc3f4b;
+}
+body.app-file .cryptpad-toolbar .cryptpad-toolbar-leftside button:hover,
+body.app-file .cryptpad-toolbar .cryptpad-toolbar-rightside button:hover,
+body.app-file .cryptpad-toolbar .drawer-content button:hover {
+  background-color: #cd2532;
+}
+body.app-file .cryptpad-toolbar .hoverable:hover .editable {
+  cursor: text;
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .hoverable:hover .pencilIcon {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
+  background: #b7212d;
+}
+body.app-file .cryptpad-toolbar .saveIcon {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .saveIcon:hover {
+  background: #b7212d;
+}
+body.app-file .cryptpad-toolbar input {
+  border: 1px solid #e25d67;
+  background: #a21d27;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content {
+  background: #b7212d;
+  border: 1px solid #fff;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content a {
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content a.active {
+  background-color: #a21d27;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content a:hover {
+  background-color: #cd2532;
+  color: #fff;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content hr {
+  background-color: #8c1922;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content p h2 {
+  background-color: #a21d27;
+}
+body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
+  background-color: #cd2532;
+}
 .cryptpad-toolbar {
   box-sizing: border-box;
   padding: 0px;
@@ -116,468 +717,6 @@
   width: 100%;
   z-index: 9001;
 }
-.cryptpad-toolbar.pad {
-  background-color: #1c4fa0;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.pad .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.pad .drawer-content {
-  background-color: #2260c3;
-}
-.cryptpad-toolbar.pad .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.pad .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.pad .drawer-content button:hover {
-  background-color: #1c4fa0;
-}
-.cryptpad-toolbar.pad .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #2e71da;
-  background: #143a75;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .hoverable:hover .pencilIcon {
-  border: 1px solid #2e71da;
-  background: #143a75;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .hoverable:hover .pencilIcon:hover {
-  background: #18448a;
-}
-.cryptpad-toolbar.pad .saveIcon {
-  border: 1px solid #2e71da;
-  background: #143a75;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .saveIcon:hover {
-  background: #18448a;
-}
-.cryptpad-toolbar.pad input {
-  border: 1px solid #2e71da;
-  background: #143a75;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content {
-  background: #18448a;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content a.active {
-  background-color: #143a75;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content a:hover {
-  background-color: #1c4fa0;
-  color: #fff;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content hr {
-  background-color: #112f5f;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content p h2 {
-  background-color: #143a75;
-}
-.cryptpad-toolbar.pad .dropdown-bar-content p .accountData {
-  background-color: #1c4fa0;
-}
-.cryptpad-toolbar.code {
-  background-color: #ffae00;
-  color: #000;
-}
-.cryptpad-toolbar.code .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.code .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.code .drawer-content {
-  background-color: #ffbb29;
-}
-.cryptpad-toolbar.code .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.code .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.code .drawer-content button:hover {
-  background-color: #ffae00;
-}
-.cryptpad-toolbar.code .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #ffc64d;
-  background: #cc8b00;
-  color: #000;
-}
-.cryptpad-toolbar.code .hoverable:hover .pencilIcon {
-  border: 1px solid #ffc64d;
-  background: #cc8b00;
-  color: #000;
-}
-.cryptpad-toolbar.code .hoverable:hover .pencilIcon:hover {
-  background: #e69d00;
-}
-.cryptpad-toolbar.code .saveIcon {
-  border: 1px solid #ffc64d;
-  background: #cc8b00;
-  color: #000;
-}
-.cryptpad-toolbar.code .saveIcon:hover {
-  background: #e69d00;
-}
-.cryptpad-toolbar.code input {
-  border: 1px solid #ffc64d;
-  background: #cc8b00;
-  color: #000;
-}
-.cryptpad-toolbar.code .dropdown-bar-content {
-  background: #e69d00;
-  border: 1px solid #000;
-  color: #000;
-}
-.cryptpad-toolbar.code .dropdown-bar-content a {
-  color: #000;
-}
-.cryptpad-toolbar.code .dropdown-bar-content a.active {
-  background-color: #cc8b00;
-  color: #000;
-}
-.cryptpad-toolbar.code .dropdown-bar-content a:hover {
-  background-color: #ffae00;
-  color: #000;
-}
-.cryptpad-toolbar.code .dropdown-bar-content hr {
-  background-color: #b37a00;
-}
-.cryptpad-toolbar.code .dropdown-bar-content p h2 {
-  background-color: #cc8b00;
-}
-.cryptpad-toolbar.code .dropdown-bar-content p .accountData {
-  background-color: #ffae00;
-}
-.cryptpad-toolbar.slide {
-  background-color: #e57614;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.slide .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.slide .drawer-content {
-  background-color: #ed8b34;
-}
-.cryptpad-toolbar.slide .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.slide .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.slide .drawer-content button:hover {
-  background-color: #e57614;
-}
-.cryptpad-toolbar.slide .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #f09e55;
-  background: #b65e10;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .hoverable:hover .pencilIcon {
-  border: 1px solid #f09e55;
-  background: #b65e10;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .hoverable:hover .pencilIcon:hover {
-  background: #ce6a12;
-}
-.cryptpad-toolbar.slide .saveIcon {
-  border: 1px solid #f09e55;
-  background: #b65e10;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .saveIcon:hover {
-  background: #ce6a12;
-}
-.cryptpad-toolbar.slide input {
-  border: 1px solid #f09e55;
-  background: #b65e10;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content {
-  background: #ce6a12;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content a.active {
-  background-color: #b65e10;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content a:hover {
-  background-color: #e57614;
-  color: #fff;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content hr {
-  background-color: #9f520e;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content p h2 {
-  background-color: #b65e10;
-}
-.cryptpad-toolbar.slide .dropdown-bar-content p .accountData {
-  background-color: #e57614;
-}
-.cryptpad-toolbar.poll {
-  background-color: #006304;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.poll .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.poll .drawer-content {
-  background-color: #008c06;
-}
-.cryptpad-toolbar.poll .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.poll .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.poll .drawer-content button:hover {
-  background-color: #006304;
-}
-.cryptpad-toolbar.poll .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #00b007;
-  background: #003002;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .hoverable:hover .pencilIcon {
-  border: 1px solid #00b007;
-  background: #003002;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .hoverable:hover .pencilIcon:hover {
-  background: #004a03;
-}
-.cryptpad-toolbar.poll .saveIcon {
-  border: 1px solid #00b007;
-  background: #003002;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .saveIcon:hover {
-  background: #004a03;
-}
-.cryptpad-toolbar.poll input {
-  border: 1px solid #00b007;
-  background: #003002;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content {
-  background: #004a03;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content a.active {
-  background-color: #003002;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content a:hover {
-  background-color: #006304;
-  color: #fff;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content hr {
-  background-color: #001701;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content p h2 {
-  background-color: #003002;
-}
-.cryptpad-toolbar.poll .dropdown-bar-content p .accountData {
-  background-color: #006304;
-}
-.cryptpad-toolbar.whiteboard {
-  background-color: #800080;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.whiteboard .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.whiteboard .drawer-content {
-  background-color: #a900a9;
-}
-.cryptpad-toolbar.whiteboard .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.whiteboard .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.whiteboard .drawer-content button:hover {
-  background-color: #800080;
-}
-.cryptpad-toolbar.whiteboard .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #cd00cc;
-  background: #4d004d;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .hoverable:hover .pencilIcon {
-  border: 1px solid #cd00cc;
-  background: #4d004d;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .hoverable:hover .pencilIcon:hover {
-  background: #670066;
-}
-.cryptpad-toolbar.whiteboard .saveIcon {
-  border: 1px solid #cd00cc;
-  background: #4d004d;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .saveIcon:hover {
-  background: #670066;
-}
-.cryptpad-toolbar.whiteboard input {
-  border: 1px solid #cd00cc;
-  background: #4d004d;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content {
-  background: #670066;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content a.active {
-  background-color: #4d004d;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content a:hover {
-  background-color: #800080;
-  color: #fff;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content hr {
-  background-color: #340033;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content p h2 {
-  background-color: #4d004d;
-}
-.cryptpad-toolbar.whiteboard .dropdown-bar-content p .accountData {
-  background-color: #800080;
-}
-.cryptpad-toolbar.drive {
-  background-color: #0087ff;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.drive .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.drive .drawer-content {
-  background-color: #299aff;
-}
-.cryptpad-toolbar.drive .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.drive .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.drive .drawer-content button:hover {
-  background-color: #0087ff;
-}
-.cryptpad-toolbar.drive .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #4dabff;
-  background: #006ccc;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .hoverable:hover .pencilIcon {
-  border: 1px solid #4dabff;
-  background: #006ccc;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .hoverable:hover .pencilIcon:hover {
-  background: #0079e6;
-}
-.cryptpad-toolbar.drive .saveIcon {
-  border: 1px solid #4dabff;
-  background: #006ccc;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .saveIcon:hover {
-  background: #0079e6;
-}
-.cryptpad-toolbar.drive input {
-  border: 1px solid #4dabff;
-  background: #006ccc;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content {
-  background: #0079e6;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content a.active {
-  background-color: #006ccc;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content a:hover {
-  background-color: #0087ff;
-  color: #fff;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content hr {
-  background-color: #005eb3;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content p h2 {
-  background-color: #006ccc;
-}
-.cryptpad-toolbar.drive .dropdown-bar-content p .accountData {
-  background-color: #0087ff;
-}
-.cryptpad-toolbar.file {
-  background-color: #cd2532;
-  color: #fff;
-}
-.cryptpad-toolbar.file .cryptpad-toolbar-leftside,
-.cryptpad-toolbar.file .cryptpad-toolbar-rightside,
-.cryptpad-toolbar.file .drawer-content {
-  background-color: #dc3f4b;
-}
-.cryptpad-toolbar.file .cryptpad-toolbar-leftside button:hover,
-.cryptpad-toolbar.file .cryptpad-toolbar-rightside button:hover,
-.cryptpad-toolbar.file .drawer-content button:hover {
-  background-color: #cd2532;
-}
-.cryptpad-toolbar.file .hoverable:hover .editable {
-  cursor: text;
-  border: 1px solid #e25d67;
-  background: #a21d27;
-  color: #fff;
-}
-.cryptpad-toolbar.file .hoverable:hover .pencilIcon {
-  border: 1px solid #e25d67;
-  background: #a21d27;
-  color: #fff;
-}
-.cryptpad-toolbar.file .hoverable:hover .pencilIcon:hover {
-  background: #b7212d;
-}
-.cryptpad-toolbar.file .saveIcon {
-  border: 1px solid #e25d67;
-  background: #a21d27;
-  color: #fff;
-}
-.cryptpad-toolbar.file .saveIcon:hover {
-  background: #b7212d;
-}
-.cryptpad-toolbar.file input {
-  border: 1px solid #e25d67;
-  background: #a21d27;
-  color: #fff;
-}
-.cryptpad-toolbar.file .dropdown-bar-content {
-  background: #b7212d;
-  border: 1px solid #fff;
-  color: #fff;
-}
-.cryptpad-toolbar.file .dropdown-bar-content a {
-  color: #fff;
-}
-.cryptpad-toolbar.file .dropdown-bar-content a.active {
-  background-color: #a21d27;
-  color: #fff;
-}
-.cryptpad-toolbar.file .dropdown-bar-content a:hover {
-  background-color: #cd2532;
-  color: #fff;
-}
-.cryptpad-toolbar.file .dropdown-bar-content hr {
-  background-color: #8c1922;
-}
-.cryptpad-toolbar.file .dropdown-bar-content p h2 {
-  background-color: #a21d27;
-}
-.cryptpad-toolbar.file .dropdown-bar-content p .accountData {
-  background-color: #cd2532;
-}
 .cryptpad-toolbar .fa {
   font: normal normal normal 14px/1 FontAwesome;
   font-family: FontAwesome;
@@ -1095,7 +1234,9 @@
   margin: 5px 0px;
 }
 .cryptpad-toolbar-leftside button {
-  margin: 2px 4px 2px 0px;
+  margin: 0px;
+  border-radius: 0;
+  height: 100%;
 }
 .cryptpad-toolbar-leftside .dropdown-bar-content {
   margin-top: -1px;
diff --git a/www/code/code.css b/www/code/code.css
index 320256ab5..359eff778 100644
--- a/www/code/code.css
+++ b/www/code/code.css
@@ -26,9 +26,9 @@ body {
   transition: width 500ms, min-width 500ms, max-width 500ms;
 }
 .CodeMirror.fullPage {
-  min-width: 100%;
   max-width: 100%;
   resize: none;
+  flex: 1;
 }
 .CodeMirror-focused .cm-matchhighlight {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
diff --git a/www/code/code.less b/www/code/code.less
index 47b430350..8e075e87f 100644
--- a/www/code/code.less
+++ b/www/code/code.less
@@ -30,9 +30,10 @@ body {
     resize: horizontal;
 }
 .CodeMirror.fullPage {
-    min-width: 100%;
+    //min-width: 100%;
     max-width: 100%;
     resize: none;
+    flex: 1;
 }
 .CodeMirror-focused .cm-matchhighlight {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
diff --git a/www/code/main.js b/www/code/main.js
index 6e0270285..b9fb3c37a 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -41,6 +41,7 @@ define([
 
         var andThen = function (CMeditor) {
             var $iframe = $('#pad-iframe').contents();
+            var $contentContainer = $iframe.find('#editorContainer');
             var $previewContainer = $iframe.find('#previewContainer');
             var $preview = $iframe.find('#preview');
             $preview.click(function (e) {
@@ -188,7 +189,8 @@ define([
                     ifrw: ifrw,
                     realtime: info.realtime,
                     network: info.network,
-                    $container: $bar
+                    $container: $bar,
+                    $contentContainer: $contentContainer
                 };
                 toolbar = APP.toolbar = Toolbar.create(configTb);
 
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index fb19e0f52..708d2e42a 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -924,7 +924,6 @@ define([
     common.createButton = function (type, rightside, data, callback) {
         var button;
         var size = "17px";
-        console.log(type);
         switch (type) {
             case 'export':
                 button = $('<button>', {
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index 8849eed4e..92395c89f 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -70,7 +70,8 @@ define([
 
         var parsed = Cryptpad.parsePadUrl(window.location.href);
         if (typeof parsed.type === "string") {
-            $toolbar.addClass(parsed.type);
+            var b = config.$container.parents('body')[0];
+            config.$container.parents('body').addClass('app-' + parsed.type);
         }
 
         var $topContainer = $('<div>', {'class': TOP_CLS});
@@ -144,15 +145,16 @@ define([
         var myUid = userData[userNetfluxId] ? userData[userNetfluxId].uid : undefined;
         var uids = [];
         userList.forEach(function(user) {
-            if (user !== userNetfluxId) {
+            //if (user !== userNetfluxId) {
                 var data = userData[user] || {};
                 var userName = data.name;
                 var userId = data.uid;
-                if (userName && uids.indexOf(userId) === -1 && (!myUid || userId !== myUid)) {
+                if (!data.uid) { return; }
+                if (uids.indexOf(userId) === -1) {// && (!myUid || userId !== myUid)) {
                     uids.push(userId);
-                    list.push(userName);
-                } else if (userName) { i++; }
-            }
+                    list.push(data);
+                } else { i++; }
+            //}
         });
         return {
             list: list,
@@ -167,6 +169,7 @@ define([
     var updateUserList = function (toolbar, config) {
         // Make sure the elements are displayed
         var $userButtons = toolbar.userlist;
+        var $userlistContent = toolbar.userlistContent;
 
         var userList = config.userList.list.users;
         var userData = config.userList.data;
@@ -185,38 +188,34 @@ define([
         var editUsersNames = others.list;
         var duplicates = others.duplicates; // Number of duplicates
 
+        editUsersNames.sort(function (a, b) {
+            var na = a.name || Messages.anonymous;
+            var nb = b.name || Messages.anonymous;
+            return na.toLowerCase() > nb.toLowerCase();
+        });
+
         var numberOfEditUsers = userList.length - duplicates;
         var numberOfViewUsers = numberOfUsers - userList.length;
 
-        // Number of anonymous editing users
-        var anonymous = numberOfEditUsers - editUsersNames.length;
-
         // Update the userlist
         var $usersTitle = $('<h2>').text(Messages.users);
-        var $editUsers = $userButtons.find('.' + USERLIST_CLS);
+        var $editUsers = $userlistContent;
         $editUsers.html('').append($usersTitle);
 
-        var $editUsersList = $('<pre>');
-        // Yourself (edit only)
-        if (config.readOnly !== 1) {
-            $editUsers.append('<span class="yourself">' + Messages.yourself + '</span>');
-            anonymous--;
-        }
+        var $editUsersList = $('<div>', {'class': 'userlist-others'});
+
         // Editors
-        $editUsersList.text(editUsersNames.join('\n')); // .text() to avoid XSS
+        editUsersNames.forEach(function (data) {
+            var name = data.name || Messages.anonymous;
+            var $span = $('<span>', {'title': name}).text(name);
+            $span.data('uid', data.uid);
+            $editUsersList.append($span);
+        });
         $editUsers.append($editUsersList);
-        // Anonymous editors
-        if (anonymous > 0) {
-            var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
-            $editUsers.append('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
-        }
+
         // Viewers
         if (numberOfViewUsers > 0) {
             var viewText = '<span class="viewer">';
-            if (numberOfEditUsers > 0) {
-                $editUsers.append('<br>');
-                viewText += Messages.and + ' ';
-            }
             var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
             viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
             $editUsers.append(viewText);
@@ -275,12 +274,33 @@ define([
                 attributes: {'class': USERLIST_CLS},
             }]
         };
-        var $block = Cryptpad.createDropdown(dropdownConfig);
-        $block.attr('id', 'userButtons');
-        toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
-        toolbar.$leftside.prepend($block);
 
-        return $block;
+        var $content = $('<div>', {'class': 'userlist-drawer'});
+        $('<p>', {'class': USERLIST_CLS}).appendTo($content);
+        toolbar.userlistContent = $content;
+
+        var $container = $('<span>', {id: 'userButtons'});
+
+        var $button = $('<button>').appendTo($container);
+        $('<span>',{'class': 'buttonTitle'}).appendTo($button);
+
+        toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
+        toolbar.$leftside.prepend($container);
+
+        if (config.$contentContainer) {
+            config.$contentContainer.prepend($content);
+        }
+
+        $button.click(function (e) {
+            $content.toggle();
+            Cryptpad.setAttribute('userlist-drawer', $content.is(':visible'));
+        });
+
+        Cryptpad.getAttribute('userlist-drawer', function (err, val) {
+            if (val === false) { $content.hide(); }
+        });
+
+        return $container;
     };
 
     var createShare = function (toolbar, config) {
diff --git a/www/pad/inner.html b/www/pad/inner.html
index e701182db..c8698e194 100644
--- a/www/pad/inner.html
+++ b/www/pad/inner.html
@@ -29,7 +29,7 @@
     }
     </style>
 </head>
-<body>
+<body class="app-pad">
     <textarea style="display:none" id="editor1" name="editor1"></textarea>
 </body>
 </html>
diff --git a/www/pad/main.js b/www/pad/main.js
index 6538f0222..099e3217f 100644
--- a/www/pad/main.js
+++ b/www/pad/main.js
@@ -89,6 +89,7 @@ define([
     };
 
     var andThen = function (Ckeditor) {
+        var $iframe = $('#pad-iframe').contents();
         var secret = Cryptpad.getSecrets();
         var readOnly = secret.keys && !secret.keys.editKeyStr;
         if (!secret.keys) {
@@ -465,7 +466,8 @@ define([
                     ifrw: ifrw,
                     realtime: info.realtime,
                     network: info.network,
-                    $container: $bar
+                    $container: $bar,
+                    $contentContainer: $iframe.find('#cke_1_contents')
                 };
                 toolbar = info.realtime.toolbar = Toolbar.create(configTb);
 
@@ -561,6 +563,8 @@ define([
                         editor.execCommand('maximize');
                     }
                 }
+                // editor.execCommand('maximize') removes all the classes from the body tag
+                $iframe.find('body').addClass('app-pad');
 
                 if (module.realtime !== info.realtime) {
                     module.patchText = TextPatcher.create({
diff --git a/www/slide/main.js b/www/slide/main.js
index 9ea3925e9..fcbcd109e 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -49,6 +49,7 @@ define([
 
         var andThen = function (CMeditor) {
             var $iframe = $('#pad-iframe').contents();
+            var $contentContainer = $iframe.find('#editorContainer');
             var CodeMirror = Cryptpad.createCodemirror(CMeditor, ifrw, Cryptpad);
             editor = CodeMirror.editor;
 
@@ -358,7 +359,8 @@ define([
                     ifrw: ifrw,
                     realtime: info.realtime,
                     network: info.network,
-                    $container: $bar
+                    $container: $bar,
+                    $contentContainer: $contentContainer
                 };
                 toolbar = module.toolbar = Toolbar.create(configTb);
 

From 684269fdda34873b121791f693f5f8d12611e8cb Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 16:14:54 +0200
Subject: [PATCH 3/6] Userlist in polls

---
 customize.dist/src/less/toolbar.less |  1 +
 customize.dist/toolbar.css           |  1 +
 www/common/cryptpad-common.js        |  2 +-
 www/common/toolbar2.js               | 13 +-------
 www/poll/index.html                  | 47 +++++++++++++++-------------
 www/poll/main.js                     |  3 +-
 www/poll/poll.css                    | 11 +++++++
 www/poll/poll.less                   | 11 +++++++
 8 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 534341f99..ed598f7e8 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -39,6 +39,7 @@
     padding: 10px;
     box-sizing: border-box;
     h2 {
+        color: inherit;
         font-size: 1.2em;
         font-weight: bold;
         text-align: center;
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index b50c7c0a3..bf38c56a0 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -108,6 +108,7 @@
   text-align: baseline;
 }
 .userlist-drawer h2 {
+  color: inherit;
   font-size: 1.2em;
   font-weight: bold;
   text-align: center;
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 492bb06d6..35a41e18c 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -413,7 +413,7 @@ define([
     };
     common.setAttribute = function (attr, value, cb) {
         getStore().set(["cryptpad", attr].join('.'), value, function (err, data) {
-            cb(err, data);
+            if (cb) { cb(err, data); }
         });
     };
     common.setLSAttribute = function (attr, value) {
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index 92395c89f..065526c05 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -70,7 +70,6 @@ define([
 
         var parsed = Cryptpad.parsePadUrl(window.location.href);
         if (typeof parsed.type === "string") {
-            var b = config.$container.parents('body')[0];
             config.$container.parents('body').addClass('app-' + parsed.type);
         }
 
@@ -136,18 +135,15 @@ define([
     var getOtherUsers = function(config) {
         var userList = config.userList.list.users;
         var userData = config.userList.data;
-        var userNetfluxId = config.userList.userNetfluxId;
 
         var i = 0; // duplicates counter
         var list = [];
 
         // Display only one time each user (if he is connected in multiple tabs)
-        var myUid = userData[userNetfluxId] ? userData[userNetfluxId].uid : undefined;
         var uids = [];
         userList.forEach(function(user) {
             //if (user !== userNetfluxId) {
                 var data = userData[user] || {};
-                var userName = data.name;
                 var userId = data.uid;
                 if (!data.uid) { return; }
                 if (uids.indexOf(userId) === -1) {// && (!myUid || userId !== myUid)) {
@@ -268,13 +264,6 @@ define([
             !config.userList.data || !config.userList.userNetfluxId) {
             throw new Error("You must provide a `userList` object to display the userlist");
         }
-        var dropdownConfig = {
-            options: [{
-                tag: 'p',
-                attributes: {'class': USERLIST_CLS},
-            }]
-        };
-
         var $content = $('<div>', {'class': 'userlist-drawer'});
         $('<p>', {'class': USERLIST_CLS}).appendTo($content);
         toolbar.userlistContent = $content;
@@ -291,7 +280,7 @@ define([
             config.$contentContainer.prepend($content);
         }
 
-        $button.click(function (e) {
+        $button.click(function () {
             $content.toggle();
             Cryptpad.setAttribute('userlist-drawer', $content.is(':visible'));
         });
diff --git a/www/poll/index.html b/www/poll/index.html
index 091086f5c..09a92aa1f 100644
--- a/www/poll/index.html
+++ b/www/poll/index.html
@@ -17,31 +17,34 @@
 <body>
 
 <div id="toolbar" class="toolbar-container"></div>
+<div id="content">
+    <div id="poll">
+        <div id="howItWorks">
+            <h1 id="mainTitle">CryptPoll</h1>
+            <h2 data-localization="poll_subtitle"></h2>
 
-<div id="howItWorks">
-    <h1 id="mainTitle">CryptPoll</h1>
-    <h2 data-localization="poll_subtitle"></h2>
+            <p data-localization="poll_p_save"></p>
+            <p data-localization="poll_p_encryption"></p>
+        </div>
 
-    <p data-localization="poll_p_save"></p>
-    <p data-localization="poll_p_encryption"></p>
-</div>
+        <div class="upper">
+            <button id="publish" data-localization-title="poll_publish_button" data-localization="poll_publish_button" style="display: none;">publish poll</button>
+            <button id="admin" data-localization-title="poll_admin_button" data-localization="poll_admin_button" style="display: none;">admin</button>
+            <button id="help" data-localization-title="poll_show_help_button" data-localization="poll_show_help_button">help</button>
+        </div>
 
-<div class="upper">
-    <button id="publish" data-localization-title="poll_publish_button" data-localization="poll_publish_button" style="display: none;">publish poll</button>
-    <button id="admin" data-localization-title="poll_admin_button" data-localization="poll_admin_button" style="display: none;">admin</button>
-    <button id="help" data-localization-title="poll_show_help_button" data-localization="poll_show_help_button">help</button>
-</div>
-
-<div class="realtime">
-    <br />
-    <center>
-    <textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
-    </center>
-    <div id="tableContainer">
-        <div id="tableScroll"></div>
-        <button data-localization-title="poll_create_user" id="create-user"><span class="fa fa-plus"></span></button>
-        <button data-localization-title="poll_create_option" id="create-option"><span class="fa fa-plus"></span></button>
-        <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
+        <div class="realtime">
+            <br />
+            <center>
+            <textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
+            </center>
+            <div id="tableContainer">
+                <div id="tableScroll"></div>
+                <button data-localization-title="poll_create_user" id="create-user"><span class="fa fa-plus"></span></button>
+                <button data-localization-title="poll_create_option" id="create-option"><span class="fa fa-plus"></span></button>
+                <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/www/poll/main.js b/www/poll/main.js
index 0948ec8b4..e3f934b70 100644
--- a/www/poll/main.js
+++ b/www/poll/main.js
@@ -692,7 +692,8 @@ var create = function (info) {
         ifrw: window,
         realtime: info.realtime,
         network: info.network,
-        $container: APP.$bar
+        $container: APP.$bar,
+        $contentContainer: $('#content')
     };
     APP.toolbar = Toolbar.create(configTb);
 
diff --git a/www/poll/poll.css b/www/poll/poll.css
index 979f7f2b8..620cf8710 100644
--- a/www/poll/poll.css
+++ b/www/poll/poll.css
@@ -6,6 +6,17 @@ body {
   padding: 0px;
   border: 0px;
 }
+body {
+  display: flex;
+  flex-flow: column;
+}
+#content {
+  display: flex;
+  flex: 1;
+}
+#content #poll {
+  flex: 1;
+}
 .cryptpad-toolbar h2 {
   font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
   color: #000;
diff --git a/www/poll/poll.less b/www/poll/poll.less
index 95b5cfa52..b4315c297 100644
--- a/www/poll/poll.less
+++ b/www/poll/poll.less
@@ -19,6 +19,17 @@ html, body {
     padding: 0px;
     border: 0px;
 }
+body {
+    display: flex;
+    flex-flow: column;
+}
+#content {
+    display: flex;
+    flex: 1;
+    #poll {
+        flex: 1;
+    }
+}
 
 .cryptpad-toolbar h2 {
     font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;

From 271027990476e7436e2b0eeb0c8544fec7486572 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 17:03:51 +0200
Subject: [PATCH 4/6] Use the new share button in the file app

---
 www/common/toolbar2.js | 4 ++--
 www/file/file.css      | 2 +-
 www/file/file.less     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index 065526c05..921debca6 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -400,8 +400,8 @@ define([
             throw new Error("Unable to display the share button: hash required in the URL");
         }
         var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-        var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
-        var $button = $('<button>', {'id': 'shareButton'}).append($shareIcon).append($span);
+        //var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
+        var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);//:.append($span);
         $button.click(function () {
             var url = window.location.href;
             var success = Cryptpad.Clipboard.copy(url);
diff --git a/www/file/file.css b/www/file/file.css
index eea42757b..97d9a545b 100644
--- a/www/file/file.css
+++ b/www/file/file.css
@@ -40,7 +40,7 @@ body {
 }
 media-tag img {
   max-width: 100%;
-  max-height: calc(100vh - 64px);
+  max-height: calc(100vh - 96px);
 }
 #upload-form,
 #download-form {
diff --git a/www/file/file.less b/www/file/file.less
index 3516b8534..f4a081549 100644
--- a/www/file/file.less
+++ b/www/file/file.less
@@ -48,7 +48,7 @@ body {
 media-tag {
     img {
         max-width: 100%;
-        max-height: ~"calc(100vh - 64px)";
+        max-height: ~"calc(100vh - 96px)";
     }
 }
 

From 90cc3e6a5e1c034a7777ed1fdf93dfc7c43fc2d0 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 17:16:42 +0200
Subject: [PATCH 5/6] New userlist in the whiteboard app

---
 www/whiteboard/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index 95a727f41..d84f96c0d 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -312,7 +312,8 @@ window.canvas = canvas;
                 ifrw: window,
                 realtime: info.realtime,
                 network: info.network,
-                $container: $bar
+                $container: $bar,
+                $contentContainer: $('#canvas-area')
             };
 
             toolbar = module.toolbar = Toolbar.create(configTb);

From c1d2fa6b52918ee2282b6436e196b650e5b5daad Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 17:35:54 +0200
Subject: [PATCH 6/6] Unhack validateKey for the history mode

---
 www/common/common-hash.js    | 2 --
 www/common/common-history.js | 5 ++++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/www/common/common-hash.js b/www/common/common-hash.js
index 48186239c..c4f452dc7 100644
--- a/www/common/common-hash.js
+++ b/www/common/common-hash.js
@@ -100,8 +100,6 @@ Version 1
 
         var ret = {};
 
-    if (typeof href !== "string") { console.error(href); }
-
         if (!href) { return ret; }
         if (href.slice(-1) !== '/') { href += '/'; }
 
diff --git a/www/common/common-history.js b/www/common/common-history.js
index e75a192c1..9f417197e 100644
--- a/www/common/common-history.js
+++ b/www/common/common-history.js
@@ -44,7 +44,6 @@ define([
             History.readOnly = 2;
         }
         else if (!secret.keys.validateKey) {
-            secret.keys.validateKey = true;
             History.readOnly = 0;
         }
 
@@ -70,6 +69,10 @@ define([
                 return;
             }
             if (parsed[0] !== 'FULL_HISTORY') { return; }
+            if (parsed[1] && parsed[1].validateKey) { // First message
+                secret.keys.validateKey = parsed[1].validateKey;
+                return;
+            }
             msg = parsed[1][4];
             if (msg) {
                 msg = msg.replace(/^cp\|/, '');