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; height: 54px;
} }
.icon-template-slicer.icon {
min-width: 36px;
height: 55px;
line-height: 53px;
border: none;
}
.icon { .icon {
display: inline-block; display: inline-block;
.btn.btnsize(52px); .btn.btnsize(52px);

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

@ -72,7 +72,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <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> </td>
</tr> </tr>
<tr> <tr>

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

@ -83,6 +83,7 @@ define([
this._noApply = false; this._noApply = false;
this._originalProps = null; this._originalProps = null;
this.styles = null;
this.render(); this.render();
}, },
@ -99,9 +100,7 @@ define([
setApi: function(api) { setApi: function(api) {
if ( api == undefined ) return; if ( api == undefined ) return;
this.api = api; this.api = api;
if (this.api) { this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
// this.api.asc_registerCallback('asc_InitSlicerStyles', _.bind(this.onInitStyles, this));
}
return this; return this;
}, },
@ -160,9 +159,10 @@ define([
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue(); this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
} }
if (this.api) { if (this.api) {
var props = new Asc.asc_CImgProperty(); if (this._originalProps) {
props.asc_putLockAspect(btn.pressed); this._originalProps.asc_putLockAspect(btn.pressed);
this.api.asc_setGraphicObjectProps(props); this.api.asc_setGraphicObjectProps(this._originalProps);
}
} }
}, this)); }, this));
@ -237,9 +237,9 @@ define([
}); });
this.lockedControls.push(this.numCols); this.lockedControls.push(this.numCols);
// this.spnColWidth.on('change', _.bind(this.onColWidthChange, this)); this.spnColWidth.on('change', _.bind(this.onColWidthChange, this));
// this.spnColHeight.on('change', _.bind(this.onColHeightChange, this)); this.spnColHeight.on('change', _.bind(this.onColHeightChange, this));
// this.numCols.on('change', _.bind(this.onColChange, this)); this.numCols.on('change', _.bind(this.onColChange, this));
this.spnColWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); this.spnColWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
this.spnColHeight.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);}); this.numCols.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
@ -253,6 +253,14 @@ define([
this._initSettings = false; 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) { openAdvancedSettings: function(e) {
if (this.linkAdvanced.hasClass('disabled')) return; if (this.linkAdvanced.hasClass('disabled')) return;
@ -270,6 +278,7 @@ define([
{ {
imageProps: elValue, imageProps: elValue,
api: me.api, api: me.api,
styles: me.styles || me._originalProps.asc_getSlicerProperties().asc_getStylesPictures(),
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
if (me.api) { if (me.api) {
@ -328,12 +337,12 @@ define([
this._state.ColCount = value; this._state.ColCount = value;
} }
// value = props.asc_getColWidth()/36000; value = slicerprops.asc_getButtonWidth()/36000;
// if ( Math.abs(this._state.ColWidth-value)>0.001 || if ( Math.abs(this._state.ColWidth-value)>0.001 ||
// (this._state.ColWidth===null || value===null)&&(this._state.ColWidth!==value)) { (this._state.ColWidth===null || value===null)&&(this._state.ColWidth!==value)) {
// this.spnColWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); this.spnColWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
// this._state.ColWidth = value; this._state.ColWidth = value;
// } }
value = slicerprops.asc_getRowHeight()/36000; value = slicerprops.asc_getRowHeight()/36000;
if ( Math.abs(this._state.ColHeight-value)>0.001 || if ( Math.abs(this._state.ColHeight-value)>0.001 ||
@ -342,18 +351,22 @@ define([
this._state.ColHeight = value; this._state.ColHeight = value;
} }
value = slicerprops.asc_getStyle();
if (!this.btnSlicerStyle) if (!this.btnSlicerStyle)
this.onInitStyles(); this.onInitStyles(slicerprops.asc_getStylesPictures());
// var rec = this.mnuSlicerPicker.store.findWhere({type: value}); value = slicerprops.asc_getStyle();
// if (!rec) { if (this._state.StyleType!==value || this._isTemplatesChanged) {
// rec = this.mnuSlicerPicker.store.at(0); var rec = this.mnuSlicerPicker.store.findWhere({type: value});
// } if (!rec) {
// this.btnSlicerStyle.suspendEvents(); rec = this.mnuSlicerPicker.store.at(0);
// this.mnuSlicerPicker.selectRecord(rec, true); }
// this.btnSlicerStyle.resumeEvents(); this.btnSlicerStyle.suspendEvents();
// this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); this.mnuSlicerPicker.selectRecord(rec, true);
this.$el.find('.icon-template-table').css({'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); 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); this.spnHeight.setValue(h, true);
} }
if (this.api) { if (this.api) {
var props = new Asc.asc_CImgProperty(); if (this._originalProps) {
props.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w));
props.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h));
this.api.asc_setGraphicObjectProps(props); this.api.asc_setGraphicObjectProps(this._originalProps);
}
} }
}, },
@ -390,25 +404,54 @@ define([
this.spnWidth.setValue(w, true); this.spnWidth.setValue(w, true);
} }
if (this.api) { if (this.api) {
var props = new Asc.asc_CImgProperty(); if (this._originalProps) {
props.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w)); this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w));
props.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h)); this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h));
this.api.asc_setGraphicObjectProps(props); 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){ onInitStyles: function(Templates){
var self = this; var self = this;
this._isTemplatesChanged = true; this._isTemplatesChanged = true;
this.styles = Templates;
if (!this.btnSlicerStyle) { if (!this.btnSlicerStyle) {
this.btnSlicerStyle = new Common.UI.Button({ this.btnSlicerStyle = new Common.UI.Button({
cls : 'btn-large-dataview sheet-template-table', cls : 'btn-large-dataview sheet-template-slicer',
iconCls : 'icon-template-table', iconCls : 'icon-template-slicer',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 400px;', style: 'width: 333px;',
items: [ 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, restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), 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;' style: 'max-height: 325px;'
}); });
}); });
@ -441,7 +484,7 @@ define([
_.each(Templates, function(template){ _.each(Templates, function(template){
arr.push({ arr.push({
id : Common.UI.getId(), id : Common.UI.getId(),
type : template.asc_getType(), type : template.asc_getName(),
imageUrl : template.asc_getImage(), imageUrl : template.asc_getImage(),
allowSelected : true, allowSelected : true,
selected : false selected : false
@ -452,12 +495,13 @@ define([
} }
}, },
onSelectSlicerStyle: function(combo, record) { onSelectSlicerStyle: function(btn, picker, itemView, record) {
if (this._noApply) return; if (this._noApply) return;
// if (this._originalProps) { if (this._originalProps) {
// this._originalProps..asc_getSlicerProperties().asc_setStyle(record.get('type')); this._originalProps.asc_getSlicerProperties().asc_setStyle(record.get('type'));
// } this.api.asc_setGraphicObjectProps(this._originalProps);
}
}, },
setLocked: function (locked) { 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({ this.btnSlicerStyle = new Common.UI.Button({
parentEl: $('#sliceradv-btn-style'), parentEl: $('#sliceradv-btn-style'),
cls : 'btn-large-dataview sheet-template-table', cls : 'btn-large-dataview sheet-template-slicer',
iconCls : 'icon-template-table', iconCls : 'icon-template-slicer',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 400px;', style: 'width: 333px;',
items: [ 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, restoreHeight: 325,
groups: new Common.UI.DataViewGroupStore(), groups: new Common.UI.DataViewGroupStore(),
store: new Common.UI.DataViewStore(), 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;' style: 'max-height: 325px;'
}); });
this.mnuSlicerPicker.on('item:click', _.bind(this.onSelectSlicerStyle, this, this.btnSlicerStyle)); 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));
this.spinners.push(this.numHeight); 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({ this.numColHeight = new Common.UI.MetricSpinner({
el: $('#sliceradv-spin-col-height'), el: $('#sliceradv-spin-col-height'),
step: .1, step: .1,
@ -393,15 +375,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
this.lblFormula.text(slicerprops.asc_getNameInFormulas()); this.lblFormula.text(slicerprops.asc_getNameInFormulas());
value = slicerprops.asc_getStyle(); value = slicerprops.asc_getStyle();
// var rec = this.mnuSlicerPicker.store.findWhere({type: value}); var rec = this.mnuSlicerPicker.store.findWhere({type: value});
// if (!rec) { if (!rec) {
// rec = this.mnuSlicerPicker.store.at(0); rec = this.mnuSlicerPicker.store.at(0);
// } }
// this.btnSlicerStyle.suspendEvents(); this.btnSlicerStyle.suspendEvents();
// this.mnuSlicerPicker.selectRecord(rec, true); this.mnuSlicerPicker.selectRecord(rec, true);
// this.btnSlicerStyle.resumeEvents(); 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-slicer').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'});
this.$window.find('.icon-template-table').css({'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'});
this._noApply = false; this._noApply = false;
@ -421,7 +402,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
afterRender: function() { afterRender: function() {
this.updateMetricUnit(); this.updateMetricUnit();
// this.onInitStyles(this.options.styles); this.onInitStyles(this.options.styles);
this._setDefaults(this._originalProps); this._setDefaults(this._originalProps);
if (this.storageName) { if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName); var value = Common.localStorage.getItem(this.storageName);
@ -432,10 +413,10 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
onInitStyles: function(Templates){ onInitStyles: function(Templates){
var count = this.mnuSlicerPicker.store.length, var count = this.mnuSlicerPicker.store.length,
arr = []; arr = [];
_.each(Templates, function(template){ Templates && _.each(Templates, function(template){
arr.push({ arr.push({
id : Common.UI.getId(), id : Common.UI.getId(),
type : template.asc_getType(), type : template.asc_getName(),
imageUrl : template.asc_getImage(), imageUrl : template.asc_getImage(),
allowSelected : true, allowSelected : true,
selected : false selected : false
@ -444,7 +425,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
this.mnuSlicerPicker.store.reset(arr); this.mnuSlicerPicker.store.reset(arr);
}, },
onSelectSlicerStyle: function(combo, record) { onSelectSlicerStyle: function(btn, picker, itemView, record) {
if (this._noApply) return; if (this._noApply) return;
if (this._changedProps) { if (this._changedProps) {

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

@ -320,4 +320,16 @@ 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);
}
}