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

Improve UI, fix issues with the table

Browse Source
pull/1/head
yflory 8 years ago
parent 6dff82ede2
commit 740b6e955e
8 changed files with 231 additions and 99 deletions
Show Stats Download Patch File Download Diff File

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

@ -318,58 +318,68 @@ tbody td:last-child {
color: #FF0073;
cursor: pointer !important;
}
form.realtime {
form.realtime,
div.realtime {
padding: 0px;
margin: 0px;
}
form.realtime > textarea {
form.realtime > textarea,
div.realtime > textarea {
width: 50%;
height: 15vh;
}
form.realtime table {
form.realtime table,
div.realtime table {
border-collapse: collapse;
width: calc(99%);
width: calc(100% - 1px);
}
form.realtime table tr td:first-child {
form.realtime table tr td:first-child,
div.realtime table tr td:first-child {
position: absolute;
left: 29px;
top: auto;
width: 400px;
width: calc(30% - 50px);
}
form.realtime table tr td {
form.realtime table tr td,
div.realtime table tr td {
padding: 0px;
margin: 0px;
}
form.realtime table tr td div.text-cell {
form.realtime table tr td div.text-cell,
div.realtime table tr td div.text-cell {
padding: 0px;
margin: 0px;
height: 100%;
width: 400px;
}
form.realtime table tr td div.text-cell input {
form.realtime table tr td div.text-cell input,
div.realtime table tr td div.text-cell input {
width: 80%;
width: 90%;
height: 100%;
border: 0px;
}
form.realtime table tr td div.text-cell input[disabled] {
form.realtime table tr td div.text-cell input[disabled],
div.realtime table tr td div.text-cell input[disabled] {
background-color: transparent;
color: #fafafa;
font-weight: bold;
}
form.realtime table tr td.checkbox-cell {
form.realtime table tr td.checkbox-cell,
div.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 {
form.realtime table tr td.checkbox-cell div.checkbox-contain,
div.realtime table tr td.checkbox-cell div.checkbox-contain {
display: inline-block;
height: 100%;
width: 100%;
position: relative;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain label {
form.realtime table tr td.checkbox-cell div.checkbox-contain label,
div.realtime table tr td.checkbox-cell div.checkbox-contain label {
background-color: transparent;
display: block;
position: absolute;
@ -378,82 +388,136 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain label {
height: 100%;
width: 100%;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable),
div.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(.editable) ~ .cover {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover,
div.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(.editable) ~ .cover:after {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
height: 100%;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
div.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(.editable) ~ .cover.yes {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes,
div.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(.editable) ~ .cover.yes:after {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after,
div.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(.editable) ~ .cover.uncommitted {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted {
background: #ddd;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine,
div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine {
display: none;
}
form.realtime table input[type="text"] {
form.realtime table input[type="text"],
div.realtime table input[type="text"] {
height: 100%;
width: 70%;
border: 3px solid #302B28;
border: 1px solid #302B28;
width: 80%;
}
form.realtime table thead td,
div.realtime table thead td {
padding: 0px 5px;
background: #4c443f;
border-radius: 20px 20px 0 0;
}
form.realtime table thead td input[type="text"],
div.realtime table thead td input[type="text"] {
width: 100%;
box-sizing: border-box;
}
form.realtime table thead td input[type="text"][disabled],
div.realtime table thead td input[type="text"][disabled] {
color: white;
padding: 1px 5px;
}
form.realtime table tbody .text-cell,
div.realtime table tbody .text-cell {
background: #4c443f;
}
form.realtime table tbody .text-cell input[type="text"],
div.realtime table tbody .text-cell input[type="text"] {
width: calc(100% - 50px);
}
form.realtime table tbody .text-cell .edit,
div.realtime table tbody .text-cell .edit {
float: right;
margin: 0 10px 0 0;
}
form.realtime table tbody .text-cell .remove,
div.realtime table tbody .text-cell .remove {
float: left;
margin: 0 0 0 10px;
}
form.realtime table .edit {
form.realtime table .edit,
div.realtime table .edit {
color: #46E981;
cursor: pointer;
width: 10%;
font-size: 20px;
}
form.realtime table .edit:after {
content: '✐';
float: left;
margin-left: 10px;
/*&:after { content: '✐'; }*/
/*&.editable { display: none; }*/
}
form.realtime table .edit.editable {
display: none;
form.realtime table .remove,
div.realtime table .remove {
float: right;
margin-right: 10px;
}
form.realtime table thead tr th input[type="text"][disabled] {
form.realtime table thead tr th input[type="text"][disabled],
div.realtime table thead tr th input[type="text"][disabled] {
background-color: transparent;
color: #fafafa;
font-weight: bold;
}
form.realtime table thead tr th .remove {
form.realtime table thead tr th .remove,
div.realtime table thead tr th .remove {
cursor: pointer;
font-size: 20px;
}
form.realtime table tfoot tr {
form.realtime table tfoot tr,
div.realtime table tfoot tr {
border: none;
}
form.realtime table tfoot tr td {
form.realtime table tfoot tr td,
div.realtime table tfoot tr td {
border: none;
text-align: center;
}
form.realtime table tfoot tr td .save {
form.realtime table tfoot tr td .save,
div.realtime table tfoot tr td .save {
padding: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
form.realtime #adduser,
form.realtime #addoption {
div.realtime #adduser,
form.realtime #addoption,
div.realtime #addoption {
color: #46E981;
border: 1px solid #46E981;
padding: 15px;
cursor: pointer;
}
form.realtime #adduser {
form.realtime #adduser,
div.realtime #adduser {
border-top-left-radius: 5px;
}
form.realtime #addoption {
form.realtime #addoption,
div.realtime #addoption {
border-bottom-left-radius: 5px;
}
div.modal,

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

@ -359,7 +359,7 @@ tbody {
cursor: pointer !important;
}
form.realtime {
form.realtime, div.realtime {
> input {
&[type="text"] {
@ -375,13 +375,13 @@ form.realtime {
table {
border-collapse: collapse;
width: calc(100% - 1px);
width: ~"calc(100% - 1px)";
tr {
td:first-child {
position:absolute;
left: 29px;
top: auto;
width: 400px;
width: ~"calc(30% - 50px)";
}
td {
padding: 0px;
@ -390,9 +390,7 @@ form.realtime {
div.text-cell {
padding: 0px;
margin: 0px;
height: 100%;
width: 400px;
height: 100%;
input {
width: 80%;
@ -473,17 +471,57 @@ form.realtime {
input {
&[type="text"] {
height: 100%;
width: 70%;
border: 3px solid @base;
border: 1px solid @base;
width: 80%;
}
}
thead {
td {
padding: 0px 5px;
background: @less-light-base;
border-radius: 20px 20px 0 0;
input {
&[type="text"] {
width: 100%;
box-sizing: border-box;
&[disabled] {
color: white;
padding: 1px 5px;
}
}
}
}
}
tbody {
.text-cell {
background: @less-light-base;
//border-radius: 20px 0 0 20px;
input[type="text"] {
width: ~"calc(100% - 50px)";
}
.edit {
float:right;
margin: 0 10px 0 0;
}
.remove {
float: left;
margin: 0 0 0 10px;
}
}
}
.edit {
color: @cp-green;
cursor: pointer;
width: 10%;
font-size: 20px;
&:after { content: '✐'; }
&.editable { display: none; }
float: left;
margin-left: 10px;
/*&:after { content: '✐'; }*/
/*&.editable { display: none; }*/
}
.remove {
float: right;
margin-right: 10px
}
thead {

1
customize.dist/src/variables.less
Unescape Escape View File

@ -1,5 +1,6 @@
@base: #302B28;
@light-base: lighten(@base, 20%);
@less-light-base: lighten(@base, 10%);
@fore: #fafafa;
@cp-green: #46E981;

6
customize.dist/translations/messages.fr.js
Unescape Escape View File

@ -129,6 +129,12 @@ define(function () {
out.wizardTitle = "Utiliser l'assistant pour créer votre sondage";
out.wizardConfirm = "Êtes-vous vraiment prêt à ajouter ces options au sondage ?";
out.poll_publish_button = "Publier";
out.poll_admin_button = "Administrer";
out.poll_create_user = "Ajouter un utilisateur";
out.poll_create_option = "Ajouter une option";
out.poll_commit = "Valider";
out.poll_closeWizardButton = "Fermer l'assistant";
out.poll_closeWizardButtonTitle = "Fermer l'assistant";
out.poll_wizardComputeButton = "Générer les options";

6
customize.dist/translations/messages.js
Unescape Escape View File

@ -131,6 +131,12 @@ define(function () {
out.wizardTitle = "Use the wizard to create your poll";
out.wizardConfirm = "Are you really ready to add these options to your poll?";
out.poll_publish_button = "Publish";
out.poll_admin_button = "Admin";
out.poll_create_user = "Add a new user";
out.poll_create_option = "Add a new option";
out.poll_commit = "Commit";
out.poll_closeWizardButton = "Close wizard";
out.poll_closeWizardButtonTitle = "Close wizard";
out.poll_wizardComputeButton = "Compute Options";

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

@ -55,7 +55,7 @@
#tableContainer {
position: relative;
padding: 29px;
padding-right: 82px;
padding-right: 79px;
}
#tableContainer button {
height: 2rem;
@ -67,8 +67,8 @@
#create-user {
position: absolute;
display: inline-block;
/*left: 0px;
top: 31px;*/
/*left: 0px;*/
top: 55px;
width: 50px;
overflow: hidden;
}
@ -77,11 +77,20 @@
}
#tableScroll {
overflow-x: auto;
margin-left: 400px;
margin-left: calc(30% - 50px + 29px);
max-width: 70%;
width: auto;
display: inline-block;
}
#description[disabled] {
resize: none;
}
#description {
padding: 5px;
}
#commit {
width: 100%;
}
</style>
</head>
<body>
@ -96,17 +105,17 @@
<p data-localization="poll_p_encryption"></p>
</div>
<button id="publish" style="display: none;">publish poll</button>
<button id="admin" style="display: none;">admin</button>
<button id="publish" data-localization-title="poll_publish_button" data-localization="poll_publish_button" style="display: none;">publish poll</button>
<button id="admin" data-localization-title="poll_admin_button" data-localization="poll_admin_button" style="display: none;">admin</button>
<form class="realtime">
<div class="realtime">
<br />
<textarea rows=5 cols=50 disabled="disabled" id="description"></textarea><br />
<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>
<button data-localization-title="poll_create_user" id="create-user"><span class="fa fa-plus"></span></button>
<button data-localization-title="poll_create_option" id="create-option"><span class="fa fa-plus"></span></button>
<button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
</div>
</form>
</div>

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

@ -96,7 +96,7 @@ define([
$('[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", "New column here"); //TODO
$('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
};
var unlockElements = function () {
@ -114,7 +114,6 @@ define([
var updateTableButtons = function () {
if ($('.checkbox-cell').length && !isOwnColumnCommitted()) {
$('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width());
}
var $createOption = APP.$table.find('tfoot tr td:first-child');
@ -129,10 +128,25 @@ define([
}
};
var setTablePublished = function (bool) {
if (bool) {
if (APP.$publish) { APP.$publish.hide(); }
if (APP.$admin) { APP.$admin.show(); }
$('#create-option').hide();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
} else {
if (APP.$publish) { APP.$publish.show(); }
if (APP.$admin) { APP.$admin.hide(); }
$('#create-option').show();
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').show();
}
};
var updateDisplayedTable = function () {
styleUncommittedColumn();
unlockElements();
updateTableButtons();
setTablePublished(APP.proxy.published);
};
var unlockColumn = function (id, cb) {
@ -211,7 +225,7 @@ define([
break;
case 'checkbox':
console.log("checkbox[tr-id='%s'] %s", id, input.checked);
if ($(input).hasClass('enabled')) {
if (APP.editable.col.indexOf(x) >= 0 || x === APP.userid) {
Render.setValue(object, id, input.checked);
change();
} else {
@ -329,18 +343,7 @@ define([
if (APP.proxy.published !== bool) {
APP.proxy.published = 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();
}
setTablePublished(bool);
['textarea'].forEach(function (sel) {
$(sel).attr('disabled', bool);
});
@ -456,7 +459,6 @@ 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();
@ -479,6 +481,18 @@ define([
change();
});
// #publish button is removed in readonly
var $publish = APP.$publish = $('#publish')
.click(function () {
publish(true);
});
// #publish button is removed in readonly
var $admin = APP.$admin = $('#admin')
.click(function () {
publish(false);
});
// Title
if (APP.proxy.info.defaultTitle) {
updateDefaultTitle(APP.proxy.info.defaultTitle);
@ -488,10 +502,16 @@ define([
updateTitle(APP.proxy.info.title || defaultName);
// Description
var resize = function () {
var lineCount = $description.val().split('\n').length;
$description.css('height', lineCount + 'rem');
};
$description.on('change keyup', function () {
var val = $description.val();
proxy.info.description = val;
resize();
});
resize();
if (typeof(proxy.info.description) !== 'undefined') {
$description.val(proxy.info.description);
}
@ -530,18 +550,6 @@ define([
.on('change', ['table'], change)
.on('remove', [], change);
// #publish button is removed in readonly
var $publish = APP.$publish = $('#publish')
.click(function () {
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) {
@ -686,10 +694,10 @@ define([
})
.on('disconnect', disconnect);
Cryptpad.getPadAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
Cryptpad.getAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
if (e) { console.error(e); }
if (value === null) {
Cryptpad.setPadAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
Cryptpad.setAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
if (e) { console.error(e) }
});
} else if (value === "1") {

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

@ -205,7 +205,7 @@ by maintaining indexes in rowsOrder and colsOrder
'data-rt-id': col,
type: 'text',
value: getColumnValue(obj, col) || "",
placeholder: 'User', //TODO translate
placeholder: Cryptpad.Messages.poll_userPlaceholder,
disabled: 'disabled'
};
return result;
@ -223,7 +223,7 @@ by maintaining indexes in rowsOrder and colsOrder
'data-rt-id': row,
value: getRowValue(obj, row),
type: 'text',
placeholder: 'Option', //TODO translate
placeholder: Cryptpad.Messages.poll_optionPlaceholder,
disabled: 'disabled'
}].concat(cols.map(function (col) {
var id = [col, rows[i-1]].join('_');
@ -253,7 +253,7 @@ by maintaining indexes in rowsOrder and colsOrder
return ['SPAN', {
'data-rt-id': id,
class: 'edit',
}, ['']];
}, ['✐']];
};
var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
@ -263,8 +263,8 @@ by maintaining indexes in rowsOrder and colsOrder
var editElement = makeEditElement(cell['data-rt-id']);
var elements = [['INPUT', cell, []]];
if (!readOnly) {
elements.push(removeElement);
elements.push(editElement);
elements.unshift(removeElement);
elements.unshift(editElement);
}
return ['TD', {}, elements];
}

Write Preview
Loading…
Cancel
Save