Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revamp tabs system using CSS display:grid instead of JavaScript

Browse source
This commit is contained in:
djmaze 2021-08-26 08:10:56 +02:00
parent fe4344794b
commit d7a30cba79
5 changed files with 85 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dev/Styles/User/Shortcuts.less
View file

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

26
dev/View/Popup/KeyboardShortcutsHelp.js
View file

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

66
snappymail/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html
View file

@ -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>

7
snappymail/v/0.0.0/themes/SquaresDark/styles.less
View file

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

76
vendors/bootstrap/less/navs.less vendored
View file

@ -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;
}