From 725702bbe1b0271b313608a91e8122a1cba832ba Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 8 Nov 2014 12:24:08 +0000
Subject: [PATCH] Started to polymerise settings dialog.

However, the editable table still needs polymerisation, and there are
issues with getting and setting values, thanks to API differences from
standard elements (which is the only downside to Polymer I've come
across).
---
 resources/report/css/style.css | 18 ++++++-------
 resources/report/js/script.js  | 33 +++++++++++------------
 resources/report/report.html   | 49 ++++++++++++++++++++--------------
 3 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 60bd7fd3..a86dc5e6 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -48,7 +48,7 @@ noscript {
 #gameMenu {
     background: inherit;
 }
-#gameMenu::shadow #control[selected] {
+#gameMenu::shadow #control {
     color: white;
     border-bottom-color: #f1f1f1;
 }
@@ -133,9 +133,6 @@ dialog > h1 {
 dialog[data-type=warn] > span:first-child  {
     color: gold;
 }
-dialog > .buttons {
-    text-align: center;
-}
 dialog button {
     margin: 0.5em;
 }
@@ -230,10 +227,6 @@ plugin-card > ul {
     margin-left: 1.75em;
 }
 
-#settings {
-    width: auto;
-    max-width: 90%;
-}
 #settings > select {
     float: right;
     clear: both;
@@ -246,8 +239,13 @@ plugin-card > ul {
     padding: 1px;
     margin: 2px;
 }
-
-
+paper-checkbox {
+    padding: 0.5em 1em;
+}
+paper-dropdown-menu {
+    padding-left: 2em;
+    top: -0.25em;
+}
 
 input[readonly] {
     border: none;
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 9e64fb42..58f8de9f 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -187,22 +187,18 @@ var loot = {
 
         /* Now fill with new values. */
         this.settings.games.forEach(function(game){
-            var option = document.createElement('option');
-            option.value = game.folder;
-            option.textContent = game.name;
-            gameSelect.appendChild(option);
-
-            var li = document.createElement('paper-item');
-            li.setAttribute('data-folder', game.folder);
-            li.setAttribute('label', game.name);
-            gameMenu.appendChild(li);
+            var menuItem = document.createElement('paper-item');
+            menuItem.setAttribute('data-folder', game.folder);
+            menuItem.setAttribute('label', game.name);
+            gameMenu.appendChild(menuItem);
+            gameSelect.appendChild(menuItem.cloneNode());
 
             var row = gameTable.addRow(game);
             gameTable.setReadOnly(row, ['name','folder','type']);
         });
 
-        gameSelect.value = this.settings.game;
-        document.getElementById('languageSelect').value = this.settings.language;
+        gameSelect.selected = this.settings.game;
+        document.getElementById('languageSelect').selected = this.settings.language;
         document.getElementById('enableDebugLogging').checked = this.settings.enableDebugLogging;
         document.getElementById('updateMasterlist').checked = this.settings.updateMasterlist;
         document.getElementById('autoRefresh').checked = this.settings.autoRefresh;
@@ -1051,9 +1047,9 @@ function closeSettingsDialog(evt) {
         /* Update the JS variable values. */
         var settings = {
             enableDebugLogging: document.getElementById('enableDebugLogging').checked,
-            game: document.getElementById('defaultGameSelect').value,
+            game: document.getElementById('defaultGameSelect').selected,
             games: document.getElementById('gameTable').getRowsData(false),
-            language: document.getElementById('languageSelect').value,
+            language: document.getElementById('languageSelect').selected,
             lastGame: loot.settings.lastGame,
             updateMasterlist: document.getElementById('updateMasterlist').checked,
             filters: loot.settings.filters,
@@ -1090,11 +1086,10 @@ function closeSettingsDialog(evt) {
         /* Re-apply the existing settings to the settings dialog elements. */
         loot.updateSettingsUI();
     }
-    dialog.close();
 }
 
 function showSettingsDialog(evt) {
-    document.getElementById('settings').showModal();
+    document.getElementById('settings').opened = true;
 }
 
 function getDialogParent(element) {
@@ -1275,11 +1270,15 @@ function initVars() {
             var settingsLangSelect = document.getElementById('languageSelect');
             var messageLangSelect = editableTableImportDoc.querySelector('#messageRow').content.querySelector('.language');
             for (var i = 0; i < loot.languages.length; ++i) {
+                var settingsItem = document.createElement('paper-item');
+                settingsItem.setAttribute('value', loot.languages[i].locale);
+                settingsItem.setAttribute('label', loot.languages[i].name);
+                settingsLangSelect.appendChild(settingsItem);
+
                 var option = document.createElement('option');
                 option.value = loot.languages[i].locale;
                 option.textContent = loot.languages[i].name;
-                settingsLangSelect.appendChild(option);
-                messageLangSelect.appendChild(option.cloneNode(true));
+                messageLangSelect.appendChild(option);
             }
         } catch (e) {
             console.log(e);
diff --git a/resources/report/report.html b/resources/report/report.html
index b5a31991..a0fb5a65 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -202,20 +202,32 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         <paper-button affirmative autofocus>OK</paper-button>
     </paper-dialog>
 
-    <dialog id="settings">
-        <h1>Settings</h1>
-        <label for="defaultGameSelect">Default Game</label>
-        <select id="defaultGameSelect">
-            <option value="auto">Autodetect</option>
-            <!-- Game <option> elements go here. -->
-        </select><br>
-        <label for="languageSelect">Language</label>
-        <select id="languageSelect">
-            <!-- Language <option> elements go here. -->
-        </select><br>
-        <p><input type="checkbox" id="enableDebugLogging"><label for="enableDebugLogging" title="The output is logged to the LOOTDebugLog.txt file.">Enable debug logging</label></p>
-        <p><input type="checkbox" id="updateMasterlist"><label for="updateMasterlist">Update masterlist before sorting</label></p>
-        <p><input type="checkbox" id="autoRefresh"><label for="autoRefresh">Automatically refresh content on window refocus</label></p>
+    <paper-dialog id="settings" heading="Settings" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
+        <div center horizontal layout>
+            <div>Default Game</div>
+            <paper-dropdown-menu id="defaultGameSelect" valueattr="data-folder">
+                <paper-item data-folder="auto" label="Autodetect"></paper-item>
+                <!-- Game <option> elements go here. -->
+            </paper-dropdown-menu>
+        </div>
+        <div center horizontal layout>
+            <div>Language</div>
+            <paper-dropdown-menu id="languageSelect" valueattr="value">
+                <!-- Language <option> elements go here. -->
+            </paper-dropdown-menu>
+        </div>
+        <paper-tooltip label="The output is logged to the LOOTDebugLog.txt file." center horizontal layout>
+            <paper-checkbox id="enableDebugLogging"></paper-checkbox>
+            <div>Enable debug logging</div>
+        </paper-tooltip>
+        <div center horizontal layout>
+            <paper-checkbox id="updateMasterlist"></paper-checkbox>
+            <div>Update masterlist before sorting</div>
+        </div>
+        <div center horizontal layout>
+            <paper-checkbox id="autoRefresh"></paper-checkbox>
+            <div>Automatically refresh content on window refocus</div>
+        </div>
         <table is="editable-table" id="gameTable" data-template="gameRow">
             <thead>
                 <tr>
@@ -239,12 +251,9 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             </tbody>
         </table>
         <p id="languageRestartTxt">Language changes will be applied after LOOT is restarted.</p>
-        <hr>
-        <div class="buttons">
-            <button class="accept">Apply</button>
-            <button class="cancel">Cancel</button>
-        </div>
-    </dialog>
+        <paper-button class="accept" affirmative autofocus>Apply</paper-button>
+        <paper-button class="cancel" affirmative>Cancel</paper-button>
+    </paper-dialog>
 
     <div id="hoverText" class="hidden"></div>
     <paper-dialog id="progressDialog" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>