diff --git a/apps/common/main/resources/img/right-panels/arrows.svg b/apps/common/main/resources/img/right-panels/arrows.svg
new file mode 100644
index 000000000..416e24250
--- /dev/null
+++ b/apps/common/main/resources/img/right-panels/arrows.svg
@@ -0,0 +1,147 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <symbol id="no-arrow-5" viewBox="0 0 44 20">
+ <rect x="11" y="8" width="22" height="3"/>
+ </symbol>
+ <symbol id="arrow-1" viewBox="0 0 44 20">
+ <path d="M17 7V9H34V12H17V14L9 10.5L17 7Z"/>
+ </symbol>
+ <symbol id="arrow-2" viewBox="0 0 44 20">
+ <path d="M21 7V9H34V12H21V14L9 10.5L21 7Z"/>
+ </symbol>
+ <symbol id="arrow-3" viewBox="0 0 44 20">
+ <path d="M28 7V9H34V12H28V14L9 10.5L28 7Z"/>
+ </symbol>
+ <symbol id="arrow-4" viewBox="0 0 44 20">
+ <path d="M17 5V8H34V11H17V14L9 9.5L17 5Z"/>
+ </symbol>
+ <symbol id="arrow-5" viewBox="0 0 44 20">
+ <path d="M23 5V8H34V11H23V14L9 9.5L23 5Z"/>
+ </symbol>
+ <symbol id="arrow-6" viewBox="0 0 44 20">
+ <path d="M28 6V8H34V11H28V13L9 9.5L28 6Z"/>
+ </symbol>
+ <symbol id="arrow-7" viewBox="0 0 44 20">
+ <path d="M17 3V8H34V11H17V16L9 9.5L17 3Z"/>
+ </symbol>
+ <symbol id="arrow-8" viewBox="0 0 44 20">
+ <path d="M22 3V8H34V11H22V16L9 9.5L22 3Z"/>
+ </symbol>
+ <symbol id="arrow-9" viewBox="0 0 44 20">
+ <path d="M30 3V8H34V11H30V16L9 9.5L30 3Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-1" viewBox="0 0 44 20">
+ <path d="M16.5 5L19.5 8H34V11H19.5L16.5 14L12 9.5L16.5 5Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-2" viewBox="0 0 44 20">
+ <path d="M16.5 5L21.5 8H34V11H21.5L16.5 14L10 9.5L16.5 5Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-3" viewBox="0 0 44 20">
+ <path d="M16.5 5L23.5 8H34V11H23.5L16.5 14L8 9.5L16.5 5Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-4" viewBox="0 0 44 20">
+ <path d="M17.5 4L19.5 8H34V11H19.5L17.5 15L14.5 9.5L17.5 4Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-5" viewBox="0 0 44 20">
+ <path d="M17.5 4L21.5 8H34V11H21.5L17.5 15L12.5 9.5L17.5 4Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-6" viewBox="0 0 44 20">
+ <path d="M17.5 4L23.5 8H34V11H23.5L17.5 15L10 9.5L17.5 4Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-7" viewBox="0 0 44 20">
+ <path d="M17.5 3L20 8H34V11H20L17.5 16L14 9.5L17.5 3Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-8" viewBox="0 0 44 20">
+ <path d="M17.5 3L21 8H34V11H21L17.5 16L13 9.5L17.5 3Z"/>
+ </symbol>
+ <symbol id="dimond-arrow-9" viewBox="0 0 44 20">
+ <path d="M17.5 3L22.5 8H34V11H22.5L17.5 16L11 9.5L17.5 3Z"/>
+ </symbol>
+ <symbol id="open-arrow-1" viewBox="0 0 44 20">
+ <path d="M13.1693 4.78973L8.41882 9.54019L13.1693 14.2906L15.2906 12.1693L14.1213 11H34V8.00002H14.2016L15.2906 6.91105L13.1693 4.78973Z"/>
+ </symbol>
+ <symbol id="open-arrow-2" viewBox="0 0 44 20">
+ <path d="M18.8988 4.62573L7.75769 9.49998L18.8988 14.3742L20.1013 11.6257L18.671 11H34V7.99998H18.6709L20.1013 7.3742L18.8988 4.62573Z"/>
+ </symbol>
+ <symbol id="open-arrow-3" viewBox="0 0 44 20">
+ <path d="M25.0739 4.06183L6.71997 9.50003L25.0739 14.9382L25.9261 12.0618L22.3426 11H34V8.00003H22.3426L25.9261 6.93822L25.0739 4.06183Z"/>
+ </symbol>
+ <symbol id="open-arrow-4" viewBox="0 0 44 20">
+ <path d="M13.997 3.88458L7.80774 9.44993L13.9871 15.1064L16.0128 12.8935L13.9442 11H34V7.99998H13.907L16.0029 6.11536L13.997 3.88458Z"/>
+ </symbol>
+ <symbol id="open-arrow-5" viewBox="0 0 44 20">
+ <path d="M19.3316 3.65717L7.698 9.44792L19.322 15.338L20.678 12.662L17.3981 11H34V7.99998H17.3392L20.6684 6.34285L19.3316 3.65717Z"/>
+ </symbol>
+ <symbol id="open-arrow-6" viewBox="0 0 44 20">
+ <path d="M24.5435 3.57117L6.151 9.44716L24.536 15.4265L25.4639 12.5736L20.6256 11H34V8.00001H20.5386L25.4564 6.42887L24.5435 3.57117Z"/>
+ </symbol>
+ <symbol id="open-arrow-7" viewBox="0 0 44 20">
+ <path d="M14.9864 2.89429L7.78015 9.50002L14.9864 16.1057L17.0136 13.8943L13.8562 11H34V8.00002H13.8562L17.0136 5.10575L14.9864 2.89429Z"/>
+ </symbol>
+ <symbol id="open-arrow-8" viewBox="0 0 44 20">
+ <path d="M18.7178 2.72009L7.62341 9.50002L18.7178 16.2799L20.2822 13.7201L15.8311 11H34V8.00002H15.8311L20.2822 5.27994L18.7178 2.72009Z"/>
+ </symbol>
+ <symbol id="open-arrow-9" viewBox="0 0 44 20">
+ <path d="M25.9837 2.59167L7.14282 9.49999L25.9837 16.4083L27.0164 13.5917L19.9482 11H34V7.99999H19.9482L27.0164 5.4083L25.9837 2.59167Z"/>
+ </symbol>
+ <symbol id="oval-arrow-1" viewBox="0 0 44 20">
+ <path d="M19.6632 11C19.1015 12.1825 17.8962 13 16.5 13C14.567 13 13 11.433 13 9.5C13 7.567 14.567 6 16.5 6C17.8962 6 19.1015 6.81753 19.6632 8H34V11H19.6632Z"/>
+ </symbol>
+ <symbol id="oval-arrow-2" viewBox="0 0 44 20">
+ <path d="M21.4707 11C20.588 12.1825 18.694 13 16.5 13C13.4624 13 11 11.433 11 9.5C11 7.567 13.4624 6 16.5 6C18.694 6 20.588 6.81753 21.4707 8H34V11H21.4707Z"/>
+ </symbol>
+ <symbol id="oval-arrow-3" viewBox="0 0 44 20">
+ <path d="M22.3745 11C21.3313 12.1825 19.0929 13 16.5 13C12.9101 13 10 11.433 10 9.5C10 7.567 12.9101 6 16.5 6C19.0929 6 21.3313 6.81753 22.3745 8H34V11H22.3745Z"/>
+ </symbol>
+ <symbol id="oval-arrow-4" viewBox="0 0 44 20">
+ <path d="M20.8008 11C20.3204 12.7478 19.0239 14 17.5 14C15.567 14 14 11.9853 14 9.5C14 7.01472 15.567 5 17.5 5C19.0239 5 20.3204 6.25221 20.8008 8H34V11H20.8008Z"/>
+ </symbol>
+ <symbol id="oval-arrow-5" viewBox="0 0 44 20">
+ <path d="M21.7439 11C21.1262 12.7478 19.4593 14 17.5 14C15.0147 14 13 11.9853 13 9.5C13 7.01472 15.0147 5 17.5 5C19.4593 5 21.1262 6.25221 21.7439 8H34V11H21.7439Z"/>
+ </symbol>
+ <symbol id="oval-arrow-6" viewBox="0 0 44 20">
+ <path d="M23.5732 11C22.5436 12.7478 19.7655 14 16.5 14C12.3579 14 9 11.9853 9 9.5C9 7.01472 12.3579 5 16.5 5C19.7655 5 22.5436 6.25221 23.5732 8H34V11H23.5732Z"/>
+ </symbol>
+ <symbol id="oval-arrow-7" viewBox="0 0 44 20">
+ <path d="M20.8683 11C20.4528 13.3085 19.1021 15 17.5 15C15.567 15 14 12.5376 14 9.5C14 6.46243 15.567 4 17.5 4C19.1021 4 20.4528 5.69149 20.8683 8H34V11H20.8683Z"/>
+ </symbol >
+ <symbol id="oval-arrow-8" viewBox="0 0 44 20">
+ <path d="M21.8306 11C21.2964 13.3085 19.5598 15 17.5 15C15.0147 15 13 12.5376 13 9.5C13 6.46243 15.0147 4 17.5 4C19.5598 4 21.2964 5.69149 21.8306 8H34V11H21.8306Z"/>
+ </symbol>
+ <symbol id="oval-arrow-9" viewBox="0 0 44 20">
+ <path d="M22.793 11C22.14 13.3085 20.0176 15 17.5 15C14.4624 15 12 12.5376 12 9.5C12 6.46243 14.4624 4 17.5 4C20.0176 4 22.14 5.69149 22.793 8H34V11H22.793Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-1" viewBox="0 0 44 20">
+ <path d="M17 6L16 8H34V11H16L17 13L9 9.5L17 6Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-2" viewBox="0 0 44 20">
+ <path d="M21 6L19 8H34V11H19L21 13L9 9.5L21 6Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-3" viewBox="0 0 44 20">
+ <path d="M29 6L27 8H34V11H27L29 13L9 9.5L29 6Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-4" viewBox="0 0 44 20">
+ <path d="M17 5L15 8H34V11H15L17 14L9 9.5L17 5Z" />
+ </symbol>
+ <symbol id="stealth-arrow-5" viewBox="0 0 44 20">
+ <path d="M20 5L18 8H34V11H18L20 14L9 9.5L20 5Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-6" viewBox="0 0 44 20">
+ <path d="M29 5L27 8H34V11H27L29 14L9 9.5L29 5Z" />
+ </symbol>
+ <symbol id="stealth-arrow-7" viewBox="0 0 44 20">
+ <path d="M17 3L14 8H34V11H14L17 16L9 9.5L17 3Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-8" viewBox="0 0 44 20">
+ <path d="M21 3L18 8H34V11H18L21 16L9 9.5L21 3Z"/>
+ </symbol>
+ <symbol id="stealth-arrow-9" viewBox="0 0 44 20">
+ <path d="M29 3L26 8H34V11H26L29 16L9 9.5L29 3Z" />
+ </symbol>
+</svg>
+
+
+
+
+
+
+
diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 2cfd6bbf6..98c132b44 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -58,20 +58,31 @@
.form-control {
cursor: pointer;
- .image {
+ .img-arrows {
width: 100%;
- height: 100%;
+ height: 18px;
display: block;
background-color: transparent;
- margin: 0 0 0 -3px;
+ margin: auto;
+ text-align: center;
+ overflow: hidden;
+ padding-right: 4px;
+ .svg-mirror{
+ margin-right: 1px;
+ }
}
}
}
-.img-arrows {
- .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px);
- -webkit-filter: @img-border-type-filter;
- filter: @img-border-type-filter;
+.img-arrows svg{
+ width: 44px;
+ height: 20px;
+ fill: @icon-normal-ie;
+ fill: @icon-normal;
+
+ &.svg-mirror{
+ transform: scale(-1,1);
+ }
}
.item-arrow {
diff --git a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
index 96ad6a0bc..f5c155ba4 100644
--- a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
@@ -987,18 +987,18 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
var _arrStyles = [], _arrSize = [];
- for ( var i=0; i<6; i++ )
- _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Triangle, idsvg: ''});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Arrow, idsvg: 'open-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Stealth, idsvg: 'stealth-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Diamond, idsvg: 'dimond-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Oval, idsvg: 'oval-'});
- _arrStyles[0].type = Asc.c_oAscLineBeginType.None;
- _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
- _arrStyles[2].type = Asc.c_oAscLineBeginType.Arrow;
- _arrStyles[3].type = Asc.c_oAscLineBeginType.Stealth;
- _arrStyles[4].type = Asc.c_oAscLineBeginType.Diamond;
- _arrStyles[5].type = Asc.c_oAscLineBeginType.Oval;
+ for ( var i=0; i<6; i++ )
+ _arrStyles[i].value = i;
for ( i=0; i<9; i++ )
- _arrSize.push({value: i, offsetx: 80+10, offsety: 20*(i+1)});
+ _arrSize.push({value: i, typearrow:''});
_arrSize[0].type = Asc.c_oAscLineBeginSize.small_small;
_arrSize[1].type = Asc.c_oAscLineBeginSize.small_mid;
@@ -1016,7 +1016,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default">',
@@ -1037,7 +1037,8 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
el: $('#shape-advanced-menu-begin-style'),
parentMenu: this.btnBeginStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
this._selectStyleItem(this.btnBeginStyle, null);
@@ -1047,7 +1048,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default">',
@@ -1068,23 +1069,18 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
el: $('#shape-advanced-menu-begin-size'),
parentMenu: this.btnBeginSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href="#<%= typearrow %>arrow-<%= (value+1) %>"></use></svg></div>')
});
this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
this._selectStyleItem(this.btnBeginSize, null);
- for ( i=0; i<_arrStyles.length; i++ )
- _arrStyles[i].offsety += 200;
-
- for ( i=0; i<_arrSize.length; i++ )
- _arrSize[i].offsety += 200;
-
this.btnEndStyle = new Common.UI.ComboBox({
el: $('#shape-advanced-end-style'),
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default">',
@@ -1105,7 +1101,8 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
el: $('#shape-advanced-menu-end-style'),
parentMenu: this.btnEndStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
this._selectStyleItem(this.btnEndStyle, null);
@@ -1115,7 +1112,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default">',
@@ -1136,7 +1133,8 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
el: $('#shape-advanced-menu-end-size'),
parentMenu: this.btnEndSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= typearrow %>arrow-<%= (value + 1) %>"></use></svg></div>')
});
this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
this._selectStyleItem(this.btnEndSize, null);
@@ -2076,7 +2074,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
_updateSizeArr: function(combo, picker, record, sizeidx) {
if (record.get('value')>0) {
picker.store.each( function(rec){
- rec.set({offsetx: record.get('value')*80 + 10});
+ rec.set({typearrow: record.get('idsvg')});
}, this);
combo.setDisabled(false);
if (sizeidx !== null) {
@@ -2091,8 +2089,15 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
},
_selectStyleItem: function(combo, record) {
- var formcontrol = $(combo.el).find('.form-control > .image');
- formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+ var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
+ if(formcontrol.length) {
+ var str = '';
+ if(record){
+ var styleId = record.get('idsvg');
+ str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+ }
+ formcontrol[0].setAttribute('xlink:href', '#' + str);
+ }
},
onSelectBeginStyle: function(picker, view, record, e){
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index e0a2a1814..fc821f3d1 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -332,6 +332,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+ <img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 422e95115..a3393f560 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -322,6 +322,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html
index 80c10c94a..1e5070650 100644
--- a/apps/documenteditor/main/index_loader.html
+++ b/apps/documenteditor/main/index_loader.html
@@ -272,6 +272,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index_loader.html.deploy b/apps/documenteditor/main/index_loader.html.deploy
index d9234fc45..0fe69de7a 100644
--- a/apps/documenteditor/main/index_loader.html.deploy
+++ b/apps/documenteditor/main/index_loader.html.deploy
@@ -321,6 +321,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<div id="viewport"></div>
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
index cad1f7e97..148355ab1 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
@@ -378,18 +378,18 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
var _arrStyles = [], _arrSize = [];
- for ( var i=0; i<6; i++ )
- _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Triangle, idsvg: ''});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Arrow, idsvg: 'open-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Stealth, idsvg: 'stealth-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Diamond, idsvg: 'dimond-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Oval, idsvg: 'oval-'});
- _arrStyles[0].type = Asc.c_oAscLineBeginType.None;
- _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
- _arrStyles[2].type = Asc.c_oAscLineBeginType.Arrow;
- _arrStyles[3].type = Asc.c_oAscLineBeginType.Stealth;
- _arrStyles[4].type = Asc.c_oAscLineBeginType.Diamond;
- _arrStyles[5].type = Asc.c_oAscLineBeginType.Oval;
+ for ( var i=0; i<6; i++ )
+ _arrStyles[i].value = i;
for ( i=0; i<9; i++ )
- _arrSize.push({value: i, offsetx: 80+10, offsety: 20*(i+1)});
+ _arrSize.push({value: i, typearrow:''});
_arrSize[0].type = Asc.c_oAscLineBeginSize.small_small;
_arrSize[1].type = Asc.c_oAscLineBeginSize.small_mid;
@@ -407,7 +407,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -426,7 +426,8 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
el: $('#shape-advanced-menu-begin-style'),
parentMenu: this.btnBeginStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
this._selectStyleItem(this.btnBeginStyle, null);
@@ -436,7 +437,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -455,7 +456,8 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
el: $('#shape-advanced-menu-begin-size'),
parentMenu: this.btnBeginSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href="#<%= typearrow %>arrow-<%= (value+1) %>"></use></svg></div>')
});
this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
this._selectStyleItem(this.btnBeginSize, null);
@@ -471,7 +473,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -490,7 +492,8 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
el: $('#shape-advanced-menu-end-style'),
parentMenu: this.btnEndStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
this._selectStyleItem(this.btnEndStyle, null);
@@ -500,7 +503,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -519,7 +522,8 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
el: $('#shape-advanced-menu-end-size'),
parentMenu: this.btnEndSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= typearrow %>arrow-<%= (value + 1) %>"></use></svg></div>')
});
this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
this._selectStyleItem(this.btnEndSize, null);
@@ -850,7 +854,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
_updateSizeArr: function(combo, picker, record, sizeidx) {
if (record.get('value')>0) {
picker.store.each( function(rec){
- rec.set({offsetx: record.get('value')*80 + 10});
+ rec.set({typearrow: record.get('idsvg')});
}, this);
combo.setDisabled(false);
if (sizeidx !== null) {
@@ -865,8 +869,15 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
},
_selectStyleItem: function(combo, record) {
- var formcontrol = $(combo.el).find('.form-control > .image');
- formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+ var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
+ if(formcontrol.length) {
+ var str = '';
+ if(record){
+ var styleId = record.get('idsvg');
+ str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+ }
+ formcontrol[0].setAttribute('xlink:href', '#' + str);
+ }
},
onSelectBeginStyle: function(picker, view, record){
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index e3d73ea32..73e1eb6f1 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -346,6 +346,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+ <img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 8c31f7ee1..b6a71f872 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -366,6 +366,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html
index 1aa3a4f03..ff89165c9 100644
--- a/apps/presentationeditor/main/index_loader.html
+++ b/apps/presentationeditor/main/index_loader.html
@@ -262,6 +262,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index_loader.html.deploy b/apps/presentationeditor/main/index_loader.html.deploy
index 05dbbf797..493ec1d4f 100644
--- a/apps/presentationeditor/main/index_loader.html.deploy
+++ b/apps/presentationeditor/main/index_loader.html.deploy
@@ -322,6 +322,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<div id="viewport"></div>
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
index 5646a2e75..07e0fb1aa 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
@@ -348,18 +348,18 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
var _arrStyles = [], _arrSize = [];
- for ( var i=0; i<6; i++ )
- _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Triangle, idsvg: ''});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Arrow, idsvg: 'open-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Stealth, idsvg: 'stealth-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Diamond, idsvg: 'dimond-'});
+ _arrStyles.push({type: Asc.c_oAscLineBeginType.Oval, idsvg: 'oval-'});
- _arrStyles[0].type = Asc.c_oAscLineBeginType.None;
- _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
- _arrStyles[2].type = Asc.c_oAscLineBeginType.Arrow;
- _arrStyles[3].type = Asc.c_oAscLineBeginType.Stealth;
- _arrStyles[4].type = Asc.c_oAscLineBeginType.Diamond;
- _arrStyles[5].type = Asc.c_oAscLineBeginType.Oval;
+ for ( var i=0; i<6; i++ )
+ _arrStyles[i].value = i;
for ( i=0; i<9; i++ )
- _arrSize.push({value: i, offsetx: 80+10, offsety: 20*(i+1)});
+ _arrSize.push({value: i, typearrow:''});
_arrSize[0].type = Asc.c_oAscLineBeginSize.small_small;
_arrSize[1].type = Asc.c_oAscLineBeginSize.small_mid;
@@ -377,7 +377,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -396,7 +396,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
el: $('#shape-advanced-menu-begin-style'),
parentMenu: this.btnBeginStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href= "#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuBeginStylePicker.on('item:click', _.bind(this.onSelectBeginStyle, this));
this._selectStyleItem(this.btnBeginStyle, null);
@@ -406,7 +407,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -425,7 +426,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
el: $('#shape-advanced-menu-begin-size'),
parentMenu: this.btnBeginSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg><use xlink:href="#<%= typearrow %>arrow-<%= (value+1) %>"></use></svg></div>')
});
this.mnuBeginSizePicker.on('item:click', _.bind(this.onSelectBeginSize, this));
this._selectStyleItem(this.btnBeginSize, null);
@@ -441,7 +443,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href="#no-arrow-5"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -460,7 +462,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
el: $('#shape-advanced-menu-end-style'),
parentMenu: this.btnEndStyleMenu,
store: new Common.UI.DataViewStore(_arrStyles),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= idsvg %>arrow-5"></use></svg></div>')
});
this.mnuEndStylePicker.on('item:click', _.bind(this.onSelectEndStyle, this));
this._selectStyleItem(this.btnEndStyle, null);
@@ -470,7 +473,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">',
'<div class="form-control" style="width: 100px;">',
- '<i class="image img-arrows"></i>',
+ '<i class="img-arrows"><svg class ="svg-mirror"><use xlink:href=""></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default"><span class="caret"></span></button>',
@@ -489,7 +492,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
el: $('#shape-advanced-menu-end-size'),
parentMenu: this.btnEndSizeMenu,
store: new Common.UI.DataViewStore(_arrSize),
- itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+ itemTemplate: _.template('<div id="<%= id %>" class="item-arrow img-arrows">' +
+ '<svg class ="svg-mirror"><use xlink:href="#<%= typearrow %>arrow-<%= (value + 1) %>"></use></svg></div>')
});
this.mnuEndSizePicker.on('item:click', _.bind(this.onSelectEndSize, this));
this._selectStyleItem(this.btnEndSize, null);
@@ -828,7 +832,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
_updateSizeArr: function(combo, picker, record, sizeidx) {
if (record.get('value')>0) {
picker.store.each( function(rec){
- rec.set({offsetx: record.get('value')*80 + 10});
+ rec.set({typearrow: record.get('idsvg')});
}, this);
combo.setDisabled(false);
if (sizeidx !== null) {
@@ -843,8 +847,15 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
},
_selectStyleItem: function(combo, record) {
- var formcontrol = $(combo.el).find('.form-control > .image');
- formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+ var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
+ if(formcontrol.length) {
+ var str = '';
+ if(record){
+ var styleId = record.get('idsvg');
+ str = (styleId !== undefined) ? styleId + 'arrow-5' : record.get('typearrow') + 'arrow-' + (record.get('value')+1);
+ }
+ formcontrol[0].setAttribute('xlink:href', '#' + str);
+ }
},
onSelectBeginStyle: function(picker, view, record){
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 746eaa2a6..35450088f 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -369,6 +369,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/cf-icons.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+ <img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 664c3a46d..3180efc21 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -380,6 +380,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<inline src="resources/img/cf-icons.svg" />
<script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html
index fb64a5780..48eba69e1 100644
--- a/apps/spreadsheeteditor/main/index_loader.html
+++ b/apps/spreadsheeteditor/main/index_loader.html
@@ -263,6 +263,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/right-panels/arrows.svg">
<img class="inline-svg" src="resources/img/cf-icons.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
diff --git a/apps/spreadsheeteditor/main/index_loader.html.deploy b/apps/spreadsheeteditor/main/index_loader.html.deploy
index c89ad66b1..2eee9453e 100644
--- a/apps/spreadsheeteditor/main/index_loader.html.deploy
+++ b/apps/spreadsheeteditor/main/index_loader.html.deploy
@@ -321,6 +321,7 @@
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
+ <inline src="../../common/main/resources/img/right-panels/arrows.svg" />
<inline src="resources/img/cf-icons.svg" />
<div id="viewport"></div>