diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less
index 7ea5577f71..876ffe6d56 100644
--- a/apps/common/mobile/resources/less/icons.less
+++ b/apps/common/mobile/resources/less/icons.less
@@ -119,4 +119,37 @@ i.icon {
height: 24px;
.encoded-svg-mask('')
}
+
+ // Text orientation
+
+ &.icon-text-orientation-horizontal {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
+ &.icon-text-orientation-anglecount {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
+ &.icon-text-orientation-angleclock {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
+ &.icon-text-orientation-vertical {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
+ &.icon-text-orientation-rotateup {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
+ &.icon-text-orientation-rotatedown {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('');
+ }
}
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 25fb0bdd19..2cb72d5497 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -404,7 +404,11 @@
"textWe": "We",
"textWrap": "Wrap",
"textWrappingStyle": "Wrapping Style",
- "textYourOption": "Your option"
+ "textYourOption": "Your option",
+ "textTextOrientation": "Text Orientation",
+ "textHorizontalText": "Horizontal Text",
+ "textRotateTextUp": "Rotate Text Up",
+ "textRotateTextDown": "Rotate Text Down"
},
"Error": {
"convertationTimeoutText": "Conversion timeout exceeded.",
diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
index dbca8bc24e..fe1f6fe615 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
@@ -266,6 +266,14 @@ class EditTextController extends Component {
this.updateBulletsNumbers(2);
}
+ setOrientationTextShape(direction) {
+ const api = Common.EditorApi.get();
+ const properties = new Asc.asc_CImgProperty();
+
+ properties.put_Vert(direction);
+ api.ImgApply(properties);
+ }
+
render() {
return (
)
}
diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
index 206e268f48..e7295b2763 100644
--- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
@@ -1,7 +1,7 @@
import React, { useContext, useEffect } from 'react';
import { Popover, Sheet, View, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
-import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor } from "./EditText";
+import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor, PageOrientationTextShape } from "./EditText";
import { ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle } from "./EditParagraph";
import { PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace } from "./EditShape";
import { PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle } from "./EditImage";
@@ -46,6 +46,10 @@ const routes = [
path: '/edit-text-highlight-color/',
component: PageTextHighlightColor,
},
+ {
+ path: '/edit-text-shape-orientation/',
+ component: PageOrientationTextShape
+ },
// Edit link
// {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 28fae85d1b..7c48f16e0c 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -319,7 +319,8 @@ const PageLineSpacing = props => {
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const lineSpacing = storeTextSettings.lineSpacing;
- return(
+
+ return (
{Device.phone &&
@@ -478,6 +479,65 @@ const PageHighlightColor = props => {
)
};
+const PageOrientationTextShape = props => {
+ const { t } = useTranslation();
+ const _t = t('Edit', {returnObjects: true});
+ const shapePr = props.shapePr;
+ const [directionTextShape, setDirectionTextShape] = useState(shapePr.get_Vert());
+ const isAndroid = Device.android;
+
+ return (
+
+
+ {Device.phone &&
+
+
+
+
+
+ }
+
+
+ : null}
+ onChange={() => {
+ setDirectionTextShape(Asc.c_oAscVertDrawingText.normal);
+ props.setOrientationTextShape(Asc.c_oAscVertDrawingText.normal);
+ }}>
+ {!isAndroid ?
+ : null
+ }
+
+ : null}
+ onChange={() => {
+ setDirectionTextShape(Asc.c_oAscVertDrawingText.vert);
+ props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert);
+ }}>
+ {!isAndroid ?
+ : null
+ }
+
+
+ : null}
+ onChange={() => {
+ setDirectionTextShape(Asc.c_oAscVertDrawingText.vert270);
+ props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert270);
+ }}>
+ {!isAndroid ?
+ : null
+ }
+
+
+
+ )
+}
+
const EditText = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
@@ -596,6 +656,14 @@ const EditText = props => {
}
+ {shapePr &&
+
+ {!isAndroid && }
+
+ }
{!inSmartArt && !inSmartArtInternal &&
');
}
-
- // Text orientation
-
- &.icon-text-orientation-horizontal {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
- &.icon-text-orientation-anglecount {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
- &.icon-text-orientation-angleclock {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
- &.icon-text-orientation-vertical {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
- &.icon-text-orientation-rotateup {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
- &.icon-text-orientation-rotatedown {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('');
- }
}