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

[SSE][PE] Set svg icons for chart types

Browse source
This commit is contained in:
Julia Radzhabova 2020-05-06 18:04:48 +03:00
parent fd5c8d5f79
commit 0a54513e47
18 changed files with 46 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apps/common/main/resources/img/toolbar/charttypes.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
apps/common/main/resources/img/toolbar/charttypes@1.5x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
apps/common/main/resources/img/toolbar/charttypes@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

116
apps/common/main/resources/less/toolbar.less
View file

@ -515,7 +515,6 @@
}
.item-chartlist {
//.background-ximage-v2('toolbar/charttypes.png', 250px);
width: 40px;
height: 40px;
.icon {
@ -530,118 +529,3 @@
}
}
.line-normal {
background-position: 0 0;
}
.line-stack {
background-position: -50px 0;
}
.line-pstack {
background-position: -100px 0;
}
.line-3d {
background-position: -150px 0;
}
.column-normal {
background-position: 0 -50px;
}
.column-stack{
background-position: -50px -50px;
}
.column-pstack{
background-position: -100px -50px;
}
.column-3d-normal {
background-position: -150px -50px;
}
.column-3d-stack{
background-position: -200px -50px;
}
.column-3d-pstack{
background-position: -150px -100px;
}
.column-3d-normal-per{
background-position: -200px -100px;
}
.bar-normal {
background-position: 0 -100px;
}
.bar-stack{
background-position: -50px -100px;
}
.bar-pstack{
background-position: -100px -100px;
}
.bar-3d-normal {
background-position: -150px -150px;
}
.bar-3d-stack{
background-position: -200px -150px;
}
.bar-3d-pstack{
background-position: -150px -200px;
}
.area-normal {
background-position: 0 -150px;
}
.area-stack{
background-position: -50px -150px;
}
.area-pstack{
background-position: -100px -150px;
}
.pie-normal {
background-position: 0 -200px;
}
.pie-3d-normal {
background-position: -200px -200px;
}
.point-normal{
background-position: -50px -200px;
}
.stock-normal{
background-position: -100px -200px;
}
.pie-doughnut{
background-position: -200px 0;
}
.surface-normal{
background-position: 0px -300px;
}
.surface-wireframe{
background-position: -50px -300px;
}
.contour-normal{
background-position: -100px -300px;
}
.contour-wireframe{
background-position: -150px -300px;
}

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

@ -119,7 +119,7 @@ define([
value = props.get_SeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = props.getType();
@ -127,9 +127,9 @@ define([
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
@ -200,9 +200,9 @@ define([
var me = this;
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -215,7 +215,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
@ -320,7 +320,7 @@ define([
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply) {

4
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -3458,7 +3458,7 @@ define([
if (!menu) {
this.placeholderMenuChart = menu = new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{template: _.template('<div id="id-placeholder-menu-chart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
]
@ -3480,7 +3480,7 @@ define([
// restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
me.editChartClick(record.get('type'), me._state.placeholderObj);

4
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1112,7 +1112,7 @@ define([
);
this.btnInsertChart.setMenu( new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
]
@ -1126,7 +1126,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
if (record)

1
apps/presentationeditor/main/index.html
View file

@ -284,6 +284,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index.html.deploy
View file

@ -322,6 +322,7 @@
<inline src="resources/img/doc-formats/otp.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

1
apps/presentationeditor/main/index_loader.html
View file

@ -257,6 +257,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index_loader.html.deploy
View file

@ -311,6 +311,7 @@
<inline src="resources/img/doc-formats/otp.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<div id="viewport"></div>

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

@ -151,7 +151,7 @@ define([
value = props.asc_getSeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = this.chartProps.getType();
@ -159,9 +159,9 @@ define([
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
@ -226,9 +226,9 @@ define([
var record = this.mnuSparkTypePicker.store.findWhere({type: type});
this.mnuSparkTypePicker.selectRecord(record, true);
if (record) {
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnSparkType.setIconCls('');
this.btnSparkType.setIconCls('svgicon');
this._state.SparkType = type;
styleChanged = true;
}
@ -654,9 +654,9 @@ define([
// charts
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -670,7 +670,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
@ -730,9 +730,9 @@ define([
// sparks
this.btnSparkType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist spark-column',
iconCls : 'svgicon chart-spark-column',
menu : new Common.UI.Menu({
style: 'width: 200px; padding-top: 12px;',
style: 'width: 167px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-spark-menu-type" class="menu-insertchart" style="margin: 5px 5px 0 10px;"></div>') }
]
@ -746,7 +746,7 @@ define([
allowScrollbar: false,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnSparkType.render($('#spark-button-type'));
@ -966,7 +966,7 @@ define([
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply && this.chartProps) {
@ -1115,7 +1115,7 @@ define([
rawData = record;
}
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.SparkType = -1;
if (this.api && !this._noApply && this._originalProps) {

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

@ -115,9 +115,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="id-chart-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
@ -131,7 +131,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-dlg-button-type'));
@ -737,9 +737,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
// Sparklines
this.btnSparkType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist spark-column',
iconCls : 'svgicon chart-spark-column',
menu : new Common.UI.Menu({
style: 'width: 200px; padding-top: 12px;',
style: 'width: 167px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="id-spark-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 0 10px;"></div>') }
@ -753,7 +753,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
restoreHeight: 120,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnSparkType.render($('#spark-dlg-button-type'));
@ -1025,7 +1025,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this.chartSettings.changeType(rawData.type);
this.updateAxisProps(rawData.type, true);
this.vertAxisProps = this.chartSettings.getVertAxisProps();
@ -1249,7 +1249,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
rawData = record;
}
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
if (this._changedProps) {
this._changedProps.asc_setType(rawData.type);
}
@ -1295,9 +1295,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._noApply = false;
@ -1366,9 +1366,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
this.mnuSparkTypePicker.selectRecord(record, true);
if (record)
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
else
this.btnSparkType.setIconCls('');
this.btnSparkType.setIconCls('svgicon');
this.updateSparkStyles((this.sparklineStyles) ? this.sparklineStyles : props.asc_getStyles());

4
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1803,7 +1803,7 @@ define([
if ( this.btnInsertChart ) {
this.btnInsertChart.setMenu(new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{ template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -1817,7 +1817,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)/*.concat(Common.define.chartData.getSparkGroupData(true))*/),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()/*.concat(Common.define.chartData.getSparkData())*/),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
if (record)

1
apps/spreadsheeteditor/main/index.html
View file

@ -262,6 +262,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -299,6 +299,7 @@
<inline src="resources/img/doc-formats/csv.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
</body>

1
apps/spreadsheeteditor/main/index_loader.html
View file

@ -260,6 +260,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index_loader.html.deploy
View file

@ -311,6 +311,7 @@
<inline src="resources/img/doc-formats/csv.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<div id="viewport"></div>