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 deletionpull/1/head
parent
76bfb6ab35
commit
d85684ef74
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue