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

Improve UI, scrollbar in the table, publish/admin buttons

Browse Source
This commit is contained in:
yflory
2016-12-05 18:54:46 +01:00
parent 90804ed9e0
commit 6dff82ede2
8 changed files with 98 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
www/poll/test/index.html
View File

@@ -64,25 +64,24 @@
#publish {
display: none;
}
#commit {
position: absolute;
left: 532px;
bottom: 0px;
}
#create-user {
position: absolute;
left: 0px;
top: 31px;
display: inline-block;
/*left: 0px;
top: 31px;*/
width: 50px;
overflow: hidden;
}
#create-option {
position: absolute;
bottom: 0px;
left: 249px;
width: 50px;
}
#tableScroll {
overflow-x: auto;
margin-left: 400px;
max-width: 70%;
width: auto;
display: inline-block;
}
</style>
</head>
<body>
@@ -98,14 +97,16 @@
</div>
<button id="publish" style="display: none;">publish poll</button>
<button id="admin" style="display: none;">admin</button>
<form class="realtime">
<br />
<textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
<p id="tableContainer">
<button id="create-option"><span class="fa fa-plus"></span></button>
<div id="tableContainer">
<div id="tableScroll"></div>
<button id="create-user"><span class="fa fa-plus"></span></button>
<button id="create-option"><span class="fa fa-plus"></span></button>
<button id="commit"><span class="fa fa-check"></span></button>
</p>
</div>
</form>

46
www/poll/test/main.js
View File

@@ -90,6 +90,7 @@ 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');
if (isOwnColumnCommitted()) { return; }
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
@@ -115,10 +116,16 @@ define([
$('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width());
}
$('#create-user, #create-option').show();
var $createOption = APP.$table.find('tfoot tr td:first-child');
var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
$createOption.append(APP.$createRow);
$commitCell.append(APP.$commit);
$('#create-user, #create-option').css('display', 'inline-block');
if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
var width = $('#table').outerWidth();
if (width) {
$('#create-user').css('left', width + 30 + 'px');
//$('#create-user').css('left', width + 30 + 'px');
}
};
@@ -252,18 +259,38 @@ define([
}
};
var hideInputs = function (e) {
if ($(e.target).is('[type="text"]')) {
return;
}
var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
$cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
$cells.find('[data-rt-id!="' + APP.userid + '"] ~ .edit').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) {
console.log("Keyup!");
return;
}
if (!target) { return void console.log("NO TARGET"); }
var nodeName = target && target.nodeName;
if (!$(target).parents('#table tbody').length) {
hideInputs(e);
}
switch (nodeName) {
case 'INPUT':
handleInput(target);
@@ -302,13 +329,14 @@ define([
if (APP.proxy.published !== bool) {
APP.proxy.published = bool;
}
console.log(bool);
if (bool) {
APP.$publish.hide();
APP.$admin.show();
$('#create-option').hide();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
} else {
APP.$publish.show();
APP.$admin.hide();
$('#create-option').show();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
}
@@ -428,7 +456,7 @@ define([
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
var $createRow = APP.$createRow = $('#create-option').click(function () {
//
//
console.error("BUTTON CLICKED! LOL");
Render.createRow(proxy, function () {
change();
@@ -447,6 +475,7 @@ define([
APP.uncommitted = {};
prepareProxy(APP.uncommitted, copyObject(Render.Example));
mergeUncommitted(proxy, uncommittedCopy, true);
APP.$commit.hide();
change();
});
@@ -467,7 +496,7 @@ define([
$description.val(proxy.info.description);
}
$('#tableContainer').prepend($table);
$('#tableScroll').prepend($table);
updateDisplayedTable();
$table
@@ -507,13 +536,18 @@ define([
publish(true);
});
// #publish button is removed in readonly
var $admin = APP.$admin = $('#admin')
.click(function () {
publish(false);
});
addToUserData(APP.proxy.info.userData);
getLastName(function (err, lastName) {
APP.ready = true;
if (!proxy.published) {
$('#publish').show(); // Show the publish button
publish(false);
} else {
publish(true);

19
www/poll/test/render.js
View File

@@ -195,6 +195,7 @@ by maintaining indexes in rowsOrder and colsOrder
var cells = getCells(obj);
rows = rows || getRowIds(obj);
rows.push('');
cols = cols || getColIds(obj);
return [null].concat(rows).map(function (row, i) {
@@ -210,6 +211,13 @@ by maintaining indexes in rowsOrder and colsOrder
return result;
}));
}
if (i === rows.length) {
return [null].concat(cols.map(function (col) {
return {
'class': 'lastRow',
};
}));
}
return [{
'data-rt-id': row,
@@ -291,7 +299,7 @@ by maintaining indexes in rowsOrder and colsOrder
};
var makeBodyCell = Render.makeBodyCell = function (cell, readOnly) {
if (cell.type === 'text') {
if (cell && cell.type === 'text') {
var removeElement = makeRemoveElement(cell['data-rt-id']);
var editElement = makeEditElement(cell['data-rt-id']);
var elements = [['INPUT', cell, []]];
@@ -304,7 +312,7 @@ by maintaining indexes in rowsOrder and colsOrder
]];
}
if (cell.type === 'checkbox') {
if (cell && cell.type === 'checkbox') {
return makeCheckbox(cell);
}
return ['TD', cell, []];
@@ -321,10 +329,13 @@ by maintaining indexes in rowsOrder and colsOrder
var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(function (cell) {
return makeHeadingCell(cell, readOnly);
})] ]];
var body = ['TBODY', {}, matrix.slice(1).map(function (row) {
var foot = ['TFOOT', {}, matrix.slice(-1).map(function (row) {
return makeBodyRow(row, readOnly);
})];
return ['TABLE', {id:'table'}, [head, body]];
var body = ['TBODY', {}, matrix.slice(1, -1).map(function (row) {
return makeBodyRow(row, readOnly);
})];
return ['TABLE', {id:'table'}, [head, foot, body]];
};
var asHTML = Render.asHTML = function (obj, rows, cols, readOnly) {