Document has been changed: Fix for mobile n add cancel btn

- Generate cancel button but only show it on mobile
- Hide dialog's top corner close button on mobile
- If Saving to a new file is new file is not possible then set cancel
as primary button

- Fix mobile vex dialogs layout
- Make sure the elements are spaced out so the buttons are aligned to
the bottom of the screen making it easier to reach on mobile. This
happens only if the dialog doe not have input fields;
- Make sure all the vex dialogs that have input fields are not affected
by this change. why? Because interacting with input fields triggers
the on screen keyboard and this these dialogs do benefit from having
the btns aligned to the top together with their content.

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I5e28d5c2e9169f59caff0422a541bce5b17f10d7

6 files changed, 59 insertions, 8 deletions

diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index ff0ad1d95b..6a2dbf731a 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -289,7 +289,14 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	border: none;
 	box-shadow: none;
 	border-radius: none;
+	display: flex;
+}
+.vex.vex-theme-plain .vex-content:not(.vex-has-inputs) .vex-dialog-form {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
+
 .vex.vex-theme-plain {
 	padding: 0px !important;
 }
@@ -342,6 +349,22 @@ button.vex-dialog-button-secondary.vex-dialog-button.vex-last {
 .vex-welcome-mobile .vex-dialog-button-primary {
 	width: 100%;
 }
+/* Vex: Document document conflict */
+.vex.vex-theme-plain .vex-dialog-button-spacer {
+	min-height: 24px !important;
+}
+
+.vex-content.vex-3btns .vex-dialog-buttons {
+	flex-direction: column !important;
+}
+
+.vex-close {
+	display: none;
+}
+
+.vex-content.vex-3btns .vex-dialog-buttons .vex-dialog-button-cancel {
+	display: flex !important;
+}
 
 /* Related to toolbar.css */
 .insertshape-grid {
diff --git a/browser/css/override-vex.css b/browser/css/override-vex.css
index 73364a857b..0c6872b87a 100644
--- a/browser/css/override-vex.css
+++ b/browser/css/override-vex.css
@@ -98,6 +98,10 @@
 	font-size: 1.1em;
 }
 
+.vex-content.vex-3btns .vex-dialog-buttons .vex-dialog-button-cancel {
+	display: none;
+}
+
 .vex.vex-theme-plain .vex-content{
 	border: 1px solid #a4a4a4;
 	box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
diff --git a/browser/src/control/Control.Tabs.js b/browser/src/control/Control.Tabs.js
index 705d9b9888..a6a23ffddf 100644
--- a/browser/src/control/Control.Tabs.js
+++ b/browser/src/control/Control.Tabs.js
@@ -317,6 +317,7 @@ L.Control.Tabs = L.Control.extend({
 		var map = this._map;
 		var nPos = this._tabForContextMenu;
 		vex.dialog.open({
+			contentClassName: 'vex-has-inputs',
 			message: _('Enter new sheet name'),
 			buttons: [
 				$.extend({}, vex.dialog.buttons.YES, { text: _('OK') }),
diff --git a/browser/src/control/Signing.js b/browser/src/control/Signing.js
index ef52a1ec65..ed13f37622 100644
--- a/browser/src/control/Signing.js
+++ b/browser/src/control/Signing.js
@@ -192,6 +192,7 @@ function vereignLoadIdentity(selectedIdentityKey, pincode) {
 
 function vereignPinCodeDialog(selectedIdentityKey) {
 	vex.dialog.open({
+		contentClassName: 'vex-has-inputs',
 		message: _('Please enter the PIN Code'),
 		input: '<input name="pincode" type="password" value="" required />',
 		callback: function(data) {
@@ -293,6 +294,7 @@ function vereignRecoverFromEmailDialog() {
 		return;
 	}
 	vex.dialog.open({
+		contentClassName: 'vex-has-inputs',
 		message: _('Login from email or mobile number'),
 		input: '<input name="emailOrMobileNumber" type="text" value="" required />',
 		callback: function(data) {
@@ -326,6 +328,7 @@ function vereignSignAndUploadDocument() {
 		return;
 	}
 	vex.dialog.open({
+		contentClassName: 'vex-has-inputs',
 		message: _('Select document type to upload'),
 		input: _('Type:') + '<select name="selection"><option value="ODT">ODT</option><option value="DOCX">DOCX</option><option value="PDF">PDF</option></select>',
 		callback: function(data) {
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index 8918c5239e..3ca53788cb 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -881,7 +881,7 @@ L.Map.include({
 		}
 
 		vex.dialog.open({
-			contentClassName: 'hyperlink-dialog',
+			contentClassName: 'hyperlink-dialog vex-has-inputs',
 			message: _('Insert hyperlink'),
 			overlayClosesOnClick: false,
 			input: [
diff --git a/browser/src/core/Socket.js b/browser/src/core/Socket.js
index af2efcf601..c6423630c0 100644
--- a/browser/src/core/Socket.js
+++ b/browser/src/core/Socket.js
@@ -840,13 +840,32 @@ app.definitions.Socket = L.Class.extend({
 				];
 
 				if (!that._map['wopi'].UserCanNotWriteRelative) {
-					dialogButtons.push($.extend({}, vex.dialog.buttons.YES, {
-						text: _('Save to new file'),
-						className: 'vex-dialog-button-primary',
-						click: function() {
-							this.value = 'saveas';
-							this.close();
-						}}));
+					dialogButtons.push(
+						$.extend({}, vex.dialog.buttons.YES, {
+							text: _('Save to new file'),
+							className: 'vex-dialog-button-primary',
+							click: function() {
+								this.value = 'saveas';
+								this.close();
+							}}),
+						$.extend({}, vex.dialog.buttons.YES, {
+							text: _('Cancel'),
+							className: 'vex-dialog-button-secondary vex-dialog-button-cancel',
+							click: function() {
+								this.value = 'cancel';
+								this.close();
+							}})
+					);
+				} else {
+					dialogButtons.push(
+						$.extend({}, vex.dialog.buttons.YES, {
+							text: _('Cancel'),
+							className: 'vex-dialog-button-primary vex-dialog-button-cancel',
+							click: function() {
+								this.value = 'cancel';
+								this.close();
+							}})
+					);
 				}
 
 				vex.dialog.open({
@@ -965,6 +984,7 @@ app.definitions.Socket = L.Class.extend({
 			if (passwordNeeded) {
 				// Ask the user for password
 				vex.dialog.open({
+					contentClassName: 'vex-has-inputs',
 					message: msg,
 					input: '<input name="password" type="password" required />',
 					buttons: [