Merge pull request #411 from ONLYOFFICE/feature/sse-filter

Feature/sse filter

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

@@ -52,7 +52,7 @@ define([
         this.label      = 'Tab';
         this.cls        = '';
         this.index = -1;
-        this.template   = _.template(['<li class="<% 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 %><%}%>" data-label="<%- label %>">',
                                             '<span title="<%- label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
                                         '</li>'].join(''));
 

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

@@ -353,6 +353,21 @@ 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, leaveopen: true},
+                        {caption: this.itemCount, value: 'count', checkable: true, checked: true, leaveopen: true},
+                        {caption: this.itemMinimum, value: 'min', checkable: true, checked: true, leaveopen: true},
+                        {caption: this.itemMaximum, value: 'max', checkable: true, checked: true, leaveopen: true},
+                        {caption: this.itemSum, value: 'sum', checkable: true, checked: true, leaveopen: true}
+                    ],
+                    leaveopen: 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 +390,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.$el.on('contextmenu', _.bind(this.showCustomizeStatusBar, this));
+
                 return this;
             },
 
@@ -641,6 +678,52 @@ define([
                 this.editMode = edit;
             },
 
+            showCustomizeStatusBar: function (e) {
+                var el = $(e.target);
+                if ($('#status-zoom-box').find(el).length > 0
+                    || $(e.target).parent().hasClass('list-item')
+                    || $('#status-tabs-scroll').find(el).length > 0
+                    || $('#status-addtabs-box').find(el).length > 0) return;
+                this.customizeStatusBarMenu.hide();
+                this.customizeStatusBarMenu.atposition = {
+                    left: e.clientX*Common.Utils.zoom(),
+                    top: e.clientY*Common.Utils.zoom()
+                };
+                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, event) {
+                var value = item.value,
+                    checked = item.checked;
+                this.boxMath.find('#status-math-' + value)[checked ? 'removeClass' : 'addClass']('hide');
+                if (this.boxMath.find('label').length === this.boxMath.find('label.hide').length) {
+                    this.boxMath.find('.separator').hide();
+                } else {
+                    if (this.boxMath.find('.separator').is(":hidden")) {
+                        this.boxMath.find('.separator').show();
+                    }
+                }
+                event.stopPropagation();
+                item.$el.find('a').blur();
+            },
+
             tipZoomIn           : 'Zoom In',
             tipZoomOut          : 'Zoom Out',
             tipZoomFactor       : 'Magnification',
@@ -668,7 +751,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({

apps/spreadsheeteditor/main/locale/en.json

@@ -2429,6 +2429,11 @@
   "SSE.Views.Statusbar.tipZoomOut": "Zoom out",
   "SSE.Views.Statusbar.ungroupSheets": "Ungroup Sheets",
   "SSE.Views.Statusbar.zoomText": "Zoom {0}%",
+  "SSE.Views.Statusbar.itemAverage": "Average",
+  "SSE.Views.Statusbar.itemCount": "Count",
+  "SSE.Views.Statusbar.itemMinimum": "Minimum",
+  "SSE.Views.Statusbar.itemMaximum": "Maximum",
+  "SSE.Views.Statusbar.itemSum": "Sum",
   "SSE.Views.TableOptionsDialog.errorAutoFilterDataRange": "The operation could not be done for the selected range of cells.<br>Select a uniform data range different from the existing one and try again.",
   "SSE.Views.TableOptionsDialog.errorFTChangeTableRangeError": "Operation could not be completed for the selected cell range.<br>Select a range so that the first table row was on the same row<br>and the resulting table overlapped the current one.",
   "SSE.Views.TableOptionsDialog.errorFTRangeIncludedOtherTables": "Operation could not be completed for the selected cell range.<br>Select a range which does not include other tables.",

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