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

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

Browse Source
pull/1/head
yflory 8 years ago
parent 90804ed9e0
commit 6dff82ede2
8 changed files with 98 additions and 30 deletions
Show Stats Download Patch File Download Diff File

14
customize.dist/main.css
Unescape Escape View File

@ -328,6 +328,13 @@ form.realtime > textarea {
} }
form.realtime table { form.realtime table {
border-collapse: collapse; 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 { form.realtime table tr td {
padding: 0px; padding: 0px;
@ -337,7 +344,7 @@ form.realtime table tr td div.text-cell {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
height: 100%; height: 100%;
width: 500px; width: 400px;
} }
form.realtime table tr td div.text-cell input { form.realtime table tr td div.text-cell input {
width: 80%; width: 80%;
@ -354,6 +361,7 @@ form.realtime table tr td.checkbox-cell {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
height: 100%; height: 100%;
min-width: 150px;
} }
form.realtime table tr td.checkbox-cell div.checkbox-contain { form.realtime table tr td.checkbox-cell div.checkbox-contain {
display: inline-block; display: inline-block;
@ -423,7 +431,11 @@ form.realtime table thead tr th .remove {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
} }
form.realtime table tfoot tr {
border: none;
}
form.realtime table tfoot tr td { form.realtime table tfoot tr td {
border: none;
text-align: center; text-align: center;
} }
form.realtime table tfoot tr td .save { form.realtime table tfoot tr td .save {

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

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

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

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

2
customize.dist/toolbar.css
Unescape Escape View File

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

4
www/common/toolbar.js
Unescape Escape View File

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

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

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

44
www/poll/test/main.js
Unescape Escape View File

@ -90,6 +90,7 @@ define([
// Enable the checkboxes for the user's column (committed or not) // Enable the checkboxes for the user's column (committed or not)
$('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled'); $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
$('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled'); $('input[type="checkbox"][data-rt-id^="' + id + '"]').addClass('enabled');
$('[data-rt-id="' + id + '"] ~ .edit').css('visibility', 'hidden');
if (isOwnColumnCommitted()) { return; } if (isOwnColumnCommitted()) { return; }
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted"); $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
@ -115,10 +116,16 @@ define([
$('#commit').show(); $('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width()); $('#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(); var width = $('#table').outerWidth();
if (width) { 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) { var handleClick = function (e, isKeyup) {
e.stopPropagation();
if (!APP.ready) { return; } if (!APP.ready) { return; }
var target = e && e.target; var target = e && e.target;
if (isKeyup) { if (isKeyup) {
console.log("Keyup!"); console.log("Keyup!");
return;
} }
if (!target) { return void console.log("NO TARGET"); } if (!target) { return void console.log("NO TARGET"); }
var nodeName = target && target.nodeName; var nodeName = target && target.nodeName;
if (!$(target).parents('#table tbody').length) {
hideInputs(e);
}
switch (nodeName) { switch (nodeName) {
case 'INPUT': case 'INPUT':
handleInput(target); handleInput(target);
@ -302,13 +329,14 @@ define([
if (APP.proxy.published !== bool) { if (APP.proxy.published !== bool) {
APP.proxy.published = bool; APP.proxy.published = bool;
} }
console.log(bool);
if (bool) { if (bool) {
APP.$publish.hide(); APP.$publish.hide();
APP.$admin.show();
$('#create-option').hide(); $('#create-option').hide();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide(); $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
} else { } else {
APP.$publish.show(); APP.$publish.show();
APP.$admin.hide();
$('#create-option').show(); $('#create-option').show();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show(); $('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
} }
@ -447,6 +475,7 @@ define([
APP.uncommitted = {}; APP.uncommitted = {};
prepareProxy(APP.uncommitted, copyObject(Render.Example)); prepareProxy(APP.uncommitted, copyObject(Render.Example));
mergeUncommitted(proxy, uncommittedCopy, true); mergeUncommitted(proxy, uncommittedCopy, true);
APP.$commit.hide();
change(); change();
}); });
@ -467,7 +496,7 @@ define([
$description.val(proxy.info.description); $description.val(proxy.info.description);
} }
$('#tableContainer').prepend($table); $('#tableScroll').prepend($table);
updateDisplayedTable(); updateDisplayedTable();
$table $table
@ -507,13 +536,18 @@ define([
publish(true); publish(true);
}); });
// #publish button is removed in readonly
var $admin = APP.$admin = $('#admin')
.click(function () {
publish(false);
});
addToUserData(APP.proxy.info.userData); addToUserData(APP.proxy.info.userData);
getLastName(function (err, lastName) { getLastName(function (err, lastName) {
APP.ready = true; APP.ready = true;
if (!proxy.published) { if (!proxy.published) {
$('#publish').show(); // Show the publish button
publish(false); publish(false);
} else { } else {
publish(true); publish(true);

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

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

Write Preview
Loading…
Cancel
Save