From 3d0c3faa523d9a989c1ccc22f60b56aa41b5fc9c Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Mon, 10 Nov 2014 17:19:09 +0000
Subject: [PATCH] More <loot-plugin-card> work.

All HTML elements have now been added, with some basic styling.
---
 resources/report/css/overrides.css          |   4 +-
 resources/report/html/loot-plugin-card.html | 199 +++++++++++++++++++-
 2 files changed, 194 insertions(+), 9 deletions(-)

diff --git a/resources/report/css/overrides.css b/resources/report/css/overrides.css
index c8a5717e..75bb69a4 100644
--- a/resources/report/css/overrides.css
+++ b/resources/report/css/overrides.css
@@ -36,10 +36,10 @@ html /deep/ paper-item[disabled]  {
 }
 
 /* These overrides change the colour of the tab ink effect and their underline. */
-paper-tabs::shadow #selectionBar {
+html /deep/ paper-tabs::shadow #selectionBar {
     background-color: #4285f4;
 }
-paper-tab::shadow #ink {
+html /deep/ paper-tab::shadow #ink {
     color: #4285f4;
 }
 
diff --git a/resources/report/html/loot-plugin-card.html b/resources/report/html/loot-plugin-card.html
index 18e6c7d1..be60da29 100644
--- a/resources/report/html/loot-plugin-card.html
+++ b/resources/report/html/loot-plugin-card.html
@@ -6,11 +6,17 @@
 <link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
+
+<link rel="import" href="editable-table.html">
 
 
 <polymer-element name="loot-plugin-card">
     <template>
         <style>
+        /* Host and front/editor styling. */
         :host {
             display: block;
             background:white;
@@ -25,18 +31,30 @@
             transition: 0.6s;
             transform-style: preserve-3d;
         }
+        :host([data-active=false]) .activeTick {
+            visibility: hidden;
+        }
+        :host([data-bsa=false]) .loadsBSA {
+            display: none;
+        }
+        :host([data-dummy=false]) .dummyPlugin {
+            display: none;
+        }
+        :host([data-edits=false]) #hasUserEdits {
+            display: none;
+        }
         #front {
             padding-bottom: 1em;
         }
         #front, #editor {
             display: block;
         }
-
         #editor {
             transform: rotateY(180deg) translateZ(1px);
             display:none;
         }
 
+        /* Flip animation styling. */
         :host(.flip) {
             transform: rotateY(180deg);
         }
@@ -49,19 +67,94 @@
             display: block;
         }
 
-        ::content .tag.add, ::content .tag.remove, ::content ul {
-            padding: 0 1em;
-        }
-        core-toolbar {
-            background: white;
-        }
+        /* Icon styling. */
         .activeTick {
             color: green;
         }
+
+        /* Content styling. */
+        ::content .tag.add, ::content .tag.remove, ::content ul {
+            padding: 0 1em;
+        }
         ::content h1, h1 {
             font-weight: normal;
             font-size: 1em;
         }
+        ::content .version, .version {
+            display: inline-block;
+            margin-left: 1em;
+            color:#6394F8;
+        }
+        ::content .crc, .crc {
+            display: inline-block;
+            margin-left: 1em;
+            color:#BC8923;
+        }
+        ::content .hidden, .hidden {
+            display: none;
+        }
+
+        /* Editor input styling. */
+        #editor > div > paper-checkbox, #editor > div > core-tooltip {
+            display: table;
+        }
+        #enableEdits {
+            margin-bottom: 1em;
+        }
+        #priorityValue {
+            margin-left: 0.5em;
+        }
+        input[readonly] {
+            border: none;
+            -webkit-user-select: none;
+        }
+        input:invalid {
+            background-color: pink;
+            color: white;
+        }
+
+        /* Table styling. */
+        table {
+            margin: 0;
+            border-collapse: collapse;
+            width: 100%;
+        }
+        td input {
+            width: 100%;
+            text-overflow: ellipsis;
+        }
+        td:last-child {
+            cursor: pointer;
+        }
+        td:last-child:hover {
+            color: red;
+        }
+        td, th {
+            vertical-align: top;
+            text-align: left;
+            padding: 0.5em;
+        }
+        th {
+            border-bottom: 1px black solid;
+        }
+        tbody tr:last-child {
+            cursor: pointer;
+            color: grey;
+        }
+        tbody tr:last-child:hover {
+            color: black;
+        }
+
+        /* Misc Styling. */
+        core-toolbar {
+            background: white;
+        }
+        #buttons {
+            text-align: right;
+        }
+        #editor > div {
+            padding: 1em;
+        }
         </style>
         <section id="front">
             <core-toolbar>
@@ -108,6 +201,98 @@
                     <core-icon icon="attachment"></core-icon>
                 </core-tooltip>
             </core-toolbar>
+            <div>
+                <paper-checkbox id="enableEdits" label="Enable Edits"></paper-checkbox>
+                <core-tooltip label="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins." position="right">
+                    <paper-checkbox id="globalPriority" label="Global Priority"></paper-checkbox>
+                </core-tooltip>
+                <div horizontal layout center>
+                    <div>Priority Value</div>
+                    <paper-input type="number" id="priorityValue" max="999999" min="-999999" step="1" value="0" error="Input must be an integer!"></paper-input>
+                </div>
+                <div id="fileTabs">
+                    <paper-tabs selected="loadAfter" valueattr="data-for">
+                        <paper-tab data-for="loadAfter">Load After</paper-tab>
+                        <paper-tab data-for="req">Requirements</paper-tab>
+                        <paper-tab data-for="inc">Incompatibilities</paper-tab>
+                    </paper-tabs>
+                    <table is="editable-table" id="loadAfter" data-template="fileRow">
+                        <thead>
+                            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- File rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                    <table is="editable-table" id="req" class="hidden" data-template="fileRow">
+                        <thead>
+                            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- File rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                    <table is="editable-table" id="inc" class="hidden" data-template="fileRow">
+                        <thead>
+                            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- File rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div id="miscTabs">
+                    <paper-tabs selected="message" valueattr="data-for">
+                        <paper-tab data-for="message">Messages</paper-tab>
+                        <paper-tab data-for="tags">Bash Tags</paper-tab>
+                        <paper-tab data-for="dirty">Dirty Info</paper-tab>
+                        <paper-tab data-for="locations">Locations</paper-tab>
+                    </paper-tabs>
+                    <table is="editable-table" id="message" data-template="messageRow">
+                        <thead>
+                            <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- Message rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                    <table is="editable-table" id="tags" class="hidden" data-template="tagRow">
+                        <thead>
+                            <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- Bash Tag rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                    <table is="editable-table" id="dirty" class="hidden" data-template="dirtyInfoRow">
+                        <thead>
+                            <tr><th>CRC</th><th>ITM Count</th><th>Deleted References</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- Dirty info rows go here. -->
+                            <tr><td colspan="4">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                    <table is="editable-table" id="locations" class="hidden" data-template="locationRow">
+                        <thead>
+                            <tr><th>URL</th><th>Version</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            <!-- Location rows go here. -->
+                            <tr><td colspan="3">Add new row...</td><td></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div id="buttons">
+                    <paper-button id="accept">Apply</paper-button>
+                    <paper-button id="cancel">Cancel</paper-button>
+                </div>
+            </div>
         </section>
     </template>
     <script>