From 6dff82ede2cb0d0e020ac14fb5236b3222510ac2 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 5 Dec 2016 18:54:46 +0100 Subject: [PATCH] Improve UI, scrollbar in the table, publish/admin buttons --- customize.dist/main.css | 14 +++++++++- customize.dist/src/cryptpad.less | 12 ++++++++- customize.dist/src/toolbar.less | 2 +- customize.dist/toolbar.css | 2 +- www/common/toolbar.js | 4 +-- www/poll/test/index.html | 29 ++++++++++---------- www/poll/test/main.js | 46 +++++++++++++++++++++++++++----- www/poll/test/render.js | 19 ++++++++++--- 8 files changed, 98 insertions(+), 30 deletions(-) diff --git a/customize.dist/main.css b/customize.dist/main.css index 32e538c68..f34dacb58 100644 --- a/customize.dist/main.css +++ b/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 { diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index e123f8722..a54ac78f6 100644 --- a/customize.dist/src/cryptpad.less +++ b/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; diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index d8f7b6a6c..c420bdae1 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -271,7 +271,7 @@ margin: 2px 4px 2px 0px; } .cryptpad-userbuttons-container { - display: none; + /*display: none;*/ } } .cryptpad-toolbar-rightside { diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index cfde957a3..02eeff7e7 100644 --- a/customize.dist/toolbar.css +++ b/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; diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 52d849866..0a5320c10 100644 --- a/www/common/toolbar.js +++ b/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; diff --git a/www/poll/test/index.html b/www/poll/test/index.html index 67ebaa089..6fef7493d 100644 --- a/www/poll/test/index.html +++ b/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; - top: 31px; + display: inline-block; + /*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; + } @@ -98,14 +97,16 @@ +


-

- +

+
+ -

+
diff --git a/www/poll/test/main.js b/www/poll/test/main.js index f56f8490a..6d8b468a2 100644 --- a/www/poll/test/main.js +++ b/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); diff --git a/www/poll/test/render.js b/www/poll/test/render.js index 8f8f5b7ad..0b9fe790e 100644 --- a/www/poll/test/render.js +++ b/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); + })]; + var body = ['TBODY', {}, matrix.slice(1, -1).map(function (row) { return makeBodyRow(row, readOnly); })]; - return ['TABLE', {id:'table'}, [head, body]]; + return ['TABLE', {id:'table'}, [head, foot, body]]; }; var asHTML = Render.asHTML = function (obj, rows, cols, readOnly) {