strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

snackbar: show when disconnected and on desktop

Browse source 
Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: Ib8e5a5f32dd04b34da7977fe5b5928a80e81f1f4
This commit is contained in:
Szymon Kłos 2021-07-27 14:45:47 +02:00 committed by pedropintosilva
parent e3adfb77e5
commit 396d4d96fb
5 changed files with 74 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
loleaflet/css/device-mobile.css
View file

@ -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.snackbar #label {
#mobile-wizard.popup #busylabel {
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;
}

36
loleaflet/css/jsdialogs.css
View file

@ -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 {

20
loleaflet/src/control/Control.JSDialog.js
View file

@ -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) {

17
loleaflet/src/control/Control.UIManager.js
View file

@ -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

16
loleaflet/src/core/Socket.js
View file

@ -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);
} else {
alert(reloadMessage);
window.location.reload();
}
var reloadFunc = function() { window.location.reload(); };
this._map.uiManager.showSnackbar(reloadMessage, _('RELOAD'), reloadFunc);
setTimeout(reloadFunc, 5000);
}
}
@ -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) {