Merge pull request #2116 from ONLYOFFICE/fix/bug-58294

Fix/bug 58294

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>
+
+
+
+
+
+
+

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 {
+.img-arrows  svg{
-    .background-ximage-v2('right-panels/Begin-EndStyle.png', 480px);
+        width: 44px;
-    -webkit-filter: @img-border-type-filter;
+        height: 20px;
-    filter: @img-border-type-filter;
+        fill: @icon-normal-ie;
+        fill: @icon-normal;
+
+    &.svg-mirror{
+        transform: scale(-1,1);
+    }
 }
 
 .item-arrow {

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({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
-                _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+            _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;
+            for ( var i=0; i<6; i++ )
-            _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
+                _arrStyles[i].value = i;
-            _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 ( 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');
+            var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
-            formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+            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){

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);

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>
 

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);

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>

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({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
-                _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+            _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;
+            for ( var i=0; i<6; i++ )
-            _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
+                _arrStyles[i].value = i;
-            _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 ( 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');
+            var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
-            formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+            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){

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);

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>

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);

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>
 

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({type: Asc.c_oAscLineBeginType.None, idsvg: 'no-'});
-                _arrStyles.push({value: i, offsetx: 80*i+10, offsety: 0});
+            _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;
+            for ( var i=0; i<6; i++ )
-            _arrStyles[1].type = Asc.c_oAscLineBeginType.Triangle;
+                _arrStyles[i].value = i;
-            _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 ( 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');
+            var formcontrol = $(combo.el).find('.form-control > .img-arrows use');
-            formcontrol.css('background-position', ((record) ? (-record.get('offsetx')+20) + 'px' : '0') + ' ' + ((record) ? '-' + record.get('offsety') + 'px' : '-30px'));
+            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){

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);

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>

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');

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>