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

[PE mobile] Join text and paragraph settings into one panel Text.

Browse source
This commit is contained in:
Julia Radzhabova 2016-11-25 13:10:24 +03:00
parent 39c860a840
commit 97ec7f0934
13 changed files with 561 additions and 754 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -141,7 +141,7 @@ require([
'Settings',
'EditContainer',
'EditText',
'EditParagraph',
// 'EditParagraph',
// 'EditTable',
// 'EditImage',
// 'EditShape',
@ -206,7 +206,7 @@ require([
'presentationeditor/mobile/app/controller/Settings',
'presentationeditor/mobile/app/controller/edit/EditContainer',
'presentationeditor/mobile/app/controller/edit/EditText',
'presentationeditor/mobile/app/controller/edit/EditParagraph',
// 'presentationeditor/mobile/app/controller/edit/EditParagraph',
// 'presentationeditor/mobile/app/controller/edit/EditTable',
// 'presentationeditor/mobile/app/controller/edit/EditImage',
// 'presentationeditor/mobile/app/controller/edit/EditShape',

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

@ -151,8 +151,8 @@ require([
// 'DocumentHolder',
// 'Settings',
// 'EditContainer',
'EditText',
'EditParagraph'
'EditText'
// 'EditParagraph'
// 'EditTable',
// 'EditImage',
// 'EditShape',
@ -216,8 +216,8 @@ require([
// 'presentationeditor/mobile/app/controller/DocumentHolder',
// 'presentationeditor/mobile/app/controller/Settings',
'presentationeditor/mobile/app/controller/edit/EditContainer',
'presentationeditor/mobile/app/controller/edit/EditText',
'presentationeditor/mobile/app/controller/edit/EditParagraph'
'presentationeditor/mobile/app/controller/edit/EditText'
// 'presentationeditor/mobile/app/controller/edit/EditParagraph'
// 'presentationeditor/mobile/app/controller/edit/EditTable',
// 'presentationeditor/mobile/app/controller/edit/EditImage',
// 'presentationeditor/mobile/app/controller/edit/EditShape',

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

@ -119,7 +119,7 @@ define([
if (_.contains(_settings, 'slide')) {
editors.push({
caption: me.textSlide,
id: 'edit-text',
id: 'edit-slide',
layout: PE.getController('EditText').getView('EditSlide').rootLayout()
})
}
@ -130,13 +130,6 @@ define([
layout: PE.getController('EditText').getView('EditText').rootLayout()
})
}
if (_.contains(_settings, 'paragraph')) {
editors.push({
caption: me.textParagraph,
id: 'edit-paragraph',
layout: PE.getController('EditParagraph').getView('EditParagraph').rootLayout()
})
}
if (_.contains(_settings, 'table')) {
editors.push({
caption: me.textTable,
@ -331,7 +324,6 @@ define([
var type = object.get_ObjectType();
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
_settings.push('paragraph');
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
// _settings.push('table');
@ -364,7 +356,6 @@ define([
textSettings: 'Settings',
textText: 'Text',
textParagraph: 'Paragraph',
textTable: 'Table',
textShape: 'Shape',
textImage: 'Image',

321
apps/presentationeditor/mobile/app/controller/edit/EditParagraph.js
View file

@ -1,321 +0,0 @@
/*
*
* (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
*
*/
/**
* EditParagraph.js
* Presentation Editor
*
* Created by Alexander Yuzhin on 10/14/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'presentationeditor/mobile/app/view/edit/EditParagraph'
], function (core) {
'use strict';
PE.Controllers.EditParagraph = Backbone.Controller.extend(_.extend((function() {
// Private
var _stack = [],
_paragraphInfo = {},
_paragraphObject = undefined,
metricText = Common.Utils.Metric.getCurrentMetricName();
return {
models: [],
collections: [],
views: [
'EditParagraph'
],
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
this.addListeners({
'EditParagraph': {
'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_onListType', _.bind(me.onApiBullets, me));
me.api.asc_registerCallback('asc_onPrAlign', _.bind(me.onApiParagraphAlign, me));
me.api.asc_registerCallback('asc_canIncreaseIndent', _.bind(me.onApiCanIncreaseIndent, me));
me.api.asc_registerCallback('asc_canDecreaseIndent', _.bind(me.onApiCanDecreaseIndent, me));
me.api.asc_registerCallback('asc_onLineSpacing', _.bind(me.onApiLineSpacing, me));
me.api.asc_registerCallback('asc_onVerticalTextAlign', _.bind(me.onApiVerticalTextAlign, me));
},
onLaunch: function () {
this.createView('EditParagraph').render();
},
initEvents: function () {
var me = this;
$('#paragraph-align .button').single('click', _.bind(me.onParagraphAlign, me));
$('#paragraph-valign .button').single('click', _.bind(me.onParagraphVAlign, me));
$('#font-moveleft, #font-moveright').single('click', _.bind(me.onParagraphMove, me));
$('#paragraph-distance-before .button').single('click', _.bind(me.onDistanceBefore, me));
$('#paragraph-distance-after .button').single('click', _.bind(me.onDistanceAfter, me));
me.initSettings();
},
categoryShow: function (e) {
var $target = $(e.currentTarget);
if ($target && $target.prop('id') === 'edit-paragraph') {
this.initSettings();
}
},
onPageShow: function (view, pageId) {
var me = this;
$('#page-text-linespacing li').single('click', _.buffered(me.onLineSpacing, 100, me));
$('.dataview.bullets li').single('click', _.buffered(me.onBullet, 100, me));
$('.dataview.numbers li').single('click', _.buffered(me.onNumber, 100, me));
me.initSettings(pageId);
},
initSettings: function (pageId) {
var me = this;
me.api && me.api.UpdateInterfaceState();
if (_paragraphObject) {
_paragraphInfo.spaceBefore = _paragraphObject.get_Spacing().get_Before() < 0 ? _paragraphObject.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_Before());
_paragraphInfo.spaceAfter = _paragraphObject.get_Spacing().get_After() < 0 ? _paragraphObject.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_After());
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : _paragraphInfo.spaceBefore + ' ' + metricText);
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : _paragraphInfo.spaceAfter + ' ' + metricText);
}
},
// Handlers
onParagraphAlign: function (e) {
var $target = $(e.currentTarget);
if ($target) {
var id = $target.attr('id'),
type = 1;
if ('font-just' == id) {
type = 3;
} else if ('font-right' == id) {
type = 0;
} else if ('font-center' == id) {
type = 2;
}
$('#paragraph-align .button').removeClass('active');
$target.addClass('active');
this.api.put_PrAlign(type);
}
},
onParagraphVAlign: function (e) {
var $target = $(e.currentTarget);
if ($target) {
var id = $target.attr('id'),
type = Asc.c_oAscVAlign.Bottom;
if ('font-top' == id) {
type = Asc.c_oAscVAlign.Top;
} else if ('font-middle' == id) {
type = Asc.c_oAscVAlign.Center;
}
$('#paragraph-align .button').removeClass('active');
$target.addClass('active');
this.api.setVerticalAlign(type);
}
},
onParagraphMove: function (e) {
var $target = $(e.currentTarget);
if ($target && this.api) {
var id = $target.attr('id');
if ('font-moveleft' == id) {
this.api.DecreaseIndent();
} else {
this.api.IncreaseIndent();
}
}
},
onLineSpacing: function (e) {
var $target = $(e.currentTarget).find('input');
if ($target && this.api) {
var value = parseFloat($target.prop('value')),
LINERULE_AUTO = 1;
this.api.put_PrLineSpacing(LINERULE_AUTO, value);
}
},
onBullet: function (e) {
var $bullet = $(e.currentTarget),
type = $bullet.data('type');
$('.dataview.bullets li').removeClass('active');
$bullet.addClass('active');
this.api.put_ListType(0, parseInt(type));
},
onNumber: function (e) {
var $number = $(e.currentTarget),
type = $number.data('type');
$('.dataview.numbers li').removeClass('active');
$number.addClass('active');
this.api.put_ListType(1, parseInt(type));
},
onDistanceBefore: function (e) {
var $button = $(e.currentTarget),
distance = _paragraphInfo.spaceBefore;
if ($button.hasClass('decrement')) {
distance = Math.max(-1, --distance);
} else {
distance = Math.min(100, ++distance);
}
_paragraphInfo.spaceBefore = distance;
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : (_paragraphInfo.spaceBefore) + ' ' + metricText);
this.api.put_LineSpacingBeforeAfter(0, (_paragraphInfo.spaceBefore < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceBefore));
},
onDistanceAfter: function (e) {
var $button = $(e.currentTarget),
distance = _paragraphInfo.spaceAfter;
if ($button.hasClass('decrement')) {
distance = Math.max(-1, --distance);
} else {
distance = Math.min(100, ++distance);
}
_paragraphInfo.spaceAfter = distance;
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : (_paragraphInfo.spaceAfter) + ' ' + metricText);
this.api.put_LineSpacingBeforeAfter(1, (_paragraphInfo.spaceAfter < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceAfter));
},
// API handlers
onApiFocusObject: function (objects) {
_stack = objects;
var paragraphs = [];
_.each(_stack, function(object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
paragraphs.push(object);
}
});
if (paragraphs.length > 0) {
var object = paragraphs[paragraphs.length - 1]; // get top
_paragraphObject = object.get_ObjectValue();
} else {
_paragraphObject = undefined;
}
},
onApiBullets: function(data) {
var type = data.get_ListType(),
subtype = data.get_ListSubType();
switch (type) {
case 0:
$('.dataview.bullets li[data-type=' + subtype + ']').addClass('active');
break;
case 1:
$('.dataview.numbers li[data-type=' + subtype + ']').addClass('active');
break;
}
},
onApiParagraphAlign: function(align) {
$('#font-right').toggleClass('active', align===0);
$('#font-left').toggleClass('active', align===1);
$('#font-center').toggleClass('active', align===2);
$('#font-just').toggleClass('active', align===3);
},
onApiVerticalTextAlign: function(align) {
$('#font-top').toggleClass('active', align===Asc.c_oAscVAlign.Top);
$('#font-middle').toggleClass('active', align===Asc.c_oAscVAlign.Center);
$('#font-bottom').toggleClass('active', align===Asc.c_oAscVAlign.Bottom);
},
onApiLineSpacing: function(vc) {
var line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
$('#page-text-linespacing input').val([line]);
},
onApiCanIncreaseIndent: function(value) {
$('#font-moveright').toggleClass('disabled', !value);
},
onApiCanDecreaseIndent: function(value) {
$('#font-moveleft').toggleClass('disabled', !value);
}
}
})(), PE.Controllers.EditParagraph || {}))
});

215
apps/presentationeditor/mobile/app/controller/edit/EditText.js
View file

@ -50,7 +50,9 @@ define([
var _fontsArray = [],
_stack = [],
_paragraphObject = undefined,
_fontInfo = {};
_fontInfo = {},
_paragraphInfo = {},
metricText = Common.Utils.Metric.getCurrentMetricName();
function onApiLoadFonts(fonts, select) {
_.each(fonts, function(font){
@ -76,6 +78,7 @@ define([
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this));
this.addListeners({
'EditText': {
@ -100,6 +103,13 @@ define([
me.api.asc_registerCallback('asc_onVerticalAlign', _.bind(me.onApiVerticalAlign, me));
me.api.asc_registerCallback('asc_onTextColor', _.bind(me.onApiTextColor, me));
me.api.asc_registerCallback('asc_onListType', _.bind(me.onApiBullets, me));
me.api.asc_registerCallback('asc_onPrAlign', _.bind(me.onApiParagraphAlign, me));
me.api.asc_registerCallback('asc_canIncreaseIndent', _.bind(me.onApiCanIncreaseIndent, me));
me.api.asc_registerCallback('asc_canDecreaseIndent', _.bind(me.onApiCanDecreaseIndent, me));
me.api.asc_registerCallback('asc_onLineSpacing', _.bind(me.onApiLineSpacing, me));
me.api.asc_registerCallback('asc_onVerticalTextAlign', _.bind(me.onApiVerticalTextAlign, me));
// me.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(this.onApiUpdateThemeIndex, this));
// me.api.asc_registerCallback('asc_onCanGroup', _.bind(this.onApiCanGroup, this));
// me.api.asc_registerCallback('asc_onCanUnGroup', _.bind(this.onApiCanUnGroup, this));
@ -118,7 +128,22 @@ define([
$('#font-underline').single('click', _.bind(me.onUnderline, me));
$('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me));
me.initSettings();
$('#paragraph-align .button').single('click', _.bind(me.onParagraphAlign, me));
$('#paragraph-valign .button').single('click', _.bind(me.onParagraphVAlign, me));
$('#font-moveleft, #font-moveright').single('click', _.bind(me.onParagraphMove, me));
$('#paragraph-distance-before .button').single('click', _.bind(me.onDistanceBefore, me));
$('#paragraph-distance-after .button').single('click', _.bind(me.onDistanceAfter, me));
// me.initSettings();
},
categoryShow: function (e) {
var $target = $(e.currentTarget);
if ($target && $target.prop('id') === 'edit-text') {
this.initSettings();
}
},
onPageShow: function (view, pageId) {
@ -144,17 +169,24 @@ define([
me.api && me.api.UpdateInterfaceState(); // TODO: refactor me
if (_paragraphObject) {
var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]');
var $inputTextCaps = $('#text-additional input[name=text-caps]');
if (pageId == '#edit-text-additional') {
var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]');
var $inputTextCaps = $('#text-additional input[name=text-caps]');
_paragraphObject.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
_paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
_paragraphObject.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
_paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
_paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
_paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
_paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
_paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
_fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
$('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
_fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
$('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
}
_paragraphInfo.spaceBefore = _paragraphObject.get_Spacing().get_Before() < 0 ? _paragraphObject.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_Before());
_paragraphInfo.spaceAfter = _paragraphObject.get_Spacing().get_After() < 0 ? _paragraphObject.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_After());
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : _paragraphInfo.spaceBefore + ' ' + metricText);
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : _paragraphInfo.spaceAfter + ' ' + metricText);
}
},
@ -327,6 +359,127 @@ define([
}
},
onParagraphAlign: function (e) {
var $target = $(e.currentTarget);
if ($target) {
var id = $target.attr('id'),
type = 1;
if ('font-just' == id) {
type = 3;
} else if ('font-right' == id) {
type = 0;
} else if ('font-center' == id) {
type = 2;
}
$('#paragraph-align .button').removeClass('active');
$target.addClass('active');
this.api.put_PrAlign(type);
}
},
onParagraphVAlign: function (e) {
var $target = $(e.currentTarget);
if ($target) {
var id = $target.attr('id'),
type = Asc.c_oAscVAlign.Bottom;
if ('font-top' == id) {
type = Asc.c_oAscVAlign.Top;
} else if ('font-middle' == id) {
type = Asc.c_oAscVAlign.Center;
}
$('#paragraph-align .button').removeClass('active');
$target.addClass('active');
this.api.setVerticalAlign(type);
}
},
onParagraphMove: function (e) {
var $target = $(e.currentTarget);
if ($target && this.api) {
var id = $target.attr('id');
if ('font-moveleft' == id) {
this.api.DecreaseIndent();
} else {
this.api.IncreaseIndent();
}
}
},
onLineSpacing: function (e) {
var $target = $(e.currentTarget).find('input');
if ($target && this.api) {
var value = parseFloat($target.prop('value')),
LINERULE_AUTO = 1;
this.api.put_PrLineSpacing(LINERULE_AUTO, value);
}
},
onBullet: function (e) {
var $bullet = $(e.currentTarget),
type = $bullet.data('type');
$('.dataview.bullets li').removeClass('active');
$bullet.addClass('active');
this.api.put_ListType(0, parseInt(type));
},
onNumber: function (e) {
var $number = $(e.currentTarget),
type = $number.data('type');
$('.dataview.numbers li').removeClass('active');
$number.addClass('active');
this.api.put_ListType(1, parseInt(type));
},
onDistanceBefore: function (e) {
var $button = $(e.currentTarget),
distance = _paragraphInfo.spaceBefore;
if ($button.hasClass('decrement')) {
distance = Math.max(-1, --distance);
} else {
distance = Math.min(100, ++distance);
}
_paragraphInfo.spaceBefore = distance;
$('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : (_paragraphInfo.spaceBefore) + ' ' + metricText);
this.api.put_LineSpacingBeforeAfter(0, (_paragraphInfo.spaceBefore < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceBefore));
},
onDistanceAfter: function (e) {
var $button = $(e.currentTarget),
distance = _paragraphInfo.spaceAfter;
if ($button.hasClass('decrement')) {
distance = Math.max(-1, --distance);
} else {
distance = Math.min(100, ++distance);
}
_paragraphInfo.spaceAfter = distance;
$('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : (_paragraphInfo.spaceAfter) + ' ' + metricText);
this.api.put_LineSpacingBeforeAfter(1, (_paragraphInfo.spaceAfter < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceAfter));
},
// API handlers
onApiFocusObject: function (objects) {
@ -346,6 +499,7 @@ define([
} else {
_paragraphObject = undefined;
}
$('#edit-text div.edit-paragraph')[(paragraphs.length > 0) ? 'show' : 'hide']();
},
onApiChangeFont: function(font) {
@ -420,6 +574,47 @@ define([
}
},
onApiBullets: function(data) {
var type = data.get_ListType(),
subtype = data.get_ListSubType();
switch (type) {
case 0:
$('.dataview.bullets li[data-type=' + subtype + ']').addClass('active');
break;
case 1:
$('.dataview.numbers li[data-type=' + subtype + ']').addClass('active');
break;
}
},
onApiParagraphAlign: function(align) {
$('#font-right').toggleClass('active', align===0);
$('#font-left').toggleClass('active', align===1);
$('#font-center').toggleClass('active', align===2);
$('#font-just').toggleClass('active', align===3);
},
onApiVerticalTextAlign: function(align) {
$('#font-top').toggleClass('active', align===Asc.c_oAscVAlign.Top);
$('#font-middle').toggleClass('active', align===Asc.c_oAscVAlign.Center);
$('#font-bottom').toggleClass('active', align===Asc.c_oAscVAlign.Bottom);
},
onApiLineSpacing: function(vc) {
var line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
$('#page-text-linespacing input').val([line]);
},
onApiCanIncreaseIndent: function(value) {
$('#font-moveright').toggleClass('disabled', !value);
},
onApiCanDecreaseIndent: function(value) {
$('#font-moveleft').toggleClass('disabled', !value);
},
// Helpers
_toggleButton: function (e) {
return $(e.currentTarget).toggleClass('active').hasClass('active');

219
apps/presentationeditor/mobile/app/template/EditParagraph.template
View file

@ -1,219 +0,0 @@
<!-- Root view -->
<div id="edit-paragraph-root">
<div class="list-block">
<ul>
<li><div id="paragraph-align" class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
<a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
<a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
<a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
</div>
</div>
</div></li>
<li><div id="paragraph-valign" class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-top" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
<a id="font-middle" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
<a id="font-bottom" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
</div>
</div>
</div></li>
<li><div class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
<a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
</div>
</div>
</div></li>
<li><a id="font-bullets" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textBullets %></div>
</div>
</div></a></li>
<li><a id="font-numbers" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textNumbers %></div>
</div>
</div></a></li>
<li><a id="font-line-spacing" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textLineSpacing %></div>
</div>
</div></a></li>
</ul>
</div>
<div class="content-block-title"><%= scope.textFromText %></div>
<div class="list-block">
<ul>
<li id="paragraph-distance-before">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textBefore %></div>
<div class="item-after splitter">
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label><%= scope.textAuto %></label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
<li id="paragraph-distance-after">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textAfter %></div>
<div class="item-after splitter">
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label><%= scope.textAuto %></label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Line Spacing view -->
<div id="edit-text-linespacing">
<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></a></div>
<div class="center sliding"><%= scope.textLineSpacing %></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" id="page-text-linespacing" data-page="edit-text-additional">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.0</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1.15">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.15</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1.5">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.5</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="2">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">2.0</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="2.5">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">2.5</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="3">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">3.0</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bullets view -->
<div id="edit-text-bullets">
<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></a></div>
<div class="center sliding"><%= scope.textBullets %></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" id="page-text-bullets">
<div class="page-content dataview bullets">
<% _.each(bullets, function(row) { %>
<ul class="row">
<% _.each(row, function(bullet) { %>
<li data-type="<%= bullet.type %>">
<% if (bullet.thumb.length < 1) { %>
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
<% } else { %>
<div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
<% } %>
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>
<!-- Numbers view -->
<div id="edit-text-numbers">
<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></a></div>
<div class="center sliding"><%= scope.textNumbers %></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" id="page-text-numbers">
<div class="page-content dataview numbers">
<% _.each(numbers, function(row) { %>
<ul class="row">
<% _.each(row, function(number) { %>
<li data-type="<%= number.type %>">
<% if (number.thumb.length < 1) { %>
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
<% } else { %>
<div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
<% } %>
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>

215
apps/presentationeditor/mobile/app/template/EditText.template
View file

@ -42,6 +42,93 @@
</li>
</ul>
</div>
<div class="list-block edit-paragraph">
<ul>
<li><div id="paragraph-align" class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
<a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
<a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
<a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
</div>
</div>
</div></li>
<li><div id="paragraph-valign" class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-top" class="button no-ripple"><i class="icon icon-text-valign-top"></i></a>
<a id="font-middle" class="button no-ripple"><i class="icon icon-text-valign-middle"></i></a>
<a id="font-bottom" class="button no-ripple"><i class="icon icon-text-valign-bottom"></i></a>
</div>
</div>
</div></li>
<li><div class="item-content buttons">
<div class="item-inner">
<div class="row">
<a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
<a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
</div>
</div>
</div></li>
<li><a id="font-bullets" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textBullets %></div>
</div>
</div></a></li>
<li><a id="font-numbers" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textNumbers %></div>
</div>
</div></a></li>
<li><a id="font-line-spacing" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textLineSpacing %></div>
</div>
</div></a></li>
</ul>
</div>
<div class="content-block-title edit-paragraph"><%= scope.textFromText %></div>
<div class="list-block edit-paragraph">
<ul>
<li id="paragraph-distance-before">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textBefore %></div>
<div class="item-after splitter">
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label><%= scope.textAuto %></label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
<li id="paragraph-distance-after">
<div class="item-content">
<div class="item-inner">
<div class="item-title"><%= scope.textAfter %></div>
<div class="item-after splitter">
<% if (!android) { %><label><%= scope.textAuto %></label><% } %>
<p class="buttons-row">
<span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
<% if (android) { %><label><%= scope.textAuto %></label><% } %>
<span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Fonts view -->
@ -192,3 +279,131 @@
</div>
</div>
</div>
<div id="edit-text-linespacing">
<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></a></div>
<div class="center sliding"><%= scope.textLineSpacing %></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" id="page-text-linespacing" data-page="edit-text-additional">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.0</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1.15">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.15</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="1.5">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">1.5</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="2">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">2.0</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="2.5">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">2.5</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="line-spacing" value="3">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">3.0</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bullets view -->
<div id="edit-text-bullets">
<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></a></div>
<div class="center sliding"><%= scope.textBullets %></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" id="page-text-bullets">
<div class="page-content dataview bullets">
<% _.each(bullets, function(row) { %>
<ul class="row">
<% _.each(row, function(bullet) { %>
<li data-type="<%= bullet.type %>">
<% if (bullet.thumb.length < 1) { %>
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
<% } else { %>
<div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
<% } %>
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>
<!-- Numbers view -->
<div id="edit-text-numbers">
<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></a></div>
<div class="center sliding"><%= scope.textNumbers %></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" id="page-text-numbers">
<div class="page-content dataview numbers">
<% _.each(numbers, function(row) { %>
<ul class="row">
<% _.each(row, function(number) { %>
<li data-type="<%= number.type %>">
<% if (number.thumb.length < 1) { %>
<div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
<% } else { %>
<div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
<% } %>
</li>
<% }); %>
</ul>
<% }); %>
</div>
</div>
</div>

172
apps/presentationeditor/mobile/app/view/edit/EditParagraph.js
View file

@ -1,172 +0,0 @@
/*
*
* (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
*
*/
/**
* EditParagraph.js
* Presentation Editor
*
* Created by Alexander Yuzhin on 10/14/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!presentationeditor/mobile/app/template/EditParagraph.template',
'jquery',
'underscore',
'backbone'
], function (editTemplate, $, _, Backbone) {
'use strict';
PE.Views.EditParagraph = Backbone.View.extend(_.extend((function() {
// private
var _bullets = [
[
{type: -1, thumb: ''},
{type: 1, thumb: 'bullet-01.png'},
{type: 2, thumb: 'bullet-02.png'},
{type: 3, thumb: 'bullet-03.png'}
],
[
{type: 4, thumb: 'bullet-04.png'},
{type: 5, thumb: 'bullet-05.png'},
{type: 6, thumb: 'bullet-06.png'},
{type: 7, thumb: 'bullet-07.png'}
]
];
var _numbers = [
[
{type: -1, thumb: ''},
{type: 4, thumb: 'number-01.png'},
{type: 5, thumb: 'number-02.png'},
{type: 6, thumb: 'number-03.png'}
],
[
{type: 1, thumb: 'number-04.png'},
{type: 2, thumb: 'number-05.png'},
{type: 3, thumb: 'number-06.png'},
{type: 7, thumb: 'number-07.png'}
]
];
return {
// el: '.view-main',
template: _.template(editTemplate),
events: {
},
initialize: function () {
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
},
initEvents: function () {
var me = this;
$('#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));
PE.getController('EditParagraph').initSettings();
},
// Render layout
render: function () {
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
scope : this,
bullets : _bullets,
numbers : _numbers
}));
return this;
},
rootLayout: function () {
if (this.layout) {
return this.layout
.find('#edit-paragraph-root')
.html();
}
return '';
},
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]);
}
}
},
showLineSpacing: function () {
this.showPage('#edit-text-linespacing');
},
showBullets: function () {
this.showPage('#edit-text-bullets');
},
showNumbers: function () {
this.showPage('#edit-text-numbers');
},
textBack: 'Back',
textFromText: 'Distance from Text',
textBefore: 'Before',
textAfter: 'After',
textLineSpacing: 'Line Spacing',
textBullets: 'Bullets',
textNone: 'None',
textNumbers: 'Numbers'
}
})(), PE.Views.EditParagraph || {}))
});

59
apps/presentationeditor/mobile/app/view/edit/EditText.js
View file

@ -54,6 +54,36 @@ define([
var _fontsList,
_editTextController;
var _bullets = [
[
{type: -1, thumb: ''},
{type: 1, thumb: 'bullet-01.png'},
{type: 2, thumb: 'bullet-02.png'},
{type: 3, thumb: 'bullet-03.png'}
],
[
{type: 4, thumb: 'bullet-04.png'},
{type: 5, thumb: 'bullet-05.png'},
{type: 6, thumb: 'bullet-06.png'},
{type: 7, thumb: 'bullet-07.png'}
]
];
var _numbers = [
[
{type: -1, thumb: ''},
{type: 4, thumb: 'number-01.png'},
{type: 5, thumb: 'number-02.png'},
{type: 6, thumb: 'number-03.png'}
],
[
{type: 1, thumb: 'number-04.png'},
{type: 2, thumb: 'number-05.png'},
{type: 3, thumb: 'number-06.png'},
{type: 7, thumb: 'number-07.png'}
]
];
return {
// el: '.view-main',
@ -73,8 +103,12 @@ define([
$('#font-fonts').single('click', _.bind(me.showFonts, me));
$('#font-color').single('click', _.bind(me.showFontColor, 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();
PE.getController('EditText').initSettings();
},
// Render layout
@ -82,7 +116,9 @@ define([
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
scope : this
scope : this,
bullets : _bullets,
numbers : _numbers
}));
return this;
@ -169,6 +205,18 @@ define([
this.showPage('#edit-text-additional');
},
showLineSpacing: function () {
this.showPage('#edit-text-linespacing');
},
showBullets: function () {
this.showPage('#edit-text-bullets');
},
showNumbers: function () {
this.showPage('#edit-text-numbers');
},
textFonts: 'Fonts',
textFontColor: 'Font Color',
textAdditionalFormat: 'Additional Formatting',
@ -183,7 +231,14 @@ define([
textSubscript: 'Subscript',
textSmallCaps: 'Small Caps',
textAllCaps: 'All Caps',
textLetterSpacing: 'Letter Spacing'
textLetterSpacing: 'Letter Spacing',
textFromText: 'Distance from Text',
textBefore: 'Before',
textAfter: 'After',
textLineSpacing: 'Line Spacing',
textBullets: 'Bullets',
textNone: 'None',
textNumbers: 'Numbers'
}
})(), PE.Views.EditText || {}))
});

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

15
apps/presentationeditor/mobile/resources/less/ios/_icons.less
View file

@ -195,4 +195,19 @@ 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="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-text-valign-top {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
}
&.icon-text-valign-middle {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
}
&.icon-text-valign-bottom {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
}
}

15
apps/presentationeditor/mobile/resources/less/material/_icons.less
View file

@ -165,6 +165,21 @@ 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="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-text-valign-top {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
}
&.icon-text-valign-middle {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
}
&.icon-text-valign-bottom {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
}
}
// Overwrite color for toolbar