Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Show tip on disconnect

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-13 19:20:55 +03:00
parent 05c73a8c2d
commit 6e28d2778f
11 changed files with 155 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
apps/common/main/lib/component/SynchronizeTip.js
View file

@ -76,11 +76,12 @@ define([
this.target = this.options.target;
this.text = !_.isEmpty(this.options.text) ? this.options.text : this.textSynchronize;
this.textLink = !_.isEmpty(this.options.textLink) ? this.options.textLink : this.textDontShow;
this.placement = this.options.placement;
this.placement = this.options.placement; // if placement='target' and position is undefined show in top,left position of target, also use for arrow position
this.showLink = this.options.showLink;
this.showButton = this.options.showButton;
this.closable = this.options.closable;
this.textButton = this.options.textButton || '';
this.position = this.options.position; // show in the position relative to target
},
render: function() {
@ -90,6 +91,8 @@ define([
this.cmpEl.find('.close').on('click', _.bind(function() { this.trigger('closeclick');}, this));
this.cmpEl.find('.show-link label').on('click', _.bind(function() { this.trigger('dontshowclick');}, this));
this.cmpEl.find('.btn-div').on('click', _.bind(function() { this.trigger('buttonclick');}, this));
this.closable && this.cmpEl.addClass('closable');
}
this.applyPlacement();
@ -115,12 +118,28 @@ define([
},
applyPlacement: function () {
var showxy = this.target.offset();
if (this.placement=='target') {
var target = this.target && this.target.length>0 ? this.target : $(document.body);
var showxy = target.offset();
if (this.placement=='target' && !this.position) {
this.cmpEl.css({top : showxy.top + 5 + 'px', left: showxy.left + 5 + 'px'});
return;
}
if (this.position && typeof this.position == 'object') {
var top = this.position.top, left = this.position.left, bottom = this.position.bottom, right = this.position.right;
if (bottom!==undefined || top!==undefined)
left = showxy.left + (target.width() - this.cmpEl.width())/2;
else
top = showxy.top + (target.height() - this.cmpEl.height())/2;
top = (top!==undefined) ? (top + 'px') : 'auto';
bottom = (bottom!==undefined) ? (bottom + 'px') : 'auto';
right = (right!==undefined) ? (right + 'px') : 'auto';
left = (left!==undefined) ? (left + 'px') : 'auto';
this.cmpEl.css({top : top, left: left, right: right, bottom: bottom});
return;
}
var placement = this.placement.split('-');
if (placement.length>0) {
var top, left, bottom, right;
@ -128,29 +147,29 @@ define([
if (pos=='top') {
bottom = Common.Utils.innerHeight() - showxy.top;
} else if (pos == 'bottom') {
top = showxy.top + this.target.height();
top = showxy.top + target.height();
} else if (pos == 'left') {
right = Common.Utils.innerWidth() - showxy.left;
} else if (pos == 'right') {
left = showxy.left + this.target.width();
left = showxy.left + target.width();
}
pos = placement[1];
if (pos=='top') {
bottom = Common.Utils.innerHeight() - showxy.top - this.target.height()/2;
bottom = Common.Utils.innerHeight() - showxy.top - target.height()/2;
} else if (pos == 'bottom') {
top = showxy.top + this.target.height()/2;
top = showxy.top + target.height()/2;
var height = this.cmpEl.height();
if (top+height>Common.Utils.innerHeight())
top = Common.Utils.innerHeight() - height - 10;
} else if (pos == 'left') {
right = Common.Utils.innerWidth() - showxy.left - this.target.width()/2;
right = Common.Utils.innerWidth() - showxy.left - target.width()/2;
} else if (pos == 'right') {
left = showxy.left + this.target.width()/2;
left = showxy.left + target.width()/2;
} else {
if (bottom!==undefined || top!==undefined)
left = showxy.left + (this.target.width() - this.cmpEl.width())/2;
left = showxy.left + (target.width() - this.cmpEl.width())/2;
else
top = showxy.top + (this.target.height() - this.cmpEl.height())/2;
top = showxy.top + (target.height() - this.cmpEl.height())/2;
}
top = (top!==undefined) ? (top + 'px') : 'auto';
bottom = (bottom!==undefined) ? (bottom + 'px') : 'auto';

22
apps/common/main/resources/less/synchronize-tip.less
View file

@ -1,13 +1,13 @@
.synch-tip-root {
position: fixed;
z-index: @zindex-navbar + 2;
@tip-width: 300px;
//@tip-width: 300px;
&:not(.simple) {
width: @tip-width;
max-width: 300px;
.tip-text {
width: @tip-width - 40px;
//width: @tip-width - 40px;
}
}
@ -18,17 +18,15 @@
.tip-arrow {
display: none;
}
.asc-synchronizetip {
padding-right: 30px;
}
}
&.no-arrow {
.tip-arrow {
display: none;
}
}
&.closable {
.asc-synchronizetip {
padding-right: 30px;
}
@ -84,10 +82,10 @@
}
&.colored {
@tip-width: 270px;
width: @tip-width;
//@tip-width: 270px;
//width: @tip-width;
.tip-text {
width: @tip-width - 40px;
//width: @tip-width - 40px;
}
.asc-synchronizetip {
@ -439,7 +437,7 @@
}
.asc-synchronizetip {
padding: 15px 8px 15px 15px;
padding: 10px 15px;
border-radius: 5px;
background-color: @background-notification-popover-ie;
background-color: @background-notification-popover;
@ -528,7 +526,7 @@
top: 0;
width: 16px;
height: 16px;
margin: 8px;
margin: 5px;
cursor: pointer;
opacity: 0.7;

2
apps/documenteditor/main/app/controller/Main.js
View file

@ -942,6 +942,7 @@ define([
if ( id == Asc.c_oAscAsyncAction['Disconnect']) {
this.disableEditing(false, true);
this.getApplication().getController('Statusbar').hideDisconnectTip();
}
if ( type == Asc.c_oAscAsyncActionType.BlockInteraction &&
@ -1043,6 +1044,7 @@ define([
case Asc.c_oAscAsyncAction['Disconnect']:
text = this.textDisconnect;
this.disableEditing(true, true);
this.getApplication().getController('Statusbar').showDisconnectTip();
break;
default:

28
apps/documenteditor/main/app/controller/Statusbar.js
View file

@ -306,10 +306,36 @@ define([
return tip;
},
showDisconnectTip: function () {
var me = this;
if (!this.disconnectTip) {
this.disconnectTip = new Common.UI.SynchronizeTip({
target : this.statusbar.isVisible() ? this.statusbar.getStatusLabel().parent() : $(document.body),
text : this.textDisconnect,
placement: 'top',
position: this.statusbar.isVisible() ? undefined : {bottom: 0},
showLink: false
});
this.disconnectTip.on({
'closeclick': function() {
me.disconnectTip.hide();
me.disconnectTip = null;
}
});
}
this.disconnectTip.show();
},
hideDisconnectTip: function() {
this.disconnectTip && this.disconnectTip.hide();
this.disconnectTip = null;
},
zoomText : 'Zoom {0}%',
textHasChanges : 'New changes have been tracked',
textTrackChanges: 'The document is opened with the Track Changes mode enabled',
tipReview : 'Review',
textSetTrackChanges: 'You are in Track Changes mode'
textSetTrackChanges: 'You are in Track Changes mode',
textDisconnect: '<b>Connection is lost</b><br>Please check connection settings.'
}, DE.Controllers.Statusbar || {}));
});

12
apps/documenteditor/main/app/view/Statusbar.js
View file

@ -325,6 +325,10 @@ define([
: this.hide();
},
isVisible: function() {
return this.$el && this.$el.is(':visible');
},
reloadLanguages: function(array) {
var arr = [],
saved = this.langMenu.saved;
@ -358,12 +362,16 @@ define([
}
},
getStatusLabel: function() {
return $('.statusbar #label-action');
},
showStatusMessage: function(message) {
$('.statusbar #label-action').text(message);
this.getStatusLabel().text(message);
},
clearStatusMessage: function() {
$('.statusbar #label-action').text('');
this.getStatusLabel().text('');
},
SetDisabled: function(disable) {

2
apps/presentationeditor/main/app/controller/Main.js
View file

@ -621,6 +621,7 @@ define([
if ( id == Asc.c_oAscAsyncAction['Disconnect']) {
this.disableEditing(false, true);
this.getApplication().getController('Statusbar').hideDisconnectTip();
}
if (type == Asc.c_oAscAsyncActionType.BlockInteraction && !((id == Asc.c_oAscAsyncAction['LoadDocumentFonts'] || id == Asc.c_oAscAsyncAction['ApplyChanges']) && (this.dontCloseDummyComment || this.inTextareaControl || Common.Utils.ModalWindow.isVisible() || this.inFormControl))) {
@ -712,6 +713,7 @@ define([
case Asc.c_oAscAsyncAction['Disconnect']:
text = this.textDisconnect;
this.disableEditing(true, true);
this.getApplication().getController('Statusbar').showDisconnectTip();
break;
default:

28
apps/presentationeditor/main/app/controller/Statusbar.js
View file

@ -226,6 +226,32 @@ define([
this.api.put_TextPrLang(langid);
},
zoomText : 'Zoom {0}%'
showDisconnectTip: function () {
var me = this;
if (!this.disconnectTip) {
this.disconnectTip = new Common.UI.SynchronizeTip({
target : this.statusbar.isVisible() ? this.statusbar.getStatusLabel().parent() : $(document.body),
text : this.textDisconnect,
placement: 'top',
position: this.statusbar.isVisible() ? undefined : {bottom: 0},
showLink: false
});
this.disconnectTip.on({
'closeclick': function() {
me.disconnectTip.hide();
me.disconnectTip = null;
}
});
}
this.disconnectTip.show();
},
hideDisconnectTip: function() {
this.disconnectTip && this.disconnectTip.hide();
this.disconnectTip = null;
},
zoomText : 'Zoom {0}%',
textDisconnect: '<b>Connection is lost</b><br>Please check connection settings.'
}, PE.Controllers.Statusbar || {}));
});

12
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -309,12 +309,20 @@ define([
: this.hide();
},
isVisible: function() {
return this.$el && this.$el.is(':visible');
},
getStatusLabel: function() {
return $('.statusbar #status-label-action');
},
showStatusMessage: function(message) {
$('#status-label-action').text(message);
this.getStatusLabel().text(message);
},
clearStatusMessage: function() {
$('#status-label-action').text('');
this.getStatusLabel().text('');
},
reloadLanguages: function(array) {

2
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -707,6 +707,7 @@ define([
}
if ( id == Asc.c_oAscAsyncAction['Disconnect']) {
this.disableEditing(false, true);
this.getApplication().getController('Statusbar').hideDisconnectTip();
}
},
@ -787,6 +788,7 @@ define([
title = this.textDisconnect;
text = this.textDisconnect;
this.disableEditing(true, true);
this.getApplication().getController('Statusbar').showDisconnectTip();
break;
default:

28
apps/spreadsheeteditor/main/app/controller/Statusbar.js
View file

@ -811,12 +811,38 @@ define([
return isDragDrop;
},
showDisconnectTip: function () {
var me = this;
if (!this.disconnectTip) {
this.disconnectTip = new Common.UI.SynchronizeTip({
target : this.statusbar.isVisible() ? this.statusbar.getStatusLabel().parent() : $(document.body),
text : this.textDisconnect,
placement: 'top',
position: this.statusbar.isVisible() ? undefined : {bottom: 0},
showLink: false
});
this.disconnectTip.on({
'closeclick': function() {
me.disconnectTip.hide();
me.disconnectTip = null;
}
});
}
this.disconnectTip.show();
},
hideDisconnectTip: function() {
this.disconnectTip && this.disconnectTip.hide();
this.disconnectTip = null;
},
zoomText : 'Zoom {0}%',
errorLastSheet : 'Workbook must have at least one visible worksheet.',
errorRemoveSheet: 'Can\'t delete the worksheet.',
warnDeleteSheet : 'The worksheet maybe has data. Proceed operation?',
strSheet : 'Sheet',
textSheetViewTip: 'You are in Sheet View mode. Filters and sorting are visible only to you and those who are still in this view.',
textSheetViewTipFilters: 'You are in Sheet View mode. Filters are visible only to you and those who are still in this view.'
textSheetViewTipFilters: 'You are in Sheet View mode. Filters are visible only to you and those who are still in this view.',
textDisconnect: '<b>Connection is lost</b><br>Please check connection settings.'
}, SSE.Controllers.Statusbar || {}));
});

8
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -525,6 +525,10 @@ define([
visible ? this.show(): this.hide();
},
isVisible: function() {
return this.$el && this.$el.is(':visible');
},
update: function() {
var me = this;
@ -1010,6 +1014,10 @@ define([
this.statusMessage = undefined;
},
getStatusLabel: function() {
return this.labelAction;
},
sheetIndexText : 'Sheet {0} of {1}',
tipZoomIn : 'Zoom In',
tipZoomOut : 'Zoom Out',