Merge branch 'feature/new-mobile'

apps/spreadsheeteditor/mobile/app-dev.js

@@ -124,7 +124,7 @@ require([
             ,'Settings'
             ,'EditContainer'
             ,'EditCell'
-            // ,'EditParagraph'
+            ,'EditText'
             // ,'EditTable'
             ,'EditImage'
             ,'EditShape'
@@ -195,7 +195,7 @@ require([
         ,'spreadsheeteditor/mobile/app/controller/Settings'
         ,'spreadsheeteditor/mobile/app/controller/edit/EditContainer'
         ,'spreadsheeteditor/mobile/app/controller/edit/EditCell'
-        // ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph'
+        ,'spreadsheeteditor/mobile/app/controller/edit/EditText'
         // ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
         ,'spreadsheeteditor/mobile/app/controller/edit/EditImage'
         ,'spreadsheeteditor/mobile/app/controller/edit/EditShape'

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

@@ -167,7 +167,10 @@ define([
 
             initRootPage: function () {
                 $('#chart-remove').single('click', _.bind(this.onRemoveChart, this));
-                this.updateAxisProps(_chartObject.get_ChartProperties().getType());
+
+                if (!_.isUndefined(_chartObject)) {
+                    this.updateAxisProps(_chartObject.get_ChartProperties().getType());
+                }
             },
 
             initStylePage: function () {

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

@@ -150,6 +150,13 @@ define([
                             layout: SSE.getController('EditChart').getView('EditChart').rootLayout()
                         })
                     }
+                    if (_.contains(_settings, 'text')) {
+                        editors.push({
+                            caption: me.textText,
+                            id: 'edit-text',
+                            layout: SSE.getController('EditText').getView('EditText').rootLayout()
+                        })
+                    }
                     if (_.contains(_settings, 'hyperlink')) {
                         editors.push({
                             caption: me.textHyperlink,
@@ -563,10 +570,19 @@ define([
                 //     if (showMenu) this.showPopupMenu(documentHolder.ssMenu, {}, event);
                 // }
 
-                if (isChart) {
+
+                if (isChart || isTextChart) {
                     _settings.push('chart');
-                } else if (isShape) {
+
+                    if (isTextChart) {
+                        _settings.push('text');
+                    }
+                } else if (isShape || isTextShape) {
                     _settings.push('shape');
+
+                    if (isTextShape) {
+                        _settings.push('text');
+                    }
                 } else if (isImage) {
                     _settings.push('image');
                 } else {
@@ -584,6 +600,7 @@ define([
             textShape: 'Shape',
             textImage: 'Image',
             textChart: 'Chart',
+            textText: 'Text',
             textHyperlink: 'Hyperlink'
 
         }

apps/spreadsheeteditor/mobile/app/template/EditCell.template

@@ -26,7 +26,7 @@
             <li>
                 <a id="text-color" class="item-link">
                     <div class="item-content">
-                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
+                        <% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
                         <div class="item-inner">
                             <div class="item-title"><%= scope.textTextColor %></div>
                             <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
@@ -37,7 +37,7 @@
             <li>
                 <a id="fill-color" class="item-link">
                     <div class="item-content">
-                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
+                        <% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
                         <div class="item-inner">
                             <div class="item-title"><%= scope.textFillColor %></div>
                             <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>

apps/spreadsheeteditor/mobile/app/template/EditText.template

+<!-- Root view -->
+<div id="edit-text-root">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="font-fonts" class="item-link" data-page="#edit-text-fonts">
+                    <div class="item-content">
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textFonts %></div>
+                            <div class="item-after" style="color: #000;"><span></span><span style="margin-left: 5px;"></span></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <div class="item-content buttons">
+                    <div class="item-inner">
+                        <div class="row">
+                            <a id="font-bold" class="button"><b>B</b></a>
+                            <a id="font-italic" class="button"><i>I</i></a>
+                            <a id="font-underline" class="button" style="text-decoration: underline;">U</a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <a id="text-color" class="item-link" data-page="#edit-text-color">
+                    <div class="item-content">
+                        <% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textTextColor %></div>
+                            <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="list-block" id="edit-text-align-block">
+        <ul>
+            <li>
+                <div class="item-content buttons">
+                    <div class="item-inner">
+                        <div class="row">
+                            <a id="font-left" class="button no-ripple" data-value="left"><i class="icon icon-text-align-left"></i></a>
+                            <a id="font-center" class="button no-ripple" data-value="center"><i class="icon icon-text-align-center"></i></a>
+                            <a id="font-right" class="button no-ripple" data-value="right"><i class="icon icon-text-align-right"></i></a>
+                            <a id="font-just" class="button no-ripple" data-value="justify"><i class="icon icon-text-align-justify"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="item-content buttons">
+                    <div class="item-inner">
+                        <div class="row">
+                            <a id="font-top" class="button no-ripple" data-value="top"><i class="icon icon-text-valign-top"></i></a>
+                            <a id="font-middle" class="button no-ripple" data-value="center"><i class="icon icon-text-valign-middle"></i></a>
+                            <a id="font-bottom" class="button no-ripple" data-value="bottom"><i class="icon icon-text-valign-bottom"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- Fonts view -->
+<div id="edit-text-fonts">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textFonts %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-fonts">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li id="font-size">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textSize %></div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label></label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label></label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title"><%= scope.textFonts %></div>
+            <div id="font-list" class="list-block virtual-list">
+                <!-- Fonts List -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Text color view -->
+<div id="edit-text-color">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textTextColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-color">
+        <div class="page-content">
+        </div>
+    </div>
+</div>

apps/spreadsheeteditor/mobile/app/view/edit/EditText.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
+ *
+ */
+
+/**
+ *  EditText.js
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/21/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/EditText.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.EditText = Backbone.View.extend(_.extend((function() {
+        // private
+        var _fontsArray = [];
+        return {
+            // el: '.view-main',
+
+            template: _.template(editTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, 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-text-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            },
+
+            updateItemHandlers: function () {
+                var selectorsDynamicPage = [
+                    '#edit-text'
+                ].map(function (selector) {
+                    return selector + ' a.item-link[data-page]';
+                }).join(', ');
+
+                $(selectorsDynamicPage).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]);
+                    }
+
+                    this.initEvents();
+                }
+            },
+
+            renderFonts: function () {
+                var me = this,
+                    $template = $(
+                        '<div>' +
+                            '<li>' +
+                                '<label class="label-radio item-content">' +
+                                    '<input type="radio" name="font-name" value="{{name}}">' +
+                                        (Framework7.prototype.device.android ? '<div class="item-media"><i class="icon icon-form-radio"></i></div>' : '') +
+                                    '<div class="item-inner">' +
+                                        '<div class="item-title" style="font-family: \'{{name}}\';">{{name}}</div>' +
+                                    '</div>' +
+                                '</label>' +
+                            '</li>' +
+                        '</div>'
+                    );
+
+                uiApp.virtualList('#font-list.virtual-list', {
+                    items: _fontsArray,
+                    template: $template.html(),
+                    onItemsAfterInsert: function (list, fragment) {
+                        var fontInfo = SSE.getController('EditText').getFontInfo();
+                        $('#font-list input[name=font-name]').val([fontInfo.name]);
+
+                        $('#font-list li').single('click', _.buffered(function (e) {
+                            me.fireEvent('font:click', [me, e]);
+                        }, 100));
+                    }
+                });
+            },
+
+            onItemClick: function (e) {
+                var $target = $(e.currentTarget),
+                    page = $target.data('page');
+
+                if (page && page.length > 0 ) {
+                    this.showPage(page);
+                }
+            },
+
+            onApiFontsLoad: function (fonts, selcted) {
+                _fontsArray = fonts;
+            },
+
+            textBack: 'Back',
+            textFonts: 'Fonts',
+            textTextColor: 'Text Color',
+            textFillColor: 'Fill Color',
+            textSize: 'Size'
+        }
+    })(), SSE.Views.EditText || {}))
+});
\ No newline at end of file

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

@@ -68,32 +68,32 @@ i.icon {
   &.icon-text-align-center {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-justify {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-left {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-right {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
   }
   &.icon-text-valign-top {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
   }
   &.icon-text-valign-middle {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
   }
   &.icon-text-valign-bottom {
     width: 22px;

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

@@ -58,22 +58,37 @@ i.icon {
   &.icon-text-align-center {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-justify {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-left {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
   }
   &.icon-text-align-right {
     width: 22px;
     height: 22px;
-    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+  }
+  &.icon-text-valign-top {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
+  }
+  &.icon-text-valign-middle {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
+  }
+  &.icon-text-valign-bottom {
+    width: 22px;
+    height: 22px;
+    .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
   }
   &.icon-insimage {
     width: 22px;