mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
More work on the Polymerised sidebar.
Tabs are now functional, styling of content is better. Also improved styling of apply sorted load order button, and got rid of some obsolete CSS.
This commit is contained in:
Oliver Hamlet
@@ -20,6 +20,10 @@
|
||||
"core-toolbar": "Polymer/core-toolbar#~0.4.2",
|
||||
"core-icons": "Polymer/core-icons#~0.4.2",
|
||||
"core-tooltip": "Polymer/core-tooltip#~0.4.2",
|
||||
"core-drawer-panel": "Polymer/core-drawer-panel#~0.4.2"
|
||||
"core-drawer-panel": "Polymer/core-drawer-panel#~0.4.2",
|
||||
"paper-input": "Polymer/paper-input#~0.4.2",
|
||||
"paper-tabs": "Polymer/paper-tabs#~0.4.2",
|
||||
"core-menu": "Polymer/core-menu#~0.4.2",
|
||||
"paper-checkbox": "Polymer/paper-checkbox#~0.4.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,6 @@ noscript {
|
||||
color:white;
|
||||
}
|
||||
#mainToolbar {
|
||||
background:#e3e3e3;
|
||||
background: #4285f4;
|
||||
/*font-size: 1em;
|
||||
height: 3em;*/
|
||||
@@ -56,60 +55,10 @@ noscript {
|
||||
#gameMenu::shadow #menu {
|
||||
color: black;
|
||||
}
|
||||
header > ol {
|
||||
display: inline-block;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
header > ol > li {
|
||||
display: inline-block;
|
||||
padding: 0.75em 1em;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
header > ol:last-child {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
}
|
||||
header li:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
header img {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
vertical-align: middle;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
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;
|
||||
top: 3em;
|
||||
}
|
||||
header > ol > li > ol > li {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
#fileMenu > ol {
|
||||
left: 3.75em;
|
||||
}
|
||||
#gameMenu > ol {
|
||||
left: 98px;
|
||||
}
|
||||
#helpMenu > ol {
|
||||
left: 235px;
|
||||
}
|
||||
|
||||
header li > span, #filtersToggle > span {
|
||||
#filtersToggle > span {
|
||||
margin-right: 1em;
|
||||
}
|
||||
header li.disabled {
|
||||
cursor: default;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
@@ -120,33 +69,11 @@ header li.disabled {
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;*/
|
||||
}
|
||||
div[drawer] {
|
||||
height: 100%;
|
||||
paper-tabs::shadow #selectionBar {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
div[drawer] > ol {
|
||||
padding-left: 1em;
|
||||
list-style-type: none;
|
||||
height: calc(100% - 4em);
|
||||
}
|
||||
div[drawer] > ol > li:nth-child(3) {
|
||||
height: calc(100% - 7em);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
div[drawer] li:not(:last-child) {
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
#filtersToggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
div[drawer] > ol > li:not(:nth-child(3)):hover, #pluginsNav li:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
div[drawer] a {
|
||||
text-decoration: none;
|
||||
color:black;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
paper-tab::shadow #ink {
|
||||
color: #4285f4;
|
||||
}
|
||||
#pluginsNav {
|
||||
height: 100%;
|
||||
@@ -162,10 +89,12 @@ div[drawer] a {
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
}
|
||||
#searchBox {
|
||||
padding: 0.3em 0.6em;
|
||||
div[drawer] > core-tooltip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 12px;
|
||||
}
|
||||
#searchBox {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
#main {
|
||||
overflow: auto;
|
||||
@@ -231,23 +160,8 @@ section h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#filters.hidden {
|
||||
display:none;
|
||||
}
|
||||
#filters label {
|
||||
display:inline-block;
|
||||
padding:0.2em 0.5em;
|
||||
white-space:nowrap;
|
||||
cursor:pointer;
|
||||
}
|
||||
#filters div {
|
||||
padding:0.2em 0.5em;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
#summary > table {
|
||||
@@ -367,10 +281,16 @@ body.editMode header #headerOverlay {
|
||||
-webkit-user-select: none;
|
||||
cursor: move;
|
||||
}
|
||||
.highlight, #applySortButton {
|
||||
.highlight {
|
||||
box-shadow: inset 0 0 10px 3px #69aaff;
|
||||
outline: 3px solid #69aaff;
|
||||
}
|
||||
#applySortButton {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
color: #4285f4;
|
||||
background-color: white;
|
||||
}
|
||||
input:invalid {
|
||||
background-color: pink;
|
||||
color: white;
|
||||
|
||||
@@ -1030,17 +1030,10 @@ function openMenu(evt) {
|
||||
}));
|
||||
}
|
||||
}
|
||||
function toggleFiltersList(evt) {
|
||||
var filters = document.getElementById('filters');
|
||||
var plugins = document.getElementById('pluginsNav');
|
||||
|
||||
if (isVisible(filters)) {
|
||||
hideElement(filters);
|
||||
showElement(plugins);
|
||||
} else {
|
||||
showElement(filters);
|
||||
hideElement(plugins);
|
||||
}
|
||||
function switchSidebarTab(evt) {
|
||||
var isFirstSelected = evt.target.selected == 0;
|
||||
evt.target.nextElementSibling.classList.toggle('hidden', !isFirstSelected);
|
||||
evt.target.nextElementSibling.nextElementSibling.classList.toggle('hidden', isFirstSelected);
|
||||
}
|
||||
|
||||
function closeAboutDialog(evt) {
|
||||
@@ -1233,7 +1226,7 @@ function setupEventHandlers() {
|
||||
document.getElementById('sortButton').addEventListener('click', sortPlugins, false);
|
||||
document.getElementById('applySortButton').addEventListener('click', applySort, false);
|
||||
document.getElementById('cancelSortButton').addEventListener('click', cancelSort, false);
|
||||
document.getElementById('filtersToggle').addEventListener('click', toggleFiltersList, false);
|
||||
document.getElementById('sidebarTabs').addEventListener('core-select', switchSidebarTab, false);
|
||||
|
||||
/* Set up event handlers for settings dialog. */
|
||||
var settings = document.getElementById('settings');
|
||||
|
||||
@@ -17,12 +17,16 @@
|
||||
<link rel="import" href="bower_components/core-icons/core-icons.html">
|
||||
<link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
|
||||
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
|
||||
<link rel="import" href="bower_components/core-menu/core-menu.html">
|
||||
|
||||
<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-dropdown-menu/paper-dropdown-menu.html">
|
||||
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="bower_components/paper-button/paper-button.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-checkbox/paper-checkbox.html">
|
||||
|
||||
<script src="js/require.js"></script>
|
||||
</head>
|
||||
@@ -53,44 +57,68 @@
|
||||
<paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
|
||||
</core-toolbar>
|
||||
<core-drawer-panel id="container">
|
||||
<div drawer>
|
||||
<ol>
|
||||
<li><a href="#summary">Summary</a></li>
|
||||
<li><a href="#generalMessages">General Messages</a></li>
|
||||
<li>
|
||||
<ol id="pluginsNav">
|
||||
<!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
|
||||
</ol>
|
||||
<ol id="filters" class="hidden" data-replace="pluginsNav">
|
||||
<input type="checkbox" id="hideVersionNumbers" data-class="version" />
|
||||
<label for="hideVersionNumbers">Hide version numbers</label><br>
|
||||
<input type="checkbox" id="hideCRCs" data-class="crc" />
|
||||
<label for="hideCRCs">Hide CRCs</label><br>
|
||||
<input type="checkbox" id="hideBashTags" data-class="tag" />
|
||||
<label for="hideBashTags">Hide Bash Tags</label><br>
|
||||
<input type="checkbox" id="hideNotes" />
|
||||
<label for="hideNotes">Hide notes</label><br>
|
||||
<input type="checkbox" id="hideDoNotCleanMessages" />
|
||||
<label for="hideDoNotCleanMessages">Hide 'Do not clean' messages</label><br>
|
||||
<input type="checkbox" id="hideInactivePluginMessages" />
|
||||
<label for="hideInactivePluginMessages">Hide inactive plugin messages</label><br>
|
||||
<input type="checkbox" id="hideAllPluginMessages" />
|
||||
<label for="hideAllPluginMessages">Hide all plugin messages</label><br>
|
||||
<input type="checkbox" id="hideMessagelessPlugins" />
|
||||
<label for="hideMessagelessPlugins">Hide messageless plugins</label>
|
||||
<div>
|
||||
<span id="hiddenPluginsTxt">Hidden plugins</span>: <span id="hiddenPluginNo">0</span> / <span id="filterTotalPluginNo">0</span>
|
||||
</div>
|
||||
<div>
|
||||
<span id="hiddenMessagesTxt">Hidden messages</span>: <span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo">0</span>
|
||||
</div>
|
||||
</ol>
|
||||
</li>
|
||||
<li id="filtersToggle"><span class="fa fa-fw fa-filter"></span>Filters
|
||||
</li>
|
||||
<li><input id="searchBox" type="search" placeholder="Search content..." title="Press Enter when searching to select the next match.">
|
||||
</li>
|
||||
</ol>
|
||||
<div drawer vertical layout>
|
||||
<paper-tabs id="sidebarTabs" selected="0">
|
||||
<paper-tab>Nav</paper-tab>
|
||||
<paper-tab>Filters</paper-tab>
|
||||
</paper-tabs>
|
||||
<core-menu class="tab-content">
|
||||
<paper-item label="Summary">
|
||||
<a href="#summary"></a>
|
||||
</paper-item>
|
||||
<paper-item label="General Messages">
|
||||
<a href="#generalMessages"></a>
|
||||
</paper-item>
|
||||
<core-submenu id="pluginsNav">
|
||||
<!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
|
||||
</core-submenu>
|
||||
</core-menu>
|
||||
<core-menu id="filters" class="tab-content hidden">
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide version numbers</div>
|
||||
<paper-checkbox id="hideVersionNumbers" data-class="version"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide CRCs</div>
|
||||
<paper-checkbox id="hideCRCs" data-class="crc"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide Bash Tags</div>
|
||||
<paper-checkbox id="hideBashTags" data-class="tag"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide notes</div>
|
||||
<paper-checkbox id="hideNotes"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide 'Do not clean' messages</div>
|
||||
<paper-checkbox id="hideDoNotCleanMessages"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide inactive plugin messages</div>
|
||||
<paper-checkbox id="hideInactivePluginMessages"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide all plugin messages</div>
|
||||
<paper-checkbox id="hideAllPluginMessages"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div flex>Hide messageless plugins</div>
|
||||
<paper-checkbox id="hideMessagelessPlugins"></paper-checkbox>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div id="hiddenPluginsTxt" flex>Hidden plugins:</div>
|
||||
<div><span id="hiddenPluginNo">0</span> / <span id="filterTotalPluginNo">0</span></div>
|
||||
</div>
|
||||
<div center horizontal layout>
|
||||
<div id="hiddenMessagesTxt" flex>Hidden messages:</div>
|
||||
<div><span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo">0</span></div>
|
||||
</div>
|
||||
</core-menu>
|
||||
<div flex></div>
|
||||
<core-tooltip label="Press Enter when searching to select the next match." position="right">
|
||||
<paper-input id="searchBox" type="search" label="Search content..."></paper-input>
|
||||
</core-tooltip>
|
||||
</div>
|
||||
<div main id="main">
|
||||
<section id="summary">
|
||||
|
||||
Reference in New Issue
Block a user