Skip to content

W
web-apps
Commit cdcb9344 authored by Alexander Yuzhin's avatar Alexander Yuzhin
Browse files
Options

[SE mobile] Layout styles of Chart settings.

parent 2bc21577
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 115 deletions
apps/spreadsheeteditor/mobile/app/template/EditChart.template
View file @ cdcb9344
......@@ -3,7 +3,7 @@
<div class="list-block">
<ul>
<li>
<a id="chart-style" class="item-link">
<a id="chart-style" class="item-link" data-page="#edit-chart-style">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Style</div>
......@@ -119,4 +119,89 @@
</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><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding">Style</div>
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
<% if (!android) { %>
<div class="subnavbar categories">
<div class="buttons-row">
<a href="#tab-chart-type" class="button tab-link active">Type</a>
<a href="#tab-chart-style" class="button tab-link">Style</a>
<a href="#tab-chart-fill" class="button tab-link">Fill</a>
<a href="#tab-chart-border" class="button tab-link">Border</a>
</div>
</div>
<% } %>
</div>
<% if (android) { %>
<div class="subnavbar categories" style="padding: 0;">
<div class="toolbar tabbar" style="top: 0;">
<div data-page="index" class="toolbar-inner">
<a href="#tab-chart-type" class="tab-link active">Type</a>
<a href="#tab-chart-style" class="tab-link">Style</a>
<a href="#tab-chart-fill" class="tab-link">Fill</a>
<a href="#tab-chart-border" class="tab-link">Border</a>
</div>
</div>
</div>
<% } %>
</div>
<div class="page with-subnavbar" data-page="edit-chart-style">
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab-chart-type" class="page-content tab dataview chart-types active">
<% _.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 dataview chart-styles">
<!--Style-->
</div>
<div id="tab-chart-fill" class="page-content tab">
<!--Fill-->
</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>
\ No newline at end of file
apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js
View file @ cdcb9344
......@@ -51,7 +51,36 @@ define([
SSE.Views.EditChart = Backbone.View.extend(_.extend((function() {
// private
var _editTextController;
var _editTextController,
_styles = [],
_types = [
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer, thumb: 'chart-01.png'},
{ type: Asc.c_oAscChartTypeSettings.lineNormal, thumb: 'chart-06.png'},
{ type: Asc.c_oAscChartTypeSettings.lineStacked, thumb: 'chart-05.png'},
{ type: Asc.c_oAscChartTypeSettings.lineStackedPer, thumb: 'chart-04.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal, thumb: 'chart-09.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked, thumb: 'chart-08.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer, thumb: 'chart-07.png'},
{ type: Asc.c_oAscChartTypeSettings.areaNormal, thumb: 'chart-12.png'},
{ type: Asc.c_oAscChartTypeSettings.areaStacked, thumb: 'chart-11.png'},
{ type: Asc.c_oAscChartTypeSettings.areaStackedPer, thumb: 'chart-10.png'},
{ type: Asc.c_oAscChartTypeSettings.pie, thumb: 'chart-13.png'},
{ type: Asc.c_oAscChartTypeSettings.doughnut, thumb: 'chart-14.png'},
{ type: Asc.c_oAscChartTypeSettings.pie3d, thumb: 'chart-22.png'},
{ type: Asc.c_oAscChartTypeSettings.scatter, thumb: 'chart-15.png'},
{ type: Asc.c_oAscChartTypeSettings.stock, thumb: 'chart-16.png'},
{ type: Asc.c_oAscChartTypeSettings.line3d, thumb: 'chart-21.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3d, thumb: 'chart-17.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked3d, thumb: 'chart-18.png'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer3d, thumb: 'chart-19.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal3d, thumb: 'chart-25.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked3d, thumb: 'chart-24.png'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'chart-23.png'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'}
];
return {
// el: '.view-main',
......@@ -77,9 +106,15 @@ define([
// Render layout
render: function () {
var elementsInRow = 3;
var groupsOfTypes = _.chain(_types).groupBy(function(element, index){
return Math.floor(index/elementsInRow);
}).toArray().value();
this.layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
types : groupsOfTypes,
scope : this
}));
......@@ -136,6 +171,9 @@ define([
updateItemHandlers: function () {
$('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
$('.subnavbar.categories a').single('click', function () {
$('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
});
},
showPage: function (templateId, suspendEvent) {
......
apps/spreadsheeteditor/mobile/resources/less/app-ios.less
View file @ cdcb9344
......@@ -2,7 +2,7 @@
@import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less');
// Colors
@themeColor: #8ca946; // (140,169,70)
@themeColor: #4F9E4F; // (79,158,79)
@appToolbarHeight: @toolbarSize;
......
apps/spreadsheeteditor/mobile/resources/less/app-material.less
View file @ cdcb9344
......@@ -2,7 +2,7 @@
@import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less');
// Colors
@themeColor: #8ca946; // (140,169,70)
@themeColor: #4F9E4F; // (79,158,79)
@navBarIconColor: #fff;
@appToolbarHeight: @navbarSize;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7