Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'feature/new-mobile' of https://github.com/ONLYOFFICE/web-apps into feature/new-mobile

Browse source 
# Conflicts:
#	apps/spreadsheeteditor/mobile/app-dev.js
#	apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less
#	apps/spreadsheeteditor/mobile/resources/less/material/_icons.less
This commit is contained in:
Maxim Kadushkin 2016-12-12 12:37:12 +03:00
parent 67e3aa2e35 76e30403ef
commit bd916d4d9b
34 changed files with 2873 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/mobile/resources/less/ios/_container.less
View file

@ -39,6 +39,10 @@
margin-top: 0;
}
&:last-child {
margin-bottom: 30px;
}
li:first-child a,
li:last-child a {
border-radius: 0 !important;

1
apps/common/mobile/resources/less/ios/_listview.less
View file

@ -69,6 +69,7 @@
&.no-indicator {
.item-inner {
background-image: none;
padding-right: 15px;
}
}
}

1
apps/common/mobile/resources/less/material/_listview.less
View file

@ -63,6 +63,7 @@
&.no-indicator {
.item-inner {
background-image: none;
padding-right: 16px;
}
}
}

2
apps/documenteditor/mobile/app/controller/edit/EditParagraph.js
View file

@ -307,7 +307,7 @@ define([
return;
}
_styles = [],
_styles = [];
_styleTumbSize = {
width : styles.STYLE_THUMBNAIL_WIDTH / uiApp.device.pixelRatio,
height : styles.STYLE_THUMBNAIL_HEIGHT / uiApp.device.pixelRatio

50
apps/documenteditor/mobile/app/template/EditText.template
View file

@ -2,23 +2,28 @@
<div id="edit-text-root">
<div class="list-block">
<ul>
<li><a id="font-fonts" class="item-link">
<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>
<li>
<a id="font-fonts" class="item-link">
<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>
</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>
<a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
</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>
<a id="font-strikethrough" class="button" style="text-decoration: line-through">S</a>
</div>
</div>
</div>
</div></li>
</li>
<li>
<a id="font-color" class="item-link">
<div class="item-content">
@ -30,15 +35,16 @@
</div>
</a>
</li>
<li><a id="font-background" 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><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textHighlightColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
<li>
<a id="font-background" 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><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textHighlightColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
</div>
</div>
</div>
</a>
</a>
</li>
<li>
<a id="font-additional" class="item-link">

2
apps/documenteditor/mobile/app/template/Settings.template
View file

@ -336,7 +336,7 @@
</div>
<div class="content-block">
<h3>DOCUMENT EDITOR</h3>
<h3><%= scope.textVersion %> 4.2</h3>
<h3><%= scope.textVersion %> 4.3</h3>
</div>
<div class="content-block">
<h3 class="vendor">Ascensio System SIA</h3>

8
apps/documenteditor/mobile/resources/css/app-ios.css
View file

File diff suppressed because one or more lines are too long

4
apps/documenteditor/mobile/resources/css/app-material.css
View file

File diff suppressed because one or more lines are too long

1
apps/documenteditor/mobile/resources/less/app-ios.less
View file

@ -84,6 +84,7 @@ input, textarea {
top: @toolbarSize;
bottom: 0;
height: auto;
overflow: hidden;
.transition(300ms);
}

1
apps/documenteditor/mobile/resources/less/app-material.less
View file

@ -77,6 +77,7 @@ input, textarea {
top: @toolbarSize;
bottom: 0;
height: auto;
overflow: hidden;
.transition(300ms);
}

2
apps/presentationeditor/mobile/app-dev.js
View file

@ -144,6 +144,7 @@ require([
'EditTable',
'EditImage',
'EditShape',
'EditSlide',
// 'EditChart',
'EditLink',
'AddContainer',
@ -209,6 +210,7 @@ require([
'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditImage',
'presentationeditor/mobile/app/controller/edit/EditShape',
'presentationeditor/mobile/app/controller/edit/EditSlide',
// 'presentationeditor/mobile/app/controller/edit/EditChart',
'presentationeditor/mobile/app/controller/edit/EditLink',
'presentationeditor/mobile/app/controller/add/AddContainer',

2
apps/presentationeditor/mobile/app.js
View file

@ -155,6 +155,7 @@ require([
'EditTable',
'EditImage',
'EditShape',
'EditSlide',
// 'EditChart',
'EditLink',
'AddContainer',
@ -220,6 +221,7 @@ require([
'presentationeditor/mobile/app/controller/edit/EditTable',
'presentationeditor/mobile/app/controller/edit/EditImage',
'presentationeditor/mobile/app/controller/edit/EditShape',
'presentationeditor/mobile/app/controller/edit/EditSlide',
// 'presentationeditor/mobile/app/controller/edit/EditChart',
'presentationeditor/mobile/app/controller/edit/EditLink',
'presentationeditor/mobile/app/controller/add/AddContainer',

3
apps/presentationeditor/mobile/app/controller/Main.js
View file

@ -423,8 +423,7 @@ define([
var zf = (value!==null) ? parseInt(value) : (me.appOptions.customization && me.appOptions.customization.zoom ? parseInt(me.appOptions.customization.zoom) : -1);
(zf == -1) ? me.api.zoomFitToPage() : ((zf == -2) ? me.api.zoomFitToWidth() : me.api.zoom(zf>0 ? zf : 100));
Common.localStorage.setItem("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
me.api.asc_registerCallback('asc_onStartAction', _.bind(me.onLongActionBegin, me));
me.api.asc_registerCallback('asc_onEndAction', _.bind(me.onLongActionEnd, me));

6
apps/presentationeditor/mobile/app/controller/add/AddSlide.js
View file

@ -74,10 +74,10 @@ define([
initEvents: function () {
var me = this;
me.getView('AddSlide').updateLayouts(_layouts);
$('#add-slide .slide-layout li').single('click', _.buffered(me.onStyleClick, 100, me));
$('#add-slide .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
},
onStyleClick: function (e) {
onLayoutClick: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type');
@ -115,7 +115,7 @@ define([
Common.NotificationCenter.trigger('slidelayouts:load', _layouts);
this.getView('AddSlide').updateLayouts(_layouts);
$('#add-slide .slide-layout li').single('click', _.buffered(me.onStyleClick, 100, me));
$('#add-slide .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
},
textTableSize: 'Table Size',

4
apps/presentationeditor/mobile/app/controller/edit/EditContainer.js
View file

@ -115,7 +115,7 @@ define([
editors.push({
caption: me.textSlide,
id: 'edit-slide',
layout: PE.getController('EditText').getView('EditSlide').rootLayout()
layout: PE.getController('EditSlide').getView('EditSlide').rootLayout()
})
}
if (_.contains(_settings, 'text')) {
@ -324,7 +324,7 @@ define([
_settings.push('table');
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
// _settings.push('slide');
_settings.push('slide');
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
_settings.push('image');
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {

286
apps/presentationeditor/mobile/app/controller/edit/EditSlide.js Normal file
View file

@ -0,0 +1,286 @@
/*
*
* (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
*
*/
/**
* EditSlide.js
* Presentation Editor
*
* Created by Julia Radzhabova on 12/07/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'presentationeditor/mobile/app/view/edit/EditSlide'
], function (core) {
'use strict';
PE.Controllers.EditSlide = Backbone.Controller.extend(_.extend((function() {
// Private
var _stack = [],
_slideObject = undefined,
_themes = [],
_themeId = -1;
return {
models: [],
collections: [],
views: [
'EditSlide'
],
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('slidelayouts:load', _.bind(this.updateLayouts, this));
this.addListeners({
'EditSlide': {
'page:show': this.onPageShow
}
});
},
setApi: function (api) {
var me = this;
me.api = api;
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
me.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(me.onApiInitEditorStyles, me));
me.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(me.onApiUpdateThemeIndex, me));
},
onLaunch: function () {
this.createView('EditSlide').render();
},
initEvents: function () {
var me = this;
$('#slide-remove').single('click', _.bind(me.onRemoveSlide, me));
$('#slide-duplicate').single('click', _.bind(me.onDuplicateSlide, me));
me.initSettings();
},
onPageShow: function (view, pageId) {
var me = this;
me.initSettings(pageId);
},
initSettings: function (pageId) {
var me = this;
if (_slideObject) {
if (pageId == '#edit-slide-style') {
me._initStyleView();
var paletteFillColor = me.getView('EditSlide').paletteFillColor;
paletteFillColor && paletteFillColor.on('select', _.bind(me.onFillColor, me));
} else if (pageId == '#edit-slide-layout') {
$('.container-edit .slide-layout li').single('click', _.buffered(me.onLayoutClick, 100, me));
} else if (pageId == '#edit-slide-theme') {
this.getView('EditSlide').renderThemes();
$('.container-edit .slide-theme .row div').removeClass('active').single('click', _.buffered(me.onThemeClick, 100, me));
$('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
}
}
},
_initStyleView: function () {
var me = this,
paletteFillColor = me.getView('EditSlide').paletteFillColor;
var sdkColor, color;
// Init fill color
var fill = _slideObject.get_background(),
fillType = fill.get_type();
color = 'transparent';
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
fill = fill.get_fill();
sdkColor = fill.get_color();
if (sdkColor) {
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
} else {
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
}
}
}
paletteFillColor && paletteFillColor.select(color);
},
// Public
getSlide: function () {
return _slideObject;
},
getThemes: function () {
return _themes || [];
},
// Handlers
onLayoutClick: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type');
me.api.ChangeLayout(type);
},
onThemeClick: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type');
$('.container-edit .slide-theme div').removeClass('active');
$target.addClass('active');
me.api.ChangeTheme(type);
},
onRemoveSlide: function () {
this.api.DeleteSlide();
PE.getController('EditContainer').hideModal();
},
onDuplicateSlide: function () {
this.api.DublicateSlide();
PE.getController('EditContainer').hideModal();
},
onFillColor: function(palette, color) {
var me = this;
if (me.api) {
var props = new Asc.CAscSlideProps();
var fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
props.put_background(fill);
me.api.SetSlideProps(props);
}
},
updateLayouts: function(layouts){
this.getView('EditSlide').updateLayouts();
$('.container-edit .slide-layout li').single('click', _.buffered(this.onLayoutClick, 100, this));
},
// API handlers
onApiFocusObject: function (objects) {
_stack = objects;
var slides = [];
_.each(_stack, function (object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
slides.push(object);
}
});
if (slides.length > 0) {
var object = slides[slides.length - 1]; // get top slide
_slideObject = object.get_ObjectValue();
} else {
_slideObject = undefined;
}
},
onApiInitEditorStyles: function(themes) {
if (themes) {
window.styles_loaded = false;
var me = this,
defaultThemes = themes[0] || [],
docThemes = themes[1] || [];
_themes = [];
_.each(defaultThemes.concat(docThemes), function(theme) {
_themes.push({
imageUrl: theme.get_Image(),
themeId : theme.get_Index()
});
});
window.styles_loaded = true;
}
},
onApiUpdateThemeIndex: function(themeId) {
_themeId = themeId;
$('.container-edit .slide-theme .row div').removeClass('active');
$('.container-edit .slide-theme div[data-type=' + _themeId + ']').addClass('active');
},
// Helpers
_closeIfNeed: function () {
if (!this._isSlideInStack()) {
PE.getController('EditContainer').hideModal();
}
},
_isSlideInStack: function () {
var slideExist = false;
_.some(_stack, function(object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Slide) {
slideExist = true;
return true;
}
});
return slideExist;
}
};
})(), PE.Controllers.EditSlide || {}))
});

2
apps/presentationeditor/mobile/app/template/AddLink.template
View file

@ -5,7 +5,7 @@
<li>
<div id="add-link-type" class="item-content item-link">
<div class="item-inner">
<div class="item-title"><%= scope.textLinkType %></div>
<div class="item-title label"><%= scope.textLinkType %></div>
<div class="item-after"><%= scope.textExternalLink %></div>
</div>
</div>

166
apps/presentationeditor/mobile/app/template/EditSlide.template Normal file
View file

@ -0,0 +1,166 @@
<!-- Root view -->
<div id="edit-slide-root">
<div class="list-block">
<ul>
<li>
<a id="slide-theme" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textTheme %></div>
</div>
</div>
</a>
</li>
<li>
<a id="slide-change-layout" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textLayout %></div>
</div>
</div>
</a>
</li>
<li>
<a id="slide-transition" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textTransition %></div>
</div>
</div>
</a>
</li>
<li>
<a id="slide-style" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textStyle %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<% if (android) { %>
<a id="slide-duplicate" class="button button-raised button-fill" style="margin: 20px 16px;"><%= scope.textDuplicateSlide %></a>
<% } else { %>
<a id="slide-duplicate" class="item-link list-button" style="text-align: center;"><%= scope.textDuplicateSlide %></a>
<% } %>
</li>
<li>
<% if (android) { %>
<a id="slide-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveSlide %></a>
<% } else { %>
<a id="slide-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveSlide %></a>
<% } %>
</li>
</ul>
</div>
</div>
<!-- Reorder view -->
<div id="edit-slide-reorder">
<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.textReorder %></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 shape-reorder">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="all-up" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-foreground"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textToForeground %></div>
</div>
</div>
</a>
</li>
<li>
<a data-type="all-down" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-background"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textToBackground %></div>
</div>
</div>
</a>
</li>
<li>
<a data-type="move-up" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-move-forward"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textForward %></div>
</div>
</div>
</a>
</li>
<li>
<a data-type="move-down" class="item-link no-indicator">
<div data-type="move-down" class="item-content">
<div class="item-media"><i class="icon icon-move-backward"></i></div>
<div class="item-inner">
<div class="item-title"><%= scope.textBackward %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Replace layout -->
<div id="edit-slide-layout">
<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.textLayout %></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">
<div class="page-content dataview slide-layout" style="width: 100%;">
</div>
</div>
</div>
<!-- Replace view -->
<div id="edit-slide-theme">
<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.textTheme %></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">
<div class="page-content dataview slide-theme" style="width: 100%;">
</div>
</div>
</div>
<!-- Styles view -->
<div id="edit-slide-style">
<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.textFill %></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-slide-style">
<div class="page-content">
<!--Fill colors-->
</div>
</div>
</div>

245
apps/presentationeditor/mobile/app/view/edit/EditSlide.js Normal file
View file

@ -0,0 +1,245 @@
/*
*
* (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
*
*/
/**
* EditSlide.js
* Presentation Editor
*
* Created by Julia Radzhabova on 12/07/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!presentationeditor/mobile/app/template/EditSlide.template',
'jquery',
'underscore',
'backbone'
], function (editTemplate, $, _, Backbone) {
'use strict';
PE.Views.EditSlide = Backbone.View.extend(_.extend((function() {
// private
var _layouts = [];
return {
// el: '.view-main',
template: _.template(editTemplate),
events: {
},
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
},
initEvents: function () {
var me = this;
$('#slide-theme').single('click', _.bind(me.showTheme, me));
$('#slide-change-layout').single('click', _.bind(me.showLayout, me));
$('#slide-transition').single('click', _.bind(me.showTransition, me));
$('#slide-style').single('click', _.bind(me.showStyle, me));
me.initControls();
},
categoryShow: function(e) {
// if ('edit-slide' == $(e.currentTarget).prop('id')) {
// this.initEvents();
// }
},
// 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-slide-root')
.html();
}
return '';
},
initControls: function () {
//
},
showPage: function (templateId, suspendEvent) {
var rootView = PE.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();
}
},
showStyle: function () {
this.showPage('#edit-slide-style', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-slide-style] .page-content'),
transparent: true
});
this.fireEvent('page:show', [this, '#edit-slide-style']);
},
showLayout: function () {
this.showPage('#edit-slide-layout', true);
this.renderLayouts();
this.fireEvent('page:show', [this, '#edit-slide-layout']);
},
showTheme: function () {
this.showPage('#edit-slide-theme');
},
showTransition: function () {
this.showPage('#edit-slide-transition');
},
updateLayouts: function () {
_layouts = Common.SharedSettings.get('slidelayouts');
this.renderLayouts();
},
renderLayouts: function() {
var $layoutContainer = $('.container-edit .slide-layout');
if ($layoutContainer.length > 0 && _layouts.length>0) {
var columns = parseInt(($layoutContainer.width()-20) / (_layouts[0].itemWidth+2)), // magic
row = -1,
layouts = [];
_.each(_layouts, function (layout, index) {
if (0 == index % columns) {
layouts.push([]);
row++
}
layouts[row].push(layout);
});
var template = _.template([
'<% _.each(layouts, function(row) { %>',
'<ul class="row">',
'<% _.each(row, function(item) { %>',
'<li data-type="<%= item.idx %>">',
'<img src="<%= item.imageUrl %>" width="<%= item.itemWidth %>" height="<%= item.itemHeight %>">',
'</li>',
'<% }); %>',
'</ul>',
'<% }); %>'
].join(''), {
layouts: layouts
});
$layoutContainer.html(template);
}
},
renderThemes: function() {
var $themeContainer = $('.container-edit .slide-theme'),
_arr = PE.getController('EditSlide').getThemes();
if ($themeContainer.length > 0 && _arr.length>0) {
var columns = parseInt(($themeContainer.width()-20) / 95), // magic
row = -1,
themes = [];
_.each(_arr, function (theme, index) {
if (0 == index % columns) {
themes.push([]);
row++
}
themes[row].push(theme);
});
var template = _.template([
'<% _.each(themes, function(row) { %>',
'<div class="row">',
'<% _.each(row, function(theme) { %>',
'<div data-type="<%= theme.themeId %>"><img src="<%= theme.imageUrl %>"></div>',
'<% }); %>',
'</div>',
'<% }); %>'
].join(''), {
themes: themes
});
$themeContainer.html(template);
}
},
textTheme: 'Theme',
textStyle: 'Style',
textLayout: 'Layout',
textTransition: 'Transition',
textRemoveSlide: 'Delete Slide',
textDuplicateSlide: 'Duplicate Slide',
textBack: 'Back',
textFill: 'Fill',
textEffects: 'Effects',
textSize: 'Size',
textColor: 'Color',
textOpacity: 'Opacity'
}
})(), PE.Views.EditSlide || {}))
});

21
apps/presentationeditor/mobile/resources/css/app-ios.css
View file

File diff suppressed because one or more lines are too long

17
apps/presentationeditor/mobile/resources/css/app-material.css
View file

File diff suppressed because one or more lines are too long

20
apps/presentationeditor/mobile/resources/less/app-ios.less
View file

@ -84,6 +84,7 @@ input, textarea {
top: @toolbarSize;
bottom: 0;
height: auto;
overflow: hidden;
.transition(300ms);
}
@ -184,9 +185,24 @@ input, textarea {
padding: 1px;
img {
width: 119px;
height: 67px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
}
}
// Slide theme
.slide-theme {
.row {
margin-top: 14px;
margin-bottom: 12px;
div {
margin: 0;
padding: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
width: 85px;
height: 38px;
}
}
}

20
apps/presentationeditor/mobile/resources/less/app-material.less
View file

@ -65,6 +65,7 @@
top: @toolbarSize;
bottom: 0;
height: auto;
overflow: hidden;
.transition(300ms);
}
@ -177,9 +178,24 @@ input, textarea {
padding: 1px;
img {
width: 119px;
height: 67px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
}
}
// Slide theme
.slide-theme {
.row {
margin-top: 14px;
margin-bottom: 12px;
div {
margin: 0;
padding: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
width: 85px;
height: 38px;
}
}
}

5
apps/presentationeditor/sdk_dev_scripts.js
View file

@ -171,5 +171,8 @@ var sdk_dev_scrpipts = [
"../../../../sdkjs/common/plugins.js",
"../../../../sdkjs/word/apiBuilder.js",
"../../../../sdkjs/slide/apiBuilder.js",
"../../../../sdkjs/common/text_input.js"
"../../../../sdkjs/common/text_input.js",
"../../../../sdkjs/common/Scrolls/iscroll.js",
"../../../../sdkjs/common/Scrolls/mobileTouchManagerBase.js",
"../../../../sdkjs/slide/Drawing/mobileTouchManager.js"
];

4
apps/spreadsheeteditor/mobile/app-dev.js
View file

@ -123,7 +123,7 @@ require([
, 'Statusbar'
,'Settings'
,'EditContainer'
// ,'EditText'
,'EditCell'
// ,'EditParagraph'
// ,'EditTable'
// ,'EditImage'
@ -193,7 +193,7 @@ require([
, 'spreadsheeteditor/mobile/app/controller/Statusbar'
, 'spreadsheeteditor/mobile/app/controller/Settings'
, 'spreadsheeteditor/mobile/app/controller/edit/EditContainer'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditText'
,'spreadsheeteditor/mobile/app/controller/edit/EditCell'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditTable'
// ,'spreadsheeteditor/mobile/app/controller/edit/EditImage'

634
apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js Normal file
View file

@ -0,0 +1,634 @@
/*
*
* (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
*
*/
/**
* EditCell.js
* Spreadsheet Editor
*
* Created by Alexander Yuzhin on 12/6/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'spreadsheeteditor/mobile/app/view/edit/EditCell',
'jquery',
'underscore',
'backbone',
'common/mobile/lib/component/ThemeColorPalette'
], function (core, view, $, _, Backbone) {
'use strict';
SSE.Controllers.EditCell = Backbone.Controller.extend(_.extend((function() {
var _fontsArray = [],
_stack = [],
_cellInfo = undefined,
_cellStyles = [],
_fontInfo = {},
_borderInfo = {color: '000000', width: 'medium'},
_isEdit = false;
function onApiLoadFonts(fonts, select) {
_.each(fonts, function(font){
var fontId = font.asc_getFontId();
_fontsArray.push({
id : fontId,
name : font.asc_getFontName(),
// displayValue: font.asc_getFontName(),
imgidx : font.asc_getFontThumbnail(),
type : font.asc_getFontType()
});
});
Common.NotificationCenter.trigger('fonts:load', _fontsArray, select);
}
return {
models: [],
collections: [],
views: [
'EditCell'
],
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
this.addListeners({
'EditCell': {
'page:show' : this.onPageShow,
'font:click': this.onFontClick
}
});
},
setApi: function (api) {
var me = this;
me.api = api;
me.api.asc_registerCallback('asc_onInitEditorFonts', _.bind(onApiLoadFonts, me));
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('EditCell').render();
},
initEvents: function () {
var me = this;
$('#font-bold').single('click', _.bind(me.onBold, me));
$('#font-italic').single('click', _.bind(me.onItalic, me));
$('#font-underline').single('click', _.bind(me.onUnderline, me));
me.getView('EditCell').renderStyles(_cellStyles);
//
// $('#paragraph-align .button').single('click', _.bind(me.onParagraphAlign, me));
// $('#font-moveleft, #font-moveright').single('click', _.bind(me.onParagraphMove, me));
me.initSettings();
},
onPageShow: function (view, pageId) {
var me = this;
// paletteTextColor = me.getView('EditCell').paletteTextColor,
// paletteBackgroundColor = me.getView('EditCell').paletteBackgroundColor;
//
// $('#text-additional li').single('click', _.buffered(me.onAdditional, 100, me));
// $('#page-text-linespacing li').single('click', _.buffered(me.onLineSpacing, 100, me));
// $('#font-size .button').single('click', _.bind(me.onFontSize, me));
// $('#letter-spacing .button').single('click', _.bind(me.onLetterSpacing, me));
//
// $('.dataview.bullets li').single('click', _.buffered(me.onBullet, 100, me));
// $('.dataview.numbers li').single('click', _.buffered(me.onNumber, 100, me));
//
// $('#font-color-auto').single('click', _.bind(me.onTextColorAuto, me));
// paletteTextColor && paletteTextColor.on('select', _.bind(me.onTextColor, me));
// paletteBackgroundColor && paletteBackgroundColor.on('select', _.bind(me.onBackgroundColor, me));
me.initSettings(pageId);
},
initSettings: function (pageId) {
var me = this;
if ('#edit-text-fonts' == pageId) {
me.initFontsPage();
} else if ('#edit-text-color' == pageId) {
me.initTextColorPage();
} else if ('#edit-fill-color' == pageId) {
me.initFillColorPage();
} else if ('#edit-cell-border-color' == pageId) {
me.initBorderColorPage();
} else if ('#edit-text-format' == pageId) {
me.initTextFormat();
} else if ('#edit-border-style' == pageId) {
me.initBorderStyle();
} else if (!_.isUndefined(pageId) && pageId.indexOf('#edit-cell-format') > -1) {
me.initCellFormat();
} else {
me.initCellSettings(_cellInfo);
}
// me.api && me.api.UpdateInterfaceState();
//
// if (_cellInfo) {
// var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]');
// var $inputTextCaps = $('#text-additional input[name=text-caps]');
//
// _cellInfo.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
// _cellInfo.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
//
// _cellInfo.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
// _cellInfo.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
//
// _fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_cellInfo.get_TextSpacing());
// $('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
// }
},
// Public
getFonts: function() {
return _fontsArray;
},
getStack: function() {
return _stack;
},
getFontInfo: function () {
return _fontInfo;
},
getCell: function () {
return _cellInfo;
},
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));
},
initTextColorPage: function () {
var me = this,
palette = me.getView('EditCell').paletteTextColor,
color = me._sdkToThemeColor(_fontInfo.color);
if (palette) {
palette.select(color);
palette.on('select', _.bind(me.onTextColor, me));
}
},
initFillColorPage: function () {
var me = this,
palette = me.getView('EditCell').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));
}
},
initTextFormat: function () {
var me = this,
$pageTextFormat = $('.page[data-page=edit-text-format]'),
hAlign = _cellInfo.asc_getHorAlign() || 'left',
vAlign = _cellInfo.asc_getVertAlign() || 'bottom',
isWrapText = _cellInfo.asc_getFlags().asc_getWrapText();
$('#text-format .item-media i').removeClass().addClass(Common.Utils.String.format('icon icon-text-align-{0}', hAlign));
if ($pageTextFormat.length > 0) {
var $radioHAlign = $pageTextFormat.find('input:radio[name=text-halign]'),
$radioVAlign = $pageTextFormat.find('input:radio[name=text-valign]'),
$switchWrapText = $pageTextFormat.find('#edit-cell-wrap-text input');
$radioHAlign.val([hAlign]);
$radioVAlign.val([vAlign]);
$switchWrapText.prop('checked', isWrapText);
$radioHAlign.single('change', _.bind(me.onHAlignChange, me));
$radioVAlign.single('change', _.bind(me.onVAlignChange, me));
$switchWrapText.single('change', _.bind(me.onWrapTextChange, me));
}
},
initCellFormat: function () {
var me = this,
$pageCellFormat = $('.page[data-page=edit-cell-format]');
if ($pageCellFormat.length > 0) {
$pageCellFormat.find('.item-link.no-indicator[data-type]').single('click', _.bind(me.onCellFormat, me));
}
},
initBorderStyle: function () {
$('.page[data-page=edit-border-style] a[data-type]').single('click', _.bind(this.onBorderStyle, this));
$('#edit-border-color .color-preview').css('background-color', '#' + _borderInfo.color);
$('#edit-border-size select').val(_borderInfo.width);
$('#edit-border-size .item-after').text($('#edit-border-size select option[value=' +_borderInfo.width + ']').text());
$('#edit-border-size select').single('change', function (e) {
_borderInfo.width = $(e.currentTarget).val();
})
},
initFontSettings: function (fontObj) {
if (_.isUndefined(fontObj)) {
return;
}
var me = this;
// Init font name
var fontName = fontObj.asc_getName() || this.textFonts;
_fontInfo.name = fontName;
$('#font-fonts .item-title').html(fontName);
// Init font style
$('#font-bold').toggleClass('active', fontObj.asc_getBold() === true);
$('#font-italic').toggleClass('active', fontObj.asc_getItalic() === true);
$('#font-underline').toggleClass('active', fontObj.asc_getUnderline() === true);
// Init font size
_fontInfo.size = fontObj.asc_getSize();
var displaySize = _fontInfo.size;
_.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 color
_fontInfo.color = fontObj.asc_getColor();
var color = _fontInfo.color,
clr = me._sdkToThemeColor(color);
$('#text-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
},
initCellSettings: function (cellInfo) {
if (_.isUndefined(cellInfo)) {
return;
}
var me = this,
selectionType = cellInfo.asc_getFlags().asc_getSelectionType(),
// coAuthDisable = (!this.toolbar.mode.isEditMailMerge && !this.toolbar.mode.isEditDiagram) ? (cellInfo.asc_getLocked()===true || cellInfo.asc_getLockedTable()===true) : false,
// editOptionsDisabled = this._disableEditOptions(selectionType, coAuthDisable),
_fontInfo = cellInfo.asc_getFont(),
val,
need_disable = false;
me.initFontSettings(_fontInfo);
// Init fill color
var color = cellInfo.asc_getFill().asc_getColor(),
clr = me._sdkToThemeColor(color);
$('#fill-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText) {
return;
}
me.initTextFormat();
//
// val = (filterInfo) ? filterInfo.asc_getIsAutoFilter() : null;
// if (this._state.filter !== val) {
// toolbar.btnSetAutofilter.toggle(val===true, true);
// toolbar.mnuitemAutoFilter.setChecked(val===true, true);
// this._state.filter = val;
// }
// need_disable = this._state.controlsdisabled.filters || (val===null);
// toolbar.lockToolbar(SSE.enumLock.ruleFilter, need_disable,
// { array: [toolbar.btnSortDown, toolbar.btnSortUp, toolbar.mnuitemSortAZ, toolbar.mnuitemSortZA,
// toolbar.btnTableTemplate,toolbar.btnSetAutofilter,toolbar.mnuitemAutoFilter,toolbar.btnAutofilter] });
//
// val = (formatTableInfo) ? formatTableInfo.asc_getTableStyleName() : null;
// if (this._state.tablestylename !== val && this.toolbar.mnuTableTemplatePicker) {
// val = this.toolbar.mnuTableTemplatePicker.store.findWhere({name: val});
// if (val) {
// this.toolbar.mnuTableTemplatePicker.selectRecord(val);
// this._state.tablestylename = val.get('name');
// } else {
// toolbar.mnuTableTemplatePicker.deselectAll();
// this._state.tablestylename = null;
// }
// }
//
// this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
//
// need_disable = this._state.controlsdisabled.filters || !filterInfo || (filterInfo.asc_getIsApplyAutoFilter()!==true);
// toolbar.lockToolbar(SSE.enumLock.ruleDelFilter, need_disable, {array:[toolbar.btnClearAutofilter,toolbar.mnuitemClearFilter]});
//
// this._state.multiselect = cellInfo.asc_getFlags().asc_getMultiselect();
// toolbar.lockToolbar(SSE.enumLock.multiselect, this._state.multiselect, { array: [toolbar.btnTableTemplate, toolbar.btnInsertHyperlink]});
// }
//
// fontparam = toolbar.numFormatTypes[cellInfo.asc_getNumFormatType()];
//
// if (!fontparam)
// fontparam = toolbar.numFormatTypes[1];
//
// toolbar.btnNumberFormat.setCaption(fontparam);
//
// val = cellInfo.asc_getAngle();
// if (this._state.angle !== val) {
// this._clearChecked(toolbar.btnTextOrient.menu);
// switch(val) {
// case 45: toolbar.btnTextOrient.menu.items[1].setChecked(true, true); break;
// case -45: toolbar.btnTextOrient.menu.items[2].setChecked(true, true); break;
// case 90: toolbar.btnTextOrient.menu.items[3].setChecked(true, true); break;
// case -90: toolbar.btnTextOrient.menu.items[4].setChecked(true, true); break;
// default: toolbar.btnTextOrient.menu.items[0].setChecked(true, true); break;
// }
// this._state.angle = val;
// }
//
// val = cellInfo.asc_getStyleName();
// if (this._state.prstyle != val && !this.toolbar.listStyles.isDisabled()) {
// var listStyle = this.toolbar.listStyles,
// listStylesVisible = (listStyle.rendered);
//
// if (listStylesVisible) {
// listStyle.suspendEvents();
// var styleRec = listStyle.menuPicker.store.findWhere({
// name: val
// });
// this._state.prstyle = (listStyle.menuPicker.store.length>0) ? val : undefined;
//
// listStyle.menuPicker.selectRecord(styleRec);
// listStyle.resumeEvents();
// }
// }
//
// val = (selectionType==Asc.c_oAscSelectionType.RangeRow);
// if ( this._state.controlsdisabled.rows!==val ) {
// this._state.controlsdisabled.rows=val;
// toolbar.btnAddCell.menu.items[3].setDisabled(val);
// toolbar.btnDeleteCell.menu.items[3].setDisabled(val);
// }
// val = (selectionType==Asc.c_oAscSelectionType.RangeCol);
// if ( this._state.controlsdisabled.cols!==val ) {
// this._state.controlsdisabled.cols=val;
// toolbar.btnAddCell.menu.items[2].setDisabled(val);
// toolbar.btnDeleteCell.menu.items[2].setDisabled(val);
// }
//
// val = filterInfo && filterInfo.asc_getIsApplyAutoFilter();
// if ( this._state.controlsdisabled.cells_right!==(this._state.controlsdisabled.rows || val) ) {
// this._state.controlsdisabled.cells_right = (this._state.controlsdisabled.rows || val);
// toolbar.btnAddCell.menu.items[0].setDisabled(this._state.controlsdisabled.cells_right);
// toolbar.btnDeleteCell.menu.items[0].setDisabled(this._state.controlsdisabled.cells_right);
// }
// if ( this._state.controlsdisabled.cells_down!==(this._state.controlsdisabled.cols || val) ) {
// this._state.controlsdisabled.cells_down = (this._state.controlsdisabled.cols || val);
// toolbar.btnAddCell.menu.items[1].setDisabled(this._state.controlsdisabled.cells_down);
// toolbar.btnDeleteCell.menu.items[1].setDisabled(this._state.controlsdisabled.cells_down);
// }
},
onApiInitEditorStyles: function(styles){
window.styles_loaded = false;
_cellStyles = styles.asc_getDefaultStyles().concat(styles.asc_getDocStyles());
this.getView('EditCell').renderStyles(_cellStyles);
window.styles_loaded = true;
},
// 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);
}
},
onTextColor:function (palette, color) {
this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
},
onFillColor:function (palette, color) {
this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(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);
},
onWrapTextChange: function (e) {
var $target = $(e.currentTarget),
checked = $target.prop('checked');
this.api.asc_setCellTextWrap(checked);
},
onCellFormat: function (e) {
var $target = $(e.currentTarget),
type = decodeURIComponent(atob($target.data('type')));
this.api.asc_setCellFormat(type);
},
onBorderStyle: function (e) {
var me = this,
$target = $(e.currentTarget),
type = $target.data('type'),
newBorders = [],
bordersWidth = _borderInfo.width,
bordersColor = Common.Utils.ThemeColor.getRgbColor(_borderInfo.color);
if (type == 'inner') {
newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type == 'all') {
newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type == 'outer') {
newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type != 'none') {
var borderId = parseInt(type);
newBorders[borderId] = new Asc.asc_CBorder(bordersWidth, bordersColor);
}
me.api.asc_setCellBorders(newBorders);
},
// 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
_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.EditCell || {}))
});

217
apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js
View file

@ -62,7 +62,8 @@ define([
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObject, this));
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObject, this)); //????
this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onApiSelectionChanged, this));
},
onLaunch: function() {
@ -353,6 +354,220 @@ define([
_settings = [];
},
onApiSelectionChanged: function (cellInfo) {
_settings = [];
var isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart,
selType = cellInfo.asc_getFlags().asc_getSelectionType(),
isCellLocked = cellInfo.asc_getLocked(),
isTableLocked = cellInfo.asc_getLockedTable()===true,
isObjLocked = false;
switch (selType) {
case Asc.c_oAscSelectionType.RangeCells: isCell = true; break;
case Asc.c_oAscSelectionType.RangeRow: isRow = true; break;
case Asc.c_oAscSelectionType.RangeCol: isCol = true; break;
case Asc.c_oAscSelectionType.RangeMax: isAll = true; break;
case Asc.c_oAscSelectionType.RangeImage: isImage = true; break;
case Asc.c_oAscSelectionType.RangeShape: isShape = true; break;
case Asc.c_oAscSelectionType.RangeChart: isChart = true; break;
case Asc.c_oAscSelectionType.RangeChartText:isTextChart = true; break;
case Asc.c_oAscSelectionType.RangeShapeText: isTextShape = true; break;
}
if (isImage || isShape || isChart) {
if (!showMenu && !documentHolder.imgMenu.isVisible()) return;
isImage = isShape = isChart = false;
var has_chartprops = false;
var selectedObjects = this.api.asc_getGraphicObjectProps();
for (var i = 0; i < selectedObjects.length; i++) {
if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
var elValue = selectedObjects[i].asc_getObjectValue();
isObjLocked = isObjLocked || elValue.asc_getLocked();
var shapeProps = elValue.asc_getShapeProperties();
if (shapeProps) {
if (shapeProps.asc_getFromChart()) {
isChart = true;
} else {
// documentHolder.mnuShapeAdvanced.shapeInfo = elValue;
isShape = true;
}
} else if (elValue.asc_getChartProperties()) {
isChart = true;
has_chartprops = true;
}
else
isImage = true;
}
}
// documentHolder.mnuUnGroupImg.setDisabled(isObjLocked || !this.api.asc_canUnGroupGraphicsObjects());
// documentHolder.mnuGroupImg.setDisabled(isObjLocked || !this.api.asc_canGroupGraphicsObjects());
// documentHolder.mnuShapeAdvanced.setVisible(isShape && !isImage && !isChart);
// documentHolder.mnuShapeAdvanced.setDisabled(isObjLocked);
// documentHolder.mnuChartEdit.setVisible(isChart && !isImage && !isShape && has_chartprops);
// documentHolder.mnuChartEdit.setDisabled(isObjLocked);
// documentHolder.pmiImgCut.setDisabled(isObjLocked);
// documentHolder.pmiImgPaste.setDisabled(isObjLocked);
// if (showMenu) this.showPopupMenu(documentHolder.imgMenu, {}, event);
// documentHolder.mnuShapeSeparator.setVisible(documentHolder.mnuShapeAdvanced.isVisible() || documentHolder.mnuChartEdit.isVisible());
} else if (isTextShape || isTextChart) {
var selectedObjects = this.api.asc_getGraphicObjectProps(),
isEquation = false;
for (var i = 0; i < selectedObjects.length; i++) {
var elType = selectedObjects[i].asc_getObjectType();
if (elType == Asc.c_oAscTypeSelectElement.Image) {
var value = selectedObjects[i].asc_getObjectValue(),
align = value.asc_getVerticalTextAlign(),
direct = value.asc_getVert();
isObjLocked = isObjLocked || value.asc_getLocked();
// documentHolder.menuParagraphTop.setChecked(align == Asc.c_oAscVAlign.Top);
// documentHolder.menuParagraphCenter.setChecked(align == Asc.c_oAscVAlign.Center);
// documentHolder.menuParagraphBottom.setChecked(align == Asc.c_oAscVAlign.Bottom);
//
// documentHolder.menuParagraphDirectH.setChecked(direct == Asc.c_oAscVertDrawingText.normal);
// documentHolder.menuParagraphDirect90.setChecked(direct == Asc.c_oAscVertDrawingText.vert);
// documentHolder.menuParagraphDirect270.setChecked(direct == Asc.c_oAscVertDrawingText.vert270);
} else if (elType == Asc.c_oAscTypeSelectElement.Paragraph) {
// documentHolder.pmiTextAdvanced.textInfo = selectedObjects[i].asc_getObjectValue();
// isObjLocked = isObjLocked || documentHolder.pmiTextAdvanced.textInfo.asc_getLocked();
} else if (elType == Asc.c_oAscTypeSelectElement.Math) {
// this._currentMathObj = selectedObjects[i].asc_getObjectValue();
isEquation = true;
}
}
var hyperInfo = cellInfo.asc_getHyperlink(),
can_add_hyperlink = this.api.asc_canAddShapeHyperlink();
// documentHolder.menuHyperlinkShape.setVisible(isTextShape && can_add_hyperlink!==false && hyperInfo);
// documentHolder.menuAddHyperlinkShape.setVisible(isTextShape && can_add_hyperlink!==false && !hyperInfo);
// documentHolder.menuParagraphVAlign.setVisible(isTextChart!==true && !isEquation); // убрать после того, как заголовок можно будет растягивать по вертикали!!
// documentHolder.menuParagraphDirection.setVisible(isTextChart!==true && !isEquation); // убрать после того, как заголовок можно будет растягивать по вертикали!!
// documentHolder.pmiTextAdvanced.setVisible(documentHolder.pmiTextAdvanced.textInfo!==undefined);
//
// _.each(documentHolder.textInShapeMenu.items, function(item) {
// item.setDisabled(isObjLocked);
// });
// documentHolder.pmiTextCopy.setDisabled(false);
//
// //equation menu
// var eqlen = 0;
// this._currentParaObjDisabled = isObjLocked;
// if (isEquation) {
// eqlen = this.addEquationMenu(4);
// } else
// this.clearEquationMenu(4);
//
// if (showMenu) this.showPopupMenu(documentHolder.textInShapeMenu, {}, event);
// documentHolder.textInShapeMenu.items[3].setVisible( documentHolder.menuHyperlinkShape.isVisible() ||
// documentHolder.menuAddHyperlinkShape.isVisible() ||
// documentHolder.menuParagraphVAlign.isVisible() || isEquation);
}
// } else if (selType !== Asc.c_oAscSelectionType.RangeImage && selType !== Asc.c_oAscSelectionType.RangeShape &&
// selType !== Asc.c_oAscSelectionType.RangeChart && selType !== Asc.c_oAscSelectionType.RangeChartText && selType !== Asc.c_oAscSelectionType.RangeShapeText) {
//
// var isCellEdit = this.api.isCellEdited,
// formatTableInfo = cellInfo.asc_getFormatTableInfo(),
// isinsparkline = (cellInfo.asc_getSparklineInfo()!==null),
// isintable = (formatTableInfo !== null),
// ismultiselect = cellInfo.asc_getFlags().asc_getMultiselect();
// documentHolder.ssMenu.formatTableName = (isintable) ? formatTableInfo.asc_getTableName() : null;
// documentHolder.ssMenu.cellColor = cellInfo.asc_getFill().asc_getColor();
// documentHolder.ssMenu.fontColor = cellInfo.asc_getFont().asc_getColor();
//
// documentHolder.pmiInsertEntire.setVisible(isRow||isCol);
// documentHolder.pmiInsertEntire.setCaption((isRow) ? this.textInsertTop : this.textInsertLeft);
// documentHolder.pmiDeleteEntire.setVisible(isRow||isCol);
// documentHolder.pmiInsertCells.setVisible(isCell && !isCellEdit && !isintable);
// documentHolder.pmiDeleteCells.setVisible(isCell && !isCellEdit && !isintable);
// documentHolder.pmiSelectTable.setVisible(isCell && !isCellEdit && isintable);
// documentHolder.pmiInsertTable.setVisible(isCell && !isCellEdit && isintable);
// documentHolder.pmiDeleteTable.setVisible(isCell && !isCellEdit && isintable);
// documentHolder.pmiSparklines.setVisible(isinsparkline);
// documentHolder.pmiSortCells.setVisible((isCell||isAll||cansort) && !isCellEdit);
// documentHolder.pmiFilterCells.setVisible((isCell||cansort) && !isCellEdit);
// documentHolder.pmiReapply.setVisible((isCell||isAll||cansort) && !isCellEdit);
// documentHolder.ssMenu.items[12].setVisible((isCell||isAll||cansort||isinsparkline) && !isCellEdit);
// documentHolder.pmiInsFunction.setVisible(isCell||insfunc);
// documentHolder.pmiAddNamedRange.setVisible(isCell && !isCellEdit);
//
// if (isintable) {
// documentHolder.pmiInsertTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsInsertRowAbove());
// documentHolder.pmiInsertTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsInsertRowBelow());
// documentHolder.pmiInsertTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsInsertColumnLeft());
// documentHolder.pmiInsertTable.menu.items[3].setDisabled(!formatTableInfo.asc_getIsInsertColumnRight());
//
// documentHolder.pmiDeleteTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsDeleteRow());
// documentHolder.pmiDeleteTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsDeleteColumn());
// documentHolder.pmiDeleteTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsDeleteTable());
//
// }
//
// var hyperinfo = cellInfo.asc_getHyperlink();
// documentHolder.menuHyperlink.setVisible(isCell && hyperinfo && !isCellEdit && !ismultiselect);
// documentHolder.menuAddHyperlink.setVisible(isCell && !hyperinfo && !isCellEdit && !ismultiselect);
//
// documentHolder.pmiRowHeight.setVisible(isRow||isAll);
// documentHolder.pmiColumnWidth.setVisible(isCol||isAll);
// documentHolder.pmiEntireHide.setVisible(isCol||isRow);
// documentHolder.pmiEntireShow.setVisible(isCol||isRow);
// documentHolder.pmiFreezePanes.setVisible(!isCellEdit);
// documentHolder.pmiFreezePanes.setCaption(this.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? documentHolder.textUnFreezePanes : documentHolder.textFreezePanes);
// documentHolder.pmiEntriesList.setVisible(!isCellEdit);
//
// /** coauthoring begin **/
// documentHolder.ssMenu.items[17].setVisible(isCell && !isCellEdit && this.permissions.canCoAuthoring && this.permissions.canComments);
// documentHolder.pmiAddComment.setVisible(isCell && !isCellEdit && this.permissions.canCoAuthoring && this.permissions.canComments);
// /** coauthoring end **/
// documentHolder.pmiCellMenuSeparator.setVisible(isCell || isRow || isCol || isAll || insfunc);
// documentHolder.pmiEntireHide.isrowmenu = isRow;
// documentHolder.pmiEntireShow.isrowmenu = isRow;
//
// documentHolder.setMenuItemCommentCaptionMode(cellInfo.asc_getComments().length > 0);
// commentsController && commentsController.blockPopover(true);
//
// documentHolder.pmiClear.menu.items[1].setDisabled(isCellEdit);
// documentHolder.pmiClear.menu.items[2].setDisabled(isCellEdit);
// documentHolder.pmiClear.menu.items[3].setDisabled(isCellEdit);
// documentHolder.pmiClear.menu.items[4].setDisabled(isCellEdit);
//
// documentHolder.pmiClear.menu.items[3].setVisible(!this.permissions.isEditDiagram);
// documentHolder.pmiClear.menu.items[4].setVisible(!this.permissions.isEditDiagram);
//
// var filterInfo = cellInfo.asc_getAutoFilterInfo(),
// isApplyAutoFilter = (filterInfo) ? filterInfo.asc_getIsApplyAutoFilter() : false;
// filterInfo = (filterInfo) ? filterInfo.asc_getIsAutoFilter() : null;
// documentHolder.pmiInsertCells.menu.items[0].setDisabled(isApplyAutoFilter);
// documentHolder.pmiDeleteCells.menu.items[0].setDisabled(isApplyAutoFilter);
// documentHolder.pmiInsertCells.menu.items[1].setDisabled(isApplyAutoFilter);
// documentHolder.pmiDeleteCells.menu.items[1].setDisabled(isApplyAutoFilter);
//
// _.each(documentHolder.ssMenu.items, function(item) {
// item.setDisabled(isCellLocked);
// });
// documentHolder.pmiCopy.setDisabled(false);
// documentHolder.pmiInsertEntire.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiInsertCells.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiInsertTable.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiDeleteEntire.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiDeleteCells.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiDeleteTable.setDisabled(isCellLocked || isTableLocked);
// documentHolder.pmiFilterCells.setDisabled(isCellLocked || isTableLocked|| (filterInfo==null));
// documentHolder.pmiSortCells.setDisabled(isCellLocked || isTableLocked|| (filterInfo==null));
// documentHolder.pmiReapply.setDisabled(isCellLocked || isTableLocked|| (isApplyAutoFilter!==true));
// if (showMenu) this.showPopupMenu(documentHolder.ssMenu, {}, event);
// }
_settings.push('cell');
},
textSettings: 'Settings',
textCell: 'Cell',
textTable: 'Table',

849
apps/spreadsheeteditor/mobile/app/template/EditCell.template Normal file
View file

@ -0,0 +1,849 @@
<!-- Root view -->
<div id="edit-cell-root">
<div class="list-block">
<ul>
<li>
<a id="font-fonts" class="item-link">
<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">
<div class="item-content">
<% if (!android) { %><div class="item-media"><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>
<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><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textFillColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
</div>
</div>
</a>
</li>
<li>
<a id="text-format" class="item-link" data-page="#edit-text-format">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-text-additional"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textTextFormat %></div>
</div>
</div>
</a>
</li>
<li>
<a id="border-style" class="item-link" data-page="#edit-border-style">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-search"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textBorderStyle %></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<a class="item-link" data-page="#edit-cell-format">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-search"></i></div><% } %>
<div class="item-inner">
<div class="item-title">Format</div>
</div>
</div>
</a>
</ul>
</div>
<div class="content-block-title">Cell Styles</div>
<div class="list-block">
<ul>
<li class="cell-styles">
<div class="item-content"></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-font-page">
<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>
<!-- Fill color view -->
<div id="edit-fill-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.textFillColor %></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-fill-color">
<div class="page-content">
</div>
</div>
</div>
<!-- Border color view -->
<div id="edit-cell-border-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">Border Color</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-border-color">
<div class="page-content">
</div>
</div>
</div>
<!-- Text Format view -->
<div id="edit-text-format">
<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.textTextFormat %></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-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-halign" value="left">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-align-left"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Left</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-halign" value="center">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-align-center"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Center</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-halign" value="right">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-align-right"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Right</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-halign" value="justify">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-align-justify"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Justified</div>
</div>
</label>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-valign" value="top">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-valign-top"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Top</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-valign" value="center">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-valign-middle"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Middle</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-valign" value="bottom">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-valign-bottom"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Align Bottom</div>
</div>
</label>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li id="edit-cell-wrap-text">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-search"></i></div><% } %>
<div class="item-inner">
<div class="item-title">Wrap Text</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Border Styles view -->
<div id="edit-border-style">
<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">Border Style</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="pages">
<div class="page" data-page="edit-border-style">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="none" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-none"></i></div>
<div class="item-inner"><div class="item-title">No Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="all" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-all"></i></div>
<div class="item-inner"><div class="item-title">All Borders</div></div>
</div>
</a>
</li>
<li>
<a data-type="2" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-bottom"></i></div>
<div class="item-inner"><div class="item-title">Bottom Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="0" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-top"></i></div>
<div class="item-inner"><div class="item-title">Top Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="3" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-left"></i></div>
<div class="item-inner"><div class="item-title">Left Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="1" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-right"></i></div>
<div class="item-inner"><div class="item-title">Right Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="inner" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-inner"></i></div>
<div class="item-inner"><div class="item-title">Inside Borders</div></div>
</div>
</a>
</li>
<li>
<a data-type="6" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-center"></i></div>
<div class="item-inner"><div class="item-title">Inside Vertical Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="7" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-middle"></i></div>
<div class="item-inner"><div class="item-title">Inside Horizontal Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="5" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-dup"></i></div>
<div class="item-inner"><div class="item-title">Diagonal Up Border</div></div>
</div>
</a>
</li>
<li>
<a data-type="4" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-table-borders-ddown"></i></div>
<div class="item-inner"><div class="item-title">Diagonal Down Border</div></div>
</div>
</a>
</li>
</ul>
</div>
<div class="content-block-title">Style</div>
<div class="list-block">
<ul>
<li>
<a id="edit-border-color" class="item-link" data-page="#edit-cell-border-color">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Color</div>
<div class="item-after"><div class="color-preview"></div></div>
</div>
</div>
</a>
</li>
<li>
<a id="edit-border-size" class="item-link smart-select" data-back-on-select="true">
<select name="cell-border-size">
<option value="thin">Thin</option>
<option value="medium">Medium</option>
<option value="thick">Thick</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Size</div>
<div class="item-after">Thin</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Cell Format view -->
<div id="edit-cell-format">
<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">Format</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="pages">
<div class="page" data-page="edit-cell-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="R2VuZXJhbA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">General</div></div>
</div>
</a>
</li>
<li>
<a data-type="MC4wMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Number</div></div>
</div>
</a>
</li>
<li>
<a data-type="JTIzMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Integer</div></div>
</div>
</a>
</li>
<li>
<a data-type="MC4wMEUlMkIwMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Scientific</div></div>
</div>
</a>
</li>
<li>
<a class="item-link" data-page="#edit-cell-format-accounting">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Accounting</div></div>
</div>
</a>
</li>
<li>
<a class="item-link" data-page="#edit-cell-format-currency">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Currency</div></div>
</div>
</a>
</li>
<li>
<a class="item-link" data-page="#edit-cell-format-date">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Date</div></div>
</div>
</a>
</li>
<li>
<a class="item-link" data-page="#edit-cell-format-time">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Time</div></div>
</div>
</a>
</li>
<li>
<a data-type="MC4wMCUyNQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Percentage</div></div>
</div>
</a>
</li>
<li>
<a data-type="JTQw" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-inner"><div class="item-title">Text</div></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Cell Format Accounting view -->
<div id="edit-cell-format-accounting">
<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">Accounting</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="pages">
<div class="page" data-page="edit-cell-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Dollar</div>
<div class="item-after">$</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="XyglRTIlODIlQUMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglRTIlODIlQUMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglRTIlODIlQUMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Euro</div>
<div class="item-after">€</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="XyglQzIlQTMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Pound</div>
<div class="item-after">£</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="Xy0qJTIwJTIzJTJDJTIzJTIzMC4wMCU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0ItKiUyMCUyMyUyQyUyMyUyMzAuMDAlNUIlMjQlRDElODAuLTQxOSU1RF8tJTNCXy0qJTIwJTIyLSUyMiUzRiUzRiU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0JfLSU0MF8t" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Rouble</div>
<div class="item-after">₽</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="XyglQzIlQTUqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTUqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTUqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Yen</div>
<div class="item-after">¥</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Cell Format Accounting view -->
<div id="edit-cell-format-currency">
<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">Currency</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="pages">
<div class="page" data-page="edit-cell-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="JTI0JTIzJTJDJTIzJTIzMC4wMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Dollar</div>
<div class="item-after">$</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="JUUyJTgyJUFDJTIzJTJDJTIzJTIzMC4wMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Euro</div>
<div class="item-after">€</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="JUMyJUEzJTIzJTJDJTIzJTIzMC4wMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Pound</div>
<div class="item-after">£</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="JTIzJTJDJTIzJTIzMC4wMCUyMiVEMSU4MC4lMjI=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Rouble</div>
<div class="item-after">₽</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="JUMyJUE1JTIzJTJDJTIzJTIzMC4wMA==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Yen</div>
<div class="item-after">¥</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Cell Format Date view -->
<div id="edit-cell-format-date">
<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">Date</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="pages">
<div class="page" data-page="edit-cell-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="TU0tZGQteXk=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">07-24-88</div>
<div class="item-after">MM-dd-yy</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="TU0tZGQteXl5eQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">07-24-1988</div>
<div class="item-after">MM-dd-yyyy</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="ZGQtTU0teXk=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">24-07-88</div>
<div class="item-after">dd-MM-yy</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="ZGQtTU0teXl5eQ==" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">24-07-1988</div>
<div class="item-after">dd-MM-yyyy</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="ZGQtTU1NLXl5eXk=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">24-Jul-1988</div>
<div class="item-after">dd-MMM-yyyy</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="ZGQtTU1N" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">24-Jul</div>
<div class="item-after">dd-MMM</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="TU1NLXl5" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jul-88</div>
<div class="item-after">MMM-yy</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Cell Format Time view -->
<div id="edit-cell-format-time">
<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">Time</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="pages">
<div class="page" data-page="edit-cell-format">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<a data-type="SEg6bW0=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">10:56</div>
<div class="item-after">HH:mm</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="SEg6TU06c3M=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">21:56:00</div>
<div class="item-after">HH:MM:ss</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="aGg6bW0gdHQ=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">05:56 AM</div>
<div class="item-after">hh:mm tt</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="aGg6bW06c3MgdHQ=" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">05:56:00 AM</div>
<div class="item-after">hh:mm:ss tt</div>
</div>
</div>
</a>
</li>
<li>
<a data-type="W2hdOm1tOnNz" class="item-link no-indicator">
<div class="item-content">
<div class="item-inner">
<div class="item-title">38:56:00</div>
<div class="item-after">[h]:mm:ss</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

2
apps/spreadsheeteditor/mobile/app/template/Settings.template
View file

@ -273,7 +273,7 @@
</div>
<div class="content-block">
<h3>DOCUMENT EDITOR</h3>
<h3><%= scope.textVersion %> 4.2</h3>
<h3><%= scope.textVersion %> 4.3</h3>
</div>
<div class="content-block">
<h3 class="vendor">Ascensio System SIA</h3>

245
apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js Normal file
View file

@ -0,0 +1,245 @@
/*
*
* (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
*
*/
/**
* EditCell.js
* Spreadsheet Editor
*
* Created by Alexander Yuzhin on 12/6/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!spreadsheeteditor/mobile/app/template/EditCell.template',
'jquery',
'underscore',
'backbone',
'common/mobile/lib/component/ThemeColorPalette'
], function (editTemplate, $, _, Backbone) {
'use strict';
SSE.Views.EditCell = Backbone.View.extend(_.extend((function() {
// private
var _fontsList,
_editTextController;
return {
// el: '.view-main',
template: _.template(editTemplate),
events: {
},
initialize: function () {
_editTextController = SSE.getController('EditCell');
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
this.on('page:show', _.bind(this.updateItemHandlers, this));
},
initEvents: function () {
var me = this;
me.updateItemHandlers();
$('#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();
},
// 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-cell-root')
.html();
}
return '';
},
initControls: function () {
//
},
renderStyles: function (cellStyles) {
var $styleContainer = $('.cell-styles .item-content');
if ($styleContainer.length > 0) {
var columns = parseInt($styleContainer.width() / 70), // magic
row = -1,
styles = [];
_.each(cellStyles, 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);
}
},
showFonts: function () {
this.showPage('#edit-text-fonts');
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>'
);
_fontsList = uiApp.virtualList('#font-list.virtual-list', {
items: SSE.getController('EditCell').getFonts(),
template: $template.html(),
onItemsAfterInsert: function (list, fragment) {
var fontInfo = _editTextController.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));
}
});
},
showTextColor: function () {
this.showPage('#edit-text-color', true);
this.paletteTextColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-text-color] .page-content')
});
this.fireEvent('page:show', [this, '#edit-text-color']);
},
showFillColor: function () {
this.showPage('#edit-fill-color', true);
this.paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-fill-color] .page-content'),
transparent: true
});
this.fireEvent('page:show', [this, '#edit-fill-color']);
},
textBack: 'Back',
textFonts: 'Fonts',
textTextColor: 'Text Color',
textFillColor: 'Fill Color',
textTextFormat: 'Text Format',
textBorderStyle: 'Border Style',
textSize: 'Size'
}
})(), SSE.Views.EditCell || {}))
});

142
apps/spreadsheeteditor/mobile/resources/css/app-ios.css
View file

File diff suppressed because one or more lines are too long

106
apps/spreadsheeteditor/mobile/resources/css/app-material.css
View file

File diff suppressed because one or more lines are too long

88
apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less
View file

@ -5,11 +5,6 @@ i.icon {
height: 24px;
.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="M15.8,15c1.4-1.6,2.2-3.7,2.2-5.9c0-5-4-9-9-9C4,0,0,4,0,9c0,5,4,9,9,9c2.3,0,4.4-0.9,5.9-2.2l5.8,5.8l0.2-0.6l0.7-0.2L15.8,15z M9,17c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C17,13.5,13.5,17,9,17z"/></g></svg>');
}
&.icon-burger {
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 x="2" y="17" width="18" height="1"/><rect x="2" y="13" width="18" height="1"/><rect x="2" y="9" width="18" height="1"/><rect x="2" y="5" width="18" height="1"/></g></svg>');
}
&.icon-edit {
width: 22px;
height: 22px;
@ -65,65 +60,50 @@ i.icon {
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="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
}
&.icon-text-additional {
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="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
}
&.icon-text-color {
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="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
}
&.icon-text-selection {
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="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
}
&.icon-bullets {
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="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
}
&.icon-numbers {
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="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
}
&.icon-linespacing {
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><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 "/></g></svg>');
}
//&.icon-text-selection {
// 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="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
//}
&.icon-text-align-center {
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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-jast {
&.icon-text-align-justify {
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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-left {
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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-right {
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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
.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>');
}
&.icon-de-indent {
&.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><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
.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>');
}
&.icon-in-indent {
&.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><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
.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>');
}
&.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-prev {
width: 22px;
@ -135,36 +115,6 @@ i.icon {
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="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
}
&.icon-table-add-column-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="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
}
&.icon-table-add-column-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="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
}
&.icon-table-add-row-above {
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="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
}
&.icon-table-add-row-below {
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="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
}
&.icon-table-remove-column {
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="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
}
&.icon-table-remove-row {
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="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
}
&.icon-expand-down {
width: 22px;
height: 22px;

91
apps/spreadsheeteditor/mobile/resources/less/material/_icons.less
View file

@ -50,102 +50,31 @@ i.icon {
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="-1 7 22 22" fill="@{themeColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
}
//&.icon-text-additional {
// 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="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
//}
//&.icon-text-color {
// 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="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
//}
//&.icon-text-selection {
// 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="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
//}
//&.icon-bullets {
// 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="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
//}
//&.icon-numbers {
// 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="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
//}
//&.icon-linespacing {
// 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><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 "/></g></svg>');
//}
&.icon-text-color {
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="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
}
&.icon-text-align-center {
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><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-jast {
&.icon-text-align-justify {
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><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-left {
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><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
.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>');
}
&.icon-text-align-right {
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><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
.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>');
}
&.icon-de-indent {
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><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
}
&.icon-in-indent {
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><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
}
&.icon-table-add-column-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="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
}
&.icon-table-add-column-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="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
}
&.icon-table-add-row-above {
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="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
}
&.icon-table-add-row-below {
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="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
}
&.icon-table-remove-column {
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="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
}
&.icon-table-remove-row {
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="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
}
&.icon-link {
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="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
}
&.icon-insimage {
width: 22px;
height: 22px;