From 95f7e4d90f6990be4f82f9fb30e23af6f2bfb1ab Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Sun, 20 Jul 2014 12:39:50 +0100
Subject: [PATCH] Icons for header menus.

Current game is now highlighted in the game menu. Also moved some plugin
card CSS into its template.
---
 resources/report/css/style.css | 16 +++------
 resources/report/js/script.js  | 20 ++++++++++-
 resources/report/report.html   | 62 +++++++++++++++++++++++++++++-----
 3 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 0cb61fdf..5a2efed6 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -61,9 +61,6 @@ header > ol:last-child {
     position: fixed;
     right: 0;
 }
-header li span {
-    opacity: 0.5;
-}
 header li:hover {
     background: #ccc;
 }
@@ -96,6 +93,10 @@ header > ol > li > ol > li {
     left: 235px;
 }
 
+header li > span, #filtersToggle > span {
+    padding-right: 0.5em;
+}
+
 #container {
     position: fixed;
     top: 3em;
@@ -376,18 +377,9 @@ header.editMode #headerOverlay {
     top: 0;
     left: 0;
 }
-.editor .buttons {
-    text-align: right;
-}
 #conflictsPlugin {
     margin-left: 2.5em;
 }
-.editorEnableEdits {
-    margin-bottom: 1em;
-}
-label[for=editorPriorityValue] {
-    margin-left: 0.5em;
-}
 [draggable] {
     -webkit-user-select: none;
 }
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 8979bf0e..66e4f401 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -566,7 +566,15 @@ function initGlobalVars() {
                             var li = document.createElement('li');
                             li.setAttribute('data-action', 'change-game');
                             li.setAttribute('data-target', loot.settings.games[i].folder);
-                            li.textContent = loot.settings.games[i].name;
+
+                            var icon = document.createElement('span');
+                            icon.className = 'fa fa-fw';
+                            li.appendChild(icon);
+
+                            var text = document.createElement('span');
+                            text.textContent = loot.settings.games[i].name;
+                            li.appendChild(text);
+
                             gameMenu.appendChild(li);
 
                             gameTable.addRow(loot.settings.games[i]);
@@ -608,6 +616,16 @@ function updateInterfaceWithGameInfo(response) {
     var activePluginNo = 0;
     var dirtyPluginNo = 0;
 
+    /* Highlight game in menu. Could use fa-chevron-right instead. */
+    var gameMenuItems = document.getElementById('gameMenu').children[0].children;
+    for (var i = 0; i < gameMenuItems.length; ++i) {
+        if (gameMenuItems[i].getAttribute('data-target') != loot.game.folder) {
+            gameMenuItems[i].querySelector('.fa').classList.toggle('fa-angle-double-right', false);
+        } else {
+            gameMenuItems[i].querySelector('.fa').classList.toggle('fa-angle-double-right', true);
+        }
+    }
+
     /* Fill report with data. */
     document.getElementById('masterlistRevision').textContent = loot.game.masterlist.revision;
     document.getElementById('masterlistDate').textContent = loot.game.masterlist.date;
diff --git a/resources/report/report.html b/resources/report/report.html
index 10334c97..e1c91504 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -131,6 +131,50 @@
             border: 1px black solid;
             width: 100%;
         }
+
+        #enableEdits {
+            margin-bottom: 1em;
+        }
+        label[for=priorityValue] {
+            margin-left: 0.5em;
+        }
+        .buttons {
+            text-align: right;
+        }
+        input[readonly] {
+            border: none;
+            -webkit-user-select: none;
+        }
+        td input {
+            width: 100%;
+            text-overflow: ellipsis;
+        }
+        .editable td:last-child {
+            cursor: pointer;
+        }
+        .editable td:last-child:hover {
+            color: red;
+        }
+        .editable {
+            margin: 3em 1em;
+            border-collapse: collapse;
+        }
+        .editable td, .editable th {
+            vertical-align: top;
+            text-align: left;
+            padding: 0.5em;
+        }
+        .editable th {
+            border-bottom: 1px black solid;
+        }
+        .editable tr:last-child {
+            cursor: pointer;
+        }
+        input[type='checkbox'] {
+            position:relative;
+            top:0.15em;
+            margin-left:0.5em;
+        }
         </style>
 
         <section id="front">
@@ -352,9 +396,9 @@
         <ol>
             <li id="fileMenu">File
             <ol class="hidden">
-                <li id="redatePluginsButton">Redate Plugins
-                <li id="openLogButton">Open Debug Log Location
-                <li id="wipeUserlistButton">Clear All User Metadata
+                <li id="redatePluginsButton"><span class="fa fa-fw fa-calendar-o"></span>Redate Plugins <!-- or fa-clock-o fa-history -->
+                <li id="openLogButton"><span class="fa fa-fw fa-folder-open"></span>Open Debug Log Location
+                <li id="wipeUserlistButton"><span class="fa fa-fw fa-trash-o"></span>Clear All User Metadata
             </ol>
             <li id="gameMenu">Game
             <ol class="hidden">
@@ -363,15 +407,15 @@
             <li id="settingsButton">Settings
             <li id="helpMenu">Help
             <ol class="hidden">
-                <li id="helpButton">Help
-                <li id="aboutButton">About
+                <li id="helpButton"><span class="fa fa-fw fa-question-circle"></span>Help <!-- fa-life-ring -->
+                <li id="aboutButton"><span class="fa fa-fw fa-info-circle"></span>About
             </ol>
         </ol>
         <ol>
-            <li id="updateMasterlistButton">Update Masterlist
-            <li id="sortButton">Sort
-            <li id="applySortButton" class="hidden">Apply
-            <li id="cancelSortButton" class="hidden">Cancel
+            <li id="updateMasterlistButton"><span class="fa fa-fw fa-refresh"></span>Update Masterlist
+            <li id="sortButton"><span class="fa fa-fw fa-magic"></span>Sort
+            <li id="applySortButton" class="hidden"><span class="fa fa-fw fa-check"></span>Apply
+            <li id="cancelSortButton" class="hidden"><span class="fa fa-fw fa-times"></span>Cancel
         </ol>
     </header>
     <div id="container">