[Libreoffice-commits] online.git: loleaflet/src

[Muhammet Kara (via logerrit)]

 loleaflet/src/control/Toolbar.js |   30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

New commits:
commit fca73e16b92e7b2932c6ae98566f548e52165f48
Author:     Muhammet Kara <muhammet.kara at collabora.com>
AuthorDate: Sat Apr 18 00:36:08 2020 +0300
Commit:     Muhammet Kara <muhammet.kara at collabora.com>
CommitDate: Tue Apr 21 00:23:32 2020 +0200

    Welcome: Add the dismiss/accept button
    
    Now that we have the value of window.enableWelcomeMessageButton
    coming from the loolwsd.xml, we can optionally enable/disable
    the dismiss/accept button.
    
    Using vex.dialog.open instead of vex.open to be able to
    have the 'buttons' option.
    
    Because the vex-dialog-message class displays the message
    all-bold (very ugly) on mobile, we change it to vex-content,
    just after opening the dialog.
    
    We also limit the max height of the dialog to avoid double
    scroll-bars.
    
    Change-Id: I0c4d1cba303da49d23342a74538c7f340c4bcf1b
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92465
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Muhammet Kara <muhammet.kara at collabora.com>

diff --git a/loleaflet/src/control/Toolbar.js b/loleaflet/src/control/Toolbar.js
index 8def69a6b..61d63eed3 100644
--- a/loleaflet/src/control/Toolbar.js
+++ b/loleaflet/src/control/Toolbar.js
@@ -348,6 +348,8 @@ L.Map.include({
 	_showWelcomeDialogVex: function(data) {
 		var w;
 		var iw = window.innerWidth;
+		var hasDismissBtn = window.enableWelcomeMessageButton;
+
 		if (iw < 768) {
 			w = iw - 30;
 		}
@@ -358,21 +360,41 @@ L.Map.include({
 			w = iw / 5 + 590;
 		}
 
+		if (hasDismissBtn) {
+			var ih = window.innerHeight;
+			var h = ih / 2;
+			if (iw < 768) {
+				h = ih - 170; // Hopefully enough padding to avoid extra scroll-bar on mobile,
+			}
+			var containerDiv = '<div style="max-height:' + h + 'px;overflow-y:auto;">';
+			containerDiv += data;
+			containerDiv += '</div>';
+			data = containerDiv;
+		}
+
 		// show the dialog
 		var map = this;
-		vex.open({
-			unsafeContent: data,
-			showCloseButton: true,
+		vex.dialog.open({
+			unsafeMessage: data,
+			showCloseButton: !hasDismissBtn,
 			escapeButtonCloses: false,
 			overlayClosesOnClick: false,
 			closeAllOnPopState: false,
-			buttons: {},
+			focusFirstInput: false, // Needed to avoid auto-scroll to the bottom
+			buttons: !hasDismissBtn ? {} : [
+				$.extend({}, vex.dialog.buttons.YES, { text: _('I understand the risks') }),
+			],
 			afterOpen: function() {
 				var $vexContent = $(this.contentEl);
 				this.contentEl.style.width = w + 'px';
 				map.enable(false);
 
 				$vexContent.attr('tabindex', -1);
+				// Work-around to avoid the ugly all-bold dialog message on mobile
+				if (window.mode.isMobile()) {
+					var dlgMsg = document.getElementsByClassName('vex-dialog-message')[0];
+					dlgMsg.setAttribute('class', 'vex-content');
+				}
 				$vexContent.focus();
 				// workaround for https://github.com/HubSpot/vex/issues/43
 				$('.vex-overlay').css({ 'pointer-events': 'none'});