Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Set slicer style settings

Browse source
This commit is contained in:
Julia Radzhabova 2020-05-27 18:34:15 +03:00
parent c3eb5132da
commit ebe0f338cf
5 changed files with 126 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/main/resources/less/buttons.less
View file

@ -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);

2
apps/spreadsheeteditor/main/app/template/SlicerSettings.template
View file

@ -72,7 +72,7 @@
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="slicer-btn-style" style="width: 100%;height: 52px;"></div>
<div id="slicer-btn-style" style="width: 100%;"></div>
</td>
</tr>
<tr>

132
apps/spreadsheeteditor/main/app/view/SlicerSettings.js
View file

@ -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('<div id="id-slicer-menu-style" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
{ template: _.template('<div id="id-slicer-menu-style" class="menu-slicer-template" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
@ -419,7 +462,7 @@ define([
restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="46" width="61"></div>'),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="49" width="36"></div>'),
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) {

53
apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js
View file

@ -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('<div id="sliceradv-menu-style" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
{ template: _.template('<div id="sliceradv-menu-style" class="menu-slicer-template" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
@ -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('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="46" width="61"></div>'),
itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="49" width="36"></div>'),
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) {

12
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -321,3 +321,15 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
}
}
}
.sheet-template-slicer {
width: 56px;
height: 55px;
}
.menu-slicer-template {
.item {
border: none;
.box-shadow(none);
}
}