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 mobile including CSS flexbox for messageListItem

Browse source
This commit is contained in:
djmaze 2021-02-15 15:20:22 +01:00
parent 6238b97f08
commit 10f9ce39d9
70 changed files with 479 additions and 821 deletions
Download patch file Download diff file Expand all files Collapse all files

11
dev/View/User/MailBox/FolderList.js
View file

@ -1,8 +1,8 @@
import ko from 'ko';
import { Capa, KeyState } from 'Common/Enums';
import { Focused, Layout } from 'Common/EnumsUser';
import { leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
import { Focused } from 'Common/EnumsUser';
import { leftPanelDisabled, moveAction, Settings, isMobile } from 'Common/Globals';
import { mailBox, settings } from 'Common/Links';
import { setFolderHash } from 'Common/Cache';
@ -54,12 +54,9 @@ export class FolderListMailBoxUserView extends AbstractViewLeft {
onBuild(dom) {
const qs = s => dom.querySelector(s),
eqs = (ev, s) => ev.target.closestWithin(s, dom),
isMobile = Settings.app('mobile'),
fSelectFolder = (el, event, starred) => {
const isMove = moveAction();
if (isMobile) {
leftPanelDisabled(true);
}
isMobile() && leftPanelDisabled(true);
event.preventDefault();
@ -78,7 +75,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft {
event.ctrlKey
);
} else {
if (Layout.NoPreview === SettingsStore.layout()) {
if (!SettingsStore.usePreviewPane()) {
MessageStore.message(null);
}

23
dev/View/User/MailBox/MessageList.js
View file

@ -7,7 +7,6 @@ import {
} from 'Common/Enums';
import {
Layout,
Focused,
ComposeType,
FolderType,
@ -16,7 +15,7 @@ import {
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
import { doc, leftPanelDisabled, moveAction, Settings, isMobile } from 'Common/Globals';
import { computedPaginatorHelper } from 'Common/UtilsUser';
import { File } from 'Common/File';
@ -61,7 +60,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.iGoToUpUpOrDownDownTimeout = 0;
this.mobile = !!Settings.app('mobile');
this.newMoveToFolder = !!Settings.get('NewMoveToFolder');
this.allowReload = !!Settings.capa(Capa.Reload);
@ -125,11 +123,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.sLastSearchValue = '';
this.addComputables({
messageListItemTemplate: () =>
this.mobile || Layout.SidePreview === SettingsStore.layout()
? 'MailMessageListItem'
: 'MailMessageListItemNoPreviewPane',
messageListSearchDesc: () => {
const value = MessageStore.messageListEndSearch();
return value ? i18n('MESSAGE_LIST/SEARCH_RESULT_FOR', { 'SEARCH': value }) : ''
@ -179,9 +172,9 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
isUnSpamVisible: () =>
this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
mobileCheckedStateShow: () => this.mobile ? 0 < MessageStore.messageListChecked().length : true,
mobileCheckedStateShow: () => isMobile() ? 0 < MessageStore.messageListChecked().length : true,
mobileCheckedStateHide: () => this.mobile ? !MessageStore.messageListChecked().length : true,
mobileCheckedStateHide: () => isMobile() ? !MessageStore.messageListChecked().length : true,
messageListFocused: () => Focused.MessageList === AppStore.focusedState()
});
@ -388,7 +381,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
return false;
});
if (Layout.NoPreview === SettingsStore.layout() && !this.message()) {
if (!SettingsStore.usePreviewPane() && !this.message()) {
this.selector.iFocusedNextHelper = up ? -1 : 1;
} else {
this.selector.iSelectNextHelper = up ? -1 : 1;
@ -405,8 +398,8 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
useAutoSelect() {
return !this.messageListDisableAutoSelect()
&& !/is:unseen/.test(this.mainMessageListSearch())
&& Layout.NoPreview !== SettingsStore.layout();
&& !/is:unseen/.test(this.mainMessageListSearch())
&& SettingsStore.usePreviewPane();
}
searchEnterAction() {
@ -680,7 +673,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.selector.init(dom.querySelector('.b-content'), KeyState.MessageList);
dom.addEventListener('click', event => {
this.mobile && leftPanelDisabled(true);
isMobile() && leftPanelDisabled(true);
if (eqs(event, '.messageList .b-message-list-wrapper') && Focused.MessageView === AppStore.focusedState()) {
AppStore.focusedState(Focused.MessageList);
@ -706,7 +699,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.initUploaderForAppend();
this.initShortcuts();
if (!rl.settings.app('mobile') && Settings.capa(Capa.Prefetch)) {
if (!isMobile() && Settings.capa(Capa.Prefetch)) {
ifvisible.idle(this.prefetchNextTick.bind(this));
}
}

19
dev/View/User/MailBox/MessageView.js
View file

@ -12,11 +12,10 @@ import {
ClientSideKeyName,
FolderType,
Focused,
Layout,
MessageSetAction
} from 'Common/EnumsUser';
import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings, isMobile } from 'Common/Globals';
import { inFocus } from 'Common/Utils';
import { mailToHelper } from 'Common/UtilsUser';
@ -86,8 +85,6 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
this.allowMessageActions = !!Settings.capa(Capa.MessageActions);
this.allowMessageListActions = !!Settings.capa(Capa.MessageListActions);
this.mobile = !!Settings.app('mobile');
this.attachmentsActions = AppStore.attachmentsActions;
this.message = MessageStore.message;
@ -287,14 +284,14 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
@command((self) => !self.messageListAndMessageViewLoading())
goUpCommand() {
dispatchEvent(new CustomEvent('mailbox.message-list.selector.go-up',
{detail:Layout.NoPreview === this.layout() ? !!this.message() : true}
{detail:SettingsStore.usePreviewPane() || !!this.message()}
));
}
@command((self) => !self.messageListAndMessageViewLoading())
goDownCommand() {
dispatchEvent(new CustomEvent('mailbox.message-list.selector.go-down',
{detail:Layout.NoPreview === this.layout() ? !!this.message() : true}
{detail:SettingsStore.usePreviewPane() || !!this.message()}
));
}
@ -408,7 +405,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
this.oHeaderDom = dom.querySelector('.messageItemHeader');
if (this.oHeaderDom) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.throttle(50).bind(this));
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
}
this.resizeObserver.observe(this.oHeaderDom);
} else if (this.resizeObserver) {
@ -417,7 +414,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
dom.addEventListener('click', event => {
this.mobile && leftPanelDisabled(true);
isMobile() && leftPanelDisabled(true);
let el = eqs(event, 'a');
if (el) {
@ -506,7 +503,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
*/
escShortcuts() {
if (this.viewModelVisible && this.message()) {
const preview = Layout.NoPreview !== this.layout();
const preview = SettingsStore.usePreviewPane();
if (this.fullScreenMode()) {
this.fullScreenMode(false);
@ -616,7 +613,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
// change focused state
shortcuts.add('arrowleft', '', KeyState.MessageView, () => {
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
if (!this.fullScreenMode() && this.message() && SettingsStore.usePreviewPane()) {
if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft) {
return true;
}
@ -626,7 +623,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
});
// shortcuts.add('tab', 'shift', KeyState.MessageView, (event, handler) => {
shortcuts.add('tab', '', KeyState.MessageView, () => {
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
if (!this.fullScreenMode() && this.message() && SettingsStore.usePreviewPane()) {
AppStore.focusedState(Focused.MessageList);
}
return false;