diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 684e52e0e..22257e78b 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -380,12 +380,11 @@ define([ var customizeStatusBarMenuTemplate = _.template(''+ '
'+ - '
<%= caption %>
' + - '' + + '
<%= caption %>
' + + '' + '
'); this.customizeStatusBarMenu = new Common.UI.Menu({ - style: 'margin-top: 0px; margin-left: -7px;', menuAlign: 'bl-tl', menuAlignEl: $(this.el), items: [ @@ -858,6 +857,13 @@ define([ this.tabBarBox.css('right', '0px'); } this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent'); + + if (this.statusMessage) { + var status = this.getStatusMessage(this.statusMessage); + if (status !== this.boxAction.text().trim()) { + this.labelAction.text(status); + } + } }, updateVisibleItemsBoxMath: function () { @@ -962,8 +968,19 @@ define([ ); }, + getStatusMessage: function (message) { + var _message; + if (this.isCompact && message.length > 17 && this.boxAction.width() < 180) { + _message = message.substr(0, 17) + '...' + } else { + _message = message; + } + return _message; + }, + showStatusMessage: function(message) { - this.labelAction.text(message); + this.statusMessage = message; + this.labelAction.text(this.getStatusMessage(message)); this.customizeStatusBarMenu.items.forEach(function (item) { if (item.options.id === 'saved-status') { item.options.exampleval = message; @@ -982,6 +999,7 @@ define([ clearStatusMessage: function() { this.labelAction.text(''); + this.statusMessage = undefined; }, sheetIndexText : 'Sheet {0} of {1}', diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index e72c9df19..6e19df2bf 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -481,12 +481,27 @@ #statusbar-menu { .dropdown-menu { + margin-top: 0; + margin-left: -7px; li { > a { padding: 5px 12px 5px 26px; &::before { margin-left: -22px; } + .item-caption { + min-width: 98px; + display: inline-block; + } + .item-value { + overflow: hidden; + text-overflow: ellipsis; + text-align: right; + vertical-align: bottom; + padding-left: 5px; + color: silver; + cursor: pointer; + } } } }