Cleanup and improve HTML/CSS and it's JavaScript handling

This commit is contained in:
djmaze 2021-11-06 12:27:37 +01:00
parent 6273869b32
commit 2e34f98c80
26 changed files with 516 additions and 598 deletions

View file

@ -20,12 +20,6 @@ class PaneSettingsAdminView extends AbstractViewRight {
.computed(() => PackageAdminStore.loading() ? 'visible' : 'hidden');
}
toggleLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(!leftPanelDisabled());
}
logoutClick() {
Remote.adminLogout(() => rl.logoutReload());
}

View file

@ -10,7 +10,6 @@ import { AppUserStore } from 'Stores/User/App';
import { SettingsUserStore } from 'Stores/User/Settings';
import { FolderUserStore } from 'Stores/User/Folder';
import { MessageUserStore } from 'Stores/User/Message';
import { ThemeStore } from 'Stores/Theme';
import { showScreenPopup } from 'Knoin/Knoin';
import { AbstractViewLeft } from 'Knoin/AbstractViews';
@ -40,8 +39,6 @@ export class MailFolderList extends AbstractViewLeft {
this.allowContacts = AppUserStore.allowContacts();
addComputablesTo(this, {
folderListFocused: () => Scope.FolderList === AppUserStore.focusedState(),
folderListVisible: () => {
let multiple = false,
inbox, visible,
@ -85,7 +82,6 @@ export class MailFolderList extends AbstractViewLeft {
el = eqs(event, 'a');
if (el && el.matches('.selectable')) {
ThemeStore.isMobile() && leftPanelDisabled(true);
event.preventDefault();
const folder = ko.dataFor(el);
if (folder) {
@ -120,7 +116,7 @@ export class MailFolderList extends AbstractViewLeft {
shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => {
let items = [], index = 0;
dom.querySelectorAll('.b-folders li a:not(.hidden)').forEach(node => {
dom.querySelectorAll('li a:not(.hidden)').forEach(node => {
if (node.offsetHeight || node.getClientRects().length) {
items.push(node);
if (node.matches('.focused')) {
@ -143,7 +139,7 @@ export class MailFolderList extends AbstractViewLeft {
});
shortcuts.add('enter,open', '', Scope.FolderList, () => {
const item = qs('.b-folders li a:not(.hidden).focused');
const item = qs('li a:not(.hidden).focused');
if (item) {
AppUserStore.focusedState(Scope.MessageList);
item.click();
@ -153,7 +149,7 @@ export class MailFolderList extends AbstractViewLeft {
});
shortcuts.add('space', '', Scope.FolderList, () => {
const item = qs('.b-folders li a:not(.hidden).focused'),
const item = qs('li a:not(.hidden).focused'),
folder = item && ko.dataFor(item);
if (folder) {
const collapsed = folder.collapsed();
@ -172,10 +168,10 @@ export class MailFolderList extends AbstractViewLeft {
});
AppUserStore.focusedState.subscribe(value => {
let el = qs('.b-folders li a.focused');
let el = qs('li a.focused');
el && el.classList.remove('focused');
if (Scope.FolderList === value) {
el = qs('.b-folders li a.selected');
el = qs('li a.selected');
el && el.classList.add('focused');
}
});

View file

@ -69,9 +69,10 @@ export class MailMessageList extends AbstractViewRight {
);
this.composeInEdit = AppUserStore.composeInEdit;
this.isMobile = ThemeStore.isMobile;
this.leftPanelDisabled = leftPanelDisabled;
this.isMessageSelected = MessageUserStore.isMessageSelected;
this.messageListSearch = MessageUserStore.listSearch;
this.messageListError = MessageUserStore.listError;
@ -167,8 +168,6 @@ export class MailMessageList extends AbstractViewRight {
mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessageUserStore.listChecked().length : true,
messageListFocused: () => Scope.MessageList === AppUserStore.focusedState(),
sortText: () => {
let mode = FolderUserStore.sortMode(),
desc = '' === mode || mode.includes('REVERSE');
@ -338,20 +337,6 @@ export class MailMessageList extends AbstractViewRight {
}
}
hideLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(true);
}
showLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(false);
}
composeClick() {
showMessageComposer();
}
@ -683,14 +668,14 @@ export class MailMessageList extends AbstractViewRight {
}
onBuild(dom) {
const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom);
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
this.selector.init(dom.querySelector('.b-content'), Scope.MessageList);
dom.addEventListener('click', event => {
ThemeStore.isMobile() && leftPanelDisabled(true);
ThemeStore.isMobile() && !eqs(event, '.toggleLeft') && leftPanelDisabled(true);
if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
if (eqs(event, '.messageList') && Scope.MessageView === AppUserStore.focusedState()) {
AppUserStore.focusedState(Scope.MessageList);
}

View file

@ -81,7 +81,6 @@ export class MailMessageView extends AbstractViewRight {
this.hasCheckedMessages = MessageUserStore.hasCheckedMessages;
this.messageLoadingThrottle = MessageUserStore.messageLoading;
this.messagesBodiesDom = MessageUserStore.messagesBodiesDom;
this.isMessageSelected = MessageUserStore.isMessageSelected;
this.messageActiveDom = MessageUserStore.messageActiveDom;
this.messageError = MessageUserStore.messageError;
@ -177,8 +176,6 @@ export class MailMessageView extends AbstractViewRight {
return '';
},
messageFocused: () => Scope.MessageView === AppUserStore.focusedState(),
messageListAndMessageViewLoading:
() => MessageUserStore.listCompleteLoading() || MessageUserStore.messageLoading()
});

View file

@ -4,8 +4,6 @@ import { getFolderInboxName } from 'Common/Cache';
import { AbstractViewLeft } from 'Knoin/AbstractViews';
import { ThemeStore } from 'Stores/Theme';
export class MenuSettingsUserView extends AbstractViewLeft {
/**
* @param {Object} screen
@ -18,14 +16,6 @@ export class MenuSettingsUserView extends AbstractViewLeft {
this.menu = screen.menu;
}
onBuild(dom) {
dom.addEventListener('click', event =>
ThemeStore.isMobile()
&& event.target.closestWithin('.b-settins-left nav a', dom)
&& leftPanelDisabled(true)
);
}
link(route) {
return settings(route);
}

View file

@ -11,6 +11,7 @@ export class PaneSettingsUserView extends AbstractViewRight {
constructor() {
super('SettingsPane');
this.isMobile = ThemeStore.isMobile;
this.leftPanelDisabled = leftPanelDisabled;
}
@ -18,22 +19,10 @@ export class PaneSettingsUserView extends AbstractViewRight {
MessageUserStore.message(null);
}
hideLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(true);
}
showLeft(item, event) {
event.preventDefault();
event.stopPropagation();
leftPanelDisabled(false);
}
onBuild(dom) {
dom.addEventListener('click', () => ThemeStore.isMobile() && leftPanelDisabled(true));
dom.addEventListener('click', () =>
ThemeStore.isMobile() && !event.target.closestWithin('.toggleLeft', dom) && leftPanelDisabled(true)
);
}
backToMailBoxClick() {