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

[SSE] Change layout for chart settings in the right panel, remove chart style from the advanced chart settings.

Browse source
This commit is contained in:
Julia Radzhabova 2016-11-10 10:47:35 +03:00
parent 9fcf4dcb91
commit deb469bb83
5 changed files with 84 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
apps/common/main/resources/less/combo-dataview.less
View file

@ -199,9 +199,8 @@
.combo-template(64px); .combo-template(64px);
} }
.combo-pattern { .combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) {
@combo-dataview-button-width: 15px; @combo-dataview-button-width: 15px;
@combo-dataview-height: 40px;
height: @combo-dataview-height; height: @combo-dataview-height;
@ -216,16 +215,8 @@
} }
.item { .item {
margin: 4px 0 4px 4px; margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
.box-shadow(none); .box-shadow(none);
&:hover {
.box-shadow(0 0 0 1px @gray);
}
// &.selected {
// .box-shadow(0 0 0 2px @primary);
// }
} }
&.disabled { &.disabled {
@ -235,6 +226,16 @@
} }
} }
} }
};
.combo-pattern {
.combo-textart(40px);
.item {
&:hover {
.box-shadow(0 0 0 1px @gray);
}
}
.dropdown-menu { .dropdown-menu {
padding-right: 2px; padding-right: 2px;
@ -247,31 +248,22 @@
}; };
.combo-textart { .combo-textart {
@combo-dataview-button-width: 15px; .combo-textart();
@combo-dataview-height: 62px; }
height: @combo-dataview-height; .combo-chart-style {
.combo-textart(58px, 2px);
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
}
.button {
width: @combo-dataview-button-width;
height: @combo-dataview-height;
}
.item { .item {
margin: 4px 0 4px 4px; margin-left: 4px;
.box-shadow(none); .box-shadow(0 0 0 1px @gray);
} }
&.disabled { &.disabled {
.item { .item {
&:hover:not(.selected) { &:hover:not(.selected) {
.box-shadow(none); .box-shadow(0 0 0 1px @gray);
} }
} }
} }
}; }

18
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file

@ -18,9 +18,9 @@
</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>
@ -29,29 +29,31 @@
<label class="header"><%= scope.textType %></label> <label class="header"><%= scope.textType %></label>
<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">
<label class="header"><%= scope.textStyle %></label> <label class="header" style=""><%= scope.textStyle %></label>
<div id="chart-button-style" style=""></div> <div class="" id="chart-combo-style" style="width: 100%;"></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 class="padding-small" colspan=2> <td class="padding-small">
<label class="header"><%= scope.textRanges %></label> <label class="header"><%= scope.textRanges %></label>
<button type="button" class="btn btn-text-default" id="chart-btn-select-data" style="min-width: 100px; width: auto; display: block;"><%= scope.textSelectData %></button> <button type="button" class="btn btn-text-default" id="chart-btn-select-data" style="min-width: 100px; width: auto; display: block;"><%= scope.textSelectData %></button>
</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 align="center" colspan=2> <td align="center">
<label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>

6
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -1,15 +1,11 @@
<div id="id-chart-settings-dlg-style" class="settings-panel active"> <div id="id-chart-settings-dlg-style" class="settings-panel active">
<div class="inner-content"> <div class="inner-content">
<table cols="2" style=""> <table cols="1" style="">
<tr> <tr>
<td class="padding-large"> <td class="padding-large">
<label class="header"><%= scope.textType %></label> <label class="header"><%= scope.textType %></label>
<div id="chart-dlg-button-type" style="margin-right: 15px;"></div> <div id="chart-dlg-button-type" style="margin-right: 15px;"></div>
</td> </td>
<td class="padding-large">
<label class="header"><%= scope.textStyle %></label>
<div id="chart-dlg-button-style" style=""></div>
</td>
</tr> </tr>
</table> </table>
</div> </div>

131
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -45,6 +45,7 @@ define([
'backbone', 'backbone',
'common/main/lib/component/Button', 'common/main/lib/component/Button',
'common/main/lib/component/MetricSpinner', 'common/main/lib/component/MetricSpinner',
'common/main/lib/component/ComboDataView',
'spreadsheeteditor/main/app/view/ChartSettingsDlg' 'spreadsheeteditor/main/app/view/ChartSettingsDlg'
], function (menuTemplate, $, _, Backbone) { ], function (menuTemplate, $, _, Backbone) {
'use strict'; 'use strict';
@ -138,22 +139,27 @@ define([
value = props.asc_getSeveralChartStyles(); value = props.asc_getSeveralChartStyles();
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;
@ -457,30 +463,12 @@ define([
Common.NotificationCenter.trigger('edit:complete', this); Common.NotificationCenter.trigger('edit:complete', 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.asc_putChartProperties(this.chartProps); props.asc_putChartProperties(this.chartProps);
this.api.asc_setGraphicObjectProps(props); this.api.asc_setGraphicObjectProps(props);
} }
@ -494,64 +482,51 @@ 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 stylearray = [], var count = stylesStore.length;
selectedIdx = -1, if (count>0 && count==styles.length) {
selectedUrl; var data = stylesStore.models;
_.each(styles, function(item, index){ _.each(styles, function(style, index){
stylearray.push({ data[index].set('imageUrl', style.asc_getImageUrl());
imageUrl: item.asc_getImageUrl(),
data : item.asc_getStyle(),
tip : me.textStyle + ' ' + item.asc_getStyle()
}); });
if (me._state.ChartStyle == item.asc_getStyle()) { } else {
selectedIdx = index; var stylearray = [],
selectedUrl = item.asc_getImageUrl(); selectedIdx = -1;
} _.each(styles, function(item, index){
stylearray.push({
}); imageUrl: item.asc_getImageUrl(),
data : item.asc_getStyle(),
stylesStore.reset(stylearray, {silent: false}); tip : me.textStyle + ' ' + item.asc_getStyle()
});
});
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);
}
}, },
setLocked: function (locked) { setLocked: function (locked) {

99
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -79,7 +79,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._state = { this._state = {
ChartStyle: 1,
ChartType: Asc.c_oAscChartTypeSettings.barNormal ChartType: Asc.c_oAscChartTypeSettings.barNormal
}; };
this._noApply = true; this._noApply = true;
@ -174,34 +173,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnChartType.render($('#chart-dlg-button-type')); this.btnChartType.render($('#chart-dlg-button-type'));
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
this.btnChartStyle = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-wrap',
menu : new Common.UI.Menu({
additionalAlign: menuAddAlign,
items: [
{ template: _.template('<div id="id-chart-dlg-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
});
this.btnChartStyle.on('render:after', function(btn) {
me.mnuChartStylePicker = new Common.UI.DataView({
el: $('#id-chart-dlg-menu-style'),
parentMenu: btn.menu,
style: 'max-height: 411px;',
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
});
if (me.btnChartStyle.menu) {
me.btnChartStyle.menu.on('show:after', function () {
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
});
}
});
this.btnChartStyle.render($('#chart-dlg-button-style'));
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
this.cmbDataDirect = new Common.UI.ComboBox({ this.cmbDataDirect = new Common.UI.ComboBox({
el : $('#chart-dlg-combo-range'), el : $('#chart-dlg-combo-range'),
menuStyle : 'min-width: 120px;', menuStyle : 'min-width: 120px;',
@ -804,9 +775,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
afterRender: function() { afterRender: function() {
if (this.api)
this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
this._setDefaults(this.chartSettings); this._setDefaults(this.chartSettings);
if (this.storageName) { if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName); var value = Common.localStorage.getItem(this.storageName);
@ -835,7 +803,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
} }
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls); this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.updateChartStyles(this.api.asc_getChartPreviews(rawData.type));
this.chartSettings.changeType(rawData.type); this.chartSettings.changeType(rawData.type);
this.updateAxisProps(rawData.type, true); this.updateAxisProps(rawData.type, true);
this.vertAxisProps = this.chartSettings.getVertAxisProps(); this.vertAxisProps = this.chartSettings.getVertAxisProps();
@ -1018,62 +985,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.currentAxisProps = props; this.currentAxisProps = props;
}, },
onSelectStyle: function(btn, picker, itemView, record) {
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);
this._state.ChartStyle = rawData.data;
},
updateChartStyles: function(styles) {
var me = this;
if (styles && styles.length>0){
var stylesStore = this.mnuChartStylePicker.store;
if (stylesStore) {
var stylearray = [],
selectedIdx = -1,
selectedUrl;
_.each(styles, function(item, index){
stylearray.push({
imageUrl: item.asc_getImageUrl(),
data : 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});
}
}
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);
}
},
_setDefaults: function(props) { _setDefaults: function(props) {
var me = this; var me = this;
if (props ){ if (props ){
@ -1090,18 +1001,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
if (record) { if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
} }
this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
this._noApply = false; this._noApply = false;
this._state.ChartStyle = props.getStyle();
record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle});
this.mnuChartStylePicker.selectRecord(record, true);
if (record) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')');
}
var value = props.getRange(); var value = props.getRange();
this.txtDataRange.setValue((value) ? value : ''); this.txtDataRange.setValue((value) ? value : '');
this.dataRangeValid = value; this.dataRangeValid = value;
@ -1151,7 +1053,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
// Layout // Layout
this.chartSettings.putType(type); this.chartSettings.putType(type);
this.chartSettings.putStyle(this._state.ChartStyle);
this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1);
this.chartSettings.putRange(this.txtDataRange.getValue()); this.chartSettings.putRange(this.txtDataRange.getValue());