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

[SE ios] Add layout Edit Chart settings.

Browse source
This commit is contained in:
Alexander Yuzhin 2016-12-12 18:13:46 +03:00
parent f355a42418
commit 2bc215773a
10 changed files with 547 additions and 307 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

235
apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js Normal file
View file

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

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

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

328
apps/spreadsheeteditor/mobile/app/template/EditChart.template
View file

@ -12,16 +12,34 @@
</a>
</li>
<li>
<a id="chart-wrap" class="item-link">
<a id="chart-layout" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Wrap</div>
<div class="item-title">Layout</div>
</div>
</div>
</a>
</li>
<li>
<a id="chart-reorder" class="item-link">
<a id="chart-vaxis" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Vertical Axis</div>
</div>
</div>
</a>
</li>
<li>
<a id="chart-haxis" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Horizontal Axis</div>
</div>
</div>
</a>
</li>
<li>
<a id="chart-reorder" class="item-link" data-page="#edit-chart-reorder">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Reorder</div>
@ -35,11 +53,11 @@
<% if (!android) { %>
<ul>
<li>
<a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Chart</a>
<a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveChart %></a>
</li>
</ul>
<% } else { %>
<a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Chart</a>
<a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveChart %></a>
<% } %>
</div>
</div>
@ -48,21 +66,21 @@
<div id="edit-chart-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>Back</span><% } %></a></div>
<div class="center sliding">Reorder</div>
<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 chart-reorder">
<div class="page" data-page="edit-chart-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-search"></i></div>
<div class="item-media"><i class="icon icon-move-foreground"></i></div>
<div class="item-inner">
<div class="item-title">Bring to Foreground</div>
<div class="item-title"><%= scope.textToForeground %></div>
</div>
</div>
</a>
@ -70,9 +88,9 @@
<li>
<a data-type="all-down" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-media"><i class="icon icon-move-background"></i></div>
<div class="item-inner">
<div class="item-title">Send to Background</div>
<div class="item-title"><%= scope.textToBackground %></div>
</div>
</div>
</a>
@ -80,9 +98,9 @@
<li>
<a data-type="move-up" class="item-link no-indicator">
<div class="item-content">
<div class="item-media"><i class="icon icon-search"></i></div>
<div class="item-media"><i class="icon icon-move-forward"></i></div>
<div class="item-inner">
<div class="item-title">Move Forward</div>
<div class="item-title"><%= scope.textForward %></div>
</div>
</div>
</a>
@ -90,9 +108,9 @@
<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-search"></i></div>
<div class="item-media"><i class="icon icon-move-backward"></i></div>
<div class="item-inner">
<div class="item-title">Move Backward</div>
<div class="item-title"><%= scope.textBackward %></div>
</div>
</div>
</a>
@ -102,281 +120,3 @@
</div>
</div>
</div>
<!-- Wrap view -->
<div id="edit-chart-wrap">
<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>Back</span><% } %></a></div>
<div class="center sliding">Wrap</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 chart-wrap">
<div class="page-content">
<div class="list-block chart-wrap-types">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="inline">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Inline</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="square">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Square</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="tight">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Tight</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="through">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Through</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="top-bottom">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Top and Bottom</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="infront">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">In Front</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="chart-wrap" value="behind">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-search"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title">Behind</div>
</div>
</label>
</li>
</ul>
</div>
<div class="content-block-title align">Align</div>
<div class="list-block align">
<ul>
<li id="edit-chart-align">
<div class="item-content buttons">
<div class="item-inner">
<div class="row">
<a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
<a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
<a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-block inline">
<ul>
<li id="edit-chart-movetext">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Move with Text</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li id="edit-chart-overlap">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Allow Overlap</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title distance">Distance from text</div>
<div class="list-block distance" style="margin-bottom: 40px;">
<ul>
<li id="table-distance">
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="200" value="0" step="1">
</div>
</div>
<div class="item-after value">0 pt</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Styles view -->
<div id="edit-chart-style">
<div class="navbar">
<div class="navbar-inner edit-chart-style" data-page="edit-chart-style">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
<div class="center sliding categories">
<% if (android) { %>
<div class="toolbar tabbar">
<div data-page="index" class="toolbar-inner">
<a href="#tab-chart-type" data-type="type" class="tab-link active">Type</a>
<a href="#tab-chart-style" data-type="style" class="tab-link">Style</a>
<a href="#tab-chart-fill" data-type="fill" class="tab-link">Fill</a>
<a href="#tab-chart-border" data-type="border" class="tab-link">Border</a>
</div>
</div>
<% } else { %>
<div class="buttons-row">
<a href="#tab-chart-type" data-type="type" class="tab-link button active">Type</a>
<a href="#tab-chart-style" data-type="style" class="tab-link button">Style</a>
<a href="#tab-chart-fill" data-type="fill" class="tab-link button">Fill</a>
<a href="#tab-chart-border" data-type="border" class="tab-link button">Border</a>
</div>
<% } %>
</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-chart-style">
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab-chart-type" class="page-content tab active dataview chart-types">
<% _.each(types, function(row) { %>
<ul class="row">
<% _.each(row, function(type) { %>
<li data-type="<%= type.type %>">
<div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
</li>
<% }); %>
</ul>
<% }); %>
</div>
<div id="tab-chart-style" class="page-content tab">
<div class="list-block">
<ul>
<li id="edit-chart-styles">
<div class="item-content">
<div class="item-inner"></div>
</div>
</li>
</ul>
</div>
</div>
<div id="tab-chart-fill" class="page-content tab">
<!--Fill colors-->
</div>
<div id="tab-chart-border" class="page-content tab">
<div class="list-block">
<ul>
<li id="edit-chart-bordersize">
<div style="padding: 15px 0 0 15px;">Size</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="7" value="0" step="1">
</div>
</div>
<div class="item-after value">0 pt</div>
</div>
</div>
</li>
<li>
<a id="edit-chart-bordercolor" class="item-link">
<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>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Border color view -->
<div id="edit-chart-border-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-chart-border-color">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span>Back</span><% } %></a></div>
<div class="center sliding">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-chart-border-color">
<div class="page-content">
<!--Color palette-->
</div>
</div>
</div>

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

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

181
apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js Normal file
View file

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

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