[SSE] Fix bug 46767

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();
             }

apps/spreadsheeteditor/main/app/template/StatusBar.template

@@ -8,6 +8,11 @@
     </div>
     <div id="status-addtabs-box" class="status-group">
         <button id="status-btn-addtab" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
+        <div class="cnt-tabslist">
+            <div class="dropdown-toggle" data-toggle="dropdown">
+                <button id="status-btn-tabslist" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-ic-options">&nbsp;</i></button>
+            </div>
+        </div>
     </div>
     <div id="status-zoom-box" class="status-group">
         <div class="separator short"></div>

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([
+                                '<a id="<%= id %>" style="<%= style %>" tabindex="-1" type="menuitem">',
+                                    '<div class="color"></div>',
+                                    '<span class="name"><%= caption %></span>',
+                                    '<% if (options.hidden) { %>',
+                                        '<span class="hidden-mark"><%= options.textHidden %></span>',
+                                    '<% } %>',
+                                '</a>'
+                            ].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',

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;