From 36034c4043c85069a28a6e8ce8ae0d73053b5f61 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 17 Jun 2020 17:39:13 +0300
Subject: [PATCH] [SSE] Add customize statusbar menu

---
 .../main/app/view/Statusbar.js                | 76 ++++++++++++++++++-
 .../main/resources/less/statusbar.less        | 13 ++--
 2 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 6761e16a5..69abdb631 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -353,6 +353,20 @@ define([
                         });
                     });
 
+                this.customizeStatusBarMenu = new Common.UI.Menu({
+                    style: 'margin-top: -14px; margin-left: -7px;',
+                    menuAlign: 'bl-tl',
+                    items: [
+                        {template: _.template('<div style="padding-left: 6px; padding-top: 2px;">' + this.textCustomizeStatusBar + '</div>')},
+                        {caption: '--'},
+                        {caption: this.itemAverage, value: 'average', checkable: true, checked: true},
+                        {caption: this.itemCount, value: 'count', checkable: true, checked: true},
+                        {caption: this.itemMinimum, value: 'min', checkable: true, checked: true},
+                        {caption: this.itemMaximum, value: 'max', checkable: true, checked: true},
+                        {caption: this.itemSum, value: 'sum', checkable: true, checked: true}
+                    ]
+                });
+
                 this.tabbar.$el.append('<div class="dropdown-toggle" data-toggle="dropdown" style="width:0; height:0;"></div>');
                 this.tabMenu.render(this.tabbar.$el);
                 this.tabMenu.cmpEl.attr({tabindex: -1});
@@ -375,6 +389,28 @@ define([
                 this.boxZoom = $('#status-zoom-box', this.el);
                 this.boxZoom.find('.separator').css('border-left-color','transparent');
 
+                this.$el.append('<div id="statusbar-menu" style="width:0; height:0;"></div>');
+                this.$customizeStatusBarMenu = this.$el.find('#statusbar-menu');
+                this.$customizeStatusBarMenu.on({
+                    'show.bs.dropdown': function () {
+                        _.defer(function(){
+                            me.$customizeStatusBarMenu.find('ul').focus();
+                         }, 100);
+                    },
+                    'hide.bs.dropdown': function () {
+                        _.defer(function(){
+                            me.api.asc_enableKeyEvents(true);
+                        }, 100);
+                    }
+                });
+                this.$customizeStatusBarMenu.append('<div class="dropdown-toggle" data-toggle="dropdown" style="width:0; height:0;"></div>');
+                this.customizeStatusBarMenu.render(this.$customizeStatusBarMenu);
+                this.customizeStatusBarMenu.cmpEl.attr({tabindex: -1});
+                this.customizeStatusBarMenu.on('show:after', _.bind(this.onCustomizeStatusBarAfterShow, this));
+                this.customizeStatusBarMenu.on('hide:after', _.bind(this.onCustomizeStatusBarAfterHide, this));
+                this.customizeStatusBarMenu.on('item:click', _.bind(this.onCustomizeStatusBarClick, this));
+                this.boxMath.on('contextmenu', _.bind(this.showCustomizeStatusBar, this));
+
                 return this;
             },
 
@@ -641,6 +677,38 @@ define([
                 this.editMode = edit;
             },
 
+            showCustomizeStatusBar: function (e) {
+                var rect = e.target.getBoundingClientRect();
+                this.customizeStatusBarMenu.atposition = {
+                    left: rect.left,
+                    top: rect.top
+                };
+                this.customizeStatusBarMenu.show();
+            },
+
+            onCustomizeStatusBarAfterShow: function (obj) {
+                if (obj.atposition) {
+                    obj.setOffset(obj.atposition.left);
+                }
+                this.enableKeyEvents = true;
+            },
+
+            onCustomizeStatusBarAfterHide: function () {
+                if (!_.isUndefined(this.enableKeyEvents)) {
+                    if (this.api) {
+                        this.api.asc_enableKeyEvents(this.enableKeyEvents);
+                    }
+
+                    this.enableKeyEvents = undefined;
+                }
+            },
+
+            onCustomizeStatusBarClick: function (o, item) {
+                var value = item.value,
+                    checked = item.checked;
+                this.boxMath.find('#status-math-' + value)[checked ? 'removeClass' : 'addClass']('hide');
+            },
+
             tipZoomIn           : 'Zoom In',
             tipZoomOut          : 'Zoom Out',
             tipZoomFactor       : 'Magnification',
@@ -668,7 +736,13 @@ define([
             filteredRecordsText : '{0} of {1} records filtered',
             filteredText        : 'Filter mode',
             selectAllSheets     : 'Select All Sheets',
-            ungroupSheets       : 'Ungroup Sheets'
+            ungroupSheets       : 'Ungroup Sheets',
+            textCustomizeStatusBar: 'Customize status bar',
+            itemAverage         : 'Average',
+            itemCount           : 'Count',
+            itemMinimum         : 'Minimum',
+            itemMaximum         : 'Maximum',
+            itemSum             : 'Sum'
         }, SSE.Views.Statusbar || {}));
 
         SSE.Views.Statusbar.RenameDialog = Common.UI.Window.extend(_.extend({
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 9453dd320..fe679eb1b 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -122,17 +122,16 @@
     #status-math-box,
     #status-filtered-box {
         float: right;
-        padding-top: 6px;
-        padding-right: 14px;
 
         label {
+            padding-top: 6px;
+            height: 25px;
             &:not(:last-child) {
-                margin-right: 10px;
+                padding-right: 10px;
+            }
+            &:last-child {
+                padding-right: 14px;
             }
-        }
-
-        .separator {
-            margin-top: -6px;
         }
     }