Improve UI, scrollbar in the table, publish/admin buttons

customize.dist/main.css

@@ -328,6 +328,13 @@ form.realtime > textarea {
 }
 form.realtime table {
   border-collapse: collapse;
+  width: calc(99%);
+}
+form.realtime table tr td:first-child {
+  position: absolute;
+  left: 29px;
+  top: auto;
+  width: 400px;
 }
 form.realtime table tr td {
   padding: 0px;
@@ -337,7 +344,7 @@ form.realtime table tr td div.text-cell {
   padding: 0px;
   margin: 0px;
   height: 100%;
-  width: 500px;
+  width: 400px;
 }
 form.realtime table tr td div.text-cell input {
   width: 80%;
@@ -354,6 +361,7 @@ form.realtime table tr td.checkbox-cell {
   margin: 0px;
   padding: 0px;
   height: 100%;
+  min-width: 150px;
 }
 form.realtime table tr td.checkbox-cell div.checkbox-contain {
   display: inline-block;
@@ -423,7 +431,11 @@ form.realtime table thead tr th .remove {
   cursor: pointer;
   font-size: 20px;
 }
+form.realtime table tfoot tr {
+  border: none;
+}
 form.realtime table tfoot tr td {
+  border: none;
   text-align: center;
 }
 form.realtime table tfoot tr td .save {

customize.dist/src/cryptpad.less

@@ -375,7 +375,14 @@ form.realtime {
 
     table {
         border-collapse: collapse;
+        width: calc(100% - 1px);
         tr {
+            td:first-child {
+                position:absolute;
+                left: 29px;
+                top: auto;
+                width: 400px;
+            }
             td {
                 padding: 0px;
                 margin: 0px;
@@ -385,7 +392,7 @@ form.realtime {
                     margin: 0px;
                         height: 100%;
 
-                    width: 500px;
+                    width: 400px;
 
                     input {
                         width: 80%;
@@ -404,6 +411,7 @@ form.realtime {
                     margin: 0px;
                     padding: 0px;
                     height: 100%;
+                    min-width: 150px;
 
                     div.checkbox-contain {
                         display: inline-block;
@@ -502,7 +510,9 @@ form.realtime {
         }
         tfoot {
             tr {
+                border: none;
                 td {
+                    border: none;
                     text-align: center;
                     .save {
                         padding: 15px;

customize.dist/src/toolbar.less

@@ -271,7 +271,7 @@
         margin: 2px 4px 2px 0px;
     }
     .cryptpad-userbuttons-container {
-        display: none;
+        /*display: none;*/
     }
 }
 .cryptpad-toolbar-rightside {

customize.dist/toolbar.css

@@ -279,7 +279,7 @@
   margin: 2px 4px 2px 0px;
 }
 .cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
-  display: none;
+  /*display: none;*/
 }
 .cryptpad-toolbar-rightside {
   text-align: right;

www/common/toolbar.js

@@ -202,14 +202,14 @@ define([
     var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) {
         var meIdx = userList.indexOf(myUserName);
         if (meIdx === -1) {
+            console.log('nok');
             $stateElement.text(Messages.synchronizing);
             return;
         }
         $stateElement.text('');
-
         // Make sure the elements are displayed
         var $userButtons = $(userlistElement).find("#userButtons");
-        $userButtons.show();
+        $userButtons.attr('display', 'inline');
 
         var numberOfUsers = userList.length;
 

www/poll/test/index.html

@@ -64,25 +64,24 @@
         #publish {
             display: none;
         }
-        #commit {
-            position: absolute;
-            left: 532px;
-            bottom: 0px;
-        }
         #create-user {
             position: absolute;
-            left: 0px;
+            display: inline-block;
-            top: 31px;
+            /*left: 0px;
+            top: 31px;*/
             width: 50px;
             overflow: hidden;
         }
         #create-option {
-            position: absolute;
-            bottom: 0px;
-            left: 249px;
             width: 50px;
         }
-
+        #tableScroll {
+            overflow-x: auto;
+            margin-left: 400px;
+            max-width: 70%;
+            width: auto;
+            display: inline-block;
+        }
     </style>
 </head>
 <body>
@@ -98,14 +97,16 @@
 </div>
 
 <button id="publish" style="display: none;">publish poll</button>
+<button id="admin" style="display: none;">admin</button>
 
 
 <form class="realtime">
     <br />
     <textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
-    <p id="tableContainer">
+    <div id="tableContainer">
-        <button id="create-option"><span class="fa fa-plus"></span></button>
+        <div id="tableScroll"></div>
         <button id="create-user"><span class="fa fa-plus"></span></button>
+        <button id="create-option"><span class="fa fa-plus"></span></button>
         <button id="commit"><span class="fa fa-check"></span></button>
-    </p>
+    </div>
 </form>

www/poll/test/main.js

@@ -90,6 +90,7 @@ define([
         // Enable the checkboxes for the user's column (committed or not)
         $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
         $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
+        $('[data-rt-id="' + id + '"] ~ .edit').css('visibility', 'hidden');
 
         if (isOwnColumnCommitted()) { return; }
         $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
@@ -115,10 +116,16 @@ define([
             $('#commit').show();
             $('#commit').css('width', $($('.checkbox-cell')[0]).width());
         }
-        $('#create-user, #create-option').show();
+
+        var $createOption = APP.$table.find('tfoot tr td:first-child');
+        var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
+        $createOption.append(APP.$createRow);
+        $commitCell.append(APP.$commit);
+        $('#create-user, #create-option').css('display', 'inline-block');
+        if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
         var width = $('#table').outerWidth();
         if (width) {
-            $('#create-user').css('left', width + 30 + 'px');
+            //$('#create-user').css('left', width + 30 + 'px');
         }
     };
 
@@ -252,18 +259,38 @@ define([
         }
     };
 
+    var hideInputs = function (e) {
+        if ($(e.target).is('[type="text"]')) {
+            return;
+        }
+        var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
+        $cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
+        $cells.find('[data-rt-id!="' + APP.userid + '"] ~ .edit').css('visibility', 'visible');
+        APP.editable.col = [APP.userid];
+        APP.editable.row = [];
+    };
+
+    $(window).click(hideInputs);
+
     var handleClick = function (e, isKeyup) {
+        e.stopPropagation();
+
         if (!APP.ready) { return; }
         var target = e && e.target;
 
         if (isKeyup) {
             console.log("Keyup!");
+            return;
         }
 
         if (!target) { return void console.log("NO TARGET"); }
 
         var nodeName = target && target.nodeName;
 
+        if (!$(target).parents('#table tbody').length) {
+            hideInputs(e);
+        }
+
         switch (nodeName) {
             case 'INPUT':
                 handleInput(target);
@@ -302,13 +329,14 @@ define([
         if (APP.proxy.published !== bool) {
             APP.proxy.published = bool;
         }
-        console.log(bool);
         if (bool) {
             APP.$publish.hide();
+            APP.$admin.show();
             $('#create-option').hide();
             $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
         } else {
             APP.$publish.show();
+            APP.$admin.hide();
             $('#create-option').show();
             $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
         }
@@ -428,7 +456,7 @@ define([
 
         var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
         var $createRow = APP.$createRow = $('#create-option').click(function () {
-            // 
+            //
             console.error("BUTTON CLICKED! LOL");
             Render.createRow(proxy, function () {
                 change();
@@ -447,6 +475,7 @@ define([
             APP.uncommitted = {};
             prepareProxy(APP.uncommitted, copyObject(Render.Example));
             mergeUncommitted(proxy, uncommittedCopy, true);
+            APP.$commit.hide();
             change();
         });
 
@@ -467,7 +496,7 @@ define([
             $description.val(proxy.info.description);
         }
 
-        $('#tableContainer').prepend($table);
+        $('#tableScroll').prepend($table);
         updateDisplayedTable();
 
         $table
@@ -507,13 +536,18 @@ define([
                 publish(true);
             });
 
+        // #publish button is removed in readonly
+        var $admin = APP.$admin = $('#admin')
+            .click(function () {
+                publish(false);
+            });
+
         addToUserData(APP.proxy.info.userData);
 
         getLastName(function (err, lastName) {
             APP.ready = true;
 
             if (!proxy.published) {
-                $('#publish').show(); // Show the publish button
                 publish(false);
             } else {
                 publish(true);

www/poll/test/render.js

@@ -195,6 +195,7 @@ by maintaining indexes in rowsOrder and colsOrder
 
         var cells = getCells(obj);
         rows = rows || getRowIds(obj);
+        rows.push('');
         cols = cols || getColIds(obj);
 
         return [null].concat(rows).map(function (row, i) {
@@ -210,6 +211,13 @@ by maintaining indexes in rowsOrder and colsOrder
                     return result;
                 }));
             }
+            if (i === rows.length) {
+                return [null].concat(cols.map(function (col) {
+                    return {
+                        'class': 'lastRow',
+                    };
+                }));
+            }
 
             return [{
                 'data-rt-id': row,
@@ -291,7 +299,7 @@ by maintaining indexes in rowsOrder and colsOrder
     };
 
     var makeBodyCell = Render.makeBodyCell = function (cell, readOnly) {
-        if (cell.type === 'text') {
+        if (cell && cell.type === 'text') {
             var removeElement = makeRemoveElement(cell['data-rt-id']);
             var editElement = makeEditElement(cell['data-rt-id']);
             var elements = [['INPUT', cell, []]];
@@ -304,7 +312,7 @@ by maintaining indexes in rowsOrder and colsOrder
             ]];
         }
 
-        if (cell.type === 'checkbox') {
+        if (cell && cell.type === 'checkbox') {
             return makeCheckbox(cell);
         }
         return ['TD', cell, []];
@@ -321,10 +329,13 @@ by maintaining indexes in rowsOrder and colsOrder
         var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(function (cell) {
             return makeHeadingCell(cell, readOnly);
         })] ]];
-        var body = ['TBODY', {}, matrix.slice(1).map(function (row) {
+        var foot = ['TFOOT', {}, matrix.slice(-1).map(function (row) {
             return makeBodyRow(row, readOnly);
         })];
-        return ['TABLE', {id:'table'}, [head, body]];
+        var body = ['TBODY', {}, matrix.slice(1, -1).map(function (row) {
+            return makeBodyRow(row, readOnly);
+        })];
+        return ['TABLE', {id:'table'}, [head, foot, body]];
     };
 
     var asHTML = Render.asHTML = function (obj, rows, cols, readOnly) {