From b14096678b6ef11a0423b12eb5fe159d62ee6518 Mon Sep 17 00:00:00 2001 From: Oliver Hamlet Date: Sat, 8 Nov 2014 00:48:01 +0000 Subject: [PATCH] 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. --- resources/report/bower.json | 6 +- resources/report/css/style.css | 114 +++++---------------------------- resources/report/js/script.js | 17 ++--- resources/report/report.html | 104 +++++++++++++++++++----------- 4 files changed, 93 insertions(+), 148 deletions(-) diff --git a/resources/report/bower.json b/resources/report/bower.json index 48b81ad3..1ffa7aab 100644 --- a/resources/report/bower.json +++ b/resources/report/bower.json @@ -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" } } diff --git a/resources/report/css/style.css b/resources/report/css/style.css index 2cbfd5f0..1f1f8dc1 100644 --- a/resources/report/css/style.css +++ b/resources/report/css/style.css @@ -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; diff --git a/resources/report/js/script.js b/resources/report/js/script.js index c903805e..f457e49b 100644 --- a/resources/report/js/script.js +++ b/resources/report/js/script.js @@ -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'); diff --git a/resources/report/report.html b/resources/report/report.html index af57c403..3ad0ca2c 100644 --- a/resources/report/report.html +++ b/resources/report/report.html @@ -17,12 +17,16 @@ + + + + @@ -53,44 +57,68 @@ -
-
    -
  1. Summary
    2. -
  2. General Messages
    3. -
  3. -
      - -
    - -
    4. -
  4. Filters -
    5. -
  5. -
    6. -
+
+ + Nav + Filters + + + + + + + + + + + + + +
+ + +