Merge branch 'release/v7.2.0' into fix/search-resize

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

@@ -52,6 +52,16 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, arguments);
 
             this.mode = false;
+            this.resizeResults = {
+                defaultWidths: [],
+                defaultResizersPosition: [],
+                currentWidths: [],
+                currentResizersPosition: [],
+                events: {
+                    mousemove: _.bind(this.resultsResizeMove, this),
+                    mouseup: _.bind(this.resultsResizeStop, this)
+                }
+            };
 
             window.SSE && (this.extendedOptions = Common.localStorage.getBool('sse-search-options-extended', true));
         },
@@ -252,12 +262,18 @@ define([
                     this.cmbSearch.setValue(0);
                     this.cmbLookIn.setValue(0);
 
-                    var tableTemplate = '<div class="search-table">' +
-                        '<div class="header-item">' + this.textSheet + '</div>' +
-                        '<div class="header-item">' + this.textName + '</div>' +
-                        '<div class="header-item">' + this.textCell + '</div>' +
-                        '<div class="header-item">' + this.textValue + '</div>' +
-                        '<div class="header-item">' + this.textFormula + '</div>' +
+                    var tableTemplate = '<div class="search-header">' +
+                            '<div class="header-item" data-col="sheet">' + this.textSheet + '</div>' +
+                            '<div class="header-resizer" data-resizer="name" data-index="0"></div>' +
+                            '<div class="header-item" data-col="name">' + this.textName + '</div>' +
+                            '<div class="header-resizer" data-resizer="cell" data-index="1"></div>' +
+                            '<div class="header-item" data-col="cell">' + this.textCell + '</div>' +
+                            '<div class="header-resizer" data-resizer="value" data-index="2"></div>' +
+                            '<div class="header-item" data-col="value">' + this.textValue + '</div>' +
+                            '<div class="header-resizer" data-resizer="formula" data-index="3"></div>' +
+                            '<div class="header-item" data-col="formula">' + this.textFormula + '</div>' +
+                        '</div>' +
+                        '<div class="search-table">' +
                             '<div class="ps-container oo search-items"></div>' +
                         '</div>',
                         $resultTable = $(tableTemplate).appendTo(this.$resultsContainer);
@@ -268,6 +284,21 @@ define([
                         minScrollbarLength: 40,
                         alwaysVisibleY: true
                     });
+                    this.$resultsContainer.scrollerX = new Common.UI.Scroller({
+                        el: this.$resultsContainer,
+                        includePadding: true,
+                        useKeyboard: true,
+                        minScrollbarLength: 40,
+                        alwaysVisibleX: true
+                    });
+                    var resizers = $resultTable.find('.header-resizer');
+                    _.each(resizers, _.bind(function (item) {
+                        var $el = $(item),
+                            data = $el.data('resizer'),
+                            $col = $resultTable.find('[data-col=' + data + ']');
+                        $el.on('mousedown', {col: $col, resizer: $el, data: data}, _.bind(this.resultsResizeStart, this));
+                    }, this));
+                    Common.NotificationCenter.on('layout:resizestop', _.bind(this.onLayoutResize, this));
                 } else {
                     this.$resultsContainer.scroller = new Common.UI.Scroller({
                         el: this.$resultsContainer,
@@ -279,7 +310,9 @@ define([
                 }
                 Common.NotificationCenter.on('window:resize', function() {
                     me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+
                     me.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                    window.SSE && me.$resultsContainer.scrollerX.update({alwaysVisibleX: true});
                 });
             }
 
@@ -383,6 +416,155 @@ define([
             this.btnReplaceAll.setDisabled(disable);
         },
 
+        fillDefaultResultColsSize: function () {
+            this.fillResultColsSize(true);
+        },
+
+        resetToDefaultResultColsSize: function () {
+            this.resizeResults.currentWidths.length = 0;
+            this.resizeResults.currentResizersPosition.length = 0;
+            _.each(this.resizeResults.defaultWidths, _.bind(function (item) {
+                this.resizeResults.currentWidths.push({
+                    name: item.name,
+                    headerWidth: item.headerWidth,
+                    resultWidth: item.resultWidth
+                });
+            }, this));
+            _.each(this.resizeResults.defaultResizersPosition, _.bind(function (item) {
+                this.resizeResults.currentResizersPosition.push(item);
+            }, this));
+        },
+
+        fillResultColsSize: function (isDefaultSize) {
+            var currentWidths = isDefaultSize ? this.resizeResults.defaultWidths : this.resizeResults.currentWidths,
+                currentResizersPosition = isDefaultSize ? this.resizeResults.defaultResizersPosition : this.resizeResults.currentResizersPosition;
+
+            currentWidths.length = 0;
+            currentResizersPosition.length = 0;
+
+            var headerCols = this.$resultsContainer.find('.header-item'),
+                resizers = this.$resultsContainer.find('.header-resizer');
+            _.each(headerCols, _.bind(function (item) {
+                var data = $(item).data('col'),
+                    resCol = this.$resultsContainer.find('.search-items [data-col=' + data + ']')[0];
+                currentWidths.push({
+                    name: data,
+                    headerWidth: $(item).outerWidth(),
+                    resultWidth: $(resCol).outerWidth()
+                });
+            }, this));
+            _.each(resizers, _.bind(function (item) {
+                currentResizersPosition.push($(item).position().left);
+            }, this));
+
+            console.log('this.resizeResults.currentWidths', currentWidths);
+            console.log('this.resizeResults.currentResizersPosition', currentResizersPosition);
+        },
+
+        applyResultColsSize: function () {
+            if (this.resizeResults.isChanged) {
+                var headerCols = this.$resultsContainer.find('.header-item'),
+                    resizers = this.$resultsContainer.find('.header-resizer');
+                _.each(headerCols, _.bind(function (item, index) {
+                    var currentWidth = this.resizeResults.currentWidths[index];
+                    $(item).outerWidth(currentWidth.headerWidth);
+                    this.$resultsContainer.find('.search-items [data-col=' + currentWidth.name + ']').outerWidth(currentWidth.resultWidth);
+                }, this));
+                _.each(resizers, _.bind(function (item, index) {
+                    $(item).position({left: this.resizeResults.currentResizersPosition[index]});
+                }, this));
+            }
+        },
+
+        resultsResizeStart: function (e) {
+            $(document).on('mousemove', this.resizeResults.events.mousemove)
+                .on('mouseup', this.resizeResults.events.mouseup);
+
+            e.data.resizer.addClass('move');
+
+            this.resizeResults.$resizer = e.data.resizer;
+            this.resizeResults.$col = e.data.col;
+            this.resizeResults.data = e.data.data;
+
+            this.resizeResults.currentIndex = parseInt(this.resizeResults.$resizer.data('index'));
+            this.resizeResults.containerLeft = $('#search-results').offset().left;
+            this.resizeResults.min = this.resizeResults.currentIndex === 0 ? 0 :
+                this.$resultsContainer.find('.header-resizer[data-index=' + (this.resizeResults.currentIndex - 1) + ']').offset().left - this.resizeResults.containerLeft; // left border
+            this.resizeResults.max = Common.Utils.innerWidth(); // document width
+            this.resizeResults.initX = e.pageX*Common.Utils.zoom() - this.resizeResults.containerLeft; // start position
+
+            console.log('current index ', this.resizeResults.currentIndex);
+            console.log('initX ', this.resizeResults.initX);
+            console.log('max/doc width ', this.resizeResults.max);
+            console.log('min 0/header resizer left - container left border ', this.resizeResults.min);
+
+            this.fillResultColsSize();
+            this.resizeResults.isChanged = true;
+        },
+
+        resultsResizeMove: function (e) {
+            var zoom = (e instanceof jQuery.Event) ? Common.Utils.zoom() : 1,
+                value = e.pageX*zoom - this.resizeResults.containerLeft;
+            this.resizeResults.currentX = Math.min(Math.max(this.resizeResults.min, value), this.resizeResults.max);
+            this.resizeResults.$resizer.css('left', this.resizeResults.currentX + this.$resultsContainer.scrollLeft() + 'px');
+        },
+
+        resultsResizeStop: function (e) {
+            this.resizeResults.$resizer.removeClass('move');
+            $(document).off('mousemove', this.resizeResults.events.mousemove)
+                .off('mouseup', this.resizeResults.events.mouseup);
+
+            var delta = this.resizeResults.currentX - this.resizeResults.initX,
+                cols = this.$resultsContainer.find('.header-item'),
+                col = $(cols[this.resizeResults.currentIndex]),
+                newWidth = (col.hasClass('zero-width') ? 0 : col.outerWidth()) + delta,
+                resizers = this.$resultsContainer.find('.header-resizer');
+            col.outerWidth(newWidth < 0.1 ? 0 : newWidth + 2); // change width in header, 2 - half of width of resizer
+            col[newWidth < 0.1 ? 'addClass' : 'removeClass']('zero-width');
+
+            var resTable = this.$resultsContainer.find('.search-table');
+            resTable.css('min-width', (resTable.outerWidth() + delta) + 'px');
+            //resTable.css('min-width', '100%');
+
+            var resCols = resTable.find('.item [data-index=' + this.resizeResults.currentIndex + ']'), // change col width in table
+                resColWidth = newWidth < 0.1 ? 0 : newWidth + 2; // 2 - half of width of resizer
+            _.each(resCols, function (item) {
+                $(item).outerWidth(resColWidth);
+                $(item)[resColWidth < 0.1 ? 'addClass' : 'removeClass']('zero-width');
+            });
+
+            // change left positions of resizers on right side
+            for(var i = this.resizeResults.currentIndex + 1; i < 5; i++) {
+                var el = $(cols[i]),
+                    elLeft = el.offset().left - this.resizeResults.containerLeft + this.$resultsContainer.scrollLeft() + delta + 2;
+                el.css('left', elLeft + 'px');
+                var resizer = resizers[i];
+                if (resizer) {
+                    var resizerLeft = $(resizer).offset().left - this.resizeResults.containerLeft + this.$resultsContainer.scrollLeft() + delta + 2;
+                    $(resizer).css('left', resizerLeft + 'px');
+                }
+            }
+
+            this.updateFormulaColWidth();
+            this.$resultsContainer.scrollerX.update({alwaysVisibleX: true});
+
+            this.fillResultColsSize();
+        },
+
+        onLayoutResize: function () {
+            this.$resultsContainer.find('.search-table').width(this.$resultsContainer.outerWidth() + this.$resultsContainer.scrollLeft() + 'px');
+
+            this.updateFormulaColWidth();
+            this.$resultsContainer.scrollerX.update({alwaysVisibleX: true});
+        },
+
+        updateFormulaColWidth: function () {
+            var formulaCol = this.$resultsContainer.find('[data-col="formula"]'),
+                formulaLeftBorder = window.getComputedStyle(formulaCol[0],null).getPropertyValue("left"),
+                newWidth = this.$resultsContainer.find('.search-table').outerWidth() - parseInt(formulaLeftBorder) - 4;
+            formulaCol.width(newWidth + 'px');
+        },
+
         textFind: 'Find',
         textFindAndReplace: 'Find and replace',
         textCloseSearch: 'Close search',

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

@@ -424,12 +424,12 @@ define([
                 me.resultItems = [];
                 data.forEach(function (item, ind) {
                     var isSelected = ind === me._state.currentResult;
-                    var tr = '<div class="item" style="width: 100%;">' +
-                        '<div class="sheet">' + (item[1] ? item[1] : '') + '</div>' +
-                        '<div class="name">' + (item[2] ? item[2] : '') + '</div>' +
-                        '<div class="cell">' + (item[3] ? item[3] : '') + '</div>' +
-                        '<div class="value">' + (item[4] ? item[4] : '') + '</div>' +
-                        '<div class="formula">' + (item[5] ? item[5] : '') + '</div>' +
+                    var tr = '<div class="item">' +
+                        '<div data-col="sheet" data-index="0">' + (item[1] ? item[1] : '') + '</div>' +
+                        '<div data-col="name" data-index="1">' + (item[2] ? item[2] : '') + '</div>' +
+                        '<div data-col="cell" data-index="2">' + (item[3] ? item[3] : '') + '</div>' +
+                        '<div data-col="value" data-index="3">' + (item[4] ? item[4] : '') + '</div>' +
+                        '<div data-col="formula" data-index="4">' + (item[5] ? item[5] : '') + '</div>' +
                         '</div>';
                     var $item = $(tr).appendTo($innerResults);
                     if (isSelected) {
@@ -444,11 +444,16 @@ define([
                     me.addTooltips($item, item);
                 });
                 this.view.$resultsContainer.show();
+                if (this.view.resizeResults.defaultWidths.length === 0) {
+                    this.view.fillDefaultResultColsSize();
+                } else {
+                    this.view.applyResultColsSize();
+                }
             }
         },
 
         addTooltips: function (item, data) {
-            var cells = [item.find('.sheet'), item.find('.name'), item.find('.cell'), item.find('.value'), item.find('.formula')],
+            var cells = [item.find('[data-col="sheet"]'), item.find('[data-col="name"]'), item.find('[data-col="cell"]'), item.find('[data-col="value"]'), item.find('[data-col="formula"]')],
                 tips = [data[1], data[2], data[3], data[4], data[5]];
             cells.forEach(function (el, ind) {
                 var tip = tips[ind];

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -753,39 +753,98 @@
     }
     #search-results {
         padding: 0;
-        .search-table {
-            padding-top: 5px;
         width: 100%;
+        .search-header {
+            position: absolute;
+            top: 0;
+            left: 0;
             height: 100%;
-            position: relative;
+            min-width: 100%;
+        }
+        .search-table {
+            height: calc(100% - 28px);
+            min-width: 100%;
+            position: absolute;
+            top: 28px;
         }
         .header-item {
-            width:16%;
-            display: inline-block;
+            position: absolute;
+            top: 4px;
+            width: 42px;
             height: 18px;
+            display: inline-block;
+            line-height: 18px;
             text-align: start;
             font-weight: normal;
             padding-left: 4px;
-            padding-top: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            &[data-col="sheet"] {
+                left: 0;
+            }
+            &[data-col="name"] {
+                left: 42px;
+            }
+            &[data-col="cell"] {
+                left: 84px;
+            }
+            &[data-col="value"] {
+                left: 126px;
+            }
+            &[data-col="formula"] {
+                left: 168px;
+            }
             &:not(:first-child) {
                 border-left: @scaled-one-px-value-ie solid @border-divider-ie;
                 border-left: @scaled-one-px-value solid @border-divider;
             }
             &:last-child {
-                width:36%;
+                width: calc(100% - 168px);
+            }
+            &.zero-width {
+                display: none;
+            }
+        }
+        .header-resizer {
+            position: absolute;
+            height: 100%;
+            width: 4px;
+            cursor: col-resize;
+            z-index: @zindex-dropdown - 10;
+            background: transparent;
+            border: 0 none;
+            opacity: 0;
+            &[data-resizer="name"] {
+                left: calc(42px - 2px);
+            }
+            &[data-resizer="cell"] {
+                left: calc(84px - 2px);
+            }
+            &[data-resizer="value"] {
+                left: calc(126px - 2px);
+            }
+            &[data-resizer="formula"] {
+                left: calc(168px - 2px);
+            }
+            &.move {
+                opacity: 0.4;
+                border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
+                border-left: solid @scaled-one-px-value @border-toolbar;
+                border-right: solid @scaled-one-px-value-ie @border-toolbar-ie;
+                border-right: solid @scaled-one-px-value @border-toolbar;
             }
         }
         .search-items {
-            height: calc(100% - 24px);
-            position: absolute;
-            top: 28px;
+            height: 100%;
+            position: relative;
             width: 100%;
             overflow: hidden;
             .item {
                 padding: 0;
                 display: flex;
                 div {
-                    width: 16%;
+                    flex-shrink: 0;
+                    width: 42px;
                     padding-left: 4px;
                     height: 28px;
                     line-height: 28px;
@@ -793,7 +852,10 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     &:last-child {
-                        width: 36%;
+                        width: calc(100% - 168px);
+                    }
+                    &.zero-width {
+                        display: none;
                     }
                 }
             }