[SSE] Change saving status block in statusbar

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

@@ -686,6 +686,14 @@ define([
             newHintTab.attr('data-hint-direction', 'top');
             newHintTab.attr('data-hint-offset', 'medium');
             newHintTab.attr('data-hint-title', 'M');
-        }
+        },
+
+        getWidth: function() {
+            var width = 21;
+            this.tabs.forEach(function(tab){
+                width += tab.$el.width();
+            });
+            return width;
+        },
     });
 });

apps/common/main/lib/view/Header.js

@@ -788,7 +788,7 @@ define([
             tipUndo: 'Undo',
             tipRedo: 'Redo',
             textCompactView: 'Hide Toolbar',
-            textHideStatusBar: 'Hide Status Bar',
+            textHideStatusBar: 'Combine sheet and status bars',
             textHideLines: 'Hide Rulers',
             textZoom: 'Zoom',
             textAdvSettings: 'Advanced Settings',

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

@@ -285,8 +285,8 @@ define([
                         style: 'min-width: 180px;',
                         items: [
                             me.header.mnuitemCompactToolbar,
-                            me.header.mnuitemCompactStatusBar,
                             me.header.mnuitemHideFormulaBar,
+                            me.header.mnuitemCompactStatusBar,
                             {caption:'--'},
                             me.header.mnuitemHideHeadings,
                             me.header.mnuitemHideGridlines,

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

@@ -409,6 +409,16 @@ define([
                     items: [
                         //{template: _.template('<div style="padding-left: 6px; padding-top: 2px;">' + this.textCustomizeStatusBar + '</div>')},
                         //{caption: '--'},
+                        {
+                            id: 'saved-status',
+                            caption: this.itemStatus,
+                            value: 'status',
+                            checkable: true,
+                            checked: true,
+                            template: customizeStatusBarMenuTemplate,
+                            exampleval: ''
+                        },
+                        {caption: '--'},
                         {
                             id: 'math-item-average',
                             caption: this.itemAverage,
@@ -453,15 +463,6 @@ define([
                             checked: true,
                             template: customizeStatusBarMenuTemplate,
                             exampleval: ''
-                        },
-                        {
-                            id: 'saved-status',
-                            caption: this.itemStatus,
-                            value: 'status',
-                            checkable: true,
-                            checked: true,
-                            template: customizeStatusBarMenuTemplate,
-                            exampleval: ''
                         }
                     ]
                 });
@@ -493,7 +494,7 @@ define([
                 this.labelNumberSheets = $('#label-sheets', this.boxNumberSheets);
 
                 this.boxAction = $('#status-action', this.el);
-                //this.isCompact && this.boxAction.hide();
+                this.boxAction.hide();
                 this.labelAction = $('#label-action', this.boxAction);
 
                 this.$el.append('<div id="statusbar-menu" style="width:0; height:0;"></div>');
@@ -621,6 +622,7 @@ define([
                     $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
 
                     this.updateNumberOfSheet(sindex, wc);
+                    this.updateTabbarBorders();
 
                     me.fireEvent('sheet:changed', [me, sindex]);
                     me.fireEvent('sheet:updateColors', [true]);
@@ -835,10 +837,17 @@ define([
 
                 if (this.isCompact) {
                     if (this.boxAction.is(':visible')) {
-                        this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': '140px'});
+                        var tabsWidth = this.tabbar.getWidth();
-                        this.boxAction.find('.separator').css('border-left-color', '');
+                        if (Common.Utils.innerWidth() - right - 175 - 140 - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
+                            var left = tabsWidth + 175;
+                            this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
+                            this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                        } else {
+                            this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': '140px'});
+                            this.boxAction.find('.separator').css('border-left-color', '');
+                            visible = true;
+                        }
                         right += parseInt(this.boxAction.css('width'));
-                        visible = true;
                     }
 
                     this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
@@ -966,6 +975,14 @@ define([
                     }
                     $(item.el).find('label').text(item.options.exampleval);
                 });
+                if (!this.boxAction.is(':visible')) {
+                    this.boxAction.show();
+                }
+                var me = this;
+                _.delay(function(){
+                    me.updateTabbarBorders();
+                    me.onTabInvisible(undefined, me.tabbar.checkInvisible(true));
+                },30);
             },
 
             clearStatusMessage: function() {
@@ -1008,7 +1025,7 @@ define([
             itemMinimum         : 'Minimum',
             itemMaximum         : 'Maximum',
             itemSum             : 'Sum',
-            itemStatus          : 'Status'
+            itemStatus          : 'Saving status'
         }, SSE.Views.Statusbar || {}));
 
         SSE.Views.Statusbar.RenameDialog = Common.UI.Window.extend(_.extend({

apps/spreadsheeteditor/main/locale/en.json

@@ -213,7 +213,7 @@
   "Common.Views.Header.textBack": "Open file location",
   "Common.Views.Header.textCompactView": "Hide Toolbar",
   "Common.Views.Header.textHideLines": "Hide Rulers",
-  "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
+  "Common.Views.Header.textHideStatusBar": "Combine sheet and status bars",
   "Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
   "Common.Views.Header.textSaveBegin": "Saving...",
   "Common.Views.Header.textSaveChanged": "Modified",
@@ -2993,6 +2993,7 @@
   "SSE.Views.Statusbar.itemRename": "Rename",
   "SSE.Views.Statusbar.itemSum": "Sum",
   "SSE.Views.Statusbar.itemTabColor": "Tab Color",
+  "SSE.Views.Statusbar.itemStatus": "Saving status",
   "SSE.Views.Statusbar.RenameDialog.errNameExists": "Worksheet with such a name already exists.",
   "SSE.Views.Statusbar.RenameDialog.errNameWrongChar": "A sheet name cannot contain the following characters: \\/*?[]:",
   "SSE.Views.Statusbar.RenameDialog.labelSheetName": "Sheet Name",

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

@@ -337,10 +337,12 @@
                     }
                 }
                 &.separator-item {
+                    margin-top: 1px;
                     margin-left: 20px;
                     width: @scaled-one-px-value-ie;
                     width: @scaled-one-px-value;
                     > span {
+                        display: none;
                         padding: 0;
                         margin: 0;
                         width: @scaled-one-px-value-ie;
@@ -477,6 +479,19 @@
     }
 }
 
+#statusbar-menu {
+    .dropdown-menu {
+        li {
+            > a {
+                padding: 5px 12px 5px 26px;
+                &::before {
+                    margin-left: -22px;
+                }
+            }
+        }
+    }
+}
+
 .statusbar-mask {
     position: absolute;
     bottom: 0;