From 7719d51d2819b52e98924e062a17c38c6e74e391 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Sat, 26 Jun 2021 16:16:33 +0300 Subject: [PATCH] [SSE] Fix bug 46767 --- .../main/app/controller/Statusbar.js | 16 +++++ .../main/app/template/StatusBar.template | 5 ++ .../main/app/view/Statusbar.js | 58 ++++++++++++++++++- .../main/resources/less/statusbar.less | 29 ++++++++++ 4 files changed, 106 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index d3b0697c2..deb1b0622 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -56,6 +56,7 @@ define([ initialize: function() { this.addListeners({ 'Statusbar': { + 'show:tab': _.bind(this.showTab, this), 'show:hidden': _.bind(function (obj, index) { this.hideWorksheet(false, index); }, this), @@ -496,6 +497,13 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.statusbar); }, + showTab: function (sheetIndex) { + if (this.api && this.api.asc_getActiveWorksheetIndex() !== sheetIndex) { + this.api.asc_showWorksheet(sheetIndex); + this.loadTabColor(sheetIndex); + } + }, + selectTab: function (sheetindex) { if (this.api) { var hidden = this.api.asc_isWorksheetHidden(sheetindex); @@ -686,6 +694,8 @@ define([ } if (color.length) { + this.statusbar.sheetListMenu.items[tab.sheetindex].$el.find('.color').css('background-color', color); + if (!tab.isActive()) { color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(1) + ' inset'; } else { @@ -695,6 +705,7 @@ define([ tab.$el.find('span').css('box-shadow', color); } else { tab.$el.find('span').css('box-shadow', ''); + this.statusbar.sheetListMenu.items[tab.sheetindex].$el.find('.color').css('background-color', ''); } } }, @@ -712,6 +723,11 @@ define([ onApiActiveSheetChanged: function (index) { this.statusbar.tabMenu.hide(); + this.statusbar.sheetListMenu.hide(); + if (this.statusbar.sheetListMenu.items[index]) { + this.statusbar.sheetListMenu.clearAll(); + this.statusbar.sheetListMenu.items[index].setChecked(true); + } if (this._sheetViewTip && this._sheetViewTip.isVisible() && this.api.asc_getActiveNamedSheetView && !this.api.asc_getActiveNamedSheetView(index)) { // hide tip when sheet in the default mode this._sheetViewTip.hide(); } diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template index 0988bde4b..b7f2d8400 100644 --- a/apps/spreadsheeteditor/main/app/template/StatusBar.template +++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template @@ -8,6 +8,11 @@
+
+
+ +
+
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 9801ab48f..f36e91995 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -129,6 +129,35 @@ define([ hintAnchor: 'top' }); + this.btnSheetList = new Common.UI.Button({ + el: $('.cnt-tabslist', this.el), + hint: this.tipListOfSheets, + hintAnchor: 'top' + }); + this.sheetListMenu = new Common.UI.Menu({ + style: 'margin-top:-3px;', + menuAlign: 'bl-tl', + maxHeight: 300 + }); + this.sheetListMenu.on('item:click', function(obj,item) { + me.fireEvent('show:tab', [item.value]); + me.sheetListMenu.items[item.value].setChecked(true); + }); + this.btnSheetList.cmpEl.on({ + 'show.bs.dropdown': function () { + _.defer(function(){ + me.btnSheetList.cmpEl.find('ul').focus(); + }, 100); + }, + 'hide.bs.dropdown': function () { + _.defer(function(){ + me.api.asc_enableKeyEvents(true); + }, 100); + } + }); + this.sheetListMenu.render($('.cnt-tabslist',this.el)); + this.sheetListMenu.cmpEl.attr({tabindex: -1}); + this.cntZoom = new Common.UI.Button({ el: $('.cnt-zoom',this.el), hint: this.tipZoomFactor, @@ -493,10 +522,11 @@ define([ this.tabMenu.items[6].menu.removeAll(); this.tabMenu.items[6].hide(); this.btnAddWorksheet.setDisabled(true); + this.sheetListMenu.removeAll(); if (this.api) { var wc = this.api.asc_getWorksheetsCount(), i = -1; - var hidentems = [], items = [], tab, locked, name; + var hidentems = [], items = [], allItems = [], tab, locked, name; var sindex = this.api.asc_getActiveWorksheetIndex(); while (++i < wc) { @@ -516,6 +546,8 @@ define([ }; this.api.asc_isWorksheetHidden(i)? hidentems.push(tab) : items.push(tab); + + allItems.push(tab); } if (hidentems.length) { @@ -531,6 +563,27 @@ define([ this.tabbar.add(items); + allItems.forEach(function(item){ + me.sheetListMenu.addItem(new Common.UI.MenuItem({ + style: 'white-space: pre-wrap', + caption: Common.Utils.String.htmlEncode(item.label), + value: item.sheetindex, + checkable: true, + checked: item.active, + hidden: me.api.asc_isWorksheetHidden(item.sheetindex), + textHidden: me.itemHidden, + template: _.template([ + '', + '
', + '<%= caption %>', + '<% if (options.hidden) { %>', + '<%= options.textHidden %>', + '<% } %>', + '' + ].join('')) + })); + }); + if (!_.isUndefined(this.tabBarScroll)) { this.tabbar.$bar.scrollLeft(this.tabBarScroll.scrollLeft); this.tabBarScroll = undefined; @@ -764,7 +817,7 @@ define([ changeViewMode: function (edit) { if (edit) { - this.tabBarBox.css('left', '152px'); + this.tabBarBox.css('left', '175px'); } else { this.tabBarBox.css('left', ''); } @@ -830,6 +883,7 @@ define([ tipPrev : 'Previous Sheet', tipNext : 'Next Sheet', tipAddTab : 'Add Worksheet', + tipListOfSheets : 'List of Sheets', itemInsert : 'Insert', itemDelete : 'Delete', itemRename : 'Rename', diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index 909cc3619..ad07dfc48 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -366,6 +366,35 @@ } } + .cnt-tabslist { + display: inline-block; + position: relative; + .dropdown-menu { + min-width: 112px; + margin-left: -4px; + + li { + text-align: left; + a { + position: relative; + padding-left: 26px; + .color { + height: 21px; + width: 4px; + position: absolute; + top: 2px; + left: 0; + } + } + .hidden-mark { + margin-left: 12px; + font-style: italic; + color: @text-secondary; + } + } + } + } + .cnt-zoom { display: inline-block; position: relative;