From 256e336641fbebf15a8b530672123cffa90193f9 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Sat, 17 May 2014 15:23:53 +0100
Subject: [PATCH] Started to implement some dialog display.

---
 resources/report/report.html | 53 +++++++++++++++++-------------------
 resources/report/script.js   | 24 ++++++++++++----
 resources/report/style.css   | 41 ++++++++++++++++++++++++++--
 3 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/resources/report/report.html b/resources/report/report.html
index c0957df5..972e34e1 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -55,9 +55,20 @@
         <img src="../icon.ico">
         <ol>
             <li data-action="open-menu" data-target="fileMenu">File
+            <ol id="fileMenu" class="hidden">
+                <li>Redate Plugins
+                <li>Open Debug Log Location
+            </ol>
             <li data-action="open-menu" data-target="gameMenu">Game
+            <ol id="gameMenu" class="hidden">
+                <!-- Generated game <li> elements go here. -->
+            </ol>
             <li data-action="open-dialog" data-target="settings">Settings
             <li data-action="open-menu" data-target="helpMenu">Help
+            <ol id="helpMenu" class="hidden">
+                <li>Help
+                <li data-action="open-dialog" data-target="about">About
+            </ol>
         </ol>
         <ol>
             <li>Update Masterlist
@@ -66,19 +77,6 @@
             <li class="hidden">Cancel
         </ol>
     </header>
-    <ol id="fileMenu" class="hidden">
-        <li>Sort Plugins
-        <li>Redate Plugins
-        <li>Quit
-    </ol>
-    <ol id="gameMenu" class="hidden">
-        <!-- Generated game <li> elements go here. -->
-    </ol>
-    <ol id="helpMenu" class="hidden">
-        <li>Help
-        <li>Open Debug Log Location
-        <li>About
-    </ol>
     <nav>
         <ol>
             <li><a href="#summary">Summary</a>
@@ -131,29 +129,28 @@
         </div>
     </div>
 
-    <div id="about" class="hidden">
+    <div id="about" class="hidden" data-overlay="1">
         <h1>LOOT <span id="LOOTVersion"></span></h1>
-        <p>Copyright &copy; 2012&mdash;2014 LOOT Team
+        <p>Copyright &copy; 2012&ndash;2014 LOOT Team
         <p>Load order optimisation for Oblivion, Skyrim, Fallout 3 and Fallout: New Vegas.
         <p><a href="http://loot.github.io">http://loot.github.io</a>
         <blockquote>
-        LOOT is free software: you can redistribute
-        it and/or modify it under the terms of the GNU General Public License
-        as published by the Free Software Foundation, either version 3 of
-        the License, or any later version.
+LOOT is free software: you can redistribute it and/or modify it
+under the terms of the GNU General Public License as published
+by the Free Software Foundation, either version 3 of the
+License, or any later version.
 
-        LOOT is distributed in the hope that it will
-        be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
-        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-        GNU General Public License for more details.
+LOOT is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+See the GNU General Public License for more details.
 
-        You should have received a copy of the GNU General Public License
-        along with LOOT. If not, see
-        <http://www.gnu.org/licenses/>.
+You should have received a copy of the GNU General Public License
+along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </blockquote>
     </div>
 
-    <div id="settings" class="hidden">
+    <div id="settings" class="hidden" data-overlay="1">
         <h1>Settings</h1>
         <form>
             <label for="defaultGameSelect">Default Game</label>
@@ -179,7 +176,7 @@
         </form>
     </div>
 
-    <div id="overlay"></div>
+    <div id="overlay" class="hidden"></div>
 
     <script src="script.js"></script>
 </body>
\ No newline at end of file
diff --git a/resources/report/script.js b/resources/report/script.js
index c0507562..1cde8576 100644
--- a/resources/report/script.js
+++ b/resources/report/script.js
@@ -346,18 +346,32 @@ function processURLParams() {
 }
 processURLParams();
 
-var menus = document.getElementsByTagName('header')[0].children[1].children;
+var menus = document.getElementsByTagName('header')[0].getElementsByTagName('li');
+var overlay = document.getElementById('overlay');
 
 for (var i = 0; i < menus.length; ++i) {
-    menus[i].onclick = function(evt) {
-        var action = evt.target.getAttribute('data-action');
-        var target = document.getElementById(evt.target.getAttribute('data-target'));
+    menus[i].addEventListener('click', function(evt) {
+        var action = evt.currentTarget.getAttribute('data-action');
+        var target = document.getElementById(evt.currentTarget.getAttribute('data-target'));
         if (action == 'open-menu' || action == 'open-dialog') {
             if (isVisible(target)) {
                 hideElement(target);
+                if (target.getAttribute('data-overlay')) {
+                    overlay.setAttribute('data-dialog', '');
+                    hideElement(overlay);
+                }
             } else {
                 showElement(target);
+                if (target.getAttribute('data-overlay') == '1') {
+                    overlay.setAttribute('data-dialog', target.id);
+                    showElement(overlay);
+                }
             }
         }
-    }
+    }, false);
+
+    overlay.addEventListener('click', function(evt) {
+        hideElement(overlay);
+        hideElement(document.getElementById(overlay.getAttribute('data-dialog')));
+    }, false);
 }
\ No newline at end of file
diff --git a/resources/report/style.css b/resources/report/style.css
index 6f03347b..07fe75d1 100644
--- a/resources/report/style.css
+++ b/resources/report/style.css
@@ -67,16 +67,25 @@ header img {
     padding: 0 0.5em;
 }
 
-#fileMenu, #gameMenu, #helpMenu {
+header li.selected {
+    border-top: rgba(0,0,0,0.5) 1px solid;
+    border-left: rgba(0,0,0,0.5) 1px solid;
+    border-right: rgba(0,0,0,0.5) 1px solid;
+}
+
+header > ol > li > ol {
     background: #e3e3e3;
     position: fixed;
     z-index: 2;
     box-shadow: 0 3px 3px 1px rgba(0,0,0,0.5);
     list-style-type: none;
+    padding: 0;
     margin:0;
-    padding: 0.5em;
     top: 3em;
 }
+header > ol > li > ol > li {
+    padding: 0.5em 1em;
+}
 #fileMenu {
     left: 3.75em;
 }
@@ -118,7 +127,7 @@ nav ol li {
     left: 20em;
 }
 
-section, #settings, #about {
+section, #settings, #about, #settings {
     background:white;
     overflow:hidden;
     margin:1em;
@@ -126,6 +135,32 @@ section, #settings, #about {
     padding:1em;
 }
 
+#settings, #about {
+    margin: 1em auto;
+    position: fixed;
+    z-index:4;
+    top: 10%;
+    left: 25%;
+    width: 50%;
+}
+
+#about h1, #about p {
+    text-align: center;
+}
+
+#about blockquote {
+    white-space: pre;
+}
+
+#overlay {
+    z-index: 3;
+    background: rgba(0,0,0,0.5);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
 
 .button {
     display:inline-table;