infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

poll: make locks clickable

pull/1/head
Pierre Bondoerffer 2017-05-29 16:32:40 +02:00
parent b6bb576a34
commit f434f002c4
No known key found for this signature in database
GPG Key ID: C0C7C0C5063F2236
4 changed files with 77 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
www/poll/main.js
View File

@ -15,8 +15,6 @@ define([
$(function () {
var unlockHTML = '<i class="fa fa-unlock" aria-hidden="true"></i>';
var lockHTML = '<i class="fa fa-lock" aria-hidden="true"></i>';
var HIDE_INTRODUCTION_TEXT = "hide_poll_text";
var defaultName;
@ -100,12 +98,10 @@ 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');
$('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked);
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
if (isOwnColumnCommitted()) { return; }
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
$('td.uncommitted .remove, td.uncommitted .edit').css('visibility', 'hidden');
$('td.uncommitted .cover').addClass("uncommitted");
$('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
};
@ -118,8 +114,7 @@ define([
APP.editable.col.forEach(function (id) {
$('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
$('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
$('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden');
$('.lock[data-rt-id="' + id + '"]').html(unlockHTML).attr('title', Messages.poll_unlocked);
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
});
};
@ -276,7 +271,6 @@ define([
switch (type) {
case 'text':
debug("text[rt-id='%s'] [%s]", id, input.value);
if (!input.value) { return void debug("Hit enter?"); }
Render.setValue(object, id, input.value);
change(null, null, null, 50);
break;
@ -295,12 +289,26 @@ define([
}
};
var hideInputs = function (target, isKeyup) {
if (!isKeyup && $(target).is('[type="text"]')) {
return;
}
$('.lock[data-rt-id!="' + APP.userid + '"]').addClass('fa-lock').removeClass('fa-unlock').attr('title', Messages.poll_locked);
var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
$cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
$('.edit[data-rt-id!="' + APP.userid + '"]').css('visibility', 'visible');
APP.editable.col = [APP.userid];
APP.editable.row = [];
};
/* Called whenever an event is fired on a span */
var handleSpan = function (span) {
var id = span.getAttribute('data-rt-id');
var type = Render.typeofId(id);
var isRemove = span.className && span.className.split(' ').indexOf('remove') !== -1;
var isEdit = span.className && span.className.split(' ').indexOf('edit') !== -1;
var isLock = span.className && span.className.split(' ').indexOf('lock') !== -1;
var isLocked = span.className && span.className.split(' ').indexOf('fa-lock') !== -1;
if (type === 'row') {
if (isRemove) {
Cryptpad.confirm(Messages.poll_removeOption, function (res) {
@ -310,6 +318,7 @@ define([
});
});
} else if (isEdit) {
hideInputs(span);
unlockRow(id, function () {
change(null, null, null, null, function() {
$('input[data-rt-id="' + id + '"]').focus();
@ -324,7 +333,8 @@ define([
change();
});
});
} else if (isEdit) {
} else if (isLock && isLocked) {
hideInputs(span);
unlockColumn(id, function () {
change(null, null, null, null, function() {
$('input[data-rt-id="' + id + '"]').focus();
@ -338,48 +348,34 @@ define([
}
};
var hideInputs = function (e, isKeyup) {
if (!isKeyup && $(e.target).is('[type="text"]')) {
return;
}
$('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML).attr('title', Messages.poll_lock);
var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
$cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
$('.edit[data-rt-id!="' + APP.userid + '"]').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) {
debug("Keyup!");
}
if (!target) { return void debug("NO TARGET"); }
var nodeName = target && target.nodeName;
var shouldLock = $(target).hasClass('fa-unlock');
if (!$(target).parents('#table tbody').length || $(target).hasClass('edit')) {
if ((!$(target).parents('#table tbody').length && $(target).hasClass('lock'))) {
hideInputs(e);
}
switch (nodeName) {
case 'INPUT':
if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) {
hideInputs(e, isKeyup);
return;
hideInputs(target, isKeyup);
break;
}
handleInput(target);
break;
case 'SPAN':
//case 'LABEL':
if (shouldLock) {
break;
}
handleSpan(target);
break;
case undefined:
@ -459,7 +455,6 @@ var ready = function (info, userid, readOnly) {
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
APP.$createRow = $('#create-option').click(function () {
//console.error("BUTTON CLICKED! LOL");
Render.createRow(proxy, function (empty, id) {
change(null, null, null, null, function() {
$('.edit[data-rt-id="' + id + '"]').click();
@ -470,7 +465,7 @@ var ready = function (info, userid, readOnly) {
APP.$createCol = $('#create-user').click(function () {
Render.createColumn(proxy, function (empty, id) {
change(null, null, null, null, function() {
$('.edit[data-rt-id="' + id + '"]').click();
$('.lock[data-rt-id="' + id + '"]').click();
});
});
});
@ -532,6 +527,8 @@ var ready = function (info, userid, readOnly) {
.click(handleClick)
.on('keyup', function (e) { handleClick(e, true); });
$(window).click(hideInputs);
proxy
.on('change', ['info'], function (o, n, p) {
if (p[1] === 'title') {

31
www/poll/poll.css
View File

@ -266,23 +266,37 @@ div.realtime table input[type="text"] {
border: 1px solid #fff;
width: 80%;
}
form.realtime table span,
div.realtime table span {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
form.realtime table thead td,
div.realtime table thead td {
padding: 0px 5px;
background: #aaa;
border-radius: 20px 20px 0 0;
text-align: center;
}
form.realtime table thead td:nth-of-type(2),
div.realtime table thead td:nth-of-type(2) {
background: #999;
}
form.realtime table thead td:nth-of-type(2) .lock,
div.realtime table thead td:nth-of-type(2) .lock {
cursor: default;
}
form.realtime table thead td input[type="text"],
div.realtime table thead td input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 1px 5px;
}
form.realtime table thead td input[type="text"][disabled],
div.realtime table thead td input[type="text"][disabled] {
color: #000;
padding: 1px 5px;
border: none;
border: 1px solid transparent;
}
form.realtime table tbody .text-cell,
div.realtime table tbody .text-cell {
@ -302,10 +316,6 @@ div.realtime table tbody .text-cell .remove {
float: left;
margin: 0 0 0 10px;
}
form.realtime table tbody tr td:nth-child(2),
div.realtime table tbody tr td:nth-child(2) {
border-left: 1px solid #555;
}
form.realtime table tbody tr:not(:first-child) td:not(:first-child) label,
div.realtime table tbody tr:not(:first-child) td:not(:first-child) label {
border-top: 1px solid #555;
@ -317,6 +327,13 @@ div.realtime table .edit {
float: left;
margin-left: 10px;
}
form.realtime table .lock,
div.realtime table .lock {
margin-left: calc(50% - 0.5em);
cursor: pointer;
width: 1em;
text-align: center;
}
form.realtime table .remove,
div.realtime table .remove {
float: right;

25
www/poll/poll.less
View File

@ -2,6 +2,7 @@
@import "../../customize.dist/src/less/mixins.less";
@poll-th-bg: #aaa;
@poll-th-user-bg: #999;
@poll-td-bg: #aaa;
@poll-placeholder: #666;
@poll-border-color: #555;
@ -293,20 +294,32 @@ form.realtime, div.realtime {
width: 80%;
}
}
span {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
thead {
td {
padding: 0px 5px;
background: @poll-th-bg;
border-radius: 20px 20px 0 0;
text-align: center;
//text-align: center;
&:nth-of-type(2) {
background: @poll-th-user-bg;
.lock {
cursor: default;
}
}
input {
&[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 1px 5px;
&[disabled] {
color: @poll-fg;
padding: 1px 5px;
border: none;
border: 1px solid transparent;
}
}
}
@ -344,6 +357,12 @@ form.realtime, div.realtime {
margin-left: 10px;
}
.lock {
margin-left: ~"calc(50% - 0.5em)";
cursor: pointer;
width: 1em;
text-align: center;
}
.remove {
float: right;
margin-right: 10px;

9
www/poll/render.js
View File

@ -269,12 +269,8 @@ var Renderer = function (Cryptpad) {
return ['SPAN', {
'data-rt-id': id,
'title': Cryptpad.Messages.poll_locked,
class: 'lock',
}, [['i', {
class: 'fa fa-lock',
'aria-hidden': true,
}, []]
]];
class: 'lock fa fa-lock',
}, []];
};
var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
@ -284,7 +280,6 @@ var Renderer = function (Cryptpad) {
if (!readOnly) {
elements.unshift(makeRemoveElement(cell['data-rt-id']));
elements.unshift(makeLockElement(cell['data-rt-id']));
elements.unshift(makeEditElement(cell['data-rt-id']));
}
return ['TD', {}, elements];
}