[SE mobile] Chart settings, layout.
This commit is contained in:
Alexander Yuzhin
parent
1b88f2909c
commit
bf9e024087
|
|
@ -138,6 +138,8 @@ define([
|
||||||
me.initStylePage();
|
me.initStylePage();
|
||||||
} else if ('#edit-chart-border-color-view' == pageId) {
|
} else if ('#edit-chart-border-color-view' == pageId) {
|
||||||
me.initBorderColorPage();
|
me.initBorderColorPage();
|
||||||
|
} else if ('#edit-chart-layout' == pageId) {
|
||||||
|
me.initLayoutPage();
|
||||||
} else if ('#edit-chart-reorder' == pageId) {
|
} else if ('#edit-chart-reorder' == pageId) {
|
||||||
me.initReorderPage();
|
me.initReorderPage();
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -208,7 +210,34 @@ define([
|
||||||
_borderInfo.color = me._sdkToThemeColor(stroke.get_color());
|
_borderInfo.color = me._sdkToThemeColor(stroke.get_color());
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == _borderInfo.color) ? _borderInfo.color : ('#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color)))
|
$('#edit-chart-bordercolor .color-preview').css('background-color',
|
||||||
|
('transparent' == _borderInfo.color)
|
||||||
|
? _borderInfo.color
|
||||||
|
: ('#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color))
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
initLayoutPage: function () {
|
||||||
|
var me = this,
|
||||||
|
chartProperties = _chartObject.get_ChartProperties(),
|
||||||
|
$layoutPage = $('.page[data-page=edit-chart-layout]');
|
||||||
|
|
||||||
|
var setValue = function (id, value) {
|
||||||
|
var textValue = $layoutPage.find('select[name=' + id + ']')
|
||||||
|
.val(value)
|
||||||
|
.find('option[value='+ value +']')
|
||||||
|
.text();
|
||||||
|
$layoutPage.find('#' + id + ' .item-after').text(textValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
setValue('chart-layout-title', chartProperties.getTitle());
|
||||||
|
setValue('chart-layout-legend', chartProperties.getLegendPos());
|
||||||
|
setValue('chart-layout-axis-title-horizontal', chartProperties.getHorAxisLabel());
|
||||||
|
setValue('chart-layout-axis-title-vertical', chartProperties.getVertAxisLabel());
|
||||||
|
setValue('chart-layout-gridlines-horizontal', chartProperties.getHorGridLines());
|
||||||
|
setValue('chart-layout-gridlines-vertical', chartProperties.getDataLabelsPos());
|
||||||
|
|
||||||
|
// TODO: Modify Data Labels position by chart type
|
||||||
},
|
},
|
||||||
|
|
||||||
initReorderPage: function () {
|
initReorderPage: function () {
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a id="chart-layout" class="item-link">
|
<a id="chart-layout" class="item-link" data-page="#edit-chart-layout">
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title">Layout</div>
|
<div class="item-title">Layout</div>
|
||||||
|
|
@ -220,4 +220,151 @@
|
||||||
<!--Color palette-->
|
<!--Color palette-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Layout view -->
|
||||||
|
<div id="edit-chart-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">Layout</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-chart-layout">
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-title" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-title">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">Overlay</option>
|
||||||
|
<option value="2">No Overlay</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Chart Title</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-legend" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-legend">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">Left</option>
|
||||||
|
<option value="2">Top</option>
|
||||||
|
<option value="3">Right</option>
|
||||||
|
<option value="4">Bottom</option>
|
||||||
|
<option value="5">Left Overlay</option>
|
||||||
|
<option value="6">Right Overlay</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Legend</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content-block-title">Axis Title</div>
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-axis-title-horizontal" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-axis-title-horizontal">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">No Overlay</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Horizontal</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-axis-title-vertical" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-axis-title-vertical">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">Rotated</option>
|
||||||
|
<option value="3">Horizontal</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Vertical</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content-block-title">Gridlines</div>
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-gridlines-horizontal" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-gridlines-horizontal">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">Major</option>
|
||||||
|
<option value="2">Minor</option>
|
||||||
|
<option value="3">Major and Minor</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Horizontal</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-gridlines-vertical" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-gridlines-vertical">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="1">Major</option>
|
||||||
|
<option value="2">Minor</option>
|
||||||
|
<option value="3">Major and Minor</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Vertical</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="list-block">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a id="chart-layout-data-labels" class="item-link smart-select" data-back-on-select="true">
|
||||||
|
<select name="chart-layout-data-labels">
|
||||||
|
<option value="0" selected>None</option>
|
||||||
|
<option value="3">Center</option>
|
||||||
|
<option value="4">Inner Bottom</option>
|
||||||
|
<option value="5">Inner Top</option>
|
||||||
|
<option value="7">Outer Top</option>
|
||||||
|
</select>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title">Data Labels</div>
|
||||||
|
<div class="item-after">None</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in a new issue