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

[DE] [PE] Change layout for chart settings in the right panel.

Browse source
This commit is contained in:
Julia Radzhabova 2016-11-10 12:37:28 +03:00
parent 46ebd78757
commit 3134a3f73c
4 changed files with 118 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/documenteditor/main/app/template/ChartSettings.template
View file

@ -38,11 +38,13 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small" colspan=2>
<div id="chart-button-type" style=""></div> <div id="chart-button-type" style=""></div>
</td> </td>
<td class="padding-small"> </tr>
<div id="chart-button-style" style=""></div> <tr>
<td class="padding-small" colspan=2>
<div class="" id="chart-combo-style" style="width: 100%;"></div>
</td> </td>
</tr> </tr>
<tr> <tr>

110
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -44,6 +44,7 @@ define([
'underscore', 'underscore',
'backbone', 'backbone',
'common/main/lib/component/Button', 'common/main/lib/component/Button',
'common/main/lib/component/ComboDataView',
'documenteditor/main/app/view/ImageSettingsAdvanced' 'documenteditor/main/app/view/ImageSettingsAdvanced'
], function (menuTemplate, $, _, Backbone) { ], function (menuTemplate, $, _, Backbone) {
'use strict'; 'use strict';
@ -152,22 +153,27 @@ define([
value = props.get_SeveralChartStyles(); value = props.get_SeveralChartStyles();
if (this._state.SeveralCharts && value) { if (this._state.SeveralCharts && value) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.cmbChartStyle.fieldPicker.deselectAll();
btnIconEl.css('background-image', 'none'); this.cmbChartStyle.menuPicker.deselectAll();
this.mnuChartStylePicker.selectRecord(null, true);
this._state.ChartStyle = null; this._state.ChartStyle = null;
} else { } else {
value = this.chartProps.getStyle(); value = this.chartProps.getStyle();
if (this._state.ChartStyle!==value) { if (this._state.ChartStyle!==value || this._isChartStylesChanged) {
var record = this.mnuChartStylePicker.store.findWhere({data: value}); this.cmbChartStyle.suspendEvents();
this.mnuChartStylePicker.selectRecord(record, true); var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value});
if (record) { this.cmbChartStyle.menuPicker.selectRecord(rec);
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.cmbChartStyle.resumeEvents();
btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')');
if (this._isChartStylesChanged) {
if (rec)
this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true);
else
this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true);
} }
this._state.ChartStyle=value; this._state.ChartStyle=value;
} }
} }
this._isChartStylesChanged = false;
this._noApply = false; this._noApply = false;
@ -443,34 +449,15 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onSelectStyle: function(btn, picker, itemView, record) { onSelectStyle: function(combo, record) {
if (this._noApply) return; if (this._noApply) return;
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
}
} else {
rawData = record;
}
var style = 'url(' + rawData.imageUrl + ')';
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', style);
if (this.api && !this._noApply && this.chartProps) { if (this.api && !this._noApply && this.chartProps) {
var props = new Asc.asc_CImgProperty(); var props = new Asc.asc_CImgProperty();
this.chartProps.putStyle(rawData.data); this.chartProps.putStyle(record.get('data'));
props.put_ChartProperties(this.chartProps); props.put_ChartProperties(this.chartProps);
this.api.ImgApply(props); this.api.ImgApply(props);
} }
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
@ -481,63 +468,50 @@ define([
updateChartStyles: function(styles) { updateChartStyles: function(styles) {
var me = this; var me = this;
this._isChartStylesChanged = true;
if (!this.btnChartStyle) { if (!this.cmbChartStyle) {
this.btnChartStyle = new Common.UI.Button({ this.cmbChartStyle = new Common.UI.ComboDataView({
cls : 'btn-large-dataview', itemWidth: 50,
iconCls : 'item-wrap', itemHeight: 50,
menu : new Common.UI.Menu({ menuMaxHeight: 270,
menuAlign: 'tr-br', enableKeyEvents: true,
items: [ cls: 'combo-chart-style'
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
}); });
this.btnChartStyle.render($('#chart-button-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.lockedControls.push(this.btnChartStyle); this.cmbChartStyle.openButton.menu.cmpEl.css({
this.mnuChartStylePicker = new Common.UI.DataView({ 'min-width': 178,
el: $('#id-chart-menu-style'), 'max-width': 178
style: 'max-height: 411px;',
parentMenu: this.btnChartStyle.menu,
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
}); });
this.cmbChartStyle.on('click', _.bind(this.onSelectStyle, this));
if (this.btnChartStyle.menu) { this.cmbChartStyle.openButton.menu.on('show:after', function () {
this.btnChartStyle.menu.on('show:after', function () { me.cmbChartStyle.menuPicker.scroller.update({alwaysVisibleY: true});
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
}); });
} this.lockedControls.push(this.cmbChartStyle);
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
} }
if (styles && styles.length>0){ if (styles && styles.length>0){
var stylesStore = this.mnuChartStylePicker.store; var stylesStore = this.cmbChartStyle.menuPicker.store;
if (stylesStore) { if (stylesStore) {
var count = stylesStore.length;
if (count>0 && count==styles.length) {
var data = stylesStore.models;
_.each(styles, function(style, index){
data[index].set('imageUrl', style.asc_getImageUrl());
});
} else {
var stylearray = [], var stylearray = [],
selectedIdx = -1, selectedIdx = -1;
selectedUrl;
_.each(styles, function(item, index){ _.each(styles, function(item, index){
stylearray.push({ stylearray.push({
imageUrl: item.asc_getImageUrl(), imageUrl: item.asc_getImageUrl(),
data : item.asc_getStyle(), data : item.asc_getStyle(),
tip : me.textStyle + ' ' + item.asc_getStyle() tip : me.textStyle + ' ' + item.asc_getStyle()
}); });
if (me._state.ChartStyle == item.asc_getStyle()) {
selectedIdx = index;
selectedUrl = item.asc_getImageUrl();
}
}); });
stylesStore.reset(stylearray, {silent: false}); stylesStore.reset(stylearray, {silent: false});
} }
} }
this.mnuChartStylePicker.selectByIndex(selectedIdx, true);
if (selectedIdx>=0 && this.btnChartStyle.cmpEl) {
var style = 'url(' + selectedUrl + ')';
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', style);
} }
}, },

14
apps/presentationeditor/main/app/template/ChartSettings.template
View file

@ -18,14 +18,14 @@
</td> </td>
</tr> </tr>
</table> </table>
<table cols="2"> <table cols="1">
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small">
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan=2> <td>
<label class="header"><%= scope.textChartType %></label> <label class="header"><%= scope.textChartType %></label>
</td> </td>
</tr> </tr>
@ -33,17 +33,19 @@
<td class="padding-small"> <td class="padding-small">
<div id="chart-button-type" style=""></div> <div id="chart-button-type" style=""></div>
</td> </td>
</tr>
<tr>
<td class="padding-small"> <td class="padding-small">
<div id="chart-button-style" style=""></div> <div id="chart-combo-style" style=""></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small">
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan=2> <td>
<button type="button" class="btn btn-text-default" id="chart-button-edit-data" style="width:115px;"><%= scope.textEditData %></button> <button type="button" class="btn btn-text-default" id="chart-button-edit-data" style="width:115px;"><%= scope.textEditData %></button>
</td> </td>
</tr> </tr>

112
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -43,7 +43,8 @@ define([
'jquery', 'jquery',
'underscore', 'underscore',
'backbone', 'backbone',
'common/main/lib/component/Button' 'common/main/lib/component/Button',
'common/main/lib/component/ComboDataView'
], function (menuTemplate, $, _, Backbone) { ], function (menuTemplate, $, _, Backbone) {
'use strict'; 'use strict';
@ -134,22 +135,27 @@ define([
value = props.get_SeveralChartStyles(); value = props.get_SeveralChartStyles();
if (this._state.SeveralCharts && value) { if (this._state.SeveralCharts && value) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.cmbChartStyle.fieldPicker.deselectAll();
btnIconEl.css('background-image', 'none'); this.cmbChartStyle.menuPicker.deselectAll();
this.mnuChartStylePicker.selectRecord(null, true);
this._state.ChartStyle = null; this._state.ChartStyle = null;
} else { } else {
value = props.getStyle(); value = props.getStyle();
if (this._state.ChartStyle!==value) { if (this._state.ChartStyle!==value || this._isChartStylesChanged) {
var record = this.mnuChartStylePicker.store.findWhere({data: value}); this.cmbChartStyle.suspendEvents();
this.mnuChartStylePicker.selectRecord(record, true); var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value});
if (record) { this.cmbChartStyle.menuPicker.selectRecord(rec);
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.cmbChartStyle.resumeEvents();
btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')');
if (this._isChartStylesChanged) {
if (rec)
this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true);
else
this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true);
} }
this._state.ChartStyle=value; this._state.ChartStyle=value;
} }
} }
this._isChartStylesChanged = false;
this._noApply = false; this._noApply = false;
@ -352,33 +358,14 @@ define([
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
onSelectStyle: function(btn, picker, itemView, record) { onSelectStyle: function(combo, record) {
if (this._noApply) return; if (this._noApply) return;
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
}
} else {
rawData = record;
}
var style = 'url(' + rawData.imageUrl + ')';
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', style);
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscChartProp(); var props = new Asc.CAscChartProp();
props.putStyle(rawData.data); props.putStyle(record.get('data'));
this.api.ChartApply(props); this.api.ChartApply(props);
} }
this.fireEvent('editcomplete', this); this.fireEvent('editcomplete', this);
}, },
@ -389,63 +376,50 @@ define([
updateChartStyles: function(styles) { updateChartStyles: function(styles) {
var me = this; var me = this;
this._isChartStylesChanged = true;
if (!this.btnChartStyle) { if (!this.cmbChartStyle) {
this.btnChartStyle = new Common.UI.Button({ this.cmbChartStyle = new Common.UI.ComboDataView({
cls : 'btn-large-dataview', itemWidth: 50,
iconCls : 'item-wrap', itemHeight: 50,
menu : new Common.UI.Menu({ menuMaxHeight: 270,
menuAlign: 'tr-br', enableKeyEvents: true,
items: [ cls: 'combo-chart-style'
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
}); });
this.btnChartStyle.render($('#chart-button-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.lockedControls.push(this.btnChartStyle); this.cmbChartStyle.openButton.menu.cmpEl.css({
this.mnuChartStylePicker = new Common.UI.DataView({ 'min-width': 178,
el: $('#id-chart-menu-style'), 'max-width': 178
style: 'max-height: 411px;',
parentMenu: this.btnChartStyle.menu,
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
}); });
this.cmbChartStyle.on('click', _.bind(this.onSelectStyle, this));
if (this.btnChartStyle.menu) { this.cmbChartStyle.openButton.menu.on('show:after', function () {
this.btnChartStyle.menu.on('show:after', function () { me.cmbChartStyle.menuPicker.scroller.update({alwaysVisibleY: true});
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
}); });
} this.lockedControls.push(this.cmbChartStyle);
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
} }
if (styles && styles.length>0){ if (styles && styles.length>0){
var stylesStore = this.mnuChartStylePicker.store; var stylesStore = this.cmbChartStyle.menuPicker.store;
if (stylesStore) { if (stylesStore) {
var count = stylesStore.length;
if (count>0 && count==styles.length) {
var data = stylesStore.models;
_.each(styles, function(style, index){
data[index].set('imageUrl', style.asc_getImageUrl());
});
} else {
var stylearray = [], var stylearray = [],
selectedIdx = -1, selectedIdx = -1;
selectedUrl;
_.each(styles, function(item, index){ _.each(styles, function(item, index){
stylearray.push({ stylearray.push({
imageUrl: item.asc_getImageUrl(), imageUrl: item.asc_getImageUrl(),
data : item.asc_getStyle(), data : item.asc_getStyle(),
tip : me.textStyle + ' ' + item.asc_getStyle() tip : me.textStyle + ' ' + item.asc_getStyle()
}); });
if (me._state.ChartStyle == item.asc_getStyle()) {
selectedIdx = index;
selectedUrl = item.asc_getImageUrl();
}
}); });
stylesStore.reset(stylearray, {silent: false}); stylesStore.reset(stylearray, {silent: false});
} }
} }
this.mnuChartStylePicker.selectByIndex(selectedIdx, true);
if (selectedIdx>=0 && this.btnChartStyle.cmpEl) {
var style = 'url(' + selectedUrl + ')';
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', style);
} }
}, },