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

[SE mobile] Chart settings, layout

Browse source
This commit is contained in:
Alexander Yuzhin 2016-12-14 17:14:00 +03:00
parent bf9e024087
commit b0e635135f
16 changed files with 292 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,7 @@
.active {
position: relative;
z-index: 1;
&::after {
content: '';

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

@ -17,6 +17,7 @@
.active {
position: relative;
z-index: 1;
&::after {
content: '';

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -57,6 +57,7 @@ define([
_cellStyles = [],
_fontInfo = {},
_borderInfo = {color: '000000', width: 'medium'},
_styleSize = {width: 100, height: 50},
_isEdit = false;
function onApiLoadFonts(fonts, select) {
@ -86,8 +87,9 @@ define([
this.addListeners({
'EditCell': {
'page:show' : this.onPageShow,
'font:click': this.onFontClick
'page:show' : this.onPageShow,
'font:click' : this.onFontClick,
'style:click' : this.onStyleClick
}
});
},
@ -96,6 +98,8 @@ define([
var me = this;
me.api = api;
me.api.asc_setThumbnailStylesSizes(_styleSize.width, _styleSize.height);
me.api.asc_registerCallback('asc_onInitEditorFonts', _.bind(onApiLoadFonts, me));
me.api.asc_registerCallback('asc_onSelectionChanged', _.bind(me.onApiSelectionChanged, me));
me.api.asc_registerCallback('asc_onEditorSelectionChanged', _.bind(me.onApiEditorSelectionChanged, me));
@ -122,6 +126,8 @@ define([
me.initSettings();
},
onPageShow: function (view, pageId) {
var me = this;
@ -168,6 +174,10 @@ define([
return _cellInfo;
},
getStyleSize: function () {
return _styleSize;
},
initFontsPage: function () {
var me = this,
displaySize = _fontInfo.size;
@ -321,6 +331,8 @@ define([
$('#fill-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
var styleName = cellInfo.asc_getStyleName();
$('#edit-cell .cell-styles li[data-type="' + styleName + '"]').addClass('active');
if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText) {
return;
@ -365,6 +377,10 @@ define([
}
},
onStyleClick: function (view, type) {
this.api.asc_setCellStyle(type);
},
onBold: function (e) {
var pressed = this._toggleButton(e);

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

@ -220,6 +220,7 @@ define([
initLayoutPage: function () {
var me = this,
chartProperties = _chartObject.get_ChartProperties(),
chartType = chartProperties.getType(),
$layoutPage = $('.page[data-page=edit-chart-layout]');
var setValue = function (id, value) {
@ -230,14 +231,74 @@ define([
$layoutPage.find('#' + id + ' .item-after').text(textValue);
};
// Init legend position values
var dataLabelPos = [
{ value: Asc.c_oAscChartDataLabelsPos.none, displayValue: me.textNone },
{ value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: me.textCenter }
];
if (chartType == Asc.c_oAscChartTypeSettings.barNormal ||
chartType == Asc.c_oAscChartTypeSettings.hBarNormal) {
dataLabelPos.push(
{value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: me.textInnerBottom},
{value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop},
{value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: me.textOuterTop}
);
} else if ( chartType == Asc.c_oAscChartTypeSettings.barStacked ||
chartType == Asc.c_oAscChartTypeSettings.barStackedPer ||
chartType == Asc.c_oAscChartTypeSettings.hBarStacked ||
chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ) {
dataLabelPos.push(
{ value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: me.textInnerBottom },
{ value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop }
);
} else if (chartType == Asc.c_oAscChartTypeSettings.lineNormal ||
chartType == Asc.c_oAscChartTypeSettings.lineStacked ||
chartType == Asc.c_oAscChartTypeSettings.lineStackedPer ||
chartType == Asc.c_oAscChartTypeSettings.stock ||
chartType == Asc.c_oAscChartTypeSettings.scatter) {
dataLabelPos.push(
{ value: Asc.c_oAscChartDataLabelsPos.l, displayValue: me.textLeft },
{ value: Asc.c_oAscChartDataLabelsPos.r, displayValue: me.textRight },
{ value: Asc.c_oAscChartDataLabelsPos.t, displayValue: me.textTop },
{ value: Asc.c_oAscChartDataLabelsPos.b, displayValue: me.textBottom }
);
} else if (chartType == Asc.c_oAscChartTypeSettings.pie ||
chartType == Asc.c_oAscChartTypeSettings.pie3d) {
dataLabelPos.push(
{value: Asc.c_oAscChartDataLabelsPos.bestFit, displayValue: me.textFit},
{value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop},
{value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: me.textOuterTop}
);
}
$layoutPage.find('select[name=chart-layout-data-labels]').html((function () {
var options = [];
_.each(dataLabelPos, function (position) {
options.push(Common.Utils.String.format('<option value="{0}">{1}</option>', position.value, position.displayValue));
});
return options.join('');
})());
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());
setValue('chart-layout-gridlines-vertical', chartProperties.getVertGridLines());
setValue('chart-layout-data-labels', chartProperties.getDataLabelsPos() || Asc.c_oAscChartDataLabelsPos.none);
// TODO: Modify Data Labels position by chart type
var disableSetting = (
chartType == Asc.c_oAscChartTypeSettings.pie ||
chartType == Asc.c_oAscChartTypeSettings.doughnut ||
chartType == Asc.c_oAscChartTypeSettings.pie3d
);
$('#chart-layout-axis-title-horizontal').toggleClass('disabled', disableSetting);
$('#chart-layout-axis-title-vertical').toggleClass('disabled', disableSetting);
$('#chart-layout-gridlines-horizontal').toggleClass('disabled', disableSetting);
$('#chart-layout-gridlines-vertical').toggleClass('disabled', disableSetting);
},
initReorderPage: function () {
@ -492,7 +553,88 @@ define([
return clr;
},
textChart: 'Chart'
textChart: 'Chart',
textLayout: 'Layout',
textLegendPos: 'Legend',
textHorTitle: 'Horizontal Axis Title',
textVertTitle: 'Vertical Axis Title',
textDataLabels: 'Data Labels',
textSeparator: 'Data Labels Separator',
textSeriesName: 'Series Name',
textCategoryName: 'Category Name',
textValue: 'Value',
textAxisOptions: 'Axis Options',
textMinValue: 'Minimum Value',
textMaxValue: 'Maximum Value',
textAxisCrosses: 'Axis Crosses',
textUnits: 'Display Units',
textTickOptions: 'Tick Options',
textMajorType: 'Major Type',
textMinorType: 'Minor Type',
textLabelOptions: 'Label Options',
textLabelPos: 'Label Position',
textReverse: 'Values in reverse order',
textVertAxis: 'Vertical Axis',
textHorAxis: 'Horizontal Axis',
textMarksInterval: 'Interval between Marks',
textLabelDist: 'Axis Label Distance',
textLabelInterval: 'Interval between Labels',
textAxisPos: 'Axis Position',
textLeftOverlay: 'Left Overlay',
textRightOverlay: 'Right Overlay',
textOverlay: 'Overlay',
textNoOverlay: 'No Overlay',
textRotated: 'Rotated',
textHorizontal: 'Horizontal',
textInnerBottom: 'Inner Bottom',
textInnerTop: 'Inner Top',
textOuterTop: 'Outer Top',
textNone: 'None',
textCenter: 'Center',
textFixed: 'Fixed',
textAuto: 'Auto',
textCross: 'Cross',
textIn: 'In',
textOut: 'Out',
textLow: 'Low',
textHigh: 'High',
textNextToAxis: 'Next to axis',
textHundreds: 'Hundreds',
textThousands: 'Thousands',
textTenThousands: '10 000',
textHundredThousands: '100 000',
textMillions: 'Millions',
textTenMillions: '10 000 000',
textHundredMil: '100 000 000',
textBillions: 'Billions',
textTrillions: 'Trillions',
textCustom: 'Custom',
textManual: 'Manual',
textBetweenTickMarks: 'Between Tick Marks',
textOnTickMarks: 'On Tick Marks',
textHorGrid: 'Horizontal Gridlines',
textVertGrid: 'Vertical Gridlines',
textLines: 'Lines',
textMarkers: 'Markers',
textMajor: 'Major',
textMinor: 'Minor',
textMajorMinor: 'Major and Minor',
textStraight: 'Straight',
textSmooth: 'Smooth',
textType: 'Type',
textTypeData: 'Type & Data',
textStyle: 'Style',
errorMaxRows: 'ERROR! The maximum number of data series per chart is 255.',
errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.',
textAxisSettings: 'Axis Settings',
textGridLines: 'Gridlines',
textShow: 'Show',
textHide: 'Hide',
textLeft: 'Left',
textRight: 'Right',
textTop: 'Top',
textBottom: 'Bottom',
textFit: 'Fit Width'
}
})(), SSE.Controllers.EditChart || {}))
});

3
apps/spreadsheeteditor/mobile/app/template/EditCell.template
View file

@ -82,8 +82,7 @@
<div class="content-block-title">Cell Styles</div>
<div class="list-block">
<ul>
<li class="cell-styles">
<div class="item-content"></div>
<li class="cell-styles dataview">
</li>
</ul>
</div>

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

@ -129,7 +129,7 @@
<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="edit-chart-style 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>
@ -140,7 +140,7 @@
<% } %>
</div>
<% if (android) { %>
<div class="subnavbar categories" style="padding: 0;">
<div class="edit-chart-style 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>
@ -349,10 +349,6 @@
<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">

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

@ -53,7 +53,7 @@ define([
SSE.Views.EditCell = Backbone.View.extend(_.extend((function() {
// private
var _fontsList,
_editTextController;
_editCellController;
return {
// el: '.view-main',
@ -64,7 +64,7 @@ define([
},
initialize: function () {
_editTextController = SSE.getController('EditCell');
_editCellController = SSE.getController('EditCell');
Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
this.on('page:show', _.bind(this.updateItemHandlers, this));
@ -108,10 +108,11 @@ define([
},
renderStyles: function (cellStyles) {
var $styleContainer = $('.cell-styles .item-content');
var $styleContainer = $('#edit-cell .cell-styles');
if ($styleContainer.length > 0) {
var columns = parseInt($styleContainer.width() / 70), // magic
var styleSize = _editCellController.getStyleSize(),
columns = parseInt($styleContainer.width() / styleSize.width),
row = -1,
styles = [];
@ -128,21 +129,42 @@ define([
'<ul class="row">',
'<% _.each(row, function(style) { %>',
'<li data-type="<%= style.asc_getName() %>">',
'<img src="<%= style.asc_getImage() %>" width="50px" height="50px">',
'<div class="thumb" style="background-image:url(<%= style.asc_getImage() %>); width: <%= styleSize.width %>px; height: <%= styleSize.height %>px;">',
'</li>',
'<% }); %>',
'</ul>',
'<% }); %>'
].join(''), {
styles: styles
styles: styles,
styleSize: styleSize
});
$styleContainer.html(template);
$('#edit-cell .cell-styles li').single('click', _.buffered(function (e) {
var $target = $(e.currentTarget),
type = $target.data('type');
$('#edit-cell .cell-styles li').removeClass('active');
$target.addClass('active');
this.fireEvent('style:click', [this, type]);
}, 100, this));
}
},
updateItemHandlers: function () {
$('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
var selectorsDynamicPage = [
'#edit-cell',
'.page[data-page=edit-border-style]',
'.page[data-page=edit-cell-format]'
].map(function (selector) {
return selector + ' a.item-link[data-page]';
}).join(', ');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
// $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
},
showPage: function (templateId, suspendEvent) {
@ -197,7 +219,7 @@ define([
items: SSE.getController('EditCell').getFonts(),
template: $template.html(),
onItemsAfterInsert: function (list, fragment) {
var fontInfo = _editTextController.getFontInfo();
var fontInfo = _editCellController.getFontInfo();
$('#font-list input[name=font-name]').val([fontInfo.name]);
$('#font-list li').single('click', _.buffered(function (e) {

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

@ -169,8 +169,16 @@ define([
},
updateItemHandlers: function () {
$('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
$('.subnavbar.categories a').single('click', function () {
var selectorsDynamicPage = [
'#edit-chart',
'.page[data-page=edit-chart-style]'
].map(function (selector) {
return selector + ' a.item-link[data-page]';
}).join(', ');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
$('.edit-chart-style.subnavbar.categories a').single('click', function () {
$('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
});
},

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

51
apps/spreadsheeteditor/mobile/resources/less/app-ios.less
View file

@ -141,41 +141,30 @@ input, textarea {
}
}
// Bullets and numbers
.bullets,
.numbers {
ul {
margin-top: 10px;
// Cell style
.cell-styles.dataview {
.active:after {
right: 2px;
bottom: 2px;
}
li {
width: 70px;
height: 70px;
margin-right: 1px;
border: 1px solid #c4c4c4;
html.pixel-ratio-2 & {
border: 0.5px solid #c4c4c4;
}
html.pixel-ratio-3 & {
border: 0.33px solid #c4c4c4;
}
.row {
padding: 5px;
&.active {
//
}
li {
border: 1px solid @listBlockBorderColor;
html.pixel-ratio-2 & {
border: 0.5px solid @listBlockBorderColor;
}
html.pixel-ratio-3 & {
border: 0.33px solid @listBlockBorderColor;
}
padding: 2px;
.thumb {
width: 100%;
height: 100%;
background-color: @white;
background-size: cover;
label {
width: 100%;
text-align: center;
position: absolute;
top: 34%;
.thumb {
width: 112px;
height: 38px;
background-size: contain;
}
}
}

60
apps/spreadsheeteditor/mobile/resources/less/app-material.less
View file

@ -134,51 +134,31 @@ input, textarea {
}
}
// Bullets and numbers
.bullets,
.numbers {
ul {
margin-top: 10px;
// Cell style
.cell-styles.dataview {
.active:after {
right: 2px;
bottom: 2px;
}
li {
width: 70px;
height: 70px;
margin-right: 1px;
border: 1px solid #c4c4c4;
html.pixel-ratio-2 & {
border: 0.5px solid #c4c4c4;
}
html.pixel-ratio-3 & {
border: 0.33px solid #c4c4c4;
}
.row {
padding: 5px 0;
&.active {
//
}
li {
border: 1px solid @listBlockBorderColor;
html.pixel-ratio-2 & {
border: 0.5px solid @listBlockBorderColor;
}
html.pixel-ratio-3 & {
border: 0.33px solid @listBlockBorderColor;
}
padding: 2px;
.thumb {
width: 100%;
height: 100%;
background-color: @white;
background-size: cover;
label {
width: 100%;
text-align: center;
position: absolute;
top: 34%;
.thumb {
width: 112px;
height: 38px;
background-size: contain;
}
}
}
}
.phone {
.page.editor {
&.no-padding {
padding-top: 0;
transition: padding-top .2s ease-in;
}
}
}