Moved files around, added plugin menus.

2026-07-27 14:16:01 -07:00 · 2014-07-12 15:18:43 +01:00
parent e59bed9c80
commit 98182880ea
12 changed files with 2134 additions and 16 deletions
@@ -157,15 +157,33 @@ section, #settings, #about {
    position: relative;
 }

-section[data-active] .buttons {
+section[data-active] {
+    overflow:visible;
+}
+
+.buttons {
+    background: transparent;
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
-    top: 0.5em;
+    top: 1em;
    right: 0.5em;
+    overflow:visible;
+}
+.buttons > li:not(:last-child) {
+    opacity: 0.5;
+}
+.buttons > li:hover {
+    opacity: 1;
+}
+.pluginMenu {
+    width: 1.5em;
+    text-align: center;
+    vertical-align: bottom;
+    margin: 0.2em;
+    cursor: pointer;
 }
-
 .dummyPlugin, .loadsBSA, .hasUserEdits {
    height: 1.5em;
    width: 1.5em;
@@ -186,6 +204,27 @@ section[data-active] .buttons {
 .hasUserEdits {
    background: #C13C3C;
 }
+.menu {
+    background: white;
+    box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
+    list-style-type: none;
+    position: absolute;
+    right: 0.5em;
+    font: 10pt/1.5 Helvetica,sans-serif;
+    width: 12em;
+    z-index: 2;
+    text-align: left;
+    opacity: 1;
+    padding:0;
+}
+.menu > li {
+    padding: 0.2em 0.5em;
+    cursor: pointer;
+}
+.menu > li:hover {
+    background:#e3e3e3;
+}
+

 #settings, #about {
    margin: 1em;
@@ -211,6 +211,13 @@ function processButtonClick(evt) {
                }
            }
        }
+    } else if (action == 'show-menu') {
+        target = evt.target.nextSibling;
+        if (isVisible(target)) {
+            hideElement(target);
+        } else {
+            showElement(target);
+        }
    }
 }
 function toggleOverlay(evt) {
@@ -3,9 +3,10 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>LOOT Report</title>
-    <link rel="stylesheet" href="style.css" />
-    <script src="polyfill.js"></script>
-    <script src="require.js"></script>
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/font-awesome.css" />
+    <script src="js/polyfill.js"></script>
+    <script src="js/require.js"></script>
 </head>
 <body>
    <template id="pluginNav">
@@ -25,7 +26,12 @@
                <li class="dummyPlugin hidden" title="Dummy Plugin">D
                <li class="loadsBSA hidden" title="Loads BSA">B
                <li class="hasUserEdits hidden" title="Has User Metadata">U
-                <li>
+                <li class=" fa fa-ellipsis-v fa-lg pluginMenu" data-action="show-menu">
+                <li class="hidden"><ol class="menu">
+                    <li data-action="view-ui" data-target="editor">Edit Metadata
+                    <li data-action="copy-metadata">Copy Metadata As Text
+                    <li data-action="clear-metadata">Clear User Metadata
+                </ol>
            </ol>
        </section>
    </template>
@@ -44,14 +50,6 @@
            <button>Cancel</button>
        </div>
    </template>
-    <template id="pluginMenu">
-        <!-- The ol (or each li?) should have a 'data-plugin' attribute added with the plugin filename. -->
-        <ol class="menu">
-            <li data-action="view-ui" data-target="editor">Edit Metadata
-            <li data-action="copy-metadata">Copy Metadata As Text
-            <li data-action="clear-metadata">Clear User Metadata
-        </ol>
-    </template>
    <template id="editorPanel">
        <div id="editor">
            <h1></h1>
@@ -208,5 +206,5 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.

    <div id="overlay" class="hidden"></div>

-    <script src="script.js"></script>
+    <script src="js/script.js"></script>
 </body>