Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 20:19:22 +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;
}
);