dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
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 {
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 {

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

@ -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;
}
}

2
www/poll/index.html
View File

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

94
www/poll/main.js
View File

@ -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 = $('<div>', {
'class': 'text-cell',
})
.append($user)
.append($('<span>', {
var $edit = $('<span>', {
'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 = $('<span>', {
'class': 'remove',
'title': 'remove column', // TODO translate
}).text('✖').click(function () {
@ -207,7 +235,14 @@ define([
removeColumn(proxy, id);
table.removeColumn(id);
});
}));
});
var $wrapper = $('<div>', {
'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 = $('<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>', {
'class': 'text-cell',
})
.append($option)
.append($('<span>', {
'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) {