From 6e28d2778f0beb06e424a4de019f5517f3afb4c0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 13 Dec 2021 19:20:55 +0300 Subject: [PATCH] Show tip on disconnect --- .../main/lib/component/SynchronizeTip.js | 41 ++++++++++++++----- .../main/resources/less/synchronize-tip.less | 22 +++++----- .../main/app/controller/Main.js | 2 + .../main/app/controller/Statusbar.js | 28 ++++++++++++- .../documenteditor/main/app/view/Statusbar.js | 12 +++++- .../main/app/controller/Main.js | 2 + .../main/app/controller/Statusbar.js | 28 ++++++++++++- .../main/app/view/Statusbar.js | 12 +++++- .../main/app/controller/Main.js | 2 + .../main/app/controller/Statusbar.js | 28 ++++++++++++- .../main/app/view/Statusbar.js | 8 ++++ 11 files changed, 155 insertions(+), 30 deletions(-) diff --git a/apps/common/main/lib/component/SynchronizeTip.js b/apps/common/main/lib/component/SynchronizeTip.js index d44d2fe95..d30820201 100644 --- a/apps/common/main/lib/component/SynchronizeTip.js +++ b/apps/common/main/lib/component/SynchronizeTip.js @@ -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'; diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less index 1a3beb01d..5f9bafa52 100644 --- a/apps/common/main/resources/less/synchronize-tip.less +++ b/apps/common/main/resources/less/synchronize-tip.less @@ -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; diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index eb0419b02..465e0028d 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -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: diff --git a/apps/documenteditor/main/app/controller/Statusbar.js b/apps/documenteditor/main/app/controller/Statusbar.js index d46eaefee..bdac6e214 100644 --- a/apps/documenteditor/main/app/controller/Statusbar.js +++ b/apps/documenteditor/main/app/controller/Statusbar.js @@ -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: 'Connection is lost
Please check connection settings.' }, DE.Controllers.Statusbar || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Statusbar.js b/apps/documenteditor/main/app/view/Statusbar.js index fd4b3c58b..18a661d7b 100644 --- a/apps/documenteditor/main/app/view/Statusbar.js +++ b/apps/documenteditor/main/app/view/Statusbar.js @@ -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) { diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index 5c1227366..e7dd70c8f 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -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: diff --git a/apps/presentationeditor/main/app/controller/Statusbar.js b/apps/presentationeditor/main/app/controller/Statusbar.js index 592aa85ec..0eda103f8 100644 --- a/apps/presentationeditor/main/app/controller/Statusbar.js +++ b/apps/presentationeditor/main/app/controller/Statusbar.js @@ -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: 'Connection is lost
Please check connection settings.' }, PE.Controllers.Statusbar || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/Statusbar.js b/apps/presentationeditor/main/app/view/Statusbar.js index 9b19d4c82..e0895aa1e 100644 --- a/apps/presentationeditor/main/app/view/Statusbar.js +++ b/apps/presentationeditor/main/app/view/Statusbar.js @@ -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) { diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 2ec3f8c7b..a4dbaadfc 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -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: diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 8baf480de..d53d11a53 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -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: 'Connection is lost
Please check connection settings.' }, SSE.Controllers.Statusbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index c5a58425c..1768dae92 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -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',