From bf9b47ce851f99b7913b3ab7e2d9260878a6bff1 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Thu, 15 Jul 2021 21:01:41 +0200
Subject: [PATCH] Added: compose window on mobile use Fullscreen API

---
 dev/Styles/Compose.less       |  7 +++++++
 dev/Styles/_BootstrapFix.less |  2 +-
 dev/View/Popup/Compose.js     | 36 +++++++++++++++++++++++++++++------
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/dev/Styles/Compose.less b/dev/Styles/Compose.less
index 9caa115e8..c07114a90 100644
--- a/dev/Styles/Compose.less
+++ b/dev/Styles/Compose.less
@@ -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;
diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less
index 460157a94..dad250ce5 100644
--- a/dev/Styles/_BootstrapFix.less
+++ b/dev/Styles/_BootstrapFix.less
@@ -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 {
diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js
index 62736cf04..6fbbca82b 100644
--- a/dev/View/Popup/Compose.js
+++ b/dev/View/Popup/Compose.js
@@ -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()
+			);
+		}
 	}
 
 	/**