Merge branch 'feature/new-mobile'

This commit is contained in:
Maxim Kadushkin 2016-12-21 17:33:42 +03:00
commit abdb11649a
13 changed files with 762 additions and 34 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

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

View file

@ -167,7 +167,10 @@ define([
initRootPage: function () { initRootPage: function () {
$('#chart-remove').single('click', _.bind(this.onRemoveChart, this)); $('#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 () { initStylePage: function () {

View file

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

View file

@ -0,0 +1,360 @@
/*
*
* (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([
'core',
'spreadsheeteditor/mobile/app/view/edit/EditText',
'jquery',
'underscore',
'backbone'
], function (core, view, $, _, Backbone) {
'use strict';
SSE.Controllers.EditText = Backbone.Controller.extend(_.extend((function() {
// Private
var TextType = {inUnknown: 0, inChart: 1, inShape: 2};
var _textIn = TextType.inUnknown,
_fontInfo = undefined,
_cellInfo = undefined,
_isEdit = false;
return {
models: [],
collections: [],
views: [
'EditText'
],
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
this.addListeners({
'EditText': {
'page:show' : this.onPageShow,
'font:click' : this.onFontClick
}
});
},
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));
},
setMode: function (mode) {
_isEdit = ('edit' === mode);
},
onPageShow: function (view, pageId) {
var me = this;
me.initSettings(pageId);
},
onLaunch: function () {
this.createView('EditText').render();
},
initEvents: function () {
var me = this;
me.initSettings();
},
initSettings: function (pageId) {
if ($('#edit-text').length < 1) {
return;
}
var me = this;
if ('#edit-text-fonts' == pageId) {
me.initFontsPage();
} else if ('#edit-text-color' == pageId) {
me.initTextColorPage();
} else {
me.initRootPage();
}
},
initRootPage: function () {
if (_.isUndefined(_fontInfo)) {
return;
}
var me = this;
// Init font name
var fontName = _fontInfo.asc_getName() || this.textFonts;
$('#font-fonts .item-title').html(fontName);
// Init font size
var displaySize = _fontInfo.asc_getSize();
_.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt;
$('#font-fonts .item-after span:first-child').html(displaySize);
$('#font-size .item-after label').html(displaySize);
// Init font style
$('#font-bold').toggleClass('active', _fontInfo.asc_getBold() === true);
$('#font-italic').toggleClass('active', _fontInfo.asc_getItalic() === true);
$('#font-underline').toggleClass('active', _fontInfo.asc_getUnderline() === true);
// Init font color
var color = _fontInfo.asc_getColor(),
clr = me._sdkToThemeColor(color);
$('#text-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
// Align
$('#edit-text-align-block').css('display', (_textIn == TextType.inShape) ? 'block' : 'none');
var hAlign = _cellInfo.asc_getHorAlign() || 'left',
vAlign = _cellInfo.asc_getVertAlign() || 'bottom';
$('#font-left').toggleClass('active', hAlign==='left');
$('#font-center').toggleClass('active', hAlign==='center');
$('#font-right').toggleClass('active', hAlign==='right');
$('#font-just').toggleClass('active', hAlign==='justify');
$('#font-top').toggleClass('active', vAlign==='top');
$('#font-middle').toggleClass('active', vAlign==='center');
$('#font-bottom').toggleClass('active', vAlign==='bottom');
// Handlers
$('#font-bold').single('click', _.bind(me.onBold, me));
$('#font-italic').single('click', _.bind(me.onItalic, me));
$('#font-underline').single('click', _.bind(me.onUnderline, me));
$('#font-left').single('click', _.bind(me.onHAlign, me, 'left'));
$('#font-center').single('click', _.bind(me.onHAlign, me, 'center'));
$('#font-right').single('click', _.bind(me.onHAlign, me, 'right'));
$('#font-just').single('click', _.bind(me.onHAlign, me, 'justify'));
$('#font-top').single('click', _.bind(me.onVAlign, me, 'top'));
$('#font-middle').single('click', _.bind(me.onVAlign, me, 'center'));
$('#font-bottom').single('click', _.bind(me.onVAlign, me, 'bottom'));
},
initFontsPage: function () {
var me = this,
displaySize = _fontInfo.size;
_.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt;
$('#font-size .item-after label').html(displaySize);
$('#font-size .button').single('click', _.bind(me.onFontSize, me));
_.defer(function () {
me.getView('EditText').renderFonts();
}, me);
},
initTextColorPage: function () {
var me = this,
color = me._sdkToThemeColor(_fontInfo.color),
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-color] .page-content')
});
if (palette) {
palette.select(color);
palette.on('select', _.bind(me.onTextColor, me));
}
},
// Handlers
onFontSize: function (e) {
var me = this,
$button = $(e.currentTarget),
fontSize = _fontInfo.size;
if ($button.hasClass('decrement')) {
_.isUndefined(fontSize) ? me.api.asc_decreaseFontSize() : fontSize = Math.max(1, --fontSize);
} else {
_.isUndefined(fontSize) ? me.api.asc_increaseFontSize() : fontSize = Math.min(100, ++fontSize);
}
if (! _.isUndefined(fontSize)) {
me.api.asc_setCellFontSize(fontSize);
}
},
onFontClick: function (view, e) {
var $item = $(e.currentTarget).find('input');
if ($item) {
this.api.asc_setCellFontName($item.prop('value'));
}
},
onBold: function (e) {
var pressed = this._toggleButton(e);
if (this.api) {
this.api.asc_setCellBold(pressed);
}
},
onItalic: function (e) {
var pressed = this._toggleButton(e);
if (this.api) {
this.api.asc_setCellItalic(pressed);
}
},
onUnderline: function (e) {
var pressed = this._toggleButton(e);
if (this.api) {
this.api.asc_setCellUnderline(pressed);
}
},
onHAlign: function(type, e) {
var $target = $(e.currentTarget);
$target.parent('.row').find('a.button').removeClass('active');
$target.addClass('active');
this.api.asc_setCellAlign(type);
},
onVAlign: function(type, e) {
var $target = $(e.currentTarget);
$target.parent('.row').find('a.button').removeClass('active');
$target.addClass('active');
this.api.asc_setCellVertAlign(type);
},
onTextColor:function (palette, color) {
this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
$('#text-color .color-preview').css('background-color', '#' + (_.isObject(color) ? color.color : color));
},
onHAlignChange: function (e) {
var $target = $(e.currentTarget),
type = $target.prop('value');
this.api.asc_setCellAlign(type);
},
onVAlignChange: function (e) {
var $target = $(e.currentTarget),
type = $target.prop('value');
this.api.asc_setCellVertAlign(type);
},
// Public
getFontInfo: function () {
return _fontInfo;
},
// API handlers
onApiSelectionChanged: function(info) {
if (!_isEdit) {
return;
}
_cellInfo = info;
_fontInfo = info.asc_getFont();
var selectType = info.asc_getFlags().asc_getSelectionType();
switch (selectType) {
case Asc.c_oAscSelectionType.RangeChartText: _textIn = TextType.inChart; break;
case Asc.c_oAscSelectionType.RangeShapeText: _textIn = TextType.inShape; break;
default: _textIn = TextType.inUnknown;
}
},
onApiEditorSelectionChanged: function(fontObj) {
if (!_isEdit) {
return;
}
_fontInfo = fontObj;
},
// Helpers
_toggleButton: function (e) {
return $(e.currentTarget).toggleClass('active').hasClass('active');
},
_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;
},
textFonts: 'Fonts',
textAuto: 'Auto',
textPt: 'pt'
};
})(), SSE.Controllers.EditText || {}))
});

View file

@ -26,7 +26,7 @@
<li> <li>
<a id="text-color" class="item-link"> <a id="text-color" class="item-link">
<div class="item-content"> <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-inner">
<div class="item-title"><%= scope.textTextColor %></div> <div class="item-title"><%= scope.textTextColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %> <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
@ -37,7 +37,7 @@
<li> <li>
<a id="fill-color" class="item-link"> <a id="fill-color" class="item-link">
<div class="item-content"> <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-inner">
<div class="item-title"><%= scope.textFillColor %></div> <div class="item-title"><%= scope.textFillColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %> <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>

View file

@ -0,0 +1,119 @@
<!-- 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>

View file

@ -0,0 +1,183 @@
/*
*
* (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 || {}))
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -68,32 +68,32 @@ i.icon {
&.icon-text-align-center { &.icon-text-align-center {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-justify {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-left {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-right {
width: 22px; width: 22px;
height: 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 { &.icon-text-valign-top {
width: 22px; width: 22px;
height: 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 { &.icon-text-valign-middle {
width: 22px; width: 22px;
height: 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 { &.icon-text-valign-bottom {
width: 22px; width: 22px;

View file

@ -58,22 +58,37 @@ i.icon {
&.icon-text-align-center { &.icon-text-align-center {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-justify {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-left {
width: 22px; width: 22px;
height: 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 { &.icon-text-align-right {
width: 22px; width: 22px;
height: 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 { &.icon-insimage {
width: 22px; width: 22px;