Fix the new userlist button and make the toolbar responsive

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

@@ -25,16 +25,18 @@
     }
 
     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 {
@@ -71,6 +73,10 @@
         }
     }
 
+    .cryptpad-state {
+        line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
+    }
+
     .rightside-button {
         float: right;
         cursor: pointer;
@@ -84,7 +90,9 @@
     .rightside-element {
         vertical-align: middle;
         white-space: nowrap;
-        //float: right;
+        &.float {
+            float: right;
+        }
     }
 
     select {
@@ -99,7 +107,7 @@
 
 .cryptpad-toolbar-leftside {
     float: left;
-    max-width: 35%;
+    margin-bottom: -1px;
     .cryptpad-dropdown-container {
         position: relative;
         display: inline-block;
@@ -113,28 +121,55 @@
             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;

customize.dist/toolbar.css

@@ -24,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;
@@ -35,6 +32,11 @@
   cursor: pointer;
   color: #000;
 }
+.cryptpad-toolbar div.cryptpad-lag {
+  float: right;
+  line-height: 26px;
+  margin: 2px 0px 2px 4px;
+}
 .cryptpad-toolbar button,
 .cryptpad-toolbar .rightside-element {
   height: 26px;
@@ -72,6 +74,10 @@
     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;
@@ -84,6 +90,9 @@
   vertical-align: middle;
   white-space: nowrap;
 }
+.cryptpad-toolbar .rightside-element.float {
+  float: right;
+}
 .cryptpad-toolbar select {
   border: 0px;
   margin-left: 5px;
@@ -94,7 +103,7 @@
 }
 .cryptpad-toolbar-leftside {
   float: left;
-  max-width: 35%;
+  margin-bottom: -1px;
 }
 .cryptpad-toolbar-leftside .cryptpad-dropdown-container {
   position: relative;
@@ -110,24 +119,52 @@
   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;

customize.dist/translations/messages.fr.js

@@ -22,12 +22,12 @@ define(function () {
     out.reconnecting = 'Reconnexion...';
     out.lag = 'Latence';
     out.readonly = 'Lecture seule';
-    out.anonymous = "nonyme";
+    out.anonymous = "Anonyme";
     out.yourself = "Vous-même";
     out.anonymousUsers = "utilisateurs anonymes";
     out.anonymousUser = "utilisateur anonyme";
-    out.viewUsersIcon = "UTILISATEURS EN LECTURE SEULE";
+    out.share = "Partage";
-    out.editUsersIcon = "UTILISATEURS ÉDITANT LE DOCUMENT";
+    out.users = "Utilisateurs";
 
     out.greenLight = "Tout fonctionne bien";
     out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@@ -202,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

@@ -26,8 +26,8 @@ define(function () {
     out.yourself = "Yourself";
     out.anonymousUsers = "anonymous users";
     out.anonymousUser = "anonymous user";
-    out.viewUsersIcon = "PEOPLE VIEWING";
+    out.share = "Share";
-    out.editUsersIcon = "PEOPLE EDITING";
+    out.users = "Users";
 
     out.greenLight = "Everything is working fine";
     out.orangeLight = "Your slow connection may impact your experience";
@@ -204,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

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

www/code/inner.html

@@ -47,6 +47,12 @@
       .CodeMirror {
         height: 100%;
       }
+      .cryptpad-toolbar {
+        padding: 0px 6px;
+      }
+      #cme_toolbox div.cryptpad-lag {
+        line-height: 24px;
+      }
       #cme_toolbox {
         font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
         background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */

www/code/main.js

@@ -303,7 +303,8 @@ 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);
@@ -326,7 +327,7 @@ define([
                         setName (newName);
                     };
                     var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
-                    $userBlock.append($username);
+                    $userBlock.append($username).hide();
                 });
 
                 /* add an export button */
@@ -357,16 +358,13 @@ define([
                 $rightside.append($forgetPad);
 
                 if (!readOnly) {
-                    var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
-                    $editShare.append($links);
                 }
                 if (viewHash) {
                     /* add a 'links' button */
-                    var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
-                    $viewShare.append($links);
                     if (!readOnly) {
-                        var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
-                        $viewShare.append($links);
                     }
                 }
 
@@ -377,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();
@@ -401,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

@@ -727,45 +727,6 @@ define([
                     });
                 }
                 break;
-            /*case 'readonly':
-                button = $('<button>', {
-                    title: Messages.getViewButton + '\n' + Messages.getViewButtonTitle,
-                    'class': "fa fa-eye",
-                    style: 'font:'+size+' FontAwesome'
-                });
-                if (data && data.viewHash) {
-                    var viewHash = data.viewHash;
-                    button.click(function() {
-                        var baseUrl = window.location.origin + window.location.pathname + '#';
-                        var url = baseUrl + viewHash;
-                        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);
-                                common.findOKButton().click();
-                                return;
-                            }
-                        });
-                        $("#cryptpad-readonly-open").click(function() {
-                            common.findOKButton().click();
-                            window.open(url);
-                        });
-
-                        if (callback) { callback(); }
-                    });
-                }
-                break;*/
             case 'editshare':
                 button = $('<button>', {
                     title: Messages.editShareTitle,
@@ -791,10 +752,9 @@ define([
                     'class': "button action"
                 }).text(Messages.viewShare);
                 if (data && data.viewHash) {
-                    var viewHash = data.viewHash;
                     button.click(function () {
                         var baseUrl = window.location.origin + window.location.pathname + '#';
-                        var url = baseUrl + viewHash;
+                        var url = baseUrl + data.viewHash;
                         var success = Clipboard.copy(url);
                         if (success) {
                             common.log(Messages.shareSuccess);
@@ -810,10 +770,9 @@ define([
                     'class': "button action"
                 }).text(Messages.viewOpen);
                 if (data && data.viewHash) {
-                    var viewHash = data.viewHash;
                     button.click(function () {
                         var baseUrl = window.location.origin + window.location.pathname + '#';
-                        var url = baseUrl + viewHash;
+                        var url = baseUrl + data.viewHash;
                         common.findOKButton().click();
                         window.open(url);
                     });

www/common/toolbar.js

@@ -103,24 +103,26 @@ define([
 
         var $editIcon = $('<button>', {
             'class': 'userlist dropbtn edit',
-            title: Messages.editUsersIcon
         });
         var $editIconSmall = $editIcon.clone().addClass('small');
         var $viewIcon = $('<button>', {
             'class': 'userlist dropbtn view',
-            title: Messages.viewUsersIcon
         });
         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});
+        var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle.clone());
         var $dropdownViewContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
         var $dropdownView = $('<div>', {
             id: "cryptpad-dropdown-view",
@@ -223,18 +225,20 @@ define([
 
         // Update the userlist
         var editUsersList = '';
-        if (readOnly === 0) {
+        if (readOnly !== 1) {
-            editUsersNames.unshift(Messages.yourself);
+            editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>');
             anonymous--;
         }
         if (anonymous > 0) {
             var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
-            editUsersNames.push(anonymous + " " + text);
+            editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
         }
         if (editUsersNames.length > 0) {
             editUsersList += editUsersNames.join('<br>');
         }
-        $userButtons.find('.' + USERLIST_CLS).html(editUsersList);
+        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>';
@@ -313,11 +317,18 @@ define([
         var connected = false;
 
         if (config.ifrw) {
-            $(config.ifrw).on('click', function (e) {
+            var removeDropdowns =  function (e) {
-                if (!e.target.matches('.dropbtn') && !e.target.parentElement.matches('.dropbtn')) {
+                if (e.target.matches('.dropbtn') || (e.target.parentElement && e.target.parentElement.matches('.dropbtn'))) {
-                    $container.find('.cryptpad-dropdown').hide();
+                    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) {

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,7 +510,8 @@ 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);
@@ -532,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);
-                    $userBlock.append($username);
+                    $userBlock.append($username).hide();
                 });
 
                 /* add an export button */
@@ -564,16 +565,13 @@ define([
                 $rightside.append($forgetPad);
 
                 if (!readOnly) {
-                    var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
-                    $editShare.append($links);
                 }
                 if (viewHash) {
                     /* add a 'links' button */
-                    var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
-                    $viewShare.append($links);
                     if (!readOnly) {
-                        var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
-                        $viewShare.append($links);
                     }
                 }
 

www/slide/index.html

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

www/slide/inner.html

@@ -118,6 +118,12 @@
       .CodeMirror {
         height: 100%;
       }
+      .cryptpad-toolbar {
+        padding: 0px 6px;
+      }
+      #cme_toolbox div.cryptpad-lag {
+        line-height: 24px;
+      }
       #cme_toolbox {
         font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
         background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */

www/slide/main.js

@@ -437,16 +437,13 @@ define([
                 $rightside.append($forgetPad);
 
                 if (!readOnly) {
-                    var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
+                    $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
-                    $editShare.append($links);
                 }
                 if (viewHash) {
                     /* add a 'links' button */
-                    var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
+                    $viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'}));
-                    $viewShare.append($links);
                     if (!readOnly) {
-                        var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
+                        $viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'}));
-                        $viewShare.append($links);
                     }
                 }