From ebe0f338cf3d95d0f73821cdba2ea6cfd27045ad Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 27 May 2020 18:34:15 +0300 Subject: [PATCH] [SSE] Set slicer style settings --- apps/common/main/resources/less/buttons.less | 7 + .../main/app/template/SlicerSettings.template | 2 +- .../main/app/view/SlicerSettings.js | 132 ++++++++++++------ .../main/app/view/SlicerSettingsAdvanced.js | 53 +++---- .../main/resources/less/rightmenu.less | 14 +- 5 files changed, 126 insertions(+), 82 deletions(-) diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 160ccb572..a0e6c8a3f 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -784,6 +784,13 @@ height: 54px; } + .icon-template-slicer.icon { + min-width: 36px; + height: 55px; + line-height: 53px; + border: none; + } + .icon { display: inline-block; .btn.btnsize(52px); diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template index 304bf2cf6..fb68d3f6b 100644 --- a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template +++ b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template @@ -72,7 +72,7 @@ -
+
diff --git a/apps/spreadsheeteditor/main/app/view/SlicerSettings.js b/apps/spreadsheeteditor/main/app/view/SlicerSettings.js index a98e2b830..fcd2475be 100644 --- a/apps/spreadsheeteditor/main/app/view/SlicerSettings.js +++ b/apps/spreadsheeteditor/main/app/view/SlicerSettings.js @@ -83,6 +83,7 @@ define([ this._noApply = false; this._originalProps = null; + this.styles = null; this.render(); }, @@ -99,9 +100,7 @@ define([ setApi: function(api) { if ( api == undefined ) return; this.api = api; - if (this.api) { - // this.api.asc_registerCallback('asc_InitSlicerStyles', _.bind(this.onInitStyles, this)); - } + this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this)); return this; }, @@ -160,9 +159,10 @@ define([ this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue(); } if (this.api) { - var props = new Asc.asc_CImgProperty(); - props.asc_putLockAspect(btn.pressed); - this.api.asc_setGraphicObjectProps(props); + if (this._originalProps) { + this._originalProps.asc_putLockAspect(btn.pressed); + this.api.asc_setGraphicObjectProps(this._originalProps); + } } }, this)); @@ -237,9 +237,9 @@ define([ }); this.lockedControls.push(this.numCols); - // this.spnColWidth.on('change', _.bind(this.onColWidthChange, this)); - // this.spnColHeight.on('change', _.bind(this.onColHeightChange, this)); - // this.numCols.on('change', _.bind(this.onColChange, this)); + this.spnColWidth.on('change', _.bind(this.onColWidthChange, this)); + this.spnColHeight.on('change', _.bind(this.onColHeightChange, this)); + this.numCols.on('change', _.bind(this.onColChange, this)); this.spnColWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnColHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.numCols.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); @@ -253,6 +253,14 @@ define([ this._initSettings = false; }, + onSendThemeColors: function() { + // get new table templates + if (this.mnuSlicerPicker && this._originalProps) { + this.onInitStyles(this._originalProps.asc_getSlicerProperties().asc_getStylesPictures()); + this.mnuSlicerPicker.scroller.update({alwaysVisibleY: true}); + } + }, + openAdvancedSettings: function(e) { if (this.linkAdvanced.hasClass('disabled')) return; @@ -270,6 +278,7 @@ define([ { imageProps: elValue, api: me.api, + styles: me.styles || me._originalProps.asc_getSlicerProperties().asc_getStylesPictures(), handler: function(result, value) { if (result == 'ok') { if (me.api) { @@ -328,12 +337,12 @@ define([ this._state.ColCount = value; } - // value = props.asc_getColWidth()/36000; - // if ( Math.abs(this._state.ColWidth-value)>0.001 || - // (this._state.ColWidth===null || value===null)&&(this._state.ColWidth!==value)) { - // this.spnColWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); - // this._state.ColWidth = value; - // } + value = slicerprops.asc_getButtonWidth()/36000; + if ( Math.abs(this._state.ColWidth-value)>0.001 || + (this._state.ColWidth===null || value===null)&&(this._state.ColWidth!==value)) { + this.spnColWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); + this._state.ColWidth = value; + } value = slicerprops.asc_getRowHeight()/36000; if ( Math.abs(this._state.ColHeight-value)>0.001 || @@ -342,18 +351,22 @@ define([ this._state.ColHeight = value; } - value = slicerprops.asc_getStyle(); if (!this.btnSlicerStyle) - this.onInitStyles(); - // var rec = this.mnuSlicerPicker.store.findWhere({type: value}); - // if (!rec) { - // rec = this.mnuSlicerPicker.store.at(0); - // } - // this.btnSlicerStyle.suspendEvents(); - // this.mnuSlicerPicker.selectRecord(rec, true); - // this.btnSlicerStyle.resumeEvents(); - // this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); - this.$el.find('.icon-template-table').css({'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); + this.onInitStyles(slicerprops.asc_getStylesPictures()); + value = slicerprops.asc_getStyle(); + if (this._state.StyleType!==value || this._isTemplatesChanged) { + var rec = this.mnuSlicerPicker.store.findWhere({type: value}); + if (!rec) { + rec = this.mnuSlicerPicker.store.at(0); + } + this.btnSlicerStyle.suspendEvents(); + this.mnuSlicerPicker.selectRecord(rec, true); + this.btnSlicerStyle.resumeEvents(); + this.$el.find('.icon-template-slicer').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'}); + this._state.StyleType=value; + } + this._isTemplatesChanged = false; + } } }, @@ -371,10 +384,11 @@ define([ this.spnHeight.setValue(h, true); } if (this.api) { - var props = new Asc.asc_CImgProperty(); - props.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); - props.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); - this.api.asc_setGraphicObjectProps(props); + if (this._originalProps) { + this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); + this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); + this.api.asc_setGraphicObjectProps(this._originalProps); + } } }, @@ -390,25 +404,54 @@ define([ this.spnWidth.setValue(w, true); } if (this.api) { - var props = new Asc.asc_CImgProperty(); - props.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); - props.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); - this.api.asc_setGraphicObjectProps(props); + if (this._originalProps) { + this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); + this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); + this.api.asc_setGraphicObjectProps(this._originalProps); + } + } + }, + + onColWidthChange: function(field, newValue, oldValue, eOpts){ + if (this.api) { + if (this._originalProps) { + this._originalProps.asc_getSlicerProperties().asc_setButtonWidth(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())*36000); + this.api.asc_setGraphicObjectProps(this._originalProps); + } + } + }, + + onColHeightChange: function(field, newValue, oldValue, eOpts){ + if (this.api) { + if (this._originalProps) { + this._originalProps.asc_getSlicerProperties().asc_setRowHeight(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())*36000); + this.api.asc_setGraphicObjectProps(this._originalProps); + } + } + }, + + onColChange: function(field, newValue, oldValue, eOpts){ + if (this.api) { + if (this._originalProps) { + this._originalProps.asc_getSlicerProperties().asc_setColumnCount(field.getNumberValue()); + this.api.asc_setGraphicObjectProps(this._originalProps); + } } }, onInitStyles: function(Templates){ var self = this; this._isTemplatesChanged = true; + this.styles = Templates; if (!this.btnSlicerStyle) { this.btnSlicerStyle = new Common.UI.Button({ - cls : 'btn-large-dataview sheet-template-table', - iconCls : 'icon-template-table', + cls : 'btn-large-dataview sheet-template-slicer', + iconCls : 'icon-template-slicer', menu : new Common.UI.Menu({ - style: 'width: 400px;', + style: 'width: 333px;', items: [ - { template: _.template('') } + { template: _.template('') } ] }) }); @@ -419,7 +462,7 @@ define([ restoreHeight: 325, groups: new Common.UI.DataViewGroupStore(), store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
'), + itemTemplate: _.template('
'), style: 'max-height: 325px;' }); }); @@ -441,7 +484,7 @@ define([ _.each(Templates, function(template){ arr.push({ id : Common.UI.getId(), - type : template.asc_getType(), + type : template.asc_getName(), imageUrl : template.asc_getImage(), allowSelected : true, selected : false @@ -452,12 +495,13 @@ define([ } }, - onSelectSlicerStyle: function(combo, record) { + onSelectSlicerStyle: function(btn, picker, itemView, record) { if (this._noApply) return; - // if (this._originalProps) { - // this._originalProps..asc_getSlicerProperties().asc_setStyle(record.get('type')); - // } + if (this._originalProps) { + this._originalProps.asc_getSlicerProperties().asc_setStyle(record.get('type')); + this.api.asc_setGraphicObjectProps(this._originalProps); + } }, setLocked: function (locked) { diff --git a/apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js index be8a75ff1..924fe5148 100644 --- a/apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js +++ b/apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js @@ -105,12 +105,12 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem this.btnSlicerStyle = new Common.UI.Button({ parentEl: $('#sliceradv-btn-style'), - cls : 'btn-large-dataview sheet-template-table', - iconCls : 'icon-template-table', + cls : 'btn-large-dataview sheet-template-slicer', + iconCls : 'icon-template-slicer', menu : new Common.UI.Menu({ - style: 'width: 400px;', + style: 'width: 333px;', items: [ - { template: _.template('') } + { template: _.template('') } ] }) }); @@ -120,7 +120,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem restoreHeight: 325, groups: new Common.UI.DataViewGroupStore(), store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
'), + itemTemplate: _.template('
'), style: 'max-height: 325px;' }); this.mnuSlicerPicker.on('item:click', _.bind(this.onSelectSlicerStyle, this, this.btnSlicerStyle)); @@ -161,24 +161,6 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem }, this)); this.spinners.push(this.numHeight); - // this.numColWidth = new Common.UI.MetricSpinner({ - // el: $('#sliceradv-spin-col-width'), - // step: .1, - // width: 85, - // defaultUnit : "cm", - // defaultValue : 0, - // value: '0 cm', - // maxValue: 5963.9, - // minValue: 0, - // visible: false - // }); - // this.numColWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){ - // var numval = field.getNumberValue(); - // if (this._changedProps) { - // } - // }, this)); - // this.spinners.push(this.numColWidth); - this.numColHeight = new Common.UI.MetricSpinner({ el: $('#sliceradv-spin-col-height'), step: .1, @@ -393,15 +375,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem this.lblFormula.text(slicerprops.asc_getNameInFormulas()); value = slicerprops.asc_getStyle(); - // var rec = this.mnuSlicerPicker.store.findWhere({type: value}); - // if (!rec) { - // rec = this.mnuSlicerPicker.store.at(0); - // } - // this.btnSlicerStyle.suspendEvents(); - // this.mnuSlicerPicker.selectRecord(rec, true); - // this.btnSlicerStyle.resumeEvents(); - // this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); - this.$window.find('.icon-template-table').css({'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); + var rec = this.mnuSlicerPicker.store.findWhere({type: value}); + if (!rec) { + rec = this.mnuSlicerPicker.store.at(0); + } + this.btnSlicerStyle.suspendEvents(); + this.mnuSlicerPicker.selectRecord(rec, true); + this.btnSlicerStyle.resumeEvents(); + this.$window.find('.icon-template-slicer').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'}); this._noApply = false; @@ -421,7 +402,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem afterRender: function() { this.updateMetricUnit(); - // this.onInitStyles(this.options.styles); + this.onInitStyles(this.options.styles); this._setDefaults(this._originalProps); if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); @@ -432,10 +413,10 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem onInitStyles: function(Templates){ var count = this.mnuSlicerPicker.store.length, arr = []; - _.each(Templates, function(template){ + Templates && _.each(Templates, function(template){ arr.push({ id : Common.UI.getId(), - type : template.asc_getType(), + type : template.asc_getName(), imageUrl : template.asc_getImage(), allowSelected : true, selected : false @@ -444,7 +425,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem this.mnuSlicerPicker.store.reset(arr); }, - onSelectSlicerStyle: function(combo, record) { + onSelectSlicerStyle: function(btn, picker, itemView, record) { if (this._noApply) return; if (this._changedProps) { diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 596b0f3a6..28a25d517 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -320,4 +320,16 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px - } } } -} \ No newline at end of file +} + +.sheet-template-slicer { + width: 56px; + height: 55px; +} + +.menu-slicer-template { + .item { + border: none; + .box-shadow(none); + } +}