Added: compose window on mobile use Fullscreen API

This commit is contained in:
djmaze 2021-07-15 21:01:41 +02:00
parent 6e41f19b02
commit bf9b47ce85
3 changed files with 38 additions and 7 deletions

View file

@ -144,6 +144,13 @@
} }
} }
@media screen and (max-width: 999px) {
.b-compose.modal {
border: 0;
width: 100%;
}
}
.minimize-custom { .minimize-custom {
border: 0 solid #333; border: 0 solid #333;
border-bottom-width: 3px; border-bottom-width: 3px;

View file

@ -61,7 +61,7 @@ label.inline, span.inline {
@media screen and (max-width: 999px) { @media screen and (max-width: 999px) {
.modal { .modal {
width: calc(~'100% - 20px') !important; width: calc(100% - 20px);
} }
.form-horizontal { .form-horizontal {

View file

@ -21,7 +21,7 @@ import { serverRequest } from 'Common/Links';
import { i18n, getNotification, getUploadErrorDescByCode } from 'Common/Translator'; import { i18n, getNotification, getUploadErrorDescByCode } from 'Common/Translator';
import { timestampToString } from 'Common/Momentor'; import { timestampToString } from 'Common/Momentor';
import { MessageFlagsCache, setFolderHash } from 'Common/Cache'; import { MessageFlagsCache, setFolderHash } from 'Common/Cache';
import { Settings, SettingsGet } from 'Common/Globals'; import { doc, Settings, SettingsGet } from 'Common/Globals';
import { AppUserStore } from 'Stores/User/App'; import { AppUserStore } from 'Stores/User/App';
import { SettingsUserStore } from 'Stores/User/Settings'; import { SettingsUserStore } from 'Stores/User/Settings';
@ -43,6 +43,8 @@ import { AskPopupView } from 'View/Popup/Ask';
import { ContactsPopupView } from 'View/Popup/Contacts'; import { ContactsPopupView } from 'View/Popup/Contacts';
import { ComposeOpenPgpPopupView } from 'View/Popup/ComposeOpenPgp'; import { ComposeOpenPgpPopupView } from 'View/Popup/ComposeOpenPgp';
import { ThemeStore } from 'Stores/Theme';
const const
/** /**
* @param {string} prefix * @param {string} prefix
@ -432,7 +434,7 @@ class ComposePopupView extends AbstractViewPopup {
|| getNotification(Notification.CantSendMessage)); || getNotification(Notification.CantSendMessage));
} }
} else { } else {
this.closeCommand && this.closeCommand(); this.closeCommand();
} }
} }
this.reloadDraftFolder(); this.reloadDraftFolder();
@ -643,6 +645,8 @@ class ComposePopupView extends AbstractViewPopup {
rl.route.on(); rl.route.on();
this.resizeObserver.disconnect(); this.resizeObserver.disconnect();
(doc.fullscreenElement || doc.webkitFullscreenElement) === this.oContent && doc.exitFullscreen();
} }
editor(fOnInit) { editor(fOnInit) {
@ -739,6 +743,8 @@ class ComposePopupView extends AbstractViewPopup {
} else { } else {
this.initOnShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText); this.initOnShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText);
} }
ThemeStore.isMobile() && this.oContent.requestFullscreen && this.oContent.requestFullscreen();
} }
/** /**
@ -1062,14 +1068,12 @@ class ComposePopupView extends AbstractViewPopup {
tryToClosePopup() { tryToClosePopup() {
if (!isPopupVisible(AskPopupView) && this.modalVisibility()) { if (!isPopupVisible(AskPopupView) && this.modalVisibility()) {
if (this.bSkipNextHide || (this.isEmptyForm() && !this.draftUid())) { if (this.bSkipNextHide || (this.isEmptyForm() && !this.draftUid())) {
this.closeCommand && this.closeCommand(); this.closeCommand();
} else { } else {
showScreenPopup(AskPopupView, [ showScreenPopup(AskPopupView, [
i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'), i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'),
() => { () => {
if (this.modalVisibility()) { this.modalVisibility() && this.closeCommand();
this.closeCommand && this.closeCommand();
}
} }
]); ]);
} }
@ -1135,6 +1139,26 @@ class ComposePopupView extends AbstractViewPopup {
ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')]; ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
this.editor(editor => editor.modeWysiwyg()); this.editor(editor => editor.modeWysiwyg());
// Fullscreen must be on app, else other popups fail
const el = doc.getElementById('rl-app');
let event = 'fullscreenchange';
if (!el.requestFullscreen && el.webkitRequestFullscreen) {
el.requestFullscreen = el.webkitRequestFullscreen;
event = 'webkit' + event;
}
if (el.requestFullscreen) {
if (!doc.exitFullscreen && doc.webkitExitFullscreen) {
doc.exitFullscreen = doc.webkitExitFullscreen;
}
this.oContent = el;
el.addEventListener(event, () =>
ThemeStore.isMobile()
&& this.modalVisibility()
&& (doc.fullscreenElement || doc.webkitFullscreenElement) !== el
&& this.skipCommand()
);
}
} }
/** /**