loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Refactored plugin card menu code.

Browse Source 
Also made some classes IDs, because encapsulation.
This commit is contained in:
WrinklyNinja
2014-07-18 23:12:01 +01:00
parent b9f8e81b46
commit 01c39aa887
4 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/css/style.css
+12
View File
@@ -282,6 +282,18 @@ li.error{
li.warn{
background:#FFDD55;
}
.version{
color:#6394F8;
}
.crc{
color:#BC8923;
}
.tag.add {
color:green;
}
.tag.remove {
color:red;
}
#settings {
width: auto;
resources/report/js/custom.js
+20
View File
@@ -25,6 +25,24 @@
/* Create a <plugin-card> element type. */
var pluginCardProto = Object.create(HTMLElement.prototype, {
onMenuItemClick: {
value: function(evt) {
}
},
onMenuClick: {
value: function(evt) {
var section = evt.currentTarget.parentElement.parentElement;
section.querySelector('#editMetadata').addEventListener('click', this.onMenuItemClick, false);
section.querySelector('#copyMetadata').addEventListener('click', this.onMenuItemClick, false);
section.querySelector('#clearMetadata').addEventListener('click', this.onMenuItemClick, false);
section.querySelector('#menu').classList.toggle('hidden');
}
},
createdCallback: {
value: function() {
@@ -43,6 +61,8 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
version.className = 'version';
this.appendChild(version);
this.shadowRoot.querySelector('#menuButton').addEventListener('click', this.onMenuClick, false);
}
}
resources/report/js/plugin.js
-13
View File
@@ -36,16 +36,6 @@ function Plugin(obj) {
this.id = this.name.replace(/\s+/g, '');
Plugin.prototype.onMenuItemClick = function(evt) {
}
Plugin.prototype.onMenuClick = function(evt) {
card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
}
Plugin.prototype.getTagsStrings = function () {
var tagsAdded = [];
var tagsRemoved = [];
@@ -116,9 +106,6 @@ function Plugin(obj) {
card.setAttribute('data-bsa', this.loadsBSA);
card.setAttribute('data-edits', this.userlist != undefined);
card.shadowRoot.querySelector('.pluginMenu').addEventListener('click', this.onMenuClick, false);
document.getElementById('main').appendChild(card);
}
resources/report/report.html
+40 -47
View File
@@ -24,16 +24,16 @@
transition: 0.6s;
transform-style: flat;
}
:host([data-active=false]) .activeTick {
:host([data-active=false]) #activeTick {
visibility: hidden;
}
:host([data-bsa=false]) .loadsBSA {
:host([data-bsa=false]) #loadsBSA {
display: none;
}
:host([data-dummy=false]) .dummyPlugin {
:host([data-dummy=false]) #dummyPlugin {
display: none;
}
:host([data-edits=false]) .hasUserEdits {
:host([data-edits=false]) #hasUserEdits {
display: none;
}
@@ -59,7 +59,7 @@
backface-visibility: visible;
display:block;
}
.icons {
#icons {
background: transparent;
margin: 0;
padding: 0;
@@ -69,23 +69,23 @@
right: 0.5em;
overflow:visible;
}
.icons .fa {
#icons .fa {
color: grey;
text-align: center;
display: inline-block;
margin: 0.2em;
cursor: pointer;
}
.icons > li:hover {
#icons > li:hover {
color: black;
}
.pluginMenu {
#menuButton {
width: 1.5em;
text-align: center;
margin: 0.2em;
cursor: pointer;
}
.menu {
#menu {
background: white;
box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
font:10pt/1.5 Helvetica,sans-serif;
@@ -98,14 +98,19 @@
opacity: 1;
padding:0;
color: black;
top: 2em;
}
.menu > li {
#menu > li {
padding: 0.2em 0.5em;
cursor: pointer;
display: block;
}
.menu > li:hover {
#menu > li:hover {
background:#e3e3e3;
}
#menu span {
padding-right: 0.4em;
}
::content h1 {
margin: 0;
font-weight: normal;
@@ -123,28 +128,16 @@
.hidden, ::content .hidden {
display: none;
}
.activeTick {
#activeTick {
color: green;
padding-right: 0.5em;
}
.version{
color:#6394F8;
}
.crc{
color:#BC8923;
}
.tag.add {
color:green;
}
.tag.remove {
color:red;
}
.tableTabs {
#tableTabs {
margin: 1.5em 1em;
display: table;
}
.tableTabs > span {
#tableTabs > span {
display: inline-block;
padding: 0.5em;
border: 1px black solid;
@@ -152,13 +145,13 @@
background: #e3e3e3;
cursor: pointer;
}
.tableTabs > span:not(:first-child) {
#tableTabs > span:not(:first-child) {
border-left: none;
}
.tableTabs > span:hover, .tableTabs span.selected {
#tableTabs > span:hover, .tableTabs span.selected {
background: #f8f8f8;
}
.tableTabs .editable {
#tableTabs .editable {
margin: 0;
border-collapse: collapse;
border: 1px black solid;
@@ -167,25 +160,25 @@
</style>
<section id="front">
<span class="activeTick fa fa-check" title="Active Plugin"></span>
<span id="activeTick" class="fa fa-check" title="Active Plugin"></span>
<content select="h1"></content>
<content select=".version"></content>
<content select=".crc"></content>
<content select=".tag.add"></content>
<content select=".tag.remove"></content>
<content select="ul"></content>
<ol class="icons">
<li class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></li>
<li class="loadsBSA fa fa-paperclip" title="Loads BSA"></li>
<li class="hasUserEdits fa fa-user" title="Has User Metadata"></li>
<li class="fa fa-ellipsis-v fa-lg pluginMenu" data-action="toggle-menu">
<ol class="menu hidden">
<li class="editMetadata" data-action="show-editor" data-target=""><span class="fa fa-pencil fa-fw"></span> Edit Metadata</li>
<li class="copyMetadata" data-action="copy-metadata" data-target=""><span class="fa fa-copy fa-fw"></span> Copy Metadata As Text</li>
<li class="clearMetadata" data-action="clear-metadata" data-target=""><span class="fa fa-trash-o fa-fw"></span> Clear User Metadata</li>
</ol>
<ol id="icons">
<li id="dummyPlugin" class="fa fa-eye-slash" title="Dummy Plugin"></li>
<li id="loadsBSA" class="fa fa-paperclip" title="Loads BSA"></li>
<li id="hasUserEdits" class="fa fa-user" title="Has User Metadata"></li>
<li id="menuButton" class="fa fa-ellipsis-v fa-lg">
</li>
</ol>
<ol id="menu" class="hidden">
<li id="editMetadata"><span class="fa fa-pencil fa-fw"></span>Edit Metadata</li>
<li id="copyMetadata"><span class="fa fa-copy fa-fw"></span>Copy Metadata As Text</li>
<li id="clearMetadata"><span class="fa fa-trash-o fa-fw"></span>Clear User Metadata</li>
</ol>
</section>
<section id="editor">
<h1></h1>
@@ -197,9 +190,9 @@
<label for="editorGlobalPriority" title="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.">Global Priority</label><br>
<label for="editorPriorityValue">Priority Value</label>
<input id="editorPriorityValue" type="number" max="999999" min="-999999" step="1">
<div class="tableTabs">
<div id="tableTabs">
<span class="selected" data-for="loadAfter">Load After</span><span data-for="req">Requirements</span><span data-for="inc">Incompatibilities</span><span data-for="message">Messages</span><span data-for="tags">Bash Tags</span><span data-for="dirty">Dirty Info</span>
<table class="editable loadAfter">
<table id="loadAfter" class="editable">
<thead>
<tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
</thead>
@@ -207,7 +200,7 @@
<!-- File rows go here. -->
</tbody>
</table>
<table class="editable req hidden">
<table id="req" class="editable hidden">
<thead>
<tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
</thead>
@@ -215,7 +208,7 @@
<!-- File rows go here. -->
</tbody>
</table>
<table class="editable inc hidden">
<table id="inc" class="editable hidden">
<thead>
<tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
</thead>
@@ -223,7 +216,7 @@
<!-- File rows go here. -->
</tbody>
</table>
<table class="editable message hidden">
<table id="message" class="editable hidden">
<thead>
<tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
</thead>
@@ -231,7 +224,7 @@
<!-- Message rows go here. -->
</tbody>
</table>
<table class="editable tags hidden">
<table id="tags" class="editable hidden">
<thead>
<tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
</thead>
@@ -239,7 +232,7 @@
<!-- Bash Tag rows go here. -->
</tbody>
</table>
<table class="editable dirty hidden">
<table id="dirty" class="editable hidden">
<thead>
<tr><th>CRC</th><th>ITM Count</th><th>UDR Count</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
</thead>