web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

usability improvements

Browse Source 
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
This commit is contained in:
ansuz 2016-08-18 12:06:13 +02:00
parent 76bfb6ab35
commit d85684ef74
4 changed files with 105 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
customize.dist/main.css
View File

@ -191,9 +191,9 @@ tbody tr th,
tbody tr td { tbody tr td {
color: #fafafa; color: #fafafa;
} }
tbody tr th.remove, tbody tr th .remove,
tbody tr td.remove { tbody tr td .remove {
cursor: pointer !important; cursor: pointer;
color: #FF0073; color: #FF0073;
} }
tbody tr th:last-child { tbody tr th:last-child {
@ -302,40 +302,54 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain {
height: 100%; height: 100%;
width: 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; 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; font-weight: bold;
background-color: #FF0073; background-color: #FF0073;
color: #302B28; color: #302B28;
display: block; 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: "✖"; 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; 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: "✔"; 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; display: none;
} }
form.realtime table input[type="text"] { form.realtime table input[type="text"] {
height: 100%; height: 100%;
width: 90%; width: 80%;
border: 3px solid #302B28; border: 3px solid #302B28;
} }
form.realtime table thead tr th .remove { form.realtime table thead tr th .remove {
color: #FF0073; color: #FF0073;
cursor: pointer; 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 { form.realtime table tfoot tr td {
z-index: 4000; z-index: 4000;
cursor: pointer; cursor: pointer;
} }
form.realtime #adduser,
form.realtime #addoption { form.realtime #addoption {
color: #46E981; color: #46E981;
border: 1px solid #46E981; border: 1px solid #46E981;
@ -343,7 +357,6 @@ form.realtime #addoption {
} }
form.realtime #adduser { form.realtime #adduser {
border-top-left-radius: 5px; border-top-left-radius: 5px;
padding: 15px;
} }
form.realtime #addoption { form.realtime #addoption {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
@ -380,7 +393,7 @@ div.modal table input {
border: 3px solid #302B28; border: 3px solid #302B28;
} }
div.modal table thead tr th span.remove { div.modal table thead tr th span.remove {
color: red; color: #FF0073;
cursor: pointer; cursor: pointer;
} }
div.modal table tfoot tr td { div.modal table tfoot tr td {

32
customize.dist/src/cryptpad.less
View File

@ -232,8 +232,8 @@ tbody {
th, td { th, td {
color: @fore; color: @fore;
&.remove { .remove {
cursor: pointer !important; cursor: pointer;
color: @cp-red; color: @cp-red;
} }
} }
@ -373,11 +373,7 @@ form.realtime {
input { input {
&[type="checkbox"] { &[type="checkbox"] {
&.mine { &:not(.editable) {
// idk
}
&:not(.mine) {
display: none; display: none;
~ .cover { ~ .cover {
@ -408,7 +404,7 @@ form.realtime {
input { input {
&[type="text"] { &[type="text"] {
height: 100%; height: 100%;
width: 90%; width: 80%;
border: 3px solid @base; border: 3px solid @base;
} }
} }
@ -419,8 +415,16 @@ form.realtime {
.remove { .remove {
color: @cp-red; color: @cp-red;
cursor: pointer; 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 { #addoption {
color: @cp-green; color: @cp-green;
border: 1px solid @cp-green; border: 1px solid @cp-green;
padding: 15px; padding: 15px;
} }
#adduser { #adduser { .top-left; }
.top-left;
//border: 1px solid grey;
padding: 15px;
}
#addoption { .bottom-left; } #addoption { .bottom-left; }
} }
@ -507,7 +507,7 @@ div.modal {
tr { tr {
th { th {
span.remove { span.remove {
color: red; color: @cp-red;
cursor: pointer; cursor: pointer;
} }
} }

2
www/poll/index.html
View File

@ -62,7 +62,7 @@
<thead> <thead>
<tr> <tr>
<td> <td>
<div id="adduser"></div> <div id="adduser" class="clickable" title="click to add a user">+ Users</div>
</td> </td>
</tr> </tr>
</thead> </thead>

94
www/poll/main.js
View File

@ -100,10 +100,8 @@ define([
} }
}); });
if (p.x === module.userId) { if (p.x === module.activeColumn) {
$check.addClass('mine'); $check.addClass('editable');
} else {
console.log(module.userId, p.x);
} }
$div.append($check); $div.append($check);
@ -183,6 +181,25 @@ define([
A.splice(i, 1); 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 makeUser = function (proxy, id, value) {
var $user = Input({ var $user = Input({
id: id, id: id,
@ -193,11 +210,22 @@ define([
proxy.table.cols[id] = $user.val() || ""; proxy.table.cols[id] = $user.val() || "";
}); });
var $wrapper = $('<div>', { var $edit = $('<span>', {
'class': 'text-cell', 'class': 'edit',
}) title: 'edit column', // TODO translate
.append($user) }).click(function () {
.append($('<span>', { 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 = $('<span>', {
'class': 'remove', 'class': 'remove',
'title': 'remove column', // TODO translate 'title': 'remove column', // TODO translate
}).text('✖').click(function () { }).text('✖').click(function () {
@ -207,7 +235,14 @@ define([
removeColumn(proxy, id); removeColumn(proxy, id);
table.removeColumn(id); table.removeColumn(id);
}); });
})); });
var $wrapper = $('<div>', {
'class': 'text-cell',
})
.append($edit)
.append($user)
.append($remove);
proxy.table.cols[id] = value || ""; proxy.table.cols[id] = value || "";
addIfAbsent(proxy.table.colsOrder, id); addIfAbsent(proxy.table.colsOrder, id);
@ -234,17 +269,24 @@ define([
proxy.table.rows[id] = $option.val(); proxy.table.rows[id] = $option.val();
}); });
var $remove = $('<span>', {
'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 = $('<div>', { var $wrapper = $('<div>', {
'class': 'text-cell', 'class': 'text-cell',
}) })
.append($option) .append($option)
.append($('<span>', { .append($remove);
'class': 'remove',
'title': 'remove row', // TODO translate
}).text('✖').click(function () {
removeRow(proxy, id);
table.removeRow(id);
}));
proxy.table.rows[id] = value || ""; proxy.table.rows[id] = value || "";
addIfAbsent(proxy.table.rowsOrder, id); addIfAbsent(proxy.table.rowsOrder, id);
@ -255,22 +297,12 @@ define([
return $option; return $option;
}; };
/*
$('#adduser').click(function () { $('#adduser').click(function () {
if (!module.isEditable) { return; } if (!module.isEditable) { return; }
var id = coluid(); 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 () { $('#addoption').click(function () {
if (!module.isEditable) { return; } if (!module.isEditable) { return; }
@ -672,7 +704,7 @@ define([
return; return;
} }
module.userId = column; module.activeColumn = column;
var promptForName = function () { var promptForName = function () {
// HERE // HERE
@ -682,7 +714,7 @@ define([
} }
if (!module.isEditable) { return; } if (!module.isEditable) { return; }
var id = module.userId = coluid(); var id = module.activeColumn = coluid();
Cryptpad.setPadAttribute('column', id, function (err) { Cryptpad.setPadAttribute('column', id, function (err) {
if (err) { if (err) {