Skip to content

W
web-apps
Commit deb469bb authored by Julia Radzhabova's avatar Julia Radzhabova
Browse files
Options

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

[SSE] Change layout for chart settings in the right panel, remove chart style from the advanced chart settings.
parent 9fcf4dcb
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 219 deletions
apps/common/main/resources/less/combo-dataview.less
View file @ deb469bb
......@@ -199,9 +199,8 @@
.combo-template(64px);
}
.combo-pattern {
.combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) {
@combo-dataview-button-width: 15px;
@combo-dataview-height: 40px;
height: @combo-dataview-height;
......@@ -216,16 +215,8 @@
}
.item {
margin: 4px 0 4px 4px;
margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
.box-shadow(none);
&:hover {
.box-shadow(0 0 0 1px @gray);
}
// &.selected {
// .box-shadow(0 0 0 2px @primary);
// }
}
&.disabled {
......@@ -235,6 +226,16 @@
}
}
}
};
.combo-pattern {
.combo-textart(40px);
.item {
&:hover {
.box-shadow(0 0 0 1px @gray);
}
}
.dropdown-menu {
padding-right: 2px;
......@@ -247,31 +248,22 @@
};
.combo-textart {
@combo-dataview-button-width: 15px;
@combo-dataview-height: 62px;
height: @combo-dataview-height;
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
}
.combo-textart();
}
.button {
width: @combo-dataview-button-width;
height: @combo-dataview-height;
}
.combo-chart-style {
.combo-textart(58px, 2px);
.item {
margin: 4px 0 4px 4px;
.box-shadow(none);
margin-left: 4px;
.box-shadow(0 0 0 1px @gray);
}
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(none);
.box-shadow(0 0 0 1px @gray);
}
}
}
};
}
\ No newline at end of file
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file @ deb469bb
......@@ -18,9 +18,9 @@
</td>
</tr>
</table>
<table cols="2">
<table cols="1">
<tr>
<td class="padding-small" colspan=2>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
......@@ -29,29 +29,31 @@
<label class="header"><%= scope.textType %></label>
<div id="chart-button-type" style=""></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="header"><%= scope.textStyle %></label>
<div id="chart-button-style" style=""></div>
<label class="header" style=""><%= scope.textStyle %></label>
<div class="" id="chart-combo-style" style="width: 100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<td class="padding-small">
<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>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td align="center" colspan=2>
<td align="center">
<label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label>
</td>
</tr>
......
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file @ deb469bb
<div id="id-chart-settings-dlg-style" class="settings-panel active">
<div class="inner-content">
<table cols="2" style="">
<table cols="1" style="">
<tr>
<td class="padding-large">
<label class="header"><%= scope.textType %></label>
<div id="chart-dlg-button-type" style="margin-right: 15px;"></div>
</td>
<td class="padding-large">
<label class="header"><%= scope.textStyle %></label>
<div id="chart-dlg-button-style" style=""></div>
</td>
</tr>
</table>
</div>
......
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file @ deb469bb
......@@ -45,6 +45,7 @@ define([
'backbone',
'common/main/lib/component/Button',
'common/main/lib/component/MetricSpinner',
'common/main/lib/component/ComboDataView',
'spreadsheeteditor/main/app/view/ChartSettingsDlg'
], function (menuTemplate, $, _, Backbone) {
'use strict';
......@@ -138,22 +139,27 @@ define([
value = props.asc_getSeveralChartStyles();
if (this._state.SeveralCharts && value) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', 'none');
this.mnuChartStylePicker.selectRecord(null, true);
this.cmbChartStyle.fieldPicker.deselectAll();
this.cmbChartStyle.menuPicker.deselectAll();
this._state.ChartStyle = null;
} else {
value = this.chartProps.getStyle();
if (this._state.ChartStyle!==value) {
var record = this.mnuChartStylePicker.store.findWhere({data: value});
this.mnuChartStylePicker.selectRecord(record, true);
if (record) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')');
if (this._state.ChartStyle!==value || this._isChartStylesChanged) {
this.cmbChartStyle.suspendEvents();
var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value});
this.cmbChartStyle.menuPicker.selectRecord(rec);
this.cmbChartStyle.resumeEvents();
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._isChartStylesChanged = false;
this._noApply = false;
......@@ -457,30 +463,12 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onSelectStyle: function(btn, picker, itemView, record) {
onSelectStyle: function(combo, 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);
if (this.api && !this._noApply && this.chartProps) {
var props = new Asc.asc_CImgProperty();
this.chartProps.putStyle(rawData.data);
this.chartProps.putStyle(record.get('data'));
props.asc_putChartProperties(this.chartProps);
this.api.asc_setGraphicObjectProps(props);
}
......@@ -494,64 +482,51 @@ define([
updateChartStyles: function(styles) {
var me = this;
if (!this.btnChartStyle) {
this.btnChartStyle = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-wrap',
menu : new Common.UI.Menu({
menuAlign: 'tr-br',
items: [
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
this._isChartStylesChanged = true;
if (!this.cmbChartStyle) {
this.cmbChartStyle = new Common.UI.ComboDataView({
itemWidth: 50,
itemHeight: 50,
menuMaxHeight: 270,
enableKeyEvents: true,
cls: 'combo-chart-style'
});
this.btnChartStyle.render($('#chart-button-style'));
this.lockedControls.push(this.btnChartStyle);
this.mnuChartStylePicker = new Common.UI.DataView({
el: $('#id-chart-menu-style'),
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.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({
'min-width': 178,
'max-width': 178
});
if (this.btnChartStyle.menu) {
this.btnChartStyle.menu.on('show:after', function () {
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
});
}
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
this.cmbChartStyle.on('click', _.bind(this.onSelectStyle, this));
this.cmbChartStyle.openButton.menu.on('show:after', function () {
me.cmbChartStyle.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbChartStyle);
}
if (styles && styles.length>0){
var stylesStore = this.mnuChartStylePicker.store;
var stylesStore = this.cmbChartStyle.menuPicker.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()
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());
});
if (me._state.ChartStyle == item.asc_getStyle()) {
selectedIdx = index;
selectedUrl = item.asc_getImageUrl();
}
});
stylesStore.reset(stylearray, {silent: false});
} else {
var stylearray = [],
selectedIdx = -1;
_.each(styles, function(item, index){
stylearray.push({
imageUrl: item.asc_getImageUrl(),
data : item.asc_getStyle(),
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) {
......
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file @ deb469bb
......@@ -79,7 +79,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._state = {
ChartStyle: 1,
ChartType: Asc.c_oAscChartTypeSettings.barNormal
};
this._noApply = true;
......@@ -174,34 +173,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnChartType.render($('#chart-dlg-button-type'));
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({
el : $('#chart-dlg-combo-range'),
menuStyle : 'min-width: 120px;',
......@@ -804,9 +775,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
afterRender: function() {
if (this.api)
this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
this._setDefaults(this.chartSettings);
if (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.updateChartStyles(this.api.asc_getChartPreviews(rawData.type));
this.chartSettings.changeType(rawData.type);
this.updateAxisProps(rawData.type, true);
this.vertAxisProps = this.chartSettings.getVertAxisProps();
......@@ -1018,62 +985,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
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) {
var me = this;
if (props ){
......@@ -1090,18 +1001,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
}
this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
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();
this.txtDataRange.setValue((value) ? value : '');
this.dataRangeValid = value;
......@@ -1151,7 +1053,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
// Layout
this.chartSettings.putType(type);
this.chartSettings.putStyle(this._state.ChartStyle);
this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1);
this.chartSettings.putRange(this.txtDataRange.getValue());
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7