Merge branch 'css' into soon

customize.dist/DecorateToolbar.js

@@ -13,7 +13,7 @@ define([
         $.ajax({
             url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
             success: function (ret) {
-                $('iframe').height('96%');
+                //:$('iframe').height('96%');
                 $('body').append(ret);
                 LS.main();
                 Messages._applyTranslation();

customize.dist/Header.html

@@ -8,14 +8,16 @@
           <option value="fr">Français</option>
         </select>
       </span>
-      <p data-localization="header_france">
+      <p data-localization="header_france" class="big">
       </p>
     </div>
     <div class="bottom-bar-center">
-      <p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
+      <p><a id="cryptpad-logo" class="big" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
+      <p><a id="cryptpad-logo" class="small" href="/" data-localization-title="header_logoTitle"><img src="/customize/cryptofist_mini.png" alt="Cryptpad" class="cryptofist" /></a></p>
     </div>
     <div class="bottom-bar-right">
-      <p data-localization="header_support">
+      <p data-localization="header_xwiki" class="small">
+      <p data-localization="header_support" class="big">
       </p>
     </div>
   </div>

customize.dist/main.css

@@ -146,6 +146,7 @@ tr {
 .buttons {
   margin-bottom: 50px;
   margin-top: 20px;
+  line-height: 2.5em;
 }
 .button {
   padding: 4px 12px 4px 12px;
@@ -242,6 +243,34 @@ tbody td:last-child {
   margin-right: 4px;
   position: relative;
 }
+@media screen and (max-width: 800px) {
+  .top-bar .big,
+  .bottom-bar .big {
+    display: none;
+  }
+}
+@media screen and (min-width: 801px) {
+  .top-bar .big,
+  .bottom-bar .big {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 800px) {
+  .top-bar .small,
+  .bottom-bar .small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 801px) {
+  .top-bar .small,
+  .bottom-bar .small {
+    display: none;
+  }
+}
+.top-bar .small img,
+.bottom-bar .small img {
+  height: 1.25em;
+}
 .bottom-bar {
   bottom: 0px;
   right: 0px;

customize.dist/src/cryptpad.less

@@ -175,6 +175,7 @@ p, pre, td, a, table, tr {
 .buttons {
     margin-bottom: 50px;
     margin-top: 20px;
+    line-height: 2.5em;
 }
 
 .button {
@@ -278,6 +279,27 @@ tbody {
         margin-right: 4px;
         position: relative;
     }
+
+    .big {
+        @media screen and (max-width: 800px) {
+            display: none;
+        }
+        @media screen and (min-width: 801px) {
+            display: inline-block;
+        }
+    }
+    .small {
+        @media screen and (max-width: 800px) {
+            display: inline-block;
+        }
+        @media screen and (min-width: 801px) {
+            display: none;
+        }
+        img {
+            height: 1.25em;
+        }
+    }
+
 }
 .bottom-bar {
     bottom: 0px;

customize.dist/src/toolbar.less

@@ -16,8 +16,6 @@
 
     color: #666;
     font-weight: bold;
-    height: 30px;
-    margin-bottom: -3px;
     display: inline-block;
     width: 100%;
     z-index: 9001;
@@ -27,32 +25,58 @@
     }
 
     div {
-        padding: 0 3px;
+        white-space: normal;
-        height: 1.5em;
-        line-height: 25px;
-        height: 100%;
         &.cryptpad-back {
             padding: 0;
             font-weight: bold;
             cursor: pointer;
             color: #000;
         }
+        &.cryptpad-lag {
+            float: right;
+            line-height: 26px;
+            margin: 2px 0px 2px 4px;
+        }
+    }
+
+    button, .rightside-element {
+        height: 26px;
+        padding-right: 5px;
+        padding-left: 5px;
+        margin: 2px;
     }
 
     button {
-        height: 26px;
         background-color: inherit;
         background-image: linear-gradient(to bottom,#fff,#e4e4e4);
         border: 1px solid #A6A6A6;
         border-bottom-color: #979797;
         border-radius: 3px;
-        margin-right: 5px;
-        padding-right: 5px;
-        padding-left: 5px;
         &:hover {
             background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
         }
+        &.userlist {
+            @media screen and (max-width: 800px) {
+                display: none;
             }
+            @media screen and (min-width: 801px) {
+                display: inline-block;
+            }
+            &.small {
+                @media screen and (max-width: 800px) {
+                    display: inline-block;
+                }
+                @media screen and (min-width: 801px) {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .cryptpad-state {
+        line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
+    }
+
     .rightside-button {
         float: right;
         cursor: pointer;
@@ -63,30 +87,89 @@
         float: left;
     }
 
+    .rightside-element {
+        vertical-align: middle;
+        white-space: nowrap;
+        &.float {
+            float: right;
+        }
+    }
+
     select {
         border: 0px;
         margin-left: 5px;
         margin-right: 5px;
         padding-left: 5px;
+        border: 1px solid #A6A6A6;
+        border-bottom-color: #979797;
     }
 }
 
 .cryptpad-toolbar-leftside {
     float: left;
-    div {
+    margin-bottom: -1px;
-        float: left;
+    .cryptpad-dropdown-container {
+        position: relative;
+        display: inline-block;
+        padding: 0px;
+        .cryptpad-dropdown {
+            z-index:1000;
+            display:none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            overflow: auto;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            height: auto;
+            padding: 5px;
+            white-space: normal;
+            p {
+                width: 210px;
+                padding: 0;
+                margin: 0;
+                white-space: normal;
+                &.cryptpad-dropdown-users {
+                    text-align:baseline;
+                    .yourself {
+                        font-style: italic;
+                    }
+                    .anonymous {
+                        font-style: italic;
+                    }
+                }
+                h2 {
+                    font-weight: bold;
+                    text-align: center;
+                    background-color: #EEEEEE;
+                    padding: 5px 0px;
+                    margin: 5px 0px;
+                    font-size: 16px;
+                }
+            }
+            button {
+                margin: 2px 0px;
+            }
+        }
+    }
+    button {
+        margin: 2px 4px 2px 0px;
+    }
+    .cryptpad-userbuttons-container {
+        display: none;
     }
-
 }
 .cryptpad-toolbar-rightside {
     text-align: right;
+    margin-right: 30px;
     //float: right;
 }
-.cryptpad-lag {
-    float: right;
-}
 .cryptpad-spinner {
     float: left;
+    display: inline-block;
+    height: 26px;
+    margin: 2px;
+    line-height: 26px;
+    font-size: 20px;
 }
 .cryptpad-readonly {
     margin-right: 20px;
@@ -94,13 +177,12 @@
     text-transform: uppercase;
 }
 .cryptpad-toolbar-username {
-    font-style: italic;
 }
 .lag {
     display: inline-block;
     vertical-align: middle;
     padding: 0 !important;
-    margin: 0 !important;
+    margin: 0 5px !important;
     height: 15px !important;
     width: 15px !important;
     border-radius: 50%;

customize.dist/toolbar.css

@@ -16,8 +16,6 @@
   user-select: none;
   color: #666;
   font-weight: bold;
-  height: 30px;
-  margin-bottom: -3px;
   display: inline-block;
   width: 100%;
   z-index: 9001;
@@ -26,10 +24,7 @@
   float: right;
 }
 .cryptpad-toolbar div {
-  padding: 0 3px;
+  white-space: normal;
-  height: 1.5em;
-  line-height: 25px;
-  height: 100%;
 }
 .cryptpad-toolbar div.cryptpad-back {
   padding: 0;
@@ -37,20 +32,52 @@
   cursor: pointer;
   color: #000;
 }
-.cryptpad-toolbar button {
+.cryptpad-toolbar div.cryptpad-lag {
+  float: right;
+  line-height: 26px;
+  margin: 2px 0px 2px 4px;
+}
+.cryptpad-toolbar button,
+.cryptpad-toolbar .rightside-element {
   height: 26px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin: 2px;
+}
+.cryptpad-toolbar button {
   background-color: inherit;
   background-image: linear-gradient(to bottom, #fff, #e4e4e4);
   border: 1px solid #A6A6A6;
   border-bottom-color: #979797;
   border-radius: 3px;
-  margin-right: 5px;
-  padding-right: 5px;
-  padding-left: 5px;
 }
 .cryptpad-toolbar button:hover {
   background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 }
+@media screen and (max-width: 800px) {
+  .cryptpad-toolbar button.userlist {
+    display: none;
+  }
+}
+@media screen and (min-width: 801px) {
+  .cryptpad-toolbar button.userlist {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 800px) {
+  .cryptpad-toolbar button.userlist.small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 801px) {
+  .cryptpad-toolbar button.userlist.small {
+    display: none;
+  }
+}
+.cryptpad-toolbar .cryptpad-state {
+  line-height: 30px;
+  /* equivalent to 26px + 2*2px margin used for buttons */
+}
 .cryptpad-toolbar .rightside-button {
   float: right;
   cursor: pointer;
@@ -59,40 +86,96 @@
   cursor: pointer;
   float: left;
 }
+.cryptpad-toolbar .rightside-element {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.cryptpad-toolbar .rightside-element.float {
+  float: right;
+}
 .cryptpad-toolbar select {
   border: 0px;
   margin-left: 5px;
   margin-right: 5px;
   padding-left: 5px;
+  border: 1px solid #A6A6A6;
+  border-bottom-color: #979797;
 }
 .cryptpad-toolbar-leftside {
   float: left;
+  margin-bottom: -1px;
 }
-.cryptpad-toolbar-leftside div {
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
-  float: left;
+  position: relative;
+  display: inline-block;
+  padding: 0px;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown {
+  z-index: 1000;
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  height: auto;
+  padding: 5px;
+  white-space: normal;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
+  width: 210px;
+  padding: 0;
+  margin: 0;
+  white-space: normal;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users {
+  text-align: baseline;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself {
+  font-style: italic;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
+  font-style: italic;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {
+  font-weight: bold;
+  text-align: center;
+  background-color: #EEEEEE;
+  padding: 5px 0px;
+  margin: 5px 0px;
+  font-size: 16px;
+}
+.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
+  margin: 2px 0px;
+}
+.cryptpad-toolbar-leftside button {
+  margin: 2px 4px 2px 0px;
+}
+.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
+  display: none;
 }
 .cryptpad-toolbar-rightside {
   text-align: right;
-}
+  margin-right: 30px;
-.cryptpad-lag {
-  float: right;
 }
 .cryptpad-spinner {
   float: left;
+  display: inline-block;
+  height: 26px;
+  margin: 2px;
+  line-height: 26px;
+  font-size: 20px;
 }
 .cryptpad-readonly {
   margin-right: 20px;
   font-weight: bold;
   text-transform: uppercase;
 }
-.cryptpad-toolbar-username {
-  font-style: italic;
-}
 .lag {
   display: inline-block;
   vertical-align: middle;
   padding: 0 !important;
-  margin: 0 !important;
+  margin: 0 5px !important;
   height: 15px !important;
   width: 15px !important;
   border-radius: 50%;

customize.dist/translations/messages.fr.js

@@ -17,21 +17,17 @@ define(function () {
 
     out.common_connectionLost = 'Connexion au serveur perdue';
 
-    out.editingAlone = 'Pas d\'autre participant';
-    out.editingWithOneOtherPerson = 'Édition avec une autre personne';
-    out.editingWith = 'Édition avec';
-    out.otherPeople = 'autres personnes';
     out.disconnected = 'Déconnecté';
     out.synchronizing = 'Synchronisation';
     out.reconnecting = 'Reconnexion...';
     out.lag = 'Latence';
     out.readonly = 'Lecture seule';
-    out.nobodyIsEditing = "Personne n'édite le document";
+    out.anonymous = "Anonyme";
-    out.onePersonIsEditing = 'Une personne édite le document';
+    out.yourself = "Vous-même";
-    out.peopleAreEditing = '{0} personnes éditent le document';
+    out.anonymousUsers = "utilisateurs anonymes";
-    out.oneViewer = '1 lecteur';
+    out.anonymousUser = "utilisateur anonyme";
-    out.viewers = '{0} lecteurs';
+    out.share = "Partage";
-    out.anonymous = "Vous êtes actuellement anonyme";
+    out.users = "Utilisateurs";
 
     out.greenLight = "Tout fonctionne bien";
     out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@@ -82,7 +78,14 @@ define(function () {
     out.readonlyUrl = 'Document en lecture seule';
     out.copyReadOnly = "Copier l'URL dans le presse-papiers";
     out.openReadOnly = "Ouvrir dans un nouvel onglet";
-
+    out.editing = "en édition";
+    out.viewing = "en lecture";
+    out.editShare = "Partager l'URL";
+    out.editShareTitle = "Copier l'URL d'édition dans le presse-papiers";
+    out.viewShare = "Partager l'URL de lecture";
+    out.viewShareTitle = "Copier l'URL d'accès en lecture seule dans le presse-papiers";
+    out.viewOpen = "Voir dans un nouvel onglet";
+    out.viewOpenTitle = "Ouvrir le document en lecture seule dans un nouvel onglet";
 
     out.disconnectAlert = 'Perte de la connexion au réseau !';
 
@@ -199,6 +202,7 @@ define(function () {
     // Header.html
 
     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" /> 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_xwiki = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer"><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";
 

customize.dist/translations/messages.js

@@ -17,21 +17,17 @@ define(function () {
 
     out.common_connectionLost = 'Server Connection Lost';
 
-    out.editingAlone = 'Editing alone';
-    out.editingWithOneOtherPerson = 'Editing with one other person';
-    out.editingWith = 'Editing with';
-    out.otherPeople = 'other people';
     out.disconnected = 'Disconnected';
     out.synchronizing = 'Synchronizing';
     out.reconnecting = 'Reconnecting...';
     out.lag = 'Lag';
     out.readonly = 'Read only';
-    out.nobodyIsEditing = 'Nobody is editing';
+    out.anonymous = "Anonymous";
-    out.onePersonIsEditing = 'One person is editing';
+    out.yourself = "Yourself";
-    out.peopleAreEditing = '{0} people are editing';
+    out.anonymousUsers = "anonymous users";
-    out.oneViewer = '1 viewer';
+    out.anonymousUser = "anonymous user";
-    out.viewers = '{0} viewers';
+    out.share = "Share";
-    out.anonymous = "You are currently anonymous";
+    out.users = "Users";
 
     out.greenLight = "Everything is working fine";
     out.orangeLight = "Your slow connection may impact your experience";
@@ -83,6 +79,14 @@ define(function () {
     out.readonlyUrl = 'Read only document';
     out.copyReadOnly = "Copy URL to clipboard";
     out.openReadOnly = "Open in a new tab";
+    out.editing = "editing";
+    out.viewing = "viewing";
+    out.editShare = "Share";
+    out.editShareTitle = "Copy the edit URL to clipboard";
+    out.viewShare = "Share view URL";
+    out.viewShareTitle = "Copy the read-only URL to clipboard";
+    out.viewOpen = "View in new tab";
+    out.viewOpenTitle = "Open the document in read-only mode in a new tab";
 
     out.disconnectAlert = 'Network connection lost!';
 
@@ -200,6 +204,7 @@ define(function () {
     // Header.html
 
     out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" /> 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_xwiki = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer"><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';
 

www/code/index.html

@@ -19,23 +19,35 @@
         html, body {
             overflow-y: hidden;
         }
-        #pad-iframe {
+        #iframe-container {
             position: fixed;
-            top:2.5em;
+            top: 2.6em;
-            left:0px;
             bottom: 0px;
             right: 0px;
+            left: 0px;
+            padding: 0px;
+        }
+        #pad-iframe {
             width:100%;
             height:100%;
             border:none;
             margin:0;
             padding:0;
             overflow:hidden;
+            box-sizing: border-box;
+        }
+        /* We use !important here to override the 96% set to the element in DecorateToolbar.js
+           when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
+        #pad-iframe.fullscreen {
+            top: 0px;
+            height: 100% !important;
         }
     </style>
 </head>
 <body>
+    <div id="iframe-container">
         <iframe id="pad-iframe" src="inner.html"></iframe>
+    </div>
 </body>
 </html>
 

www/code/inner.html

@@ -31,24 +31,30 @@
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
     <style>
-      html {
+      html, body{
           height: 100%;
+          width: 100%;
+          padding: 0px;
+          margin: 0px;
+          overflow: hidden;
+          box-sizing: border-box;
+          position: relative;
       }
       body {
-        height: 100%;
+          display: flex;
-        margin: 0px;
+          flex-flow: column;
       }
       .CodeMirror {
-        position: absolute;
+        height: 100%;
-        top: 25px;
+      }
-        bottom: 0px;
+      .cryptpad-toolbar {
-        left: 0px;
+        padding: 0px 6px;
-        right: 0px;
+      }
-        height: auto;
+      #cme_toolbox div.cryptpad-lag {
+        line-height: 24px;
       }
       #cme_toolbox {
         font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-        height: 25px;
         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 */

www/code/main.js

@@ -303,12 +303,16 @@ define([
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
-                    readOnly: readOnly
+                    readOnly: readOnly,
+                    ifrw: ifrw
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
 
                 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);
 
                 var editHash;
                 var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@@ -322,8 +326,8 @@ define([
                     var usernameCb = function (newName) {
                         setName (newName);
                     };
-                    var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
+                    var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
-                    $rightside.append($username);
+                    $userBlock.append($username).hide();
                 });
 
                 /* add an export button */
@@ -353,10 +357,15 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
-                if (!readOnly && viewHash) {
+                if (!readOnly) {
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
+                }
+                if (viewHash) {
                     /* add a 'links' button */
-                    var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash});
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
-                    $rightside.append($links);
+                    if (!readOnly) {
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
+                    }
                 }
 
                 var configureLanguage = function (cb) {
@@ -366,6 +375,7 @@ define([
                     var $language = module.$language = $('<select>', {
                         title: 'syntax highlighting',
                         id: 'language-mode',
+                        'class': 'rightside-element'
                     }).on('change', function () {
                         setMode($language.val());
                         onLocal();
@@ -390,6 +400,7 @@ define([
                     var $themeDropdown = $('<select>', {
                         title: 'color theme',
                         id: 'display-theme',
+                        'class': 'rightside-element'
                     });
                     Themes.forEach(function (o) {
                         $themeDropdown.append($('<option>', {

www/common/cryptpad-common.js

@@ -716,10 +716,8 @@ define([
                 break;
             case 'username':
                 button = $('<button>', {
-                    title: Messages.userButton + '\n' + Messages.userButtonTitle,
+                    title: Messages.userButton + '\n' + Messages.userButtonTitle
-                    'class': "fa fa-user",
+                }).html('<span class="fa fa-user" style="font-family:FontAwesome;"></span>');
-                    style: 'font:'+size+' FontAwesome'
-                });
                 if (data && typeof data.lastName !== "undefined" && callback) {
                     var lastName = data.lastName;
                     button.click(function() {
@@ -729,29 +727,16 @@ define([
                     });
                 }
                 break;
-            case 'readonly':
+            case 'editshare':
                 button = $('<button>', {
-                    title: Messages.getViewButton + '\n' + Messages.getViewButtonTitle,
+                    title: Messages.editShareTitle,
-                    'class': "fa fa-eye",
+                    'class': "button action"
-                    style: 'font:'+size+' FontAwesome'
+                }).text(Messages.editShare);
-                });
+                if (data && data.editHash) {
-                if (data && data.viewHash) {
+                    var editHash = data.editHash;
-                    var viewHash = data.viewHash;
                     button.click(function () {
                         var baseUrl = window.location.origin + window.location.pathname + '#';
-                        var url = baseUrl + viewHash;
+                        var url = baseUrl + editHash;
-                        var $content = $('<div>').text(Messages.readonlyUrl);
-                        var $copy = $('<button>', {
-                                id: "cryptpad-readonly-copy",
-                                'class': "button action"
-                            }).text(Messages.copyReadOnly);
-                        var $open = $('<button>', {
-                                id: "cryptpad-readonly-open",
-                                'class': "button action"
-                            }).text(Messages.openReadOnly);
-                        $content.append('<br>').append($copy).append($open);
-                        common.alert($content.html());
-                        $("#cryptpad-readonly-copy").click(function() {
                         var success = Clipboard.copy(url);
                         if (success) {
                             common.log(Messages.shareSuccess);
@@ -759,13 +744,38 @@ define([
                             return;
                         }
                     });
-                        $("#cryptpad-readonly-open").click(function() {
+                }
+                break;
+            case 'viewshare':
+                button = $('<button>', {
+                    title: Messages.viewShareTitle,
+                    'class': "button action"
+                }).text(Messages.viewShare);
+                if (data && data.viewHash) {
+                    button.click(function () {
+                        var baseUrl = window.location.origin + window.location.pathname + '#';
+                        var url = baseUrl + data.viewHash;
+                        var success = Clipboard.copy(url);
+                        if (success) {
+                            common.log(Messages.shareSuccess);
+                            common.findOKButton().click();
+                            return;
+                        }
+                    });
+                }
+                break;
+            case 'viewopen':
+                button = $('<button>', {
+                    title: Messages.viewOpenTitle,
+                    'class': "button action"
+                }).text(Messages.viewOpen);
+                if (data && data.viewHash) {
+                    button.click(function () {
+                        var baseUrl = window.location.origin + window.location.pathname + '#';
+                        var url = baseUrl + data.viewHash;
                         common.findOKButton().click();
                         window.open(url);
                     });
-
-                        if (callback) { callback(); }
-                    });
                 }
                 break;
             case 'present':

www/common/toolbar.js

@@ -1,6 +1,7 @@
 define([
     '/customize/messages.js',
     '/bower_components/jquery/dist/jquery.min.js',
+    '/bower_components/bootstrap/js/dropdown.js',
 ], function (Messages) {
     var $ = window.jQuery;
 
@@ -22,9 +23,19 @@ define([
 
     var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
 
+    var STATE_CLS = Bar.constants.state = 'cryptpad-state';
+
     var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
 
     var READONLY_CLS = Bar.constants.readonly = 'cryptpad-readonly';
+
+    var USERBUTTONS_CONTAINER_CLS = Bar.constants.userButtonsContainer = "cryptpad-userbuttons-container";
+    var USERLIST_CLS = Bar.constants.userlist = "cryptpad-dropdown-users";
+    var EDITSHARE_CLS = Bar.constants.editShare = "cryptpad-dropdown-editShare";
+    var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare";
+    var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container";
+    var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown";
+
     /** Key in the localStore which indicates realtime activity should be disallowed. */
     // TODO remove? will never be used in cryptpad
     var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
@@ -84,30 +95,91 @@ define([
         }, SPINNER_DISAPPEAR_TIME);
     };
 
-    var createUserList = function ($container) {
+    var createUserButtons = function ($userlistElement, readOnly) {
+        var $listElement = $('<span>', {
+            id: 'userButtons',
+            'class': USERBUTTONS_CONTAINER_CLS
+        }).appendTo($userlistElement);
+
+        var $editIcon = $('<button>', {
+            'class': 'userlist dropbtn edit',
+        });
+        var $editIconSmall = $editIcon.clone().addClass('small');
+        var $viewIcon = $('<button>', {
+            'class': 'userlist dropbtn view',
+        });
+        var $viewIconSmall = $viewIcon.clone().addClass('small');
+
+        var $shareTitle = $('<h2>').text(Messages.share);
+        var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
+        var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
+        if (readOnly !== 1) {
+            $dropdownEditShare.append($shareTitle);
+        }
+        var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
+        var $dropdownEdit = $('<div>', {
+            id: "cryptpad-dropdown-edit",
+            'class': DROPDOWN_CLS
+        }).append($dropdownEditUsers).append($dropdownEditShare);
+
+        var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle.clone());
+        var $dropdownViewContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
+        var $dropdownView = $('<div>', {
+            id: "cryptpad-dropdown-view",
+            'class': DROPDOWN_CLS
+        }).append($dropdownViewShare);
+
+        var createHandler = function ($elmt) {
+            return function () {
+                if ($elmt.is(':visible')) {
+                    $elmt.hide();
+                    return;
+                }
+                $userlistElement.find('.' + DROPDOWN_CLS).hide();
+                $elmt.show();
+            };
+        };
+        $editIcon.click(createHandler($dropdownEdit));
+        $editIconSmall.click(createHandler($dropdownEdit));
+        $viewIcon.click(createHandler($dropdownView));
+        $viewIconSmall.click(createHandler($dropdownView));
+
+        $dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
+        $dropdownViewContainer.append($viewIcon).append($viewIconSmall).append($dropdownView);
+
+        $listElement.append($dropdownEditContainer);
+        if (readOnly !== -1) {
+            $listElement.append($dropdownViewContainer);
+        }
+
+
+    };
+
+    var createUserList = function ($container, readOnly) {
+        var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
+        var $usernameElement = $('<span>', {'class': USERNAME_CLS});
         var $userlist = $('<div>', {
             'class': USER_LIST_CLS,
             id: uid(),
-        });
+        }).append($state).append($usernameElement);
+        createUserButtons($userlist, readOnly);
         $container.append($userlist);
         return $userlist[0];
     };
 
     var getOtherUsers = function(myUserName, userList, userData) {
       var i = 0;
-      var list = '';
+      var list = [];
       userList.forEach(function(user) {
         if(user !== myUserName) {
           var data = (userData) ? (userData[user] || null) : null;
           var userName = (data) ? data.name : null;
           if(userName) {
-            if(i === 0) { list = ' : '; }
+            list.push(userName);
-            list += userName + ', ';
-            i++;
           }
         }
       });
-      return (i > 0) ? list.slice(0, -2) : list;
+      return list;
     };
 
     var arrayIntersect = function(a, b) {
@@ -121,46 +193,74 @@ define([
         if (n === 1) { return '; + ' + Messages.oneViewer; }
         return '; + ' + Messages._getKey('viewers', [n]);
     };
-    var updateUserList = function (myUserName, listElement, userList, userData, readOnly) {
+    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement) {
         var meIdx = userList.indexOf(myUserName);
         if (meIdx === -1) {
-            listElement.textContent = Messages.synchronizing;
+            $stateElement.text(Messages.synchronizing);
             return;
         }
+        $stateElement.text('');
+
+        // Make sure the user block elements are displayed
+        var $userButtons = $(userlistElement).find("#userButtons");
+        $userButtons.show();
+        var $userElement = $(userlistElement).find('.' + USERNAME_CLS);
+        $userElement.show();
+
         var numberOfUsers = userList.length;
+
+        // If we are using old pads (readonly unavailable), only editing users are in userList.
+        // With new pads, we also have readonly users in userList, so we have to intersect with
+        // the userData to have only the editing users. We can't use userData directly since it
+        // contains data about users that have already left the channel.
         userList = readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData));
-        var innerHTML;
+
         var numberOfViewUsers = numberOfUsers - userList.length;
-        if (readOnly === 1) {
+
-            innerHTML = '<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>';
+        // Names of editing users
-            if (userList.length === 0) {
+        var editUsersNames = getOtherUsers(myUserName, userList, userData);
-                innerHTML += Messages.nobodyIsEditing;
+
-            } else if (userList.length === 1) {
+        // Number of anonymous editing users
-                innerHTML += Messages.onePersonIsEditing + getOtherUsers(myUserName, userList, userData);
+        var anonymous = numberOfUsers - editUsersNames.length;
-            } else {
+
-                innerHTML += Messages._getKey('peopleAreEditing', [userList.length]) + getOtherUsers(myUserName, userList, userData);
+        // Update the userlist
+        var editUsersList = '';
+        if (readOnly !== 1) {
+            editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>');
+            anonymous--;
         }
-            // Remove the current user
+        if (anonymous > 0) {
-            numberOfViewUsers--;
+            var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
+            editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
+        }
+        if (editUsersNames.length > 0) {
+            editUsersList += editUsersNames.join('<br>');
+        }
+        var $usersTitle = $('<h2>').text(Messages.users);
+        var $editUsers = $userButtons.find('.' + USERLIST_CLS);
+        $editUsers.html('').append($usersTitle).append(editUsersList);
+
+        // Update the buttons
+        var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
+        var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
+        var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
+        $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + ' ' + fa_caretdown);
+        $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + ' ' + fa_caretdown);
+        $userButtons.find('.userlist.view').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown);
+        $userButtons.find('.userlist.view.small').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
+
+        if (readOnly === 1) {
+            // TODO
+            $userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
         }
         else  {
-            if (userList.length === 1) {
+            var name = userData[myUserName] && userData[myUserName].name;
-                innerHTML = Messages.editingAlone;
+            var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
-            } else if (userList.length === 2) {
-                innerHTML = Messages.editingWithOneOtherPerson + getOtherUsers(myUserName, userList, userData);
-            } else {
-                innerHTML = Messages.editingWith + ' ' + (userList.length - 1) + ' ' + Messages.otherPeople + getOtherUsers(myUserName, userList, userData);
-            }
-        }
-        innerHTML += getViewers(numberOfViewUsers);
-        if (userData[myUserName]) {
-            var name = userData[myUserName].name;
             if (!name) {
-                name = '<span title="' + Messages.anonymous + '" class="fa fa-user-secret" style="font-family:FontAwesome"></span>';
+                name = Messages.anonymous;
             }
-            innerHTML = '<span class="' + USERNAME_CLS + '">' + name + '</span> | ' + innerHTML;
+            $userElement.find("button").html(icon + ' ' + name);
         }
-        listElement.innerHTML = innerHTML;
     };
 
     var createLagElement = function ($container) {
@@ -168,7 +268,7 @@ define([
             'class': LAG_ELEM_CLS,
             id: uid(),
         });
-        $container.append($lag);
+        $container.before($lag);
         return $lag[0];
     };
 
@@ -202,18 +302,35 @@ define([
     };
 
     var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
+        var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
+
         var toolbar = createRealtimeToolbar($container);
-        var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS));
+        var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
         var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
         var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
         var userData = config.userData;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
-        var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
         var saveElement;
         var loadElement;
+        var $stateElement = $(userListElement).find('.' + STATE_CLS);
 
         var connected = false;
 
+        if (config.ifrw) {
+            var removeDropdowns =  function (e) {
+                if (e.target.matches('.dropbtn') || (e.target.parentElement && e.target.parentElement.matches('.dropbtn'))) {
+                    return;
+                }
+                $container.find('.cryptpad-dropdown').hide();
+            };
+            $(config.ifrw).on('click',removeDropdowns);
+            if (config.ifrw.$('iframe').length) {
+                var innerIfrw = config.ifrw.$('iframe').each(function (i, el) {
+                    $(el.contentWindow).on('click', removeDropdowns);
+                });
+            }
+        }
+
         userList.onChange = function(newUserData) {
           var users = userList.users;
           if (users.indexOf(myUserName) !== -1) { connected = true; }
@@ -221,7 +338,7 @@ define([
           if(newUserData) { // Someone has changed his name/color
             userData = newUserData;
           }
-          updateUserList(myUserName, userListElement, users, userData, readOnly);
+          updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement);
         };
 
         var ks = function () {
@@ -241,13 +358,13 @@ define([
         return {
             failed: function () {
                 connected = false;
-                userListElement.textContent = Messages.disconnected;
+                $stateElement.text(Messages.disconnected);
                 checkLag(undefined, lagElement);
             },
             reconnecting: function (userId) {
                 myUserName = userId;
                 connected = false;
-                userListElement.textContent = Messages.reconnecting;
+                $stateElement.text(Messages.reconnecting);
                 checkLag(getLag, lagElement);
             },
             connected: function () {

www/pad/inner.html

@@ -5,6 +5,18 @@
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script src="/bower_components/ckeditor/ckeditor.js"></script>
+    <style>
+    #cke_1_top {
+        overflow: visible;
+    }
+    #cke_1_toolbox {
+        display: inline-block;
+        width: 100%;
+    }
+    #cke_1_top .cryptpad-toolbar {
+        margin-bottom: 1px;
+    }
+    </style>
 </head>
 <body>
     <textarea style="display:none" id="editor1" name="editor1"></textarea>

www/pad/main.js

@@ -510,12 +510,16 @@ define([
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
-                    readOnly: readOnly
+                    readOnly: readOnly,
+                    ifrw: ifrw
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
 
                 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);
 
                 var editHash;
                 var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@@ -529,8 +533,8 @@ define([
                     var usernameCb = function (newName) {
                         setName (newName);
                     };
-                    var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
+                    var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
-                    $rightside.append($username);
+                    $userBlock.append($username).hide();
                 });
 
                 /* add an export button */
@@ -560,10 +564,15 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
-                if (!readOnly && viewHash) {
+                if (!readOnly) {
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
+                }
+                if (viewHash) {
                     /* add a 'links' button */
-                    var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash});
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
-                    $rightside.append($links);
+                    if (!readOnly) {
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
+                    }
                 }
 
                 // set the hash

www/slide/index.html

@@ -19,18 +19,22 @@
         html, body {
             overflow-y: hidden;
         }
-        #pad-iframe {
+        #iframe-container {
             position: fixed;
-            top:2.5em;
+            top: 2.6em;
-            left:0px;
             bottom: 0px;
             right: 0px;
+            left: 0px;
+            padding: 0px;
+        }
+        #pad-iframe {
             width:100%;
             height:100%;
             border:none;
             margin:0;
             padding:0;
             overflow:hidden;
+            box-sizing: border-box;
         }
         /* We use !important here to override the 96% set to the element in DecorateToolbar.js
            when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
@@ -38,10 +42,16 @@
             top: 0px;
             height: 100% !important;
         }
+        #iframe-container.fullscreen {
+            top: 0px;
+            height: 100% !important;
+        }
      </style>
 </head>
 <body>
+    <div id="iframe-container">
         <iframe id="pad-iframe" src="inner.html"></iframe>
+    </div>
 </body>
 </html>
 

www/slide/inner.html

@@ -41,6 +41,10 @@
             box-sizing: border-box;
             position: relative;
         }
+        body {
+            display: flex;
+            flex-flow: column;
+        }
         #bar > button {
             margin: 5px;
         }
@@ -111,21 +115,17 @@
               html {
         height: 100%;
       }
-      body {
-        height: 100%;
-        margin: 0px;
-      }
       .CodeMirror {
-        position: absolute;
+        height: 100%;
-        top: 25px;
+      }
-        bottom: 0px;
+      .cryptpad-toolbar {
-        left: 0px;
+        padding: 0px 6px;
-        right: 0px;
+      }
-        height: auto;
+      #cme_toolbox div.cryptpad-lag {
+        line-height: 24px;
       }
       #cme_toolbox {
         font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-        height: 25px;
         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 */

www/slide/main.js

@@ -328,195 +328,6 @@ define([
                 onLocal();
             };
 
-            var onInit = config.onInit = function (info) {
-                var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
-                toolbarList = info.userList;
-                var config = {
-                    userData: userList,
-                    readOnly: readOnly
-                };
-                if (readOnly) {delete config.changeNameID; }
-                toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
-
-                var $rightside = $bar.find('.' + Toolbar.constants.rightside);
-
-                var editHash;
-                var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
-
-                if (!readOnly) {
-                    editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
-                }
-
-                /* add a "change username" button */
-                getLastName(function (err, lastName) {
-                    var usernameCb = function (newName) {
-                        setName (newName);
-                    };
-                    var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
-                    $rightside.append($username);
-                });
-
-                /* add an export button */
-                var $export = Cryptpad.createButton('export', true, {}, exportText);
-                $rightside.append($export);
-
-                if (!readOnly) {
-                    /* add an import button */
-                    var $import = Cryptpad.createButton('import', true, {}, importText);
-                    $rightside.append($import);
-
-                    /* add a rename button */
-                    var renameCb = function (err, title) {
-                        if (err) { return; }
-                        APP.title = title;
-                        setTabTitle();
-                        onLocal();
-                    };
-                    var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
-                    $rightside.append($setTitle);
-                }
-
-                /* add a forget button */
-                var forgetCb = function (err, title) {
-                    if (err) { return; }
-                    APP.title = title;
-                    setTabTitle();
-                };
-                var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
-                $rightside.append($forgetPad);
-
-                if (!readOnly && viewHash) {
-                    /* add a 'links' button */
-                    var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash + '/present'});
-                    $rightside.append($links);
-                }
-
-                var $present = Cryptpad.createButton('present', true)
-                    .click(function () {
-                    enterPresentationMode(true);
-                });
-                if (presentMode) {
-                    $present.hide();
-                }
-                $rightside.append($present);
-
-                var $leavePresent = Cryptpad.createButton('source', true)
-                    .click(leavePresentationMode);
-                if (!presentMode) {
-                    $leavePresent.hide();
-                }
-                $rightside.append($leavePresent);
-
-                var $language = $('<span>', {
-                    'style': "margin-right: 10px;"
-                }).text(Messages.type.slide + " (Markdown)");
-                $rightside.append($language);
-
-
-                var configureTheme = function () {
-                    /*  Remember the user's last choice of theme using localStorage */
-                    var themeKey = 'CRYPTPAD_CODE_THEME';
-                    var lastTheme = localStorage.getItem(themeKey) || 'default';
-
-                    /*  Let the user select different themes */
-                    var $themeDropdown = $('<select>', {
-                        title: 'color theme',
-                        id: 'display-theme',
-                    });
-                    Themes.forEach(function (o) {
-                        $themeDropdown.append($('<option>', {
-                            selected: o.name === lastTheme,
-                        }).val(o.name).text(o.name));
-                    });
-
-
-                    $rightside.append($themeDropdown);
-
-                    var $theme = $bar.find('select#display-theme');
-
-                    setTheme(lastTheme, $theme);
-
-                    $theme.on('change', function () {
-                        var theme = $theme.val();
-                        console.log("Setting theme to %s", theme);
-                        setTheme(theme, $theme);
-                        // remember user choices
-                        localStorage.setItem(themeKey, theme);
-                    });
-                };
-
-                var configureColors = function () {
-                    $back = $('<button>', {
-                        id: SLIDE_BACKCOLOR_ID,
-                        'class': 'fa fa-square',
-                        'style': 'font-family: FontAwesome; color: #000;',
-                        title: Messages.backgroundButton + '\n' + Messages.backgroundButtonTitle
-                    });
-                    $text = $('<button>', {
-                        id: SLIDE_COLOR_ID,
-                        'class': 'fa fa-i-cursor',
-                        'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
-                        title: Messages.colorButton + '\n' + Messages.colorButtonTitle
-                    });
-                    $testColor = $('<input>', { type: 'color', value: '!' });
-                    var $check = $pad.contents().find("#colorPicker_check");
-                    if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO
-                    $back.on('click', function() {
-                        var $picker = $('<input>', { type: 'color', value: backColor })
-                            .on('change', function() {
-                                updateColors(undefined, this.value);
-                                onLocal();
-                            });
-                        $check.append($picker);
-                        setTimeout(function() {
-                            $picker.click();
-                        }, 0);
-                    });
-                    $text.on('click', function() {
-                        var $picker = $('<input>', { type: 'color', value: textColor })
-                            .on('change', function() {
-                                updateColors(this.value, undefined);
-                                onLocal();
-                                $check.html('');
-                            });
-                        $check.append($picker);
-                        setTimeout(function() {
-                            $picker.click();
-                        }, 0);
-                    });
-
-                    $rightside.append($back).append($text);
-                };
-
-                configureTheme();
-                configureColors();
-
-                if (presentMode) {
-                    $('#top-bar').hide();
-                }
-
-                // set the hash
-                if (!window.location.hash || window.location.hash === '#') {
-                    window.location.hash = editHash;
-                }
-
-                Cryptpad.getPadTitle(function (err, title) {
-                    if (err) {
-                        console.log("Unable to get pad title");
-                        console.error(err);
-                        return;
-                    }
-                    document.title = APP.title = title || info.channel.slice(0, 8);
-                    Cryptpad.setPadTitle(title, function (err, data) {
-                        if (err) {
-                            console.log("Unable to set pad title");
-                            console.error(err);
-                            return;
-                        }
-                    });
-                });
-            };
-
             var updateTitle = function (newTitle) {
                 if (newTitle === APP.title) { return; }
                 // Change the title now, and set it back to the old value if there is an error
@@ -564,6 +375,206 @@ define([
                 }
             };
 
+            var onInit = config.onInit = function (info) {
+                var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
+                toolbarList = info.userList;
+                var config = {
+                    userData: userList,
+                    readOnly: readOnly,
+                    ifrw: $('#pad-iframe')[0].contentWindow
+                };
+                if (readOnly) {delete config.changeNameID; }
+                toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
+
+                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);
+
+                var editHash;
+                var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
+
+                if (!readOnly) {
+                    editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+                }
+
+                /* add a "change username" button */
+                getLastName(function (err, lastName) {
+                    var usernameCb = function (newName) {
+                        setName (newName);
+                    };
+                    var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
+                    $userBlock.append($username).hide();
+                });
+
+                /* add an export button */
+                var $export = Cryptpad.createButton('export', true, {}, exportText);
+                $rightside.append($export);
+
+                if (!readOnly) {
+                    /* add an import button */
+                    var $import = Cryptpad.createButton('import', true, {}, importText);
+                    $rightside.append($import);
+
+                    /* add a rename button */
+                    var renameCb = function (err, title) {
+                        if (err) { return; }
+                        APP.title = title;
+                        setTabTitle();
+                        onLocal();
+                    };
+                    var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
+                    $rightside.append($setTitle);
+                }
+
+                /* add a forget button */
+                var forgetCb = function (err, title) {
+                    if (err) { return; }
+                    APP.title = title;
+                    setTabTitle();
+                };
+                var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
+                $rightside.append($forgetPad);
+
+                if (!readOnly) {
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
+                }
+                if (viewHash) {
+                    /* add a 'links' button */
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'}));
+                    if (!readOnly) {
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'}));
+                    }
+                }
+
+                var $present = Cryptpad.createButton('present', true)
+                    .click(function () {
+                    enterPresentationMode(true);
+                });
+                if (presentMode) {
+                    $present.hide();
+                }
+                $rightside.append($present);
+
+                var $leavePresent = Cryptpad.createButton('source', true)
+                    .click(leavePresentationMode);
+                if (!presentMode) {
+                    $leavePresent.hide();
+                }
+                $rightside.append($leavePresent);
+
+
+                var configureTheme = function () {
+                    /*var $language = $('<span>', {
+                        'style': "margin-right: 10px;",
+                        'class': 'rightside-element'
+                    }).text("Markdown");
+                    $rightside.append($language);*/
+
+                    /*  Remember the user's last choice of theme using localStorage */
+                    var themeKey = 'CRYPTPAD_CODE_THEME';
+                    var lastTheme = localStorage.getItem(themeKey) || 'default';
+
+                    /*  Let the user select different themes */
+                    var $themeDropdown = $('<select>', {
+                        title: 'color theme',
+                        id: 'display-theme',
+                        'class': 'rightside-element'
+                    });
+                    Themes.forEach(function (o) {
+                        $themeDropdown.append($('<option>', {
+                            selected: o.name === lastTheme,
+                        }).val(o.name).text(o.name));
+                    });
+
+
+                    $rightside.append($themeDropdown);
+
+                    var $theme = $bar.find('select#display-theme');
+
+                    setTheme(lastTheme, $theme);
+
+                    $theme.on('change', function () {
+                        var theme = $theme.val();
+                        console.log("Setting theme to %s", theme);
+                        setTheme(theme, $theme);
+                        // remember user choices
+                        localStorage.setItem(themeKey, theme);
+                    });
+                };
+
+                var configureColors = function () {
+                    var $back = $('<button>', {
+                        id: SLIDE_BACKCOLOR_ID,
+                        'class': 'fa fa-square rightside-button',
+                        'style': 'font-family: FontAwesome; color: #000;',
+                        title: Messages.backgroundButton + '\n' + Messages.backgroundButtonTitle
+                    });
+                    var $text = $('<button>', {
+                        id: SLIDE_COLOR_ID,
+                        'class': 'fa fa-i-cursor rightside-button',
+                        'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
+                        title: Messages.colorButton + '\n' + Messages.colorButtonTitle
+                    });
+                    var $testColor = $('<input>', { type: 'color', value: '!' });
+                    var $check = $pad.contents().find("#colorPicker_check");
+                    if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO
+                    $back.on('click', function() {
+                        var $picker = $('<input>', { type: 'color', value: backColor })
+                            .on('change', function() {
+                                updateColors(undefined, this.value);
+                                onLocal();
+                            });
+                        $check.append($picker);
+                        setTimeout(function() {
+                            $picker.click();
+                        }, 0);
+                    });
+                    $text.on('click', function() {
+                        var $picker = $('<input>', { type: 'color', value: textColor })
+                            .on('change', function() {
+                                updateColors(this.value, undefined);
+                                onLocal();
+                                $check.html('');
+                            });
+                        $check.append($picker);
+                        setTimeout(function() {
+                            $picker.click();
+                        }, 0);
+                    });
+
+                    $rightside.append($back).append($text);
+                };
+
+                configureColors();
+                configureTheme();
+
+                if (presentMode) {
+                    $('#top-bar').hide();
+                }
+
+                // set the hash
+                if (!window.location.hash || window.location.hash === '#') {
+                    window.location.hash = editHash;
+                }
+
+                Cryptpad.getPadTitle(function (err, title) {
+                    if (err) {
+                        console.log("Unable to get pad title");
+                        console.error(err);
+                        return;
+                    }
+                    document.title = APP.title = title || info.channel.slice(0, 8);
+                    Cryptpad.setPadTitle(title, function (err, data) {
+                        if (err) {
+                            console.log("Unable to set pad title");
+                            console.error(err);
+                            return;
+                        }
+                    });
+                });
+            };
+
             var unnotify = module.unnotify = function () {
                 if (module.tabNotification &&
                     typeof(module.tabNotification.cancel) === 'function') {

www/slide/slide.js

@@ -18,13 +18,6 @@ define([
     var $modal;
     var $content;
     var $pad;
-    Slide.setModal = function ($m, $c, $p, iframe) {
-        $modal = Slide.$modal = $m;
-        $content = Slide.$content = $c;
-        $pad = Slide.$pad = $p;
-        ifrw = Slide.ifrw = iframe;
-        addEvent();
-    };
 
     Slide.onChange = function (f) {
         if (typeof(f) === 'function') {
@@ -135,6 +128,7 @@ define([
             $pad.contents().find('.cryptpad-present-button').hide();
             $pad.contents().find('.cryptpad-source-button').show();
             $pad.addClass('fullscreen');
+            $('#iframe-container').addClass('fullscreen');
             $('.top-bar').hide();
             return;
         }
@@ -143,6 +137,7 @@ define([
         $pad.contents().find('.cryptpad-present-button').show();
         $pad.contents().find('.cryptpad-source-button').hide();
         $pad.removeClass('fullscreen');
+        $('#iframe-container').removeClass('fullscreen');
         $('.top-bar').show();
         $modal.removeClass('shown');
     };
@@ -174,7 +169,7 @@ define([
         Slide.draw(i);
     };
 
-    var first = Slide.first = function () {$
+    var first = Slide.first = function () {
         console.log('first');
         Slide.lastIndex = Slide.index;
 
@@ -210,7 +205,7 @@ define([
                     break;
                 case 35: // end
                     Slide.last();
-                    break
+                    break;
                 case 27: // esc
                     show(false);
                     break;
@@ -220,5 +215,13 @@ define([
         });
     };
 
+    Slide.setModal = function ($m, $c, $p, iframe) {
+        $modal = Slide.$modal = $m;
+        $content = Slide.$content = $c;
+        $pad = Slide.$pad = $p;
+        ifrw = Slide.ifrw = iframe;
+        addEvent();
+    };
+
     return Slide;
 });