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

[sse mobile] Add text orientation into edit cell

Browse source
This commit is contained in:
JuliaSvinareva 2020-05-28 19:40:24 +03:00
parent 8e3e359c89
commit ae9a264e32
4 changed files with 170 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -132,6 +132,8 @@ define([
me.initBorderColorPage();
} else if ('#edit-text-format' == pageId) {
me.initTextFormat();
} else if ('#edit-text-orientation' == pageId) {
me.initTextOrientation();
} else if ('#edit-border-style' == pageId) {
me.initBorderStyle();
} else if (!_.isUndefined(pageId) && pageId.indexOf('#edit-cell-format') > -1) {
@ -339,6 +341,8 @@ define([
return;
}
me.initTextOrientation();
me.initTextFormat();
},
@ -504,6 +508,49 @@ define([
return clr;
},
initTextOrientation: function() {
if (_.isUndefined(this._cellInfo)) return;
var me = this,
$pageTextOrientation = $('.page[data-page=edit-text-orientation]'),
orientationStr = 'horizontal',
xfs = this._cellInfo.asc_getXfs();
var textAngle = xfs.asc_getAngle();
switch(textAngle) {
case 45: orientationStr = 'anglecount'; break;
case -45: orientationStr = 'angleclock'; break;
case 255: orientationStr = 'vertical'; break;
case 90: orientationStr = 'rotateup'; break;
case -90: orientationStr = 'rotatedown'; break;
case 0: orientationStr = 'horizontal'; break;
}
$('#text-orientation .item-media i').removeClass().addClass(Common.Utils.String.format('icon icon-text-orientation-{0}', orientationStr));
if ($pageTextOrientation.length > 0) {
var $radioOrientation = $pageTextOrientation.find('input:radio[name=text-orientation]');
$radioOrientation.val([orientationStr]);
$radioOrientation.single('change', _.bind(me.onTextOrientationChange, me));
}
},
onTextOrientationChange: function(e) {
var $target = $(e.currentTarget),
value = $target.prop('value');
var angle = 0;
switch (value) {
case 'anglecount': angle = 45; break;
case 'angleclock': angle = -45; break;
case 'vertical': angle = 255; break;
case 'rotateup': angle = 90; break;
case 'rotatedown': angle = -90; break;
}
if (this.api)
this.api.asc_setCellAngle(angle);
},
textFonts: 'Fonts',
textAuto: 'Auto',
textPt: 'pt'

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

@ -55,6 +55,16 @@
</div>
</a>
</li>
<li>
<a id="text-orientation" class="item-link" data-page="#edit-text-orientation">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-text-orientation"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textTextOrientation %></div>
</div>
</div>
</a>
</li>
<li>
<a id="border-style" class="item-link" data-page="#edit-border-style">
<div class="item-content">
@ -303,6 +313,103 @@
</div>
</div>
<!-- Text Orientation view -->
<div id="edit-text-orientation">
<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"><%= scope.textTextOrientation %></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-text-orientation">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="horizontal">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-horizontal"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textHorizontalText %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="anglecount">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-anglecount"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textAngleCounterclockwise %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="angleclock">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-angleclock"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textAngleClockwise %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="vertical">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-vertical"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textVerticalText %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="rotateup">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-rotateup"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textRotateTextUp %></div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="text-orientation" value="rotatedown">
<% if (android) { %>
<div class="item-media"><i class="icon icon-form-radio"></i></div>
<% } else { %>
<div class="item-media"><i class="icon icon-text-orientation-rotatedown"></i></div>
<% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textRotateTextDown %></div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Border Styles view -->
<div id="edit-border-style">
<div class="navbar">

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

@ -166,6 +166,7 @@ define([
Common.Utils.addScrollIfNeed('.page[data-page=edit-border-style]', '.page[data-page=edit-border-style] .page-content');
Common.Utils.addScrollIfNeed('.page[data-page=edit-cell-format]', '.page[data-page=edit-cell-format] .page-content');
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-format]', '.page[data-page=edit-text-format] .page-content');
Common.Utils.addScrollIfNeed('.page[data-page=edit-text-orientation]', '.page[data-page=edit-text-orientation] .page-content');
$(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
},
@ -422,7 +423,14 @@ define([
textCharacterItalic: 'I',
textCharacterUnderline: 'U',
textAddCustomColor: 'Add Custom Color',
textCustomColor: 'Custom Color'
textCustomColor: 'Custom Color',
textTextOrientation: 'Text Orientation',
textHorizontalText: 'Horizontal Text',
textAngleCounterclockwise: 'Angle Counterclockwise',
textAngleClockwise: 'Angle Clockwise',
textVerticalText: 'Vertical Text',
textRotateTextUp: 'Rotate Text Up',
textRotateTextDown: 'Rotate Text Down'
}
})(), SSE.Views.EditCell || {}))
});

7
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -428,6 +428,13 @@
"SSE.Views.EditCell.textTopBorder": "Top Border",
"SSE.Views.EditCell.textWrapText": "Wrap Text",
"SSE.Views.EditCell.textYen": "Yen",
"SSE.Views.EditCell.textTextOrientation": "Text Orientation",
"SSE.Views.EditCell.textHorizontalText": "Horizontal Text",
"SSE.Views.EditCell.textAngleCounterclockwise": "Angle Counterclockwise",
"SSE.Views.EditCell.textAngleClockwise": "Angle Clockwise",
"SSE.Views.EditCell.textVerticalText": "Vertical Text",
"SSE.Views.EditCell.textRotateTextUp": "Rotate Text Up",
"SSE.Views.EditCell.textRotateTextDown": "Rotate Text Down",
"SSE.Views.EditChart.textAddCustomColor": "Add Custom Color",
"SSE.Views.EditChart.textAuto": "Auto",
"SSE.Views.EditChart.textAxisCrosses": "Axis Crosses",