From 6ae38bfe1b7b4ab149badf93ddef247a6d08129e Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Tue, 16 Nov 2021 13:15:02 +0100
Subject: [PATCH] Improved mobile view

---
 dev/Common/UtilsUser.js              | 13 +++++++++++++
 dev/Styles/Main.less                 |  4 ----
 dev/Styles/User/SquireUI.less        |  6 +-----
 dev/View/Popup/Compose.js            | 22 +++++++---------------
 dev/View/User/MailBox/MessageView.js | 16 +++-------------
 5 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js
index 237792465..684646803 100644
--- a/dev/Common/UtilsUser.js
+++ b/dev/Common/UtilsUser.js
@@ -401,6 +401,19 @@ showMessageComposer = (params = []) =>
 	rl.app.showMessageComposer(params);
 },
 
+initFullscreen = (el, fn) =>
+{
+	let event = 'fullscreenchange';
+	if (!el.requestFullscreen && el.webkitRequestFullscreen) {
+		el.requestFullscreen = el.webkitRequestFullscreen;
+		event = 'webkit'+event;
+	}
+	if (el.requestFullscreen) {
+		el.addEventListener(event, fn);
+		return el;
+	}
+},
+
 setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
 {
 	if (source.layoutResizer && source.layoutResizer.mode != mode) {
diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less
index e32b429ea..8e2ff5271 100644
--- a/dev/Styles/Main.less
+++ b/dev/Styles/Main.less
@@ -25,10 +25,6 @@ html.list-loading body {
 	cursor: progress;
 }
 
-html:not(.rl-mobile) {
-	min-width: 700px;
-}
-
 @media screen and (min-width: 1000px) {
 	body {
 		background-image: var(--main-bg-image);
diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less
index a58c0d69a..e31421482 100644
--- a/dev/Styles/User/SquireUI.less
+++ b/dev/Styles/User/SquireUI.less
@@ -178,12 +178,8 @@ Secondly, we can't rely on MUA's what to do with :empty
 	}
 }
 
-.rl-mobile #V-PopupsCompose,
-.rl-mobile #V-PopupsIdentity {
-	margin-bottom: 50px;
-}
 .rl-mobile #V-PopupsCompose {
-	min-height: calc(100% - 62px);
+	min-height: calc(100% - 12px);
 }
 
 #V-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js
index e25b8bc1f..9a500eb37 100644
--- a/dev/View/Popup/Compose.js
+++ b/dev/View/Popup/Compose.js
@@ -13,7 +13,7 @@ import {
 } from 'Common/EnumsUser';
 
 import { inFocus, pInt, isArray, arrayLength } from 'Common/Utils';
-import { delegateRunOnDestroy } from 'Common/UtilsUser';
+import { delegateRunOnDestroy, initFullscreen } from 'Common/UtilsUser';
 import { encodeHtml, HtmlEditor } from 'Common/Html';
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
@@ -1243,20 +1243,12 @@ class ComposePopupView extends AbstractViewPopup {
 
 		// 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) {
-			this.oContent = el;
-			el.addEventListener(event, () =>
-				ThemeStore.isMobile()
-				&& this.modalVisibility()
-				&& (getFullscreenElement() !== el)
-				&& this.skipCommand()
-			);
-		}
+		this.oContent = initFullscreen(el, () =>
+			ThemeStore.isMobile()
+			&& this.modalVisibility()
+			&& (getFullscreenElement() !== el)
+			&& this.skipCommand()
+		);
 	}
 
 	/**
diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js
index 58c679040..608248a08 100644
--- a/dev/View/User/MailBox/MessageView.js
+++ b/dev/View/User/MailBox/MessageView.js
@@ -17,7 +17,7 @@ import {
 import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings, getFullscreenElement, exitFullscreen } from 'Common/Globals';
 
 import { arrayLength, inFocus } from 'Common/Utils';
-import { mailToHelper, showMessageComposer } from 'Common/UtilsUser';
+import { mailToHelper, showMessageComposer, initFullscreen } from 'Common/UtilsUser';
 
 import { SMAudio } from 'Common/Audio';
 
@@ -307,18 +307,8 @@ export class MailMessageView extends AbstractViewRight {
 
 		this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
 
-		let event = 'fullscreenchange',
-			el = dom.querySelector('.b-content');
-		if (!el.requestFullscreen && el.webkitRequestFullscreen) {
-			el.requestFullscreen = el.webkitRequestFullscreen;
-			event = 'webkit'+event;
-		}
-		if (el.requestFullscreen) {
-			this.oContent = el;
-			el.addEventListener(event, () =>
-				this.fullScreenMode(getFullscreenElement() === el)
-			);
-		}
+		const el = dom.querySelector('.b-content');
+		this.oContent = initFullscreen(el, () => this.fullScreenMode(getFullscreenElement() === el));
 
 		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
 		dom.addEventListener('click', event => {