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

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

pull/1/head
yflory 2016-12-05 18:54:46 +01:00
parent 90804ed9e0
commit 6dff82ede2
8 changed files with 98 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
customize.dist/main.css
View File

@ -328,6 +328,13 @@ form.realtime > textarea {
}
form.realtime table {
border-collapse: collapse;
width: calc(99%);
}
form.realtime table tr td:first-child {
position: absolute;
left: 29px;
top: auto;
width: 400px;
}
form.realtime table tr td {
padding: 0px;
@ -337,7 +344,7 @@ form.realtime table tr td div.text-cell {
padding: 0px;
margin: 0px;
height: 100%;
width: 500px;
width: 400px;
}
form.realtime table tr td div.text-cell input {
width: 80%;
@ -354,6 +361,7 @@ form.realtime table tr td.checkbox-cell {
margin: 0px;
padding: 0px;
height: 100%;
min-width: 150px;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain {
display: inline-block;
@ -423,7 +431,11 @@ form.realtime table thead tr th .remove {
cursor: pointer;
font-size: 20px;
}
form.realtime table tfoot tr {
border: none;
}
form.realtime table tfoot tr td {
border: none;
text-align: center;
}
form.realtime table tfoot tr td .save {

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

@ -375,7 +375,14 @@ form.realtime {
table {
border-collapse: collapse;
width: calc(100% - 1px);
tr {
td:first-child {
position:absolute;
left: 29px;
top: auto;
width: 400px;
}
td {
padding: 0px;
margin: 0px;
@ -385,7 +392,7 @@ form.realtime {
margin: 0px;
height: 100%;
width: 500px;
width: 400px;
input {
width: 80%;
@ -404,6 +411,7 @@ form.realtime {
margin: 0px;
padding: 0px;
height: 100%;
min-width: 150px;
div.checkbox-contain {
display: inline-block;
@ -502,7 +510,9 @@ form.realtime {
}
tfoot {
tr {
border: none;
td {
border: none;
text-align: center;
.save {
padding: 15px;

2
customize.dist/src/toolbar.less
View File

@ -271,7 +271,7 @@
margin: 2px 4px 2px 0px;
}
.cryptpad-userbuttons-container {
display: none;
/*display: none;*/
}
}
.cryptpad-toolbar-rightside {

2
customize.dist/toolbar.css
View File

@ -279,7 +279,7 @@
margin: 2px 4px 2px 0px;
}
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
display: none;
/*display: none;*/
}
.cryptpad-toolbar-rightside {
text-align: right;

4
www/common/toolbar.js
View File

@ -202,14 +202,14 @@ define([
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement, $userAdminElement) {
var meIdx = userList.indexOf(myUserName);
if (meIdx === -1) {
console.log('nok');
$stateElement.text(Messages.synchronizing);
return;
}
$stateElement.text('');
// Make sure the elements are displayed
var $userButtons = $(userlistElement).find("#userButtons");
$userButtons.show();
$userButtons.attr('display', 'inline');
var numberOfUsers = userList.length;

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