loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Editable table improvements.

Browse Source 
* "Add new row" row is now added on attach using a template, reducing
boilerplate.
* "Add new row" text replaced with a tooltip'd icon button.
* Added a tooltip to the delete button.
* Rows that can't be deleted have their delete buttons disabled rather
than hidden.
This commit is contained in:
Oliver Hamlet
2014-12-30 00:09:32 +00:00
parent 1816102ae9
commit 718b9c9018
4 changed files with 120 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/html/editable-table.html
+69 -29
View File
@@ -3,6 +3,7 @@
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
<link rel="import" href="loot-dropdown-menu.html">
<link rel="import" href="loot-validated-input.html">
@@ -12,7 +13,11 @@
<td><loot-validated-input error="A filename is required." class="name" required></loot-validated-input></td>
<td><paper-input class="display"></paper-input></td>
<td><paper-input class="condition"></paper-input></td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="messageRow">
@@ -31,7 +36,11 @@
<!-- Language <option> elements go here. -->
</loot-dropdown-menu>
</td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="tagRow">
@@ -44,7 +53,11 @@
</td>
<td><loot-validated-input error="A name is required." class="name" required></loot-validated-input></td>
<td><paper-input class="condition"></paper-input></td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="dirtyInfoRow">
@@ -54,14 +67,22 @@
<td><loot-validated-input error="Values must be integers." class="udr" type="number" min="0" step="1" value="0"></loot-validated-input></td>
<td><loot-validated-input error="Values must be integers." class="nav" type="number" min="0" step="1" value="0"></loot-validated-input></td>
<td><loot-validated-input error="A utility name is required." class="util" required></loot-validated-input></td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="locationRow">
<tr>
<td><loot-validated-input error="A link is required." class="link" required></loot-validated-input></td>
<td><paper-input class="ver"></paper-input></td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="gameRow">
@@ -78,9 +99,24 @@
<td><paper-input class="branch"></paper-input></td>
<td><paper-input class="path"></paper-input></td>
<td><paper-input class="registry"></paper-input></td>
<td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
<td>
<core-tooltip label="Delete Row" noarrow position="left">
<paper-icon-button class="delete" icon="delete"></paper-icon-button>
</core-tooltip>
</td>
</tr>
</template>
<template id="newRow">
<tr>
<td>
<core-tooltip label="Add New Row" noarrow position="right">
<paper-icon-button icon="add"></paper-icon-button>
</core-tooltip>
</td>
<td></td>
</tr>
</template>
<style>
/* Table styling. */
@@ -90,23 +126,17 @@ html /deep/ table[is=editable-table] {
html /deep/ table[is=editable-table] td, table[is=editable-table] th {
padding: 0;
}
html /deep/ table[is=editable-table] td:last-child {
cursor: pointer;
html /deep/ table[is=editable-table] paper-icon-button {
color: rgba(0, 0, 0, 0.54);
}
html /deep/ table[is=editable-table] td:last-child:hover {
html /deep/ table[is=editable-table] paper-icon-button[disabled] {
color: rgba(0, 0, 0, 0.26);
}
html /deep/ table[is=editable-table] paper-icon-button[icon=delete]:hover {
color: red;
}
html /deep/ table[is=editable-table] tbody tr:last-child {
cursor: pointer;
color: rgba(0, 0, 0, 0.30);
}
html /deep/ table[is=editable-table] tbody tr:last-child:hover {
color: rgba(0, 0, 0, 0.87);
}
html /deep/ table[is=editable-table] td paper-icon-button.hidden {
display: block;
visibility: hidden;
html /deep/ table[is=editable-table] paper-icon-button[icon=add]:hover {
color: green;
}
</style>
<script>
@@ -144,7 +174,7 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
for (var i = 0; i < rows.length; ++i) {
var trash = rows[i].getElementsByClassName('delete');
if (trash.length > 0 && (!writableOnly || !trash[0].classList.contains('hidden'))) {
if (trash.length > 0 && (!writableOnly || !trash[0].disabled)) {
var rowData = {};
var inputs = rows[i].querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
@@ -169,10 +199,10 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
var trash = row.getElementsByClassName('delete')[0];
if (classMask) {
if (classMask.indexOf('delete') != -1) {
trash.classList.toggle('hidden', readOnly);
trash.disabled = readOnly;
}
} else {
trash.classList.toggle('hidden', readOnly);
trash.disabled = readOnly;
}
var inputs = row.querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
@@ -203,7 +233,7 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
removeRow: {
value: function(evt) {
var tr = evt.target.parentElement.parentElement;
var tr = evt.target.parentElement.parentElement.parentElement;
var tbody = tr.parentElement;
var table = tbody.parentElement;
@@ -218,7 +248,7 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
addEmptyRow: {
value: function(evt) {
/* Create new row. */
var table = evt.currentTarget.parentElement.parentElement;
var table = evt.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement;
var rowTemplateId = table.getAttribute('data-template');
var content = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (content) {
@@ -228,11 +258,10 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
}
var row = document.importNode(content, true);
table.tBodies[0].insertBefore(row, evt.currentTarget);
row = evt.currentTarget.previousElementSibling;
table.tBodies[0].insertBefore(row, table.tBodies[0].lastElementChild);
/* Add deletion listener. */
row.getElementsByClassName('delete')[0].addEventListener('click', table.removeRow, false);
table.tBodies[0].lastElementChild.previousElementSibling.getElementsByClassName('delete')[0].addEventListener('click', table.removeRow, false);
}
},
@@ -268,8 +297,19 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
attachedCallback: {
value: function() {
/* Add "add new row" row. */
var content = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (content) {
content = content.import.getElementById('newRow').content;
} else {
content = document.getElementById('newRow').content;
}
var row = document.importNode(content, true);
this.tBodies[0].appendChild(row);
row = this.tBodies[0].lastElementChild;
/* Add new row listener. */
this.querySelector('tbody tr:last-child').addEventListener('click', this.addEmptyRow, false);
row.querySelector('paper-icon-button').addEventListener('click', this.addEmptyRow, false);
/* Add drag 'n' drop listeners.
Drag 'n' drop should only be enabled for file-row tables.
@@ -290,7 +330,7 @@ html /deep/ table[is=editable-table] td paper-icon-button.hidden {
}
/* Remove new row listener. */
this.querySelector('tbody tr:last-child').removeEventListener('click', this.addEmptyRow, false);
this.querySelector('tbody tr:last-child paper-icon-button').removeEventListener('click', this.addEmptyRow, false);
/* Remove drag 'n' drop listeners. */
this.removeEventListener('drop', this.handleDrop, false);
resources/report/html/loot-plugin-editor.html
+4 -11
View File
@@ -150,7 +150,6 @@ loot-editor-close
</thead>
<tbody>
<!-- File rows go here. -->
<tr><td colspan="3">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="req" data-template="fileRow">
@@ -159,7 +158,6 @@ loot-editor-close
</thead>
<tbody>
<!-- File rows go here. -->
<tr><td colspan="3">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="inc" data-template="fileRow">
@@ -168,7 +166,6 @@ loot-editor-close
</thead>
<tbody>
<!-- File rows go here. -->
<tr><td colspan="3">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="message" data-template="messageRow">
@@ -177,7 +174,6 @@ loot-editor-close
</thead>
<tbody>
<!-- Message rows go here. -->
<tr><td colspan="4">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="tags" data-template="tagRow">
@@ -186,7 +182,6 @@ loot-editor-close
</thead>
<tbody>
<!-- Bash Tag rows go here. -->
<tr><td colspan="3">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="dirty" data-template="dirtyInfoRow">
@@ -195,7 +190,6 @@ loot-editor-close
</thead>
<tbody>
<!-- Dirty info rows go here. -->
<tr><td colspan="5">Add new row...</td><td></td></tr>
</tbody>
</table>
<table is="editable-table" id="locations" data-template="locationRow">
@@ -204,7 +198,6 @@ loot-editor-close
</thead>
<tbody>
<!-- Location rows go here. -->
<tr><td colspan="2">Add new row...</td><td></td></tr>
</tbody>
</table>
</core-selector>
@@ -515,10 +508,10 @@ loot-editor-close
updatePolymerElements: function() {
/* Set tooltip positions. */
this.shadowRoot.getElementById('activeTick').setPosition();
this.shadowRoot.getElementById('emptyPlugin').setPosition();
this.shadowRoot.getElementById('loadsBSA').setPosition();
this.shadowRoot.getElementById('globalPriority').parentElement.setPosition();
var tooltips = this.shadowRoot.getElementsByTagName('core-tooltip');
for (var i = 0; i < tooltips.length; ++i) {
tooltips[i].setPosition();
}
/* Also make sure right arrow is visible if the tabs are scrollable. */
this.shadowRoot.getElementById('tableTabs').resizeHandler();
resources/report/js/l10n.js
+47 -8
View File
@@ -96,39 +96,32 @@
pluginEditor.getElementById('loadAfter').querySelector('th:first-child').textContent = l10n.translate("Filename").fetch();
pluginEditor.getElementById('loadAfter').querySelector('th:nth-child(2)').textContent = l10n.translate("Display Name").fetch();
pluginEditor.getElementById('loadAfter').querySelector('th:nth-child(3)').textContent = l10n.translate("Condition").fetch();
pluginEditor.getElementById('loadAfter').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('req').querySelector('th:first-child').textContent = l10n.translate("Filename").fetch();
pluginEditor.getElementById('req').querySelector('th:nth-child(2)').textContent = l10n.translate("Display Name").fetch();
pluginEditor.getElementById('req').querySelector('th:nth-child(3)').textContent = l10n.translate("Condition").fetch();
pluginEditor.getElementById('req').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('inc').querySelector('th:first-child').textContent = l10n.translate("Filename").fetch();
pluginEditor.getElementById('inc').querySelector('th:nth-child(2)').textContent = l10n.translate("Display Name").fetch();
pluginEditor.getElementById('inc').querySelector('th:nth-child(3)').textContent = l10n.translate("Condition").fetch();
pluginEditor.getElementById('inc').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('message').querySelector('th:first-child').textContent = l10n.translate("Type").fetch();
pluginEditor.getElementById('message').querySelector('th:nth-child(2)').textContent = l10n.translate("Content").fetch();
pluginEditor.getElementById('message').querySelector('th:nth-child(3)').textContent = l10n.translate("Condition").fetch();
pluginEditor.getElementById('message').querySelector('th:nth-child(4)').textContent = l10n.translate("Language").fetch();
pluginEditor.getElementById('message').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('tags').querySelector('th:first-child').textContent = l10n.translate("Add/Remove").fetch();
pluginEditor.getElementById('tags').querySelector('th:nth-child(2)').textContent = l10n.translate("Bash Tag").fetch();
pluginEditor.getElementById('tags').querySelector('th:nth-child(3)').textContent = l10n.translate("Condition").fetch();
pluginEditor.getElementById('tags').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('dirty').querySelector('th:first-child').textContent = l10n.translate("CRC").fetch();
pluginEditor.getElementById('dirty').querySelector('th:nth-child(2)').textContent = l10n.translate("ITM Count").fetch();
pluginEditor.getElementById('dirty').querySelector('th:nth-child(3)').textContent = l10n.translate("Deleted References").fetch();
pluginEditor.getElementById('dirty').querySelector('th:nth-child(4)').textContent = l10n.translate("Deleted Navmeshes").fetch();
pluginEditor.getElementById('dirty').querySelector('th:nth-child(5)').textContent = l10n.translate("Cleaning Utility").fetch();
pluginEditor.getElementById('dirty').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('locations').querySelector('th:first-child').textContent = l10n.translate("URL").fetch();
pluginEditor.getElementById('locations').querySelector('th:nth-child(2)').textContent = l10n.translate("Version").fetch();
pluginEditor.getElementById('locations').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
pluginEditor.getElementById('accept').textContent = l10n.translate("Apply").fetch();
pluginEditor.getElementById('cancel').textContent = l10n.translate("Cancel").fetch();
@@ -143,6 +136,15 @@
pluginItem.getElementById('loadsBSA').label = l10n.translate("Loads BSA").fetch();
pluginItem.getElementById('hasUserEdits').label = l10n.translate("Has User Metadata").fetch();
/* File row template */
var fileRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (fileRow) {
fileRow = fileRow.import.querySelector('#fileRow').content;
} else {
fileRow = document.querySelector('#fileRow').content;
}
fileRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* Message row template */
var messageRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (messageRow) {
@@ -153,6 +155,7 @@
messageRow.querySelector('.type').children[0].textContent = l10n.translate("Note").fetch();
messageRow.querySelector('.type').children[1].textContent = l10n.translate("Warning").fetch();
messageRow.querySelector('.type').children[2].textContent = l10n.translate("Error").fetch();
messageRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* Tag row template */
var tagRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
@@ -163,6 +166,43 @@
}
tagRow.querySelector('.type').children[0].textContent = l10n.translate("Add").fetch();
tagRow.querySelector('.type').children[1].textContent = l10n.translate("Remove").fetch();
tagRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* Dirty Info row template */
var dirtyInfoRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (dirtyInfoRow) {
dirtyInfoRow = dirtyInfoRow.import.querySelector('#dirtyInfoRow').content;
} else {
dirtyInfoRow = document.querySelector('#dirtyInfoRow').content;
}
dirtyInfoRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* Location row template */
var locationRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (locationRow) {
locationRow = locationRow.import.querySelector('#locationRow').content;
} else {
locationRow = document.querySelector('#locationRow').content;
}
locationRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* Game row template */
var gameRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (gameRow) {
gameRow = gameRow.import.querySelector('#gameRow').content;
} else {
gameRow = document.querySelector('#gameRow').content;
}
gameRow.querySelector('core-tooltip').label = l10n.translate("Delete Row").fetch();
/* New row template */
var newRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
if (newRow) {
newRow = newRow.import.querySelector('#newRow').content;
} else {
newRow = document.querySelector('#newRow').content;
}
newRow.querySelector('core-tooltip').label = l10n.translate("Add New Row").fetch();
/* Toolbar menu */
document.getElementById('redatePluginsButton').lastChild.textContent = l10n.translate("Redate Plugins").fetch();
@@ -227,7 +267,6 @@
gameTable.querySelector('th:nth-child(6)').textContent = l10n.translate("Masterlist Repository Branch").fetch();
gameTable.querySelector('th:nth-child(7)').textContent = l10n.translate("Install Path").fetch();
gameTable.querySelector('th:nth-child(8)').textContent = l10n.translate("Install Path Registry Key").fetch();
gameTable.querySelector('tr:last-child td:first-child').textContent = l10n.translate("Add new row...").fetch();
document.getElementById('settingsDialog').getElementsByClassName('accept')[0].textContent = l10n.translate("Apply").fetch();
document.getElementById('settingsDialog').getElementsByClassName('cancel')[0].textContent = l10n.translate("Cancel").fetch();
resources/report/report.html
-4
View File
@@ -283,10 +283,6 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
</thead>
<tbody>
<!-- Game rows go here. -->
<tr>
<td colspan="8">Add new row...</td>
<td></td>
</tr>
</tbody>
</table>
<paper-button class="accept" affirmative autofocus>Apply</paper-button>