[SSE] Show icon and tooltip for the active sheet view

apps/common/main/lib/component/Tab.js

@@ -51,9 +51,15 @@ define([
         this.active     = false;
         this.label      = 'Tab';
         this.cls        = '';
+        this.iconCls    = '';
+        this.iconVisible = false;
+        this.iconTitle = '';
         this.index = -1;
-        this.template   = _.template(['<li class="list-item <% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%- label %>">',
+        this.template   = _.template(['<li class="list-item <% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%><% if(iconVisible){%> icon-visible <%}%>" data-label="<%- label %>">',
-                                            '<span title="<%- label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
+                                            '<span title="<%- label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>">',
+                                            '<div class="toolbar__icon <% if(iconCls.length){%><%= iconCls %><%}%>" title="<% if(iconTitle.length){%><%=iconTitle%><%}%>"></div>',
+                                            '<%- label %>',
+                                            '</span>',
                                         '</li>'].join(''));
 
         this.initialize.call(this, opts);
@@ -126,6 +132,16 @@ define([
 
         setCaption: function(text) {
             this.$el.find('> span').text(text);
+        },
+
+        changeIconState: function(visible, title) {
+            if (this.iconCls.length) {
+                this.iconVisible = visible;
+                this.iconTitle = title || '';
+                this[visible ? 'addClass' : 'removeClass']('icon-visible');
+                if (title)
+                    this.$el.find('.' + this.iconCls).attr('title', title);
+            }
         }
     });
 

apps/spreadsheeteditor/main/app/controller/Statusbar.js

@@ -104,6 +104,8 @@ define([
             this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this));
             this.api.asc_registerCallback('asc_onFilterInfo',   _.bind(this.onApiFilterInfo , this));
             this.api.asc_registerCallback('asc_onActiveSheetChanged', _.bind(this.onApiActiveSheetChanged, this));
+            this.api.asc_registerCallback('asc_onActiveSheetChanged', _.bind(this.onApiActiveSheetChanged, this));
+            this.api.asc_registerCallback('asc_onRefreshNamedSheetViewList', _.bind(this.onRefreshNamedSheetViewList, this));
 
             this.statusbar.setApi(api);
         },
@@ -710,6 +712,24 @@ define([
             this.statusbar.tabMenu.hide();
         },
 
+        onRefreshNamedSheetViewList: function() {
+            var views = this.api.asc_getNamedSheetViews(),
+                active = false,
+                name="";
+            for (var i=0; i<views.length; i++) {
+                if (views[i].asc_getIsActive()) {
+                    active = true;
+                    name = views[i].asc_getName();
+                    break;
+                }
+            }
+            var tab = this.statusbar.tabbar.getAt(this.statusbar.tabbar.getActive());
+            if (tab) {
+                tab.changeIconState(active, name);
+            }
+                
+        },
+
         zoomText        : 'Zoom {0}%',
         errorLastSheet  : 'Workbook must have at least one visible worksheet.',
         errorRemoveSheet: 'Can\'t delete the worksheet.',

apps/spreadsheeteditor/main/app/view/Statusbar.js

@@ -488,11 +488,12 @@ define([
 
                 if (this.api) {
                     var wc = this.api.asc_getWorksheetsCount(), i = -1;
-                    var hidentems = [], items = [], tab, locked;
+                    var hidentems = [], items = [], tab, locked, name;
                     var sindex = this.api.asc_getActiveWorksheetIndex();
 
                     while (++i < wc) {
                         locked = me.api.asc_isWorksheetLockedOrDeleted(i);
+                        name = me.api.asc_getActiveNamedSheetView(i) || '';
                         tab = {
                             sheetindex    : i,
                             index         : items.length,
@@ -500,7 +501,10 @@ define([
                             label         : me.api.asc_getWorksheetName(i),
 //                          reorderable   : !locked,
                             cls           : locked ? 'coauth-locked':'',
-                            isLockTheDrag : locked
+                            isLockTheDrag : locked,
+                            iconCls       : 'btn-sheet-view',
+                            iconTitle     : name,
+                            iconVisible   : name!==''
                         };
 
                         this.api.asc_isWorksheetHidden(i)? hidentems.push(tab) : items.push(tab);
@@ -762,7 +766,7 @@ define([
             showCustomizeStatusBar: function (e) {
                 var el = $(e.target);
                 if ($('#status-zoom-box').find(el).length > 0
-                    || $(e.target).parent().hasClass('list-item')
+                    || $(e.target).closest('.statusbar .list-item').length>0
                     || $('#status-tabs-scroll').find(el).length > 0
                     || $('#status-addtabs-box').find(el).length > 0) return;
                 this.customizeStatusBarMenu.hide();

apps/spreadsheeteditor/main/resources/less/statusbar.less

@@ -229,6 +229,20 @@
                     }
                 }
 
+                &.icon-visible {
+                    > span {
+                        padding-left: 25px;
+                        > .toolbar__icon {
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            margin: 3px;
+                        }
+                    }
+                }
+
                 &.disabled {
                     opacity: 0.5;
 
@@ -244,7 +258,6 @@
                 }
 
                 &.mousemove {
-
                     > span {
                         border-left: 2px solid @gray-deep;
                         padding-left: 9px;
@@ -257,6 +270,16 @@
                             padding-left: 10px;
                         }
                     }
+                    &.icon-visible {
+                        > span {
+                            padding-left: 24px;
+                        }
+                        &.right {
+                            > span {
+                                padding-left: 25px;
+                            }
+                        }
+                    }
                 }
             }
         }