[SE ios] Add layout Edit Chart settings.

apps/spreadsheeteditor/mobile/app-dev.js

@@ -128,7 +128,7 @@ require([
             // ,'EditTable'
             // ,'EditImage'
             // ,'EditShape'
-            // ,'EditChart'
+            ,'EditChart'
             // ,'EditHyperlink'
             ,'AddContainer'
             // ,'AddTable'
@@ -198,7 +198,7 @@ require([
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditImage'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditShape'
-        // ,'spreadsheeteditor/mobile/app/controller/edit/EditChart'
+        ,'spreadsheeteditor/mobile/app/controller/edit/EditChart'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditHyperlink'
         ,'spreadsheeteditor/mobile/app/controller/add/AddContainer'
         // ,'spreadsheeteditor/mobile/app/controller/add/AddTable'

apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  EditChart.js
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/12/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/edit/EditChart',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette'
+], function (core, view, $, _, Backbone) {
+    'use strict';
+
+    SSE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
+        var _stack = [],
+            _chartInfo = {},
+            _chartStyles = [],
+            _borderInfo = {color: '000000', width: 1},
+            _isEdit = false;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'EditChart'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+
+                this.addListeners({
+                    'EditChart': {
+                        'page:show' : this.onPageShow
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                // me.api.asc_registerCallback('asc_onSelectionChanged',           _.bind(me.onApiSelectionChanged, me));
+                // me.api.asc_registerCallback('asc_onEditorSelectionChanged',     _.bind(me.onApiEditorSelectionChanged, me));
+                // me.api.asc_registerCallback('asc_onInitEditorStyles',           _.bind(me.onApiInitEditorStyles, me)); // TODO: It does not work until the error in the SDK
+            },
+
+            setMode: function (mode) {
+                _isEdit = ('edit' === mode);
+            },
+
+            onLaunch: function () {
+                this.createView('EditChart').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                me.getView('EditChart').renderStyles(_chartStyles);
+
+                me.initSettings();
+            },
+
+            onPageShow: function (view, pageId) {
+                var me = this;
+
+                me.initSettings(pageId);
+            },
+
+            initSettings: function (pageId) {
+                var me = this;
+
+                if ('#edit-chart-styles' == pageId) {
+                    me.initStylesPage();
+                } else if ('#edit-chart-reorder' == pageId) {
+                    me.initReorderPage();
+                } else {
+                    $('#chart-remove').single('click', _.bind(me.onRemoveChart, me));
+                }
+            },
+
+            // Public
+
+            getStack: function() {
+                return _stack;
+            },
+
+            getChart: function () {
+                return _chartInfo;
+            },
+
+            initStylesPage: function () {
+                //
+            },
+
+            initReorderPage: function () {
+                $('.page[data-page=edit-chart-reorder] a.item-link').single('click', _.bind(this.onReorder, this));
+            },
+
+            initFillColorPage: function () {
+                // var me = this,
+                //     palette = me.getView('EditChart').paletteFillColor,
+                //     color = me._sdkToThemeColor(_cellInfo.asc_getFill().asc_getColor());
+                //
+                // if (palette) {
+                //     palette.select(color);
+                //     palette.on('select', _.bind(me.onFillColor, me));
+                // }
+            },
+
+            initBorderColorPage: function () {
+                // var me = this,
+                //     palette = new Common.UI.ThemeColorPalette({
+                //         el: $('.page[data-page=edit-border-color] .page-content')
+                //     });
+                //
+                // if (palette) {
+                //     palette.select(_borderInfo.color);
+                //     palette.on('select', _.bind(function (palette, color) {
+                //         _borderInfo.color = color;
+                //         $('#edit-border-color .color-preview').css('background-color', '#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color));
+                //     }, me));
+                // }
+            },
+
+            // Handlers
+
+            onRemoveChart: function () {
+                console.debug('REMOVE CHART')
+            },
+
+            onReorder: function(e) {
+                var $target = $(e.currentTarget),
+                    type = $target.data('type'),
+                    ascType;
+
+                if (type == 'all-up') {
+                    ascType = Asc.c_oAscDrawingLayerType.BringToFront;
+                } else if (type == 'all-down') {
+                    ascType = Asc.c_oAscDrawingLayerType.SendToBack;
+                } else if (type == 'move-up') {
+                    ascType = Asc.c_oAscDrawingLayerType.BringForward;
+                } else {
+                    ascType = Asc.c_oAscDrawingLayerType.SendBackward;
+                }
+
+                this.api.asc_setSelectedDrawingObjectLayer(ascType);
+            },
+
+            onFillColor:function (palette, color) {
+                this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
+            },
+
+            // API handlers
+
+            onApiEditorSelectionChanged: function(fontObj) {
+                if (!_isEdit) {
+                    return;
+                }
+                //
+                // _fontInfo = fontObj;
+                // this.initFontSettings(fontObj);
+            },
+
+            onApiSelectionChanged: function(cellInfo) {
+                if (!_isEdit) {
+                    return;
+                }
+
+                // _cellInfo = cellInfo;
+                // this.initCellSettings(cellInfo);
+            },
+
+            // Helpers
+
+            _sdkToThemeColor: function (color) {
+                var clr = 'transparent';
+
+                if (color) {
+                    if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                        clr = {
+                            color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
+                            effectValue: color.get_value()
+                        }
+                    } else {
+                        clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                    }
+                }
+
+                return clr;
+            },
+
+            textChart: 'Chart'
+        }
+    })(), SSE.Controllers.EditChart || {}))
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js

@@ -376,8 +376,6 @@ define([
                 }
 
                 if (isImage || isShape || isChart) {
-                    if (!showMenu && !documentHolder.imgMenu.isVisible()) return;
-
                     isImage = isShape = isChart = false;
                     var has_chartprops = false;
                     var selectedObjects = this.api.asc_getGraphicObjectProps();
@@ -398,9 +396,9 @@ define([
                             } else if (elValue.asc_getChartProperties()) {
                                 isChart = true;
                                 has_chartprops = true;
-                            }
-                            else
+                            } else {
                                 isImage = true;
+                            }
                         }
                     }
 
@@ -565,7 +563,11 @@ define([
                 //     if (showMenu) this.showPopupMenu(documentHolder.ssMenu, {}, event);
                 // }
 
-                _settings.push('cell');
+                if (isChart) {
+                    _settings.push('chart');
+                } else {
+                    _settings.push('cell');
+                }
             },
 
             textSettings: 'Settings',

apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js

@@ -78,10 +78,6 @@ define([
                 $('#font-fonts').single('click',        _.bind(me.showFonts, me));
                 $('#text-color').single('click',        _.bind(me.showTextColor, me));
                 $('#fill-color').single('click',        _.bind(me.showFillColor, me));
-                // $('#font-additional').single('click',   _.bind(me.showAdditional, me));
-                // $('#font-line-spacing').single('click', _.bind(me.showLineSpacing, me));
-                // $('#font-bullets').single('click',      _.bind(me.showBullets, me));
-                // $('#font-numbers').single('click',      _.bind(me.showNumbers, me));
 
                 me.initControls();
             },

apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  EditChart.js
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/12/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/EditChart.template',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.EditChart = Backbone.View.extend(_.extend((function() {
+        // private
+        var _editTextController;
+
+        return {
+            // el: '.view-main',
+
+            template: _.template(editTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                _editTextController = SSE.getController('EditChart');
+
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                this.on('page:show', _.bind(this.updateItemHandlers, this));
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                me.updateItemHandlers();
+                me.initControls();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    scope   : this
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#edit-chart-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            },
+
+            renderStyles: function (chartStyles) {
+                var $styleContainer = $('.chart-styles .item-content');
+
+                if ($styleContainer.length > 0) {
+                    var columns = parseInt($styleContainer.width() / 70), // magic
+                        row = -1,
+                        styles = [];
+
+                    _.each(chartStyles, function (style, index) {
+                        if (0 == index % columns) {
+                            styles.push([]);
+                            row++
+                        }
+                        styles[row].push(style);
+                    });
+
+                    var template = _.template([
+                        '<% _.each(styles, function(row) { %>',
+                        '<ul class="row">',
+                        '<% _.each(row, function(style) { %>',
+                        '<li data-type="<%= style.asc_getName() %>">',
+                        '<img src="<%= style.asc_getImage() %>" width="50px" height="50px">',
+                        '</li>',
+                        '<% }); %>',
+                        '</ul>',
+                        '<% }); %>'
+                    ].join(''), {
+                        styles: styles
+                    });
+
+                    $styleContainer.html(template);
+                }
+            },
+
+            updateItemHandlers: function () {
+                $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
+            },
+
+            showPage: function (templateId, suspendEvent) {
+                var rootView = SSE.getController('EditContainer').rootView;
+
+                if (rootView && this.layout) {
+                    var $content = this.layout.find(templateId);
+
+                    // Android fix for navigation
+                    if (Framework7.prototype.device.android) {
+                        $content.find('.page').append($content.find('.navbar'));
+                    }
+
+                    rootView.router.load({
+                        content: $content.html()
+                    });
+
+                    if (suspendEvent !== true) {
+                        this.fireEvent('page:show', [this, templateId]);
+                    }
+                }
+            },
+
+            onItemClick: function (e) {
+                var $target = $(e.currentTarget),
+                    page = $target.data('page');
+
+                if (page && page.length > 0 ) {
+                    this.showPage(page);
+                }
+            },
+
+            textBack: 'Back',
+            textChart: 'Chart',
+            textReorder: 'Reorder',
+            textRemoveChart: 'Remove Chart',
+            textToForeground: 'Bring to Foreground',
+            textToBackground: 'Send to Background',
+            textForward: 'Move Forward',
+            textBackward: 'Move Backward',
+        }
+    })(), SSE.Views.EditChart || {}))
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less

@@ -141,4 +141,27 @@ i.icon {
     height: 22px;
     .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
   }
+
+  // Reorder
+
+  &.icon-move-backward {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
+  }
+  &.icon-move-forward {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
+  }
+  &.icon-move-background {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
+  }
+  &.icon-move-foreground {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
+  }
 }
\ No newline at end of file

apps/spreadsheeteditor/mobile/resources/less/material/_icons.less

@@ -90,6 +90,29 @@ i.icon {
     height: 22px;
     .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
   }
+
+  // Reorder
+
+  &.icon-move-backward {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
+  }
+  &.icon-move-forward {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
+  }
+  &.icon-move-background {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
+  }
+  &.icon-move-foreground {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
+  }
 }
 
 // Overwrite color for toolbar