From 4e477e15892b2b3150413413725e911974a74f09 Mon Sep 17 00:00:00 2001
From: Pedro Pinto Silva <pedro.silva@collabora.com>
Date: Mon, 3 May 2021 12:45:45 +0200
Subject: [PATCH] Welcome dialog: do not mix desktop and mobile plus styling

- Fix problem introduced with d0253673a6e151661806b52f7c5e4bca7fe4fbcf
  - Desktop was always without close button

- Add mobile specific class
  - So we can style it apart from desktop
  - So we can style it apart from mobile(other dialogs)

- Mobile: fix padding (remove for child element)
  - So we can use more efficient the horizontal space

- Mobile: Dismiss button
  - Make it full width

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Icb6a5a0a4191b39ecf76eaafac06e182430490d0
---
 loleaflet/css/device-mobile.css  |  8 ++++++++
 loleaflet/src/control/Toolbar.js | 12 ++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index c6f718a9c..e474fcb8c 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -372,6 +372,14 @@ button.vex-dialog-button-secondary.vex-dialog-button.vex-last {
 	padding-top: 160px !important;
 	padding-bottom: 160px !important;
 }
+/* Vex: Welcome dialog */
+.vex-welcome-mobile .vex-dialog-form .vex-content {
+	padding: 0;
+}
+
+.vex-welcome-mobile .vex-dialog-button-primary {
+	width: 100%;
+}
 
 /* Related to toolbar.css */
 .insertshape-grid {
diff --git a/loleaflet/src/control/Toolbar.js b/loleaflet/src/control/Toolbar.js
index d3214e791..80d8d737c 100644
--- a/loleaflet/src/control/Toolbar.js
+++ b/loleaflet/src/control/Toolbar.js
@@ -533,6 +533,7 @@ L.Map.include({
 		var w;
 		var iw = window.innerWidth;
 		var hasDismissBtn = window.enableWelcomeMessageButton;
+		var btnText = 'I understand the risks';
 
 		if (iw < 768) {
 			w = iw - 30;
@@ -554,20 +555,23 @@ L.Map.include({
 			containerDiv += data;
 			containerDiv += '</div>';
 			data = containerDiv;
+			btnText = 'Dismiss';
+			hasDismissBtn = true;
 		}
 
 		// show the dialog
 		var map = this;
 		vex.dialog.open({
 			unsafeMessage: data,
-			showCloseButton: (!hasDismissBtn && !window.mode.isMobile()),
+			showCloseButton: !hasDismissBtn,
 			escapeButtonCloses: false,
 			overlayClosesOnClick: false,
+			className: 'vex-theme-plain vex-welcome-mobile',
 			closeAllOnPopState: false,
 			focusFirstInput: false, // Needed to avoid auto-scroll to the bottom
-			buttons: (window.mode.isMobile() && !hasDismissBtn) ? [
-				$.extend({}, vex.dialog.buttons.YES, { text: _('Dismiss') }),
-			] : {},
+			buttons: !hasDismissBtn ? {} : [
+				$.extend({}, vex.dialog.buttons.YES, { text: _(btnText) }),
+			],
 			afterOpen: function() {
 				var $vexContent = $(this.contentEl);
 				this.contentEl.style.width = w + 'px';