diff --git a/www/css/app.css b/www/css/app.css index 3c7e365ca..3f7dc639d 100644 --- a/www/css/app.css +++ b/www/css/app.css @@ -310,6 +310,26 @@ iframe._invert, iframe._mwInvert { color: #337ab7; } +/* Change focus styles on top nav-bar buttons (keep border-color for keyboard users) */ +.btn-nav-top:focus { + background: none; + border-color: #80bdff !important; + box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important; +} + +/* Note: This one is !important to override the .active > button box-shadow */ +.btn-nav-top:hover { + background-color: #e2e6ea !important; + box-shadow: 0 0 0 -.1rem rgba(216,217,219,.8) !important; +} + +.active > button { + color: #212529 !important; + background-color: #e2e6ea !important; + border-color: #dae0e5 !important; + box-shadow: 0 0 0 .2rem rgba(216,217,219,.5) !important; +} + /* Add missing margin to buttons */ button { margin: 2px; diff --git a/www/index.html b/www/index.html index 797ff47ee..9ff6e4ad8 100644 --- a/www/index.html +++ b/www/index.html @@ -96,9 +96,9 @@ diff --git a/www/js/app.js b/www/js/app.js index 19caf5037..1a1ac4cdc 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -381,6 +381,7 @@ document.getElementById('btnTop').addEventListener('click', function (event) { var articleContent = document.getElementById('articleContent'); articleContent.contentWindow.scrollTo({ top: 0, behavior: 'smooth' }); }); + // Top menu : document.getElementById('btnHome').addEventListener('click', function (event) { // Highlight the selected section in the navbar @@ -413,34 +414,43 @@ document.getElementById('btnHome').addEventListener('click', function (event) { // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms setTimeout(resizeIFrame, 400); }); + document.getElementById('btnConfigure').addEventListener('click', function (event) { event.preventDefault(); - // Highlight the selected section in the navbar - document.getElementById('liHomeNav').setAttribute('class', ''); - document.getElementById('liConfigureNav').setAttribute('class', 'active'); - document.getElementById('liAboutNav').setAttribute('class', ''); - var navbarCollapse = document.querySelector('.navbar-collapse'); - navbarCollapse.classList.remove('show'); - // Show the selected content in the page - uiUtil.tabTransitionToSection('config', params.showUIAnimations); - refreshAPIStatus(); - refreshCacheStatus(); - uiUtil.checkUpdateStatus(appstate); - // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms - setTimeout(resizeIFrame, 400); + if (uiUtil.fromSection() === 'config') { + uiUtil.returnToCurrentPage(); + } else { + // Highlight the selected section in the navbar + document.getElementById('liHomeNav').setAttribute('class', ''); + document.getElementById('liConfigureNav').setAttribute('class', 'active'); + document.getElementById('liAboutNav').setAttribute('class', ''); + var navbarCollapse = document.querySelector('.navbar-collapse'); + navbarCollapse.classList.remove('show'); + // Show the selected content in the page + uiUtil.tabTransitionToSection('config', params.showUIAnimations); + refreshAPIStatus(); + refreshCacheStatus(); + uiUtil.checkUpdateStatus(appstate); + // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms + setTimeout(resizeIFrame, 400); + } }); document.getElementById('btnAbout').addEventListener('click', function (event) { event.preventDefault(); - // Highlight the selected section in the navbar - document.getElementById('liHomeNav').setAttribute('class', ''); - document.getElementById('liConfigureNav').setAttribute('class', ''); - document.getElementById('liAboutNav').setAttribute('class', 'active'); - var navbarCollapse = document.querySelector('.navbar-collapse'); - navbarCollapse.classList.remove('show'); - // Show the selected content in the page - uiUtil.tabTransitionToSection('about', params.showUIAnimations); - // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms - setTimeout(resizeIFrame, 400); + if (uiUtil.fromSection() === 'about') { + uiUtil.returnToCurrentPage(); + } else { + // Highlight the selected section in the navbar + document.getElementById('liHomeNav').setAttribute('class', ''); + document.getElementById('liConfigureNav').setAttribute('class', ''); + document.getElementById('liAboutNav').setAttribute('class', 'active'); + var navbarCollapse = document.querySelector('.navbar-collapse'); + navbarCollapse.classList.remove('show'); + // Show the selected content in the page + uiUtil.tabTransitionToSection('about', params.showUIAnimations); + // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms + setTimeout(resizeIFrame, 400); + } }); document.querySelectorAll('input[name="contentInjectionMode"][type="radio"]').forEach(function (element) { element.addEventListener('change', function () { diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index a229ab684..007054117 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -940,7 +940,11 @@ function showReturnLink () { // Function to switch back to currently loaded page function returnToCurrentPage () { document.getElementById('liConfigureNav').classList.remove('active'); + document.getElementById('liAboutNav').classList.remove('active'); document.getElementById('liHomeNav').classList.add('active'); + document.getElementById('btnHome').focus(); + var navbarCollapse = document.querySelector('.navbar-collapse'); + navbarCollapse.classList.remove('show'); tabTransitionToSection('home', params.showUIAnimations); const welcomeText = document.getElementById('welcomeText'); welcomeText.style.display = 'none'; @@ -1095,5 +1099,6 @@ export default { warnAndOpenExternalLinkInNewTab: warnAndOpenExternalLinkInNewTab, closestAnchorEnclosingElement: closestAnchorEnclosingElement, getBrowserLanguage: getBrowserLanguage, - returnToCurrentPage: returnToCurrentPage + returnToCurrentPage: returnToCurrentPage, + fromSection: fromSection };