Drop-down menus in top bar implemented.

Menu items don't do anything yet.

resources/report/report.html

@@ -32,38 +32,53 @@
     <template id="errorMessage">
         <li class="error">
     </template>
-    <!-- Need to add template for editing panel. -->
-    <!-- Need to add template for message dialog overlays. -->
+    <template>
+        <div id="messageBox">
+            <h1></h1>
+            <p>
+        </div>
+    </template>
+    <template>
+        <div id="editor">
+            <h1></h1>
+            <label for="editorEnableEdits">Enable Edits</label>
+            <input type="checkbox" id="editorEnableEdits">
+            <label for="editorPriorityValue">Priority</label>
+            <input type="number" max="999999" min="-999999" step="1">
+            <label for="editorGlobalPriority">Compare priority against all other plugins</label>
+            <input type="checkbox" id="editorGlobalPriority">
+            <!-- Need to finish template for editing panel. -->
+        </div>
+    </template>
     <noscript>The LOOT Report requires Javascript to be enabled in order to function.</noscript>
     <header>
         <img src="../icon.ico">
         <ol>
-            <li>File
-                <ol class="hidden">
-                    <li>Sort Plugins
-                    <li>Redate Plugins
-                    <li>Quit
-                </ol>
-            <li>Game
-                <ol id="gameList" class="hidden">
-                    <!-- Generated game <li> elements go here. -->
-                </ol>
-            <li>Settings
-            <li>Help
-                <ol class="hidden">
-                    <li>Help
-                    <li>Open Debug Log Location
-                    <li>About
-                </ol>
+            <li data-action="open-menu" data-target="fileMenu">File
+            <li data-action="open-menu" data-target="gameMenu">Game
+            <li data-action="open-dialog" data-target="settings">Settings
+            <li data-action="open-menu" data-target="helpMenu">Help
         </ol>
         <ol>
             <li>Update Masterlist
             <li>Sort
             <li class="hidden">Apply
             <li class="hidden">Cancel
-            <li>Filters
         </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>
@@ -72,6 +87,7 @@
             <ol id="pluginsNav">
                 <!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
             </ol>
+            <li>Filters
         </ol>
     </nav>
     <div id="main">
@@ -163,5 +179,7 @@
         </form>
     </div>
 
+    <div id="overlay"></div>
+
     <script src="script.js"></script>
 </body>

resources/report/script.js

@@ -52,16 +52,19 @@ function loadSettings() {
         i--;
     }
 }
+function isVisible(element) {
+    return (element.className.indexOf('hidden') == -1);
+}
 function showElement(element) {
     if (element != null) {
-        if (element.className.indexOf('hidden') != -1) {
+        if (!isVisible(element)) {
             element.className = element.className.replace('hidden', '');
         }
     }
 }
 function hideElement(element) {
     if (element != null) {
-        if (element.className.indexOf('hidden') == -1) {
+        if (isVisible(element)) {
             element.className += ' hidden';
         }
     }
@@ -341,4 +344,20 @@ function processURLParams() {
         });
     }
 }
-processURLParams();
+processURLParams();
+
+var menus = document.getElementsByTagName('header')[0].children[1].children;
+
+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'));
+        if (action == 'open-menu' || action == 'open-dialog') {
+            if (isVisible(target)) {
+                hideElement(target);
+            } else {
+                showElement(target);
+            }
+        }
+    }
+}

resources/report/style.css

@@ -42,17 +42,18 @@ header {
     width:100%;
     height: 3em;
 }
-header ol {
+header > ol {
     display: inline-block;
     margin:0;
     padding:0;
 }
-header li{
+header > ol > li{
     display: inline-block;
     padding: 0.75em 1em;
     margin: 0;
+    cursor: pointer;
 }
-header ol:last-child {
+header > ol:last-child {
     position: fixed;
     right: 0;
 }
@@ -66,22 +67,49 @@ header img {
     padding: 0 0.5em;
 }
 
+#fileMenu, #gameMenu, #helpMenu {
+    background: #e3e3e3;
+    position: fixed;
+    z-index: 2;
+    box-shadow: 0 3px 3px 1px rgba(0,0,0,0.5);
+    list-style-type: none;
+    margin:0;
+    padding: 0.5em;
+    top: 3em;
+}
+#fileMenu {
+    left: 3.75em;
+}
+#gameMenu {
+    left: 98px;
+}
+#helpMenu {
+    left: 235px;
+}
+
 nav {
     position: fixed;
     top: 3em;
     width: 20em;
     height: calc(100% - 3em);
 }
-nav ol {
+nav > ol {
     list-style-type: none;
     height: calc(100% - 3em);
 }
-nav ol li:last-child, nav ol li:last-child ol {
-    height: calc(100% - 3em);
+nav > ol > li:nth-child(3), #pluginsNav {
+    height: calc(100% - 5em);
     overflow: auto;
 }
 nav ol li {
-    padding: 1em;
+    padding: 1em 0.5em;
+}
+#pluginsNav {
+    margin: 0;
+    padding: 0;
+}
+#pluginsNav li {
+    padding: 0;
 }
 
 #main {
@@ -90,7 +118,7 @@ nav ol li {
     left: 20em;
 }
 
-section {
+section, #settings, #about {
     background:white;
     overflow:hidden;
     margin:1em;