From 718b9c901803acf64361b759cc6a0901201cadc9 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 30 Dec 2014 00:09:32 +0000
Subject: [PATCH] Editable table improvements.

* "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.
---
 resources/report/html/editable-table.html     | 98 +++++++++++++------
 resources/report/html/loot-plugin-editor.html | 15 +--
 resources/report/js/l10n.js                   | 55 +++++++++--
 resources/report/report.html                  |  4 -
 4 files changed, 120 insertions(+), 52 deletions(-)

diff --git a/resources/report/html/editable-table.html b/resources/report/html/editable-table.html
index d88a81fb..66e6c9ef 100644
--- a/resources/report/html/editable-table.html
+++ b/resources/report/html/editable-table.html
@@ -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);
diff --git a/resources/report/html/loot-plugin-editor.html b/resources/report/html/loot-plugin-editor.html
index 7ee5a80c..4dfa1848 100644
--- a/resources/report/html/loot-plugin-editor.html
+++ b/resources/report/html/loot-plugin-editor.html
@@ -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();
diff --git a/resources/report/js/l10n.js b/resources/report/js/l10n.js
index 50224ec8..90868fbd 100644
--- a/resources/report/js/l10n.js
+++ b/resources/report/js/l10n.js
@@ -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();
diff --git a/resources/report/report.html b/resources/report/report.html
index f9cf85aa..c4818c72 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -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>