diff --git a/dev/Styles/User/Shortcuts.less b/dev/Styles/User/Shortcuts.less index f8f3e0bd7..682ced1d3 100644 --- a/dev/Styles/User/Shortcuts.less +++ b/dev/Styles/User/Shortcuts.less @@ -6,4 +6,8 @@ td[class^="icon-"] { display: table-cell; } + + .tab-content { + grid-column-end: 6; + } } diff --git a/dev/View/Popup/KeyboardShortcutsHelp.js b/dev/View/Popup/KeyboardShortcutsHelp.js index 644b5c1b7..bb208b478 100644 --- a/dev/View/Popup/KeyboardShortcutsHelp.js +++ b/dev/View/Popup/KeyboardShortcutsHelp.js @@ -9,25 +9,8 @@ export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup { } onBuild(dom) { - const tabs = dom.querySelectorAll('.nav.nav-tabs > li'), - last = tabs.length - 1, - show = tab => { - if (!tab.classList.contains('active')) { - const previous = tab.parentElement.querySelector('.active'); - previous.classList.remove('active'); - dom.querySelector(previous.firstElementChild.getAttribute('href')).classList.remove('active'); - - tab.classList.add('active'); - dom.querySelector(tab.firstElementChild.getAttribute('href')).classList.add('active'); - } - }; - - tabs.forEach(node => { - node.addEventListener('click', e => { - e.preventDefault(); - show(node); - }); - }); + const tabs = dom.querySelectorAll('.tabs input'), + last = tabs.length - 1; // shortcuts.add('tab', 'shift', shortcuts.add('tab,arrowleft,arrowright', '', @@ -35,7 +18,7 @@ export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup { event => { let next = 0; tabs.forEach((node, index) => { - if (node.matches('.active')) { + if (node.matches(':checked')) { if (['Tab','ArrowRight'].includes(event.key)) { next = index < last ? index+1 : 0; } else { @@ -43,8 +26,7 @@ export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup { } } }); - - show(tabs[next]); + tabs[next].checked = true; return false; } ); diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html index 92ffee0cd..d13e3a931 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html +++ b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html @@ -4,23 +4,19 @@

- -
-
+
+ + + +
@@ -31,10 +27,18 @@
M, Menu
F1, Help
-
-
+ + + -
+ + + -
+ + + +
diff --git a/snappymail/v/0.0.0/themes/SquaresDark/styles.less b/snappymail/v/0.0.0/themes/SquaresDark/styles.less index 3c8b35a8e..3c5cca0c2 100644 --- a/snappymail/v/0.0.0/themes/SquaresDark/styles.less +++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.less @@ -90,7 +90,7 @@ .legend, .modal-header, .modal-footer, .table td, .table th { - border-color: #555; + border-color: #555 !important; } .legend, @@ -135,11 +135,6 @@ .table-striped tbody tr:nth-child(2n+1) th { background-color: #111; } -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover { - color: var(--main-color); - background-color: #000; -} .b-admin-about .rl-logo { filter: drop-shadow(0 0 1px #FFF); diff --git a/vendors/bootstrap/less/navs.less b/vendors/bootstrap/less/navs.less index 3b0f7bcd0..c9a20ed95 100644 --- a/vendors/bootstrap/less/navs.less +++ b/vendors/bootstrap/less/navs.less @@ -26,56 +26,46 @@ // TABS // ------------- -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid #ddd; - white-space: nowrap; -} -// Make the list-items overlay the bottom border -.nav-tabs > li { - margin-bottom: -1px; - display: inline-block; -} -// Actual tabs (as links) -.nav-tabs > li > a { - color: #555; - padding-top: 8px 12px; - margin-right: 2px; - line-height: 14px; // keeps the overall height an even number - line-height: @baseLineHeight; - border: 1px solid transparent; - border-radius: 4px 4px 0 0; - padding: 5px; - &:hover { - border-color: @grayLighter @grayLighter #ddd; - } -} -// Active state, and it's :hover to override normal :hover -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; +.tabs { + display: grid; } +.tabs input[type="radio"] { + position: absolute; + top: 0; + left: -9999px; + display: none; +} + +// Actual tabs +.tabs label { + grid-row-start: 1; + color: #555; + margin: 0 2px -1px 0; + line-height: @baseLineHeight; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; + padding: 5px; + &:hover { + border-color: @grayLighter @grayLighter #ddd; + } +} +[id^="tab"]:checked + label { + color: @gray; + background-color: @white; + border-color: #ddd #ddd transparent #ddd; + z-index: 1; +} // TABBABLE // -------- - -// COMMON STYLES -// ------------- - .tab-content { - overflow: auto; // prevent content from running below tabs + grid-column-start: 1; + grid-row-start: 2; + visibility: hidden; } -// Show/hide tabbable areas -.tab-content > .tab-pane { - display: none; -} -.tab-content > .active { - display: block; +[id^="tab"]:checked + label + .tab-content { + visibility: visible; }