From c472de040aefdbe7433a72e6a08640a08a8a95b8 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 5 Dec 2023 15:22:49 +0100 Subject: [PATCH] [DE mobile] Add setting text orientation in shape --- apps/common/mobile/resources/less/icons.less | 33 +++++++++ apps/documenteditor/mobile/locale/en.json | 6 +- .../mobile/src/controller/edit/EditText.jsx | 9 +++ .../mobile/src/view/edit/Edit.jsx | 6 +- .../mobile/src/view/edit/EditText.jsx | 73 ++++++++++++++++++- apps/presentationeditor/mobile/locale/en.json | 6 +- .../mobile/src/less/icons-common.less | 33 --------- 7 files changed, 129 insertions(+), 37 deletions(-) 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(''); - } }