Started to implement some dialog display.

This commit is contained in:
WrinklyNinja
2014-07-12 15:14:11 +01:00
parent add4ba2ec4
commit 256e336641
3 changed files with 82 additions and 36 deletions
+25 -28
View File
@@ -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>
+19 -5
View File
@@ -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);
}
+38 -3
View File
@@ -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;