From 54a63267cd2dae49db636de4ea245a1c25018d0e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 25 Oct 2016 18:34:23 +0200
Subject: [PATCH] Add a share button and merge the viewers and editors buttons

---
 customize.dist/src/toolbar.less |  10 ++--
 customize.dist/toolbar.css      |  10 ++--
 www/code/main.js                |   4 +-
 www/common/toolbar.js           | 100 ++++++++++++++++++--------------
 www/pad/main.js                 |   4 +-
 www/slide/main.js               |   4 +-
 6 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less
index ab517124f..b997ca9e9 100644
--- a/customize.dist/src/toolbar.less
+++ b/customize.dist/src/toolbar.less
@@ -33,9 +33,9 @@
             color: #000;
         }
         &.cryptpad-lag {
-            float: right;
+            float: left;
             line-height: 26px;
-            margin: 2px 0px 2px 4px;
+            margin: 2px 0px;
         }
     }
 
@@ -203,6 +203,9 @@
 .cryptpad-toolbar-leftside {
     float: left;
     margin-bottom: -1px;
+    .cryptpad-user-list {
+        float: right;
+    }
     .cryptpad-dropdown-container {
         position: relative;
         display: inline-block;
@@ -255,7 +258,6 @@
 }
 .cryptpad-toolbar-rightside {
     text-align: right;
-    margin-right: 30px;
     //float: right;
 }
 .cryptpad-spinner {
@@ -267,7 +269,7 @@
     font-size: 20px;
 }
 .cryptpad-readonly {
-    margin-right: 20px;
+    margin-right: 5px;
     font-weight: bold;
     text-transform: uppercase;
 }
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 39b060844..4f441169b 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -33,9 +33,9 @@
   color: #000;
 }
 .cryptpad-toolbar div.cryptpad-lag {
-  float: right;
+  float: left;
   line-height: 26px;
-  margin: 2px 0px 2px 4px;
+  margin: 2px 0px;
 }
 .cryptpad-toolbar button,
 .cryptpad-toolbar select,
@@ -210,6 +210,9 @@
   float: left;
   margin-bottom: -1px;
 }
+.cryptpad-toolbar-leftside .cryptpad-user-list {
+  float: right;
+}
 .cryptpad-toolbar-leftside .cryptpad-dropdown-container {
   position: relative;
   display: inline-block;
@@ -261,7 +264,6 @@
 }
 .cryptpad-toolbar-rightside {
   text-align: right;
-  margin-right: 30px;
 }
 .cryptpad-spinner {
   float: left;
@@ -272,7 +274,7 @@
   font-size: 20px;
 }
 .cryptpad-readonly {
-  margin-right: 20px;
+  margin-right: 5px;
   font-weight: bold;
   text-transform: uppercase;
 }
diff --git a/www/code/main.js b/www/code/main.js
index f2db83352..0483c1bf6 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -405,8 +405,8 @@ define([
                     $rightside.append($import);
 
                     /* add a rename button */
-                    var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
-                    $rightside.append($setTitle);
+                    //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
+                    //$rightside.append($setTitle);
                 }
 
                 /* add a forget button */
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index e342a9241..26ade0842 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -52,6 +52,7 @@ define([
     var $style;
 
     var firstConnection = true;
+    var lagErrors = 0;
 
     var styleToolbar = function ($container, href) {
         href = href || '/customize/toolbar.css';
@@ -108,29 +109,31 @@ define([
             'class': 'userlist dropbtn edit',
         });
         var $editIconSmall = $editIcon.clone().addClass('small');
-        var $viewIcon = $('<button>', {
-            'class': 'userlist dropbtn view',
+        var $shareIcon = $('<button>', {
+            'class': 'userlist dropbtn share',
         });
-        var $viewIconSmall = $viewIcon.clone().addClass('small');
+        var $shareIconSmall = $shareIcon.clone().addClass('small');
 
-        var $shareTitle = $('<h2>').text(Messages.share);
         var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
-        var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
+/*        var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
         if (readOnly !== 1) {
             $dropdownEditShare.append($shareTitle);
         }
-        var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
+*/        var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
         var $dropdownEdit = $('<div>', {
             id: "cryptpad-dropdown-edit",
             'class': DROPDOWN_CLS
-        }).append($dropdownEditUsers).append($dropdownEditShare);
+        }).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",
+        var $shareTitle = $('<h2>').text(Messages.share);
+        var $shareTitle2 = $('<h2>').text(Messages.share + 'VIEW');
+        var $dropdownShareP = $('<p>', {'class': EDITSHARE_CLS}).append($shareTitle);
+        var $dropdownShareP2 = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle2);
+        var $dropdownShareContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
+        var $dropdownShare = $('<div>', {
+            id: "cryptpad-dropdown-share",
             'class': DROPDOWN_CLS
-        }).append($dropdownViewShare);
+        }).append($dropdownShareP).append($dropdownShareP2);
 
         var createHandler = function ($elmt) {
             return function () {
@@ -144,27 +147,26 @@ define([
         };
         $editIcon.click(createHandler($dropdownEdit));
         $editIconSmall.click(createHandler($dropdownEdit));
-        $viewIcon.click(createHandler($dropdownView));
-        $viewIconSmall.click(createHandler($dropdownView));
+        $shareIcon.click(createHandler($dropdownShare));
+        $shareIconSmall.click(createHandler($dropdownShare));
 
         $dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
-        $dropdownViewContainer.append($viewIcon).append($viewIconSmall).append($dropdownView);
+        $dropdownShareContainer.append($shareIcon).append($shareIconSmall).append($dropdownShare);
 
         $listElement.append($dropdownEditContainer);
-        if (readOnly !== -1) {
-            $listElement.append($dropdownViewContainer);
-        }
-
+/*        if (readOnly !== -1) {*/
+            $listElement.append($dropdownShareContainer);
+       /* }
+*/
 
     };
 
     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);
+        }).append($state);
         createUserButtons($userlist, readOnly);
         $container.append($userlist);
         return $userlist[0];
@@ -247,13 +249,12 @@ define([
         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);
+        $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + ', ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown);
+        $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + ', ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
+        $userButtons.find('.userlist.share').html('SHARE ' + fa_caretdown);
+        $userButtons.find('.userlist.share.small').html('SHARE SMALL ' + fa_caretdown);
 
         if (readOnly === 1) {
-            // TODO
             $userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
         }
         else  {
@@ -262,7 +263,9 @@ define([
             if (!name) {
                 name = Messages.anonymous;
             }
-            $userElement.find("button").html(icon + ' ' + name).show();
+            console.log($userElement);
+            $userElement.find("button").show();
+            $userElement.find("button").html(icon + ' ' + name);
         }
     };
 
@@ -284,24 +287,31 @@ define([
             'class': 'lag'
         });
         var title;
-        if(lag) {
-          firstConnection = false;
-          title = Messages.lag + ' : ' + lag + ' ms\n';
-          if (lag.waiting || lag > 1000) {
-            lagLight.addClass('lag-orange');
-            title += Messages.orangeLight;
-          } else {
-            lagLight.addClass('lag-green');
-            title += Messages.greenLight;
-          }
+        if (typeof lag !== "undefined") {
+            lagErrors = 0;
+            firstConnection = false;
+            title = Messages.lag + ' : ' + lag + ' ms\n';
+            if (lag.waiting || lag > 1000) {
+                lagLight.addClass('lag-orange');
+                title += Messages.orangeLight;
+            } else {
+                lagLight.addClass('lag-green');
+                title += Messages.greenLight;
+            }
+        }
+        else if (!firstConnection) {
+            lagErrors++;
+            // Display the red light at the 2nd failed attemp to get the lag
+            if (lagErrors > 1) {
+                lagLight.addClass('lag-red');
+                title = Messages.redLight;
+            }
         }
-        else if (!firstConnection){
-          lagLight.addClass('lag-red');
-          title = Messages.redLight;
+        if (title) {
+            lagLight.attr('title', title);
+            $(lagElement).html('');
+            $(lagElement).append(lagLight);
         }
-        lagLight.attr('title', title);
-        $(lagElement).html('');
-        $(lagElement).append(lagLight);
     };
 
     var createLinkToMain = function ($topContainer) {
@@ -378,7 +388,7 @@ define([
         var $text = $('<span>', {
             title: Messages.clickToEdit
         }).appendTo($titleContainer);
-        if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return; }
+        if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
         var $input = $('<input>', {
             type: 'text',
             placeholder: placeholder
@@ -427,7 +437,7 @@ define([
         var toolbar = createRealtimeToolbar($container);
         var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
         var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
-        var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
+        var lagElement = createLagElement($(userListElement));
         var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
         var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
         var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS));
diff --git a/www/pad/main.js b/www/pad/main.js
index bfe74e7b6..6b3845ee6 100644
--- a/www/pad/main.js
+++ b/www/pad/main.js
@@ -576,8 +576,8 @@ define([
                     $rightside.append($import);
 
                     /* add a rename button */
-                    var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
-                    $rightside.append($setTitle);
+                    //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
+                    //$rightside.append($setTitle);
                 }
 
                 /* add a forget button */
diff --git a/www/slide/main.js b/www/slide/main.js
index 31a09a1a6..de07c8ff9 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -450,8 +450,8 @@ define([
                     $rightside.append($import);
 
                     /* add a rename button */
-                    var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
-                    $rightside.append($setTitle);
+                    //var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
+                    //$rightside.append($setTitle);
                 }
 
                 /* add a forget button */