[SSE] Scale to Fit (custom scale)

apps/common/main/resources/less/dropdown-menu.less

@@ -57,6 +57,9 @@
                 margin-left: -18px;
                 background-position: @menu-check-offset-x @menu-check-offset-y;
             }
+            &.custom-scale:before {
+                margin-top: 3px;
+            }
         }
 
         .menu-item-icon {

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

@@ -72,7 +72,8 @@ define([
             this.addListeners({
                 'Toolbar': {
                     'change:compact': this.onClickChangeCompact.bind(me),
-                    'change:scalespn': this.onClickChangeScaleInMenu.bind(me)
+                    'change:scalespn': this.onClickChangeScaleInMenu.bind(me),
+                    'click:customscale': this.onScaleClick.bind(me)
                 },
                 'FileMenu': {
                     'menu:hide': me.onFileMenu.bind(me, 'hide'),
@@ -1841,11 +1842,9 @@ define([
                     } else {
                         this._state.scale = 5;
                     }
-                    if (this.toolbar.spnScale) {
+                    this.toolbar.setValueCustomScale(scale);
-                        this.toolbar.spnScale.setValue(scale);
-                    }
                 } else if (scale === undefined) {
-                    this.toolbar.spnScale.setValue(this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale());
+                    this.toolbar.setValueCustomScale(this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale());
                 }
                 _.each(this.toolbar.btnScale.menu.items, function(item){
                     if (item.value === me._state.scale) {
@@ -3394,16 +3393,39 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onClickChangeScaleInMenu: function(scale) {
+        onClickChangeScaleInMenu: function(type, curScale) {
             if (this.api) {
+                var scale;
+                if (type === 'up') {
+                    if (curScale % 5 > 0.001) {
+                        scale = Math.ceil(curScale / 5) * 5;
+                    } else {
+                        scale = curScale + 5;
+                    }
+                } else {
+                    if (curScale % 5 > 0.001) {
+                        scale = Math.floor(curScale / 5) * 5;
+                    } else {
+                        scale = curScale - 5;
+                    }
+                }
+                if (scale > 400) {
+                    scale = 400;
+                } else if (scale < 10) {
+                    scale = 10;
+                }
                 this.api.asc_SetPrintScale(0, 0, scale);
                 this.onChangeScaleSettings(0, 0, scale);
             }
         },
 
-        onScaleClick: function(menu, item, state) {
+        onScaleClick: function(menu, item, event, scale) {
             var me = this;
             if (me.api) {
+                if (scale !== undefined) {
+                    me.api.asc_SetPrintScale(0, 0, scale);
+                    me._state.scale = 4;
+                } else {
                     switch (item.value) {
                         case 0:
                             me.api.asc_SetPrintScale(0, 0, 100);
@@ -3442,6 +3464,7 @@ define([
                             break;
                     }
                 }
+            }
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },

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

@@ -1347,15 +1347,20 @@ define([
 
                 me.mnuCustomScale = new Common.UI.MenuItem({
                     template: _.template([
-                        '<div class="checkable" style="padding: 5px 20px; font-weight: normal;line-height: 1.42857143;color: #444444;font-size: 11px;height: 32px;">',
+                        '<div class="checkable custom-scale" style="padding: 5px 20px;font-weight: normal;line-height: 1.42857143;color: #444444;font-size: 11px;height: 32px;"',
-                        '<label class="title" style="">' + me.textScale + '</label>',
+                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
-                        '<div id="spn-scale-settings" style="float: right;"></div>',
+                        'data-stopPropagation="true"',
+                        '<% } %>', '>',
+                        '<label class="title" style="padding-top: 3px;">' + me.textScale + '</label>',
+                        '<button id="custom-scale-up" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon btn-zoomin">&nbsp;</i></button>',
+                        '<label id="value-custom-scale" style="float:right;padding: 3px 3px;"></label>',
+                        '<button id="custom-scale-down" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon btn-zoomout">&nbsp;</i></button>',
                         '</div>'
                     ].join('')),
                     stopPropagation: true,
-                    value: 4,
                     toggleGroup: 'menuScale',
-                    checkable: true
+                    checkable: true,
+                    value: 4
                 });
 
                 me.btnScale = new Common.UI.Button({
@@ -1473,24 +1478,39 @@ define([
 
         onAfterShowMenuScale: function () {
             var me = this;
-            if (!this.spnScale) {
+            if (me.api) {
-                this.spnScale = new Common.UI.MetricSpinner({
+                var scale = me.api.asc_getPageOptions().asc_getPageSetup().asc_getScale();
-                    el: $('#spn-scale-settings'),
+                $('#value-custom-scale', me.mnuCustomScale.$el).html(scale + '%');
-                    step: 1,
+                me.valueCustomScale = scale;
-                    width: 80,
-                    defaultUnit: "%",
-                    maxValue: 400,
-                    minValue: 10,
-                    defaultValue: '100 %'
-                });
-                if (this.api) {
-                    var scale = this.api.asc_getPageOptions().asc_getPageSetup().asc_getScale();
-                    this.spnScale.setValue(scale);
             }
-                this.spnScale.on('change', _.bind(function(field){
+            if (!me.itemCustomScale) {
-                    me.fireEvent('change:scalespn', [field.getNumberValue()]);
+                me.itemCustomScale = $('.custom-scale', me.mnuCustomScale.$el).on('click', _.bind(function () {
+                    me.fireEvent('click:customscale', [undefined, undefined, undefined, me.valueCustomScale], this);
                 }, this));
             }
+            if (!me.btnCustomScaleUp) {
+                me.btnCustomScaleUp = new Common.UI.Button({
+                    el: $('#custom-scale-up', me.mnuCustomScale.$el),
+                    cls: 'btn-toolbar'
+                }).on('click', _.bind(function () {
+                    me.fireEvent('change:scalespn', ['up', me.valueCustomScale], this);
+                }, this));
+            }
+            if (!me.btnCustomScaleDown) {
+                me.btnCustomScaleDown = new Common.UI.Button({
+                    el: $('#custom-scale-down', me.mnuCustomScale.$el),
+                    cls: 'btn-toolbar'
+                }).on('click', _.bind(function () {
+                    me.fireEvent('change:scalespn', ['down', me.valueCustomScale], this);
+                }, this));
+            }
+        },
+
+        setValueCustomScale: function(val) {
+            if (this.api && val !== null && val !== undefined) {
+                $('#value-custom-scale', this.mnuCustomScale.$el).html(val + '%');
+                this.valueCustomScale = val;
+            }
         },
 
         render: function (mode) {