From d85684ef74a59f2cd6261b2691aca6a3b70ba085 Mon Sep 17 00:00:00 2001 From: ansuz Date: Thu, 18 Aug 2016 12:06:13 +0200 Subject: [PATCH] usability improvements only one column is editable at a time editable columns have a different appearance from locked columns any column can be edited by anyone via an edit button columns and rows require confirmation before deletion --- customize.dist/main.css | 37 +++++++++---- customize.dist/src/cryptpad.less | 32 +++++------ www/poll/index.html | 2 +- www/poll/main.js | 94 +++++++++++++++++++++----------- 4 files changed, 105 insertions(+), 60 deletions(-) diff --git a/customize.dist/main.css b/customize.dist/main.css index 3778b5d8c..0f5863932 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -191,9 +191,9 @@ tbody tr th, tbody tr td { color: #fafafa; } -tbody tr th.remove, -tbody tr td.remove { - cursor: pointer !important; +tbody tr th .remove, +tbody tr td .remove { + cursor: pointer; color: #FF0073; } tbody tr th:last-child { @@ -302,40 +302,54 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain { height: 100%; width: 100%; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { display: none; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { font-weight: bold; background-color: #FF0073; color: #302B28; display: block; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover:after { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { content: "✖"; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { background-color: #46E981; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes:after { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { content: "✔"; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.mine { +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { display: none; } form.realtime table input[type="text"] { height: 100%; - width: 90%; + width: 80%; border: 3px solid #302B28; } form.realtime table thead tr th .remove { color: #FF0073; cursor: pointer; + font-size: 20px; +} +form.realtime table thead tr th .edit { + color: #46E981; + cursor: pointer; + width: 10%; + font-size: 20px; +} +form.realtime table thead tr th .edit:after { + content: '✐'; +} +form.realtime table thead tr th .edit.editable { + display: none; } form.realtime table tfoot tr td { z-index: 4000; cursor: pointer; } +form.realtime #adduser, form.realtime #addoption { color: #46E981; border: 1px solid #46E981; @@ -343,7 +357,6 @@ form.realtime #addoption { } form.realtime #adduser { border-top-left-radius: 5px; - padding: 15px; } form.realtime #addoption { border-bottom-left-radius: 5px; @@ -380,7 +393,7 @@ div.modal table input { border: 3px solid #302B28; } div.modal table thead tr th span.remove { - color: red; + color: #FF0073; cursor: pointer; } div.modal table tfoot tr td { diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index 1cac19dfb..c36fad766 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -232,8 +232,8 @@ tbody { th, td { color: @fore; - &.remove { - cursor: pointer !important; + .remove { + cursor: pointer; color: @cp-red; } } @@ -373,11 +373,7 @@ form.realtime { input { &[type="checkbox"] { - &.mine { - // idk - } - - &:not(.mine) { + &:not(.editable) { display: none; ~ .cover { @@ -408,7 +404,7 @@ form.realtime { input { &[type="text"] { height: 100%; - width: 90%; + width: 80%; border: 3px solid @base; } } @@ -419,8 +415,16 @@ form.realtime { .remove { color: @cp-red; cursor: pointer; + font-size: 20px; + } + .edit { + color: @cp-green; + cursor: pointer; + width: 10%; + font-size: 20px; + &:after { content: '✐'; } + &.editable { display: none; } } - } } } @@ -441,18 +445,14 @@ form.realtime { } } - //#adduser, + #adduser, #addoption { color: @cp-green; border: 1px solid @cp-green; padding: 15px; } - #adduser { - .top-left; - //border: 1px solid grey; - padding: 15px; - } + #adduser { .top-left; } #addoption { .bottom-left; } } @@ -507,7 +507,7 @@ div.modal { tr { th { span.remove { - color: red; + color: @cp-red; cursor: pointer; } } diff --git a/www/poll/index.html b/www/poll/index.html index 23d74cd9c..49d487487 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -62,7 +62,7 @@ -
+
+ Users
diff --git a/www/poll/main.js b/www/poll/main.js index 4aa455f78..49c276eec 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -100,10 +100,8 @@ define([ } }); - if (p.x === module.userId) { - $check.addClass('mine'); - } else { - console.log(module.userId, p.x); + if (p.x === module.activeColumn) { + $check.addClass('editable'); } $div.append($check); @@ -183,6 +181,25 @@ define([ A.splice(i, 1); }; + var makeUserEditable = module.makeUserEditable = function (id, bool) { + var $name = $('input[type="text"][id="' + id + '"]').attr('disabled', !bool); + + var $edit = $name.parent().find('.edit'); + + $edit[bool?'addClass':'removeClass']('editable'); + + var $sel = $('input[id^="' + id + '"]') + [bool?'addClass':'removeClass']('editable'); + + if (bool) { + module.rt.proxy.table.colsOrder.forEach(function (coluid) { + if (coluid !== id) { makeUserEditable(coluid, false); } + }); + } + + return $sel; + }; + var makeUser = function (proxy, id, value) { var $user = Input({ id: id, @@ -193,11 +210,22 @@ define([ proxy.table.cols[id] = $user.val() || ""; }); - var $wrapper = $('
', { - 'class': 'text-cell', - }) - .append($user) - .append($('', { + var $edit = $('', { + 'class': 'edit', + title: 'edit column', // TODO translate + }).click(function () { + if ($edit.hasClass('editable')) { return; } + Cryptpad.confirm("Are you sure you'd like to edit this user?", + function (yes) { + if (!yes) { return; } + makeUserEditable(id, true); + $edit.addClass('editable'); + $edit.text(""); + module.activeColumn = id; + }); + }); + + var $remove = $('', { 'class': 'remove', 'title': 'remove column', // TODO translate }).text('✖').click(function () { @@ -207,7 +235,14 @@ define([ removeColumn(proxy, id); table.removeColumn(id); }); - })); + }); + + var $wrapper = $('
', { + 'class': 'text-cell', + }) + .append($edit) + .append($user) + .append($remove); proxy.table.cols[id] = value || ""; addIfAbsent(proxy.table.colsOrder, id); @@ -234,17 +269,24 @@ define([ proxy.table.rows[id] = $option.val(); }); + var $remove = $('', { + 'class': 'remove', + 'title': 'remove row', // TODO translate + }).text('✖').click(function () { + // TODO translate + var msg = "Are you sure you'd like to remove this option?"; + Cryptpad.confirm(msg, function (yes) { + if (!yes) { return; } + removeRow(proxy, id); + table.removeRow(id); + }); + }); + var $wrapper = $('
', { 'class': 'text-cell', }) .append($option) - .append($('', { - 'class': 'remove', - 'title': 'remove row', // TODO translate - }).text('✖').click(function () { - removeRow(proxy, id); - table.removeRow(id); - })); + .append($remove); proxy.table.rows[id] = value || ""; addIfAbsent(proxy.table.rowsOrder, id); @@ -255,22 +297,12 @@ define([ return $option; }; - /* $('#adduser').click(function () { if (!module.isEditable) { return; } var id = coluid(); - makeUser(module.rt.proxy, id).focus(); + makeUser(module.rt.proxy, id); + makeUserEditable(id, true).focus(); }); - */ - - var makeUserEditable = module.makeUserEditable = function (id, bool) { - var $name = $('input[type="text"][id="' + id + '"]').attr('disabled', !bool); - - var $sel = $('input[id^="' + id + '"]') - [bool?'addClass':'removeClass']('mine'); - - return $sel; - }; $('#addoption').click(function () { if (!module.isEditable) { return; } @@ -672,7 +704,7 @@ define([ return; } - module.userId = column; + module.activeColumn = column; var promptForName = function () { // HERE @@ -682,7 +714,7 @@ define([ } if (!module.isEditable) { return; } - var id = module.userId = coluid(); + var id = module.activeColumn = coluid(); Cryptpad.setPadAttribute('column', id, function (err) { if (err) {