Revamp tabs system using CSS display:grid instead of JavaScript

dev/Styles/User/Shortcuts.less

@@ -6,4 +6,8 @@
 	td[class^="icon-"] {
 		display: table-cell;
 	}
+
+	.tab-content {
+		grid-column-end: 6;
+	}
 }

dev/View/Popup/KeyboardShortcutsHelp.js

@@ -9,25 +9,8 @@ export class KeyboardShortcutsHelpPopupView extends AbstractViewPopup {
 	}
 
 	onBuild(dom) {
-		const tabs = dom.querySelectorAll('.nav.nav-tabs > li'),
+		const tabs = dom.querySelectorAll('.tabs input'),
-			last = tabs.length - 1,
+			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);
-			});
-		});
 
 //		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 {
 						}
 					}
 				});
-
+				tabs[next].checked = true;
-				show(tabs[next]);
 				return false;
 			}
 		);

snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html

@@ -4,23 +4,19 @@
 		<h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>
 	</div>
 	<div class="modal-body">
-		<ul class="nav nav-tabs" style="min-width:400px;">
-			<li class="active">
-				<a data-i18n="SHORTCUTS_HELP/TAB_MAILBOX" href="#mailbox-shortcuts-id" data-toggle="tab"></a>
-			</li>
-			<li>
-				<a data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST" href="#message-list-shortcuts-id" data-toggle="tab"></a>
-			</li>
-			<li>
-				<a data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW" href="#message-view-shortcuts-id" data-toggle="tab"></a>
-			</li>
-			<li>
-				<a data-i18n="SHORTCUTS_HELP/TAB_COMPOSE" href="#compose-shortcuts-id" data-toggle="tab"></a>
-			</li>
-		</ul>
-		<div class="tab-content" style="margin-left:0;min-width:400px;">
-			<div class="tab-pane active" id="mailbox-shortcuts-id">
 
+		<div class="tabs">
+
+			<input type="radio" name="helptabs" id="tab-help1" checked />
+			<label for="tab-help1"
+				role="tab"
+				aria-selected="true"
+				aria-controls="panel1"
+				tabindex="0"
+				data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label>
+			<div class="tab-content"
+					role="tabpanel"
+					aria-hidden="false">
 				<table class="table table-striped table-bordered">
 				<tbody>
 					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr>
@@ -31,10 +27,18 @@
 					<tr><td class="icon-help"></td><td data-i18n="SHORTCUTS_HELP/LABEL_HELP"></td><td>F1, Help</td></tr>
 				</tbody>
 				</table>
-
 			</div>
-			<div class="tab-pane" id="message-list-shortcuts-id">
 
+			<input type="radio" name="helptabs" id="tab-help2" />
+			<label for="tab-help2"
+				role="tab"
+				aria-selected="false"
+				aria-controls="panel2"
+				tabindex="0"
+				 data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
+			<div class="tab-content"
+					role="tabpanel"
+					aria-hidden="true">
 				<table class="table table-striped table-bordered">
 				<tbody>
 					<tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
@@ -52,10 +56,18 @@
 					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_FOLDER_LIST"></td><td>←, Shift + Tab</td></tr>
 				</tbody>
 				</table>
-
 			</div>
-			<div class="tab-pane" id="message-view-shortcuts-id">
 
+			<input type="radio" name="helptabs" id="tab-help3" />
+			<label for="tab-help3"
+				role="tab"
+				aria-selected="false"
+				aria-controls="panel3"
+				tabindex="0"
+				 data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
+			<div class="tab-content"
+					role="tabpanel"
+					aria-hidden="true">
 				<table class="table table-striped table-bordered">
 				<tbody>
 					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr>
@@ -66,10 +78,18 @@
 					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_LIST"></td><td>Shift + Tab, Esc</td></tr>
 				</tbody>
 				</table>
-
 			</div>
-			<div class="tab-pane" id="compose-shortcuts-id">
 
+			<input type="radio" name="helptabs" id="tab-help4" />
+			<label for="tab-help4"
+				role="tab"
+				aria-selected="false"
+				aria-controls="panel4"
+				tabindex="0"
+				 data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
+			<div class="tab-content"
+					role="tabpanel"
+					aria-hidden="true">
 				<table class="table table-striped table-bordered">
 				<tbody>
 					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_COMPOSE_POPUP"></td><td>W, C, New</td></tr>
@@ -80,8 +100,8 @@
 					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_CLOSE_COMPOSE"></td><td>Shift + Esc, Shift + Close</td></tr>
 				</tbody>
 				</table>
+			</div>
 
 		</div>
 	</div>
 </div>
-</div>

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);

vendors/bootstrap/less/navs.less

@@ -26,22 +26,22 @@
 // TABS
 // -------------
 
-// Give the tabs something to sit on
+.tabs {
-.nav-tabs {
+    display: grid;
-  border-bottom: 1px solid #ddd;
-  white-space: nowrap;
 }
-// Make the list-items overlay the bottom border
+
-.nav-tabs > li {
+.tabs input[type="radio"] {
-  margin-bottom: -1px;
+	position: absolute;
-  display: inline-block;
+	top: 0;
+	left: -9999px;
+	display: none;
 }
-// Actual tabs (as links)
+
-.nav-tabs > li > a {
+// Actual tabs
+.tabs label {
+	grid-row-start: 1;
 	color: #555;
-  padding-top: 8px 12px;
+	margin: 0 2px -1px 0;
-  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;
@@ -50,32 +50,22 @@
 		border-color: @grayLighter @grayLighter #ddd;
 	}
 }
-// Active state, and it's :hover to override normal :hover
+[id^="tab"]:checked + label {
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
 	color: @gray;
 	background-color: @white;
-  border: 1px solid #ddd;
+	border-color: #ddd #ddd transparent #ddd;
-  border-bottom-color: transparent;
+	z-index: 1;
-  cursor: default;
 }
 
-
 // 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
+[id^="tab"]:checked + label + .tab-content {
-.tab-content > .tab-pane {
+	visibility: visible;
-  display: none;
-}
-.tab-content > .active {
-  display: block;
 }