snackbar: show when disconnected and on desktop

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: Ib8e5a5f32dd04b34da7977fe5b5928a80e81f1f4

loleaflet/css/device-mobile.css

@@ -767,8 +767,7 @@ td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button div.w2ui-icon, td[
 #mobile-wizard.popup.landscape #mobile-wizard-content {
 	flex-direction: row;
 }
-#mobile-wizard.popup #busylabel,
+#mobile-wizard.popup #busylabel {
-#mobile-wizard.popup.snackbar #label {
 	border-bottom: none !important;
 	font-size: 100% !important;
 	margin: 20px !important;
@@ -779,24 +778,6 @@ td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button div.w2ui-icon, td[
 #mobile-wizard.popup.snackbar {
 	height: 48px !important;
 	margin: 16px 5% !important;
-	background-color: #565f77;
 	width: 90%;
-	border-radius: 4px;
 	position: absolute;
-}
-#mobile-wizard.popup.snackbar #label {
-	color: white !important;
-	font-size: 14px !important;
-	margin: 0 !important;
-	padding-left: 8px;
-	flex: min-content;
-}
-#mobile-wizard.popup.snackbar #button {
-	padding-right: 8px;
-	background: none;
-	border: none;
-	margin: 0;
-}
-#mobile-wizard.popup.snackbar #button span {
-	color: #c8e7f9ff !important;
 }

loleaflet/css/jsdialogs.css

@@ -34,8 +34,6 @@
 	border: 1px solid #a4a4a4 !important;
 	border-radius: 4px;
 	box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
-	min-width: 200px;
-	min-height: 100px;
 }
 
 .jsdialog-container .ui-dialog-content {
@@ -740,6 +738,8 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
 /* busy popup */
 
 #busypopup.jsdialog-container {
+	min-width: 200px;
+	min-height: 100px;
 	background: white;
 }
 
@@ -930,6 +930,38 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
 	stop-opacity: 0.2;
 }
 
+/* snackbar */
+#mobile-wizard.popup.snackbar,
+.snackbar.jsdialog-container .ui-dialog-content {
+	min-width: 200px;
+	background-color: #565f77 !important;
+	border-radius: 4px !important;
+}
+
+#mobile-wizard.popup.snackbar #label,
+.snackbar.jsdialog-container #label {
+	color: white !important;
+	font-size: 14px !important;
+	margin: 0px !important;
+	border-bottom: none !important;
+	padding-left: 8px;
+	flex: min-content;
+}
+
+#mobile-wizard.popup.snackbar #button,
+.snackbar.jsdialog-container #button.ui-pushbutton.jsdialog {
+	padding-right: 8px;
+	background-color: transparent !important;
+	border: none !important;
+	margin: 0 !important;
+}
+
+#mobile-wizard.popup.snackbar #button span,
+.snackbar.jsdialog-container #button span {
+	color: #c8e7f9ff !important;
+	font-weight: bold;
+}
+
 /* toolbuttons */
 
 .jsdialog .ui-content.unobutton {

loleaflet/src/control/Control.JSDialog.js

@@ -5,6 +5,9 @@
 
 /* global Hammer */
 L.Control.JSDialog = L.Control.extend({
+	options: {
+		snackbarTimeout: 6000
+	},
 	dialogs: {},
 	draggingObject: null,
 
@@ -67,7 +70,9 @@ L.Control.JSDialog = L.Control.extend({
 		var posX = 0;
 		var posY = 0;
 		var data = e.data;
-		var isModalPopup = data.type === 'modalpopup';
+		var callback = e.callback;
+		var isSnackbar = data.type === 'snackbar';
+		var isModalPopup = data.type === 'modalpopup' || isSnackbar;
 
 		if (data.action === 'fadeout')
 		{
@@ -105,13 +110,15 @@ L.Control.JSDialog = L.Control.extend({
 			L.DomUtil.create('span', 'ui-button-icon ui-icon ui-icon-closethick', button);
 		} else {
 			L.DomUtil.addClass(container, 'modalpopup');
+			if (isSnackbar)
+				L.DomUtil.addClass(container, 'snackbar');
 		}
 
 		var content = L.DomUtil.create('div', 'lokdialog ui-dialog-content ui-widget-content', container);
 
-		var builder = new L.control.jsDialogBuilder({windowId: data.id, mobileWizard: this, map: this.map, cssClass: 'jsdialog'});
+		var builder = new L.control.jsDialogBuilder({windowId: data.id, mobileWizard: this, map: this.map, cssClass: 'jsdialog', callback: callback});
 
-		if (isModalPopup) {
+		if (isModalPopup && !isSnackbar) {
 			var overlay = L.DomUtil.create('div', builder.options.cssClass + ' jsdialog-overlay ' + (data.cancellable ? 'cancellable' : ''), document.body);
 			overlay.id = data.id + '-overlay';
 			if (data.cancellable)
@@ -176,6 +183,9 @@ L.Control.JSDialog = L.Control.extend({
 					posX -= posX + content.clientWidth + 10 - window.innerWidth;
 				if (posY + content.clientHeight > window.innerHeight)
 					posY -= posY + content.clientHeight + 10 - window.innerHeight;
+			} else if (isSnackbar) {
+				posX = window.innerWidth/2 - container.offsetWidth/2;
+				posY = window.innerHeight - container.offsetHeight - 40;
 			} else if (posX === 0 && posY === 0) {
 				posX = window.innerWidth/2 - container.offsetWidth/2;
 				posY = window.innerHeight/2 - container.offsetHeight/2;
@@ -203,6 +213,10 @@ L.Control.JSDialog = L.Control.extend({
 			setupPosition();
 			that.updatePosition(container, posX, posY);
 		}, 200);
+
+		if (isSnackbar) {
+			setTimeout(function () { that.closePopover(data.id, false); }, this.options.snackbarTimeout);
+		}
 	},
 
 	onJSUpdate: function (e) {

loleaflet/src/control/Control.UIManager.js

@@ -594,6 +594,18 @@ L.Control.UIManager = L.Control.extend({
 	// Snack bar
 
 	showSnackbar: function(label, action, callback) {
+		if (!app.socket)
+			return;
+
+		var closeJson = {
+			id: 'snackbar',
+			jsontype: 'dialog',
+			type: 'snackbar',
+			action: 'fadeout'
+		};
+
+		app.socket._onMessage({textMsg: 'jsdialog: ' + JSON.stringify(closeJson)});
+
 		var json = {
 			id: 'snackbar',
 			jsontype: 'dialog',
@@ -603,7 +615,7 @@ L.Control.UIManager = L.Control.extend({
 					type: 'container',
 					children: [
 						{id: 'label', type: 'fixedtext', text: label},
-						{id: 'button', type: 'pushbutton', text: action}
+						action ? {id: 'button', type: 'pushbutton', text: action} : {}
 					]
 				}
 			]
@@ -618,8 +630,7 @@ L.Control.UIManager = L.Control.extend({
 			}
 		};
 
-		if (app.socket)
+		app.socket._onMessage({textMsg: 'jsdialog: ' + JSON.stringify(json), callback: builderCallback});
-			app.socket._onMessage({textMsg: 'jsdialog: ' + JSON.stringify(json), callback: builderCallback});
 	},
 
 	// Helper functions

loleaflet/src/core/Socket.js

@@ -513,14 +513,12 @@ app.definitions.Socket = L.Class.extend({
 			if (oldId && oldVersion && sameFile) {
 				if (this.WSDServer.Id !== oldId || this.WSDServer.Version !== oldVersion) {
 					var reloadMessage = _('Server is now reachable. We have to refresh the page now.');
-					if (window.mode.isMobile()) {
+					if (window.mode.isMobile())
 						reloadMessage = _('Server is now reachable...');
-						this._map.uiManager.showSnackbar(reloadMessage, _('RELOAD'), function() {window.location.reload();});
+
-						setTimeout(window.location.reload, 5000);
+					var reloadFunc = function() { window.location.reload(); };
-					} else {
+					this._map.uiManager.showSnackbar(reloadMessage, _('RELOAD'), reloadFunc);
-						alert(reloadMessage);
+					setTimeout(reloadFunc, 5000);
-						window.location.reload();
-					}
 				}
 			}
 
@@ -1341,7 +1339,7 @@ app.definitions.Socket = L.Class.extend({
 		} else if (msgData.jsontype === 'autofilter') {
 			this._map.fire('autofilterdropdown', msgData);
 		} else if (msgData.jsontype === 'dialog') {
-			this._map.fire('jsdialog', {data: msgData});
+			this._map.fire('jsdialog', {data: msgData, callback: callback});
 		} else if (msgData.jsontype === 'sidebar') {
 			this._map.fire('sidebar', {data: msgData});
 		} else if (msgData.jsontype === 'notebookbar') {
@@ -1405,6 +1403,8 @@ app.definitions.Socket = L.Class.extend({
 			this._reconnecting = true;
 			this._map._activate();
 		}
+
+		this._map.uiManager.showSnackbar(_('The server has been disconnected.'));
 	},
 
 	parseServerCmd: function (msg) {