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

Improve UI, fix issues with the table

Browse Source
This commit is contained in:
yflory 2016-12-06 18:55:10 +01:00
parent 6dff82ede2
commit 740b6e955e
8 changed files with 231 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
customize.dist/main.css
View File

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

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

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

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

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

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

@ -129,6 +129,12 @@ define(function () {
out.wizardTitle = "Utiliser l'assistant pour créer votre sondage"; out.wizardTitle = "Utiliser l'assistant pour créer votre sondage";
out.wizardConfirm = "Êtes-vous vraiment prêt à ajouter ces options au 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_closeWizardButton = "Fermer l'assistant";
out.poll_closeWizardButtonTitle = "Fermer l'assistant"; out.poll_closeWizardButtonTitle = "Fermer l'assistant";
out.poll_wizardComputeButton = "Générer les options"; out.poll_wizardComputeButton = "Générer les options";

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

@ -131,6 +131,12 @@ define(function () {
out.wizardTitle = "Use the wizard to create your poll"; out.wizardTitle = "Use the wizard to create your poll";
out.wizardConfirm = "Are you really ready to add these options to 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_closeWizardButton = "Close wizard";
out.poll_closeWizardButtonTitle = "Close wizard"; out.poll_closeWizardButtonTitle = "Close wizard";
out.poll_wizardComputeButton = "Compute Options"; out.poll_wizardComputeButton = "Compute Options";

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

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

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

@ -96,7 +96,7 @@ define([
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted"); $('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
$('td.uncommitted .remove, td.uncommitted .edit').css('visibility', 'hidden'); $('td.uncommitted .remove, td.uncommitted .edit').css('visibility', 'hidden');
$('td.uncommitted .cover').addClass("uncommitted"); $('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 () { var unlockElements = function () {
@ -114,7 +114,6 @@ define([
var updateTableButtons = function () { var updateTableButtons = function () {
if ($('.checkbox-cell').length && !isOwnColumnCommitted()) { if ($('.checkbox-cell').length && !isOwnColumnCommitted()) {
$('#commit').show(); $('#commit').show();
$('#commit').css('width', $($('.checkbox-cell')[0]).width());
} }
var $createOption = APP.$table.find('tfoot tr td:first-child'); 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 () { var updateDisplayedTable = function () {
styleUncommittedColumn(); styleUncommittedColumn();
unlockElements(); unlockElements();
updateTableButtons(); updateTableButtons();
setTablePublished(APP.proxy.published);
}; };
var unlockColumn = function (id, cb) { var unlockColumn = function (id, cb) {
@ -211,7 +225,7 @@ define([
break; break;
case 'checkbox': case 'checkbox':
console.log("checkbox[tr-id='%s'] %s", id, input.checked); 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); Render.setValue(object, id, input.checked);
change(); change();
} else { } else {
@ -329,18 +343,7 @@ define([
if (APP.proxy.published !== bool) { if (APP.proxy.published !== bool) {
APP.proxy.published = bool; APP.proxy.published = bool;
} }
if (bool) { setTablePublished(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();
}
['textarea'].forEach(function (sel) { ['textarea'].forEach(function (sel) {
$(sel).attr('disabled', bool); $(sel).attr('disabled', bool);
}); });
@ -456,7 +459,6 @@ define([
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly)); var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
var $createRow = APP.$createRow = $('#create-option').click(function () { var $createRow = APP.$createRow = $('#create-option').click(function () {
//
console.error("BUTTON CLICKED! LOL"); console.error("BUTTON CLICKED! LOL");
Render.createRow(proxy, function () { Render.createRow(proxy, function () {
change(); change();
@ -479,6 +481,18 @@ define([
change(); 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 // Title
if (APP.proxy.info.defaultTitle) { if (APP.proxy.info.defaultTitle) {
updateDefaultTitle(APP.proxy.info.defaultTitle); updateDefaultTitle(APP.proxy.info.defaultTitle);
@ -488,10 +502,16 @@ define([
updateTitle(APP.proxy.info.title || defaultName); updateTitle(APP.proxy.info.title || defaultName);
// Description // Description
var resize = function () {
var lineCount = $description.val().split('\n').length;
$description.css('height', lineCount + 'rem');
};
$description.on('change keyup', function () { $description.on('change keyup', function () {
var val = $description.val(); var val = $description.val();
proxy.info.description = val; proxy.info.description = val;
resize();
}); });
resize();
if (typeof(proxy.info.description) !== 'undefined') { if (typeof(proxy.info.description) !== 'undefined') {
$description.val(proxy.info.description); $description.val(proxy.info.description);
} }
@ -530,18 +550,6 @@ define([
.on('change', ['table'], change) .on('change', ['table'], change)
.on('remove', [], 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); addToUserData(APP.proxy.info.userData);
getLastName(function (err, lastName) { getLastName(function (err, lastName) {
@ -686,10 +694,10 @@ define([
}) })
.on('disconnect', disconnect); .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 (e) { console.error(e); }
if (value === null) { if (value === null) {
Cryptpad.setPadAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) { Cryptpad.setAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
if (e) { console.error(e) } if (e) { console.error(e) }
}); });
} else if (value === "1") { } else if (value === "1") {

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

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