From 95bd65d2f658ca8c378b50f4ff09ef1424c15c13 Mon Sep 17 00:00:00 2001 From: Pedro Pinto Silva Date: Mon, 6 Dec 2021 11:41:57 +0100 Subject: 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 Change-Id: I5e28d5c2e9169f59caff0422a541bce5b17f10d7 --- browser/css/device-mobile.css | 23 +++++++++++++++++++++++ browser/css/override-vex.css | 4 ++++ browser/src/control/Control.Tabs.js | 1 + browser/src/control/Signing.js | 3 +++ browser/src/control/Toolbar.js | 2 +- browser/src/core/Socket.js | 34 +++++++++++++++++++++++++++------- 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: '', 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: '', 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:') + '', 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: '', buttons: [ -- cgit