mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Re-implemented tabs in separate sidebar.
No more huge CPU usage.
This commit is contained in:
Oliver Hamlet
@@ -50,11 +50,11 @@ html /deep/ paper-item[disabled] {
|
||||
}
|
||||
|
||||
/* These overrides change the colour of the tab ink effect and their underline. */
|
||||
#mainToolbar paper-tabs::shadow #selectionBar {
|
||||
paper-tabs::shadow #selectionBar {
|
||||
background-color: white;
|
||||
height: 4px;
|
||||
}
|
||||
#mainToolbar paper-tab::shadow #ink {
|
||||
paper-tab::shadow #ink {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
|
||||
@@ -30,23 +30,20 @@ body {
|
||||
background:#f8f8f8;
|
||||
height: 100%;
|
||||
}
|
||||
#mainToolbar {
|
||||
core-toolbar {
|
||||
background: #4285f4;
|
||||
color: white;
|
||||
width: 99.99vw; /* Fix for scollbars when LOOT is run through Mod Organiser. */
|
||||
height: 56px;
|
||||
}
|
||||
#mainToolbar paper-dropdown {
|
||||
color: black;
|
||||
}
|
||||
#sidebarTabs {
|
||||
width: calc(33% - 11px);
|
||||
}
|
||||
|
||||
div[drawer] > core-tooltip {
|
||||
margin: 0 12px;
|
||||
}
|
||||
div[drawer] {
|
||||
background: white;
|
||||
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
#main {
|
||||
@@ -54,6 +51,7 @@ div[drawer] {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
#cardsNav {
|
||||
margin: 0;
|
||||
@@ -74,17 +72,11 @@ paper-item > a {
|
||||
#searchBox {
|
||||
display: block;
|
||||
}
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
section {
|
||||
background:white;
|
||||
overflow:hidden;
|
||||
margin:1em;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
padding:1em;
|
||||
position: relative;
|
||||
border-top-left-radius: 2px;
|
||||
|
||||
+136
-132
@@ -40,73 +40,14 @@
|
||||
</head>
|
||||
<!-- oncontextmenu attribute disables the right-click menu. -->
|
||||
<body oncontextmenu="return false" unresolved fullbleed vertical layout >
|
||||
<core-toolbar id="mainToolbar">
|
||||
<paper-icon-button icon="drawer" id="drawerToggle"></paper-icon-button>
|
||||
<paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id">
|
||||
<paper-tab data-id="cardsNav">Plugins</paper-tab>
|
||||
<paper-tab data-id="filters">Filters</paper-tab>
|
||||
</paper-tabs>
|
||||
<loot-dropdown-menu id="gameMenu">
|
||||
<!-- Generated game <li> elements go here. -->
|
||||
</loot-dropdown-menu>
|
||||
<span flex></span>
|
||||
<core-tooltip label="Sort Plugins">
|
||||
<paper-icon-button id="sortButton" icon="sort"></paper-icon-button>
|
||||
</core-tooltip>
|
||||
<core-tooltip label="Update Masterlist">
|
||||
<paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
|
||||
</core-tooltip>
|
||||
<paper-button id="applySortButton" class="hidden">Apply</paper-button>
|
||||
<paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="more-vert"></paper-icon-button>
|
||||
<paper-dropdown class="dropdown" halign="right">
|
||||
<div>
|
||||
<paper-item id="redatePluginsButton">
|
||||
<core-icon icon="today"></core-icon>
|
||||
Redate Plugins
|
||||
</paper-item>
|
||||
<paper-item id="wipeUserlistButton">
|
||||
<core-icon icon="delete"></core-icon>
|
||||
Clear All User Metadata
|
||||
</paper-item>
|
||||
<paper-item id="copyContentButton">
|
||||
<core-icon icon="content-copy"></core-icon>
|
||||
Copy Content
|
||||
</paper-item>
|
||||
<paper-item id="refreshContentButton">
|
||||
<core-icon icon="cached"></core-icon>
|
||||
Refresh Content
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="settingsButton">
|
||||
<core-icon icon="settings"></core-icon>
|
||||
Settings
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="helpButton">
|
||||
<core-icon icon="book"></core-icon>
|
||||
View Documentation
|
||||
</paper-item>
|
||||
<paper-item id="openLogButton">
|
||||
<core-icon icon="folder"></core-icon>
|
||||
Open Debug Log Location
|
||||
</paper-item>
|
||||
<paper-item id="aboutButton">
|
||||
<core-icon icon="help"></core-icon>
|
||||
About
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="quitButton">
|
||||
<core-icon icon="close"></core-icon>
|
||||
Quit
|
||||
</paper-item>
|
||||
</div>
|
||||
</paper-dropdown>
|
||||
</paper-menu-button>
|
||||
</core-toolbar>
|
||||
<core-drawer-panel id="container" drawerWidth="33%">
|
||||
<div drawer vertical layout>
|
||||
<core-toolbar>
|
||||
<paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id">
|
||||
<paper-tab data-id="cardsNav">Plugins</paper-tab>
|
||||
<paper-tab data-id="filters">Filters</paper-tab>
|
||||
</paper-tabs>
|
||||
</core-toolbar>
|
||||
<core-animated-pages selected="cardsNav" valueattr="id" transitions="" flex>
|
||||
<div id="cardsNav" class="tab-content" layout vertical>
|
||||
<paper-item>
|
||||
@@ -147,73 +88,136 @@
|
||||
<paper-input id="searchBox" label="Filter content..."></paper-input>
|
||||
</core-tooltip>
|
||||
</div>
|
||||
<div main id="main">
|
||||
<section id="summary">
|
||||
<h1>Summary</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Masterlist Revision</td>
|
||||
<td id="masterlistRevision">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Masterlist Date</td>
|
||||
<td id="masterlistDate">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Warnings</td>
|
||||
<td id="totalWarningNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td id="totalErrorNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Messages</td>
|
||||
<td id="totalMessageNo">0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Active Plugins</td>
|
||||
<td id="activePluginNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dirty Plugins</td>
|
||||
<td id="dirtyPluginNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Plugins</td>
|
||||
<td id="totalPluginNo">0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="generalMessages">
|
||||
<h1>General Messages</h1>
|
||||
<ul>
|
||||
<!-- Generated message <li> elements go here. -->
|
||||
</ul>
|
||||
</section>
|
||||
<core-list>
|
||||
<template>
|
||||
<loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
|
||||
<h1>{{model.name}}</h1>
|
||||
<span class="version">{{model.version}}</span>
|
||||
<span class="crc">{{model.computed.crc}}</span>
|
||||
<span class="tag add">{{model.computed.tags.added}}</span>
|
||||
<span class="tag remove">{{model.computed.tags.removed}}</span>
|
||||
<ul></ul>
|
||||
</loot-plugin-card>
|
||||
</template>
|
||||
<!-- Generated <loot-plugin-card> elements go here. -->
|
||||
</core-list>
|
||||
<div main>
|
||||
<core-toolbar id="mainToolbar">
|
||||
<paper-icon-button icon="menu" id="drawerToggle"></paper-icon-button>
|
||||
<loot-dropdown-menu id="gameMenu">
|
||||
<!-- Generated game <li> elements go here. -->
|
||||
</loot-dropdown-menu>
|
||||
<span flex></span>
|
||||
<core-tooltip label="Sort Plugins">
|
||||
<paper-icon-button id="sortButton" icon="sort"></paper-icon-button>
|
||||
</core-tooltip>
|
||||
<core-tooltip label="Update Masterlist">
|
||||
<paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
|
||||
</core-tooltip>
|
||||
<paper-button id="applySortButton" class="hidden">Apply</paper-button>
|
||||
<paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="more-vert"></paper-icon-button>
|
||||
<paper-dropdown class="dropdown" halign="right">
|
||||
<div>
|
||||
<paper-item id="redatePluginsButton">
|
||||
<core-icon icon="today"></core-icon>
|
||||
Redate Plugins
|
||||
</paper-item>
|
||||
<paper-item id="wipeUserlistButton">
|
||||
<core-icon icon="delete"></core-icon>
|
||||
Clear All User Metadata
|
||||
</paper-item>
|
||||
<paper-item id="copyContentButton">
|
||||
<core-icon icon="content-copy"></core-icon>
|
||||
Copy Content
|
||||
</paper-item>
|
||||
<paper-item id="refreshContentButton">
|
||||
<core-icon icon="cached"></core-icon>
|
||||
Refresh Content
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="settingsButton">
|
||||
<core-icon icon="settings"></core-icon>
|
||||
Settings
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="helpButton">
|
||||
<core-icon icon="book"></core-icon>
|
||||
View Documentation
|
||||
</paper-item>
|
||||
<paper-item id="openLogButton">
|
||||
<core-icon icon="folder"></core-icon>
|
||||
Open Debug Log Location
|
||||
</paper-item>
|
||||
<paper-item id="aboutButton">
|
||||
<core-icon icon="help"></core-icon>
|
||||
About
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="quitButton">
|
||||
<core-icon icon="close"></core-icon>
|
||||
Quit
|
||||
</paper-item>
|
||||
</div>
|
||||
</paper-dropdown>
|
||||
</paper-menu-button>
|
||||
</core-toolbar>
|
||||
<div id="main">
|
||||
<section id="summary">
|
||||
<h1>Summary</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Masterlist Revision</td>
|
||||
<td id="masterlistRevision">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Masterlist Date</td>
|
||||
<td id="masterlistDate">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Warnings</td>
|
||||
<td id="totalWarningNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td id="totalErrorNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Messages</td>
|
||||
<td id="totalMessageNo">0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Active Plugins</td>
|
||||
<td id="activePluginNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dirty Plugins</td>
|
||||
<td id="dirtyPluginNo">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Plugins</td>
|
||||
<td id="totalPluginNo">0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="generalMessages">
|
||||
<h1>General Messages</h1>
|
||||
<ul>
|
||||
<!-- Generated message <li> elements go here. -->
|
||||
</ul>
|
||||
</section>
|
||||
<core-list>
|
||||
<template>
|
||||
<loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
|
||||
<h1>{{model.name}}</h1>
|
||||
<span class="version">{{model.version}}</span>
|
||||
<span class="crc">{{model.computed.crc}}</span>
|
||||
<span class="tag add">{{model.computed.tags.added}}</span>
|
||||
<span class="tag remove">{{model.computed.tags.removed}}</span>
|
||||
<ul></ul>
|
||||
</loot-plugin-card>
|
||||
</template>
|
||||
<!-- Generated <loot-plugin-card> elements go here. -->
|
||||
</core-list>
|
||||
</div>
|
||||
</div>
|
||||
</core-drawer-panel>
|
||||
<paper-toast id="toast"></paper-toast>
|
||||
|
||||
Reference in New Issue
Block a user