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 {
border: 0 solid #333;
border-bottom-width: 3px;

View file

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

View file

@ -21,7 +21,7 @@ import { serverRequest } from 'Common/Links';
import { i18n, getNotification, getUploadErrorDescByCode } from 'Common/Translator';
import { timestampToString } from 'Common/Momentor';
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 { SettingsUserStore } from 'Stores/User/Settings';
@ -43,6 +43,8 @@ import { AskPopupView } from 'View/Popup/Ask';
import { ContactsPopupView } from 'View/Popup/Contacts';
import { ComposeOpenPgpPopupView } from 'View/Popup/ComposeOpenPgp';
import { ThemeStore } from 'Stores/Theme';
const
/**
* @param {string} prefix
@ -432,7 +434,7 @@ class ComposePopupView extends AbstractViewPopup {
|| getNotification(Notification.CantSendMessage));
}
} else {
this.closeCommand && this.closeCommand();
this.closeCommand();
}
}
this.reloadDraftFolder();
@ -643,6 +645,8 @@ class ComposePopupView extends AbstractViewPopup {
rl.route.on();
this.resizeObserver.disconnect();
(doc.fullscreenElement || doc.webkitFullscreenElement) === this.oContent && doc.exitFullscreen();
}
editor(fOnInit) {
@ -739,6 +743,8 @@ class ComposePopupView extends AbstractViewPopup {
} else {
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() {
if (!isPopupVisible(AskPopupView) && this.modalVisibility()) {
if (this.bSkipNextHide || (this.isEmptyForm() && !this.draftUid())) {
this.closeCommand && this.closeCommand();
this.closeCommand();
} else {
showScreenPopup(AskPopupView, [
i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'),
() => {
if (this.modalVisibility()) {
this.closeCommand && this.closeCommand();
}
this.modalVisibility() && this.closeCommand();
}
]);
}
@ -1135,6 +1139,26 @@ class ComposePopupView extends AbstractViewPopup {
ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
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()
);
}
}
/**