Merge pull request #1890 from ONLYOFFICE/feature/Bug_47800

[DE PE SSE mobile] Fix Bug 47800

apps/documenteditor/mobile/locale/en.json

@@ -324,7 +324,8 @@
     "textRefreshEntireTable": "Refresh entire table",
     "textRefreshPageNumbersOnly": "Refresh page numbers only",
     "textRemoveChart": "Remove Chart",
-    "textRemoveImage": "Remove Image",
+    "del_textRemoveImage": "Remove Image",
+    "textDeleteImage": "Delete Image",
     "del_textRemoveLink": "Remove Link",
     "textDeleteLink": "Delete Link",
     "textRemoveShape": "Remove Shape",
@@ -373,6 +374,8 @@
     "textType": "Type",
     "textWe": "We",
     "textWrap": "Wrap",
+    "textTextWrapping": "Text Wrapping",
+    "textWrappingStyle": "Wrapping Style",
     "textTableOfCont": "TOC",
     "textPageNumbers": "Page Numbers",
     "textSimple": "Simple",
@@ -396,7 +399,8 @@
     "textStyles": "Styles",
     "textAmountOfLevels": "Amount of Levels",
     "textRecommended": "Recommended",
-    "textRequired": "Required"
+    "textRequired": "Required",
+    "textChangeShape": "Change Shape"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -18,7 +18,7 @@ import EditTableContentsController from "../../controller/edit/EditTableContents
 import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} 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} from "./EditImage";
+import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
 import {PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
 import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
@@ -118,7 +118,8 @@ const routes = [
         path: '/edit-shape-replace/',
         component: PageReplace,
     },
-    //Edit image
+
+    // Edit image
     {
         path: '/edit-image-wrap/',
         component: PageImageWrap,
@@ -135,7 +136,12 @@ const routes = [
         path: '/edit-image-link/',
         component: PageLinkSettings,
     },
-    //Edit table
+    {
+        path: '/edit-image-wrapping-style/',
+        component: PageWrappingStyle
+    },
+
+    // Edit table
     {
         path: '/edit-table-options/',
         component: PageTableOptions,

apps/documenteditor/mobile/src/view/edit/EditImage.jsx

@@ -11,7 +11,9 @@ const PageWrap = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeImageSettings = props.storeImageSettings;
     const imageObject = props.storeFocusObjects.imageObject;
+
     let wrapType, align, moveText, overlap, distance;
+
     if (imageObject) {
         wrapType = storeImageSettings.getWrapType(imageObject);
         align = storeImageSettings.getAlign(imageObject);
@@ -19,15 +21,28 @@ const PageWrap = props => {
         overlap = storeImageSettings.getOverlap(imageObject);
         distance = Common.Utils.Metric.fnRecalcFromMM(storeImageSettings.getWrapDistance(imageObject));
     }
+
     const metricText = Common.Utils.Metric.getCurrentMetricName();
     const [stateDistance, setDistance] = useState(distance);
+    const [wrappingStyle, setWrappingStyle] = useState(wrapType);
+    const typesWrapping = {
+        inline: _t.textInline,
+        square: _t.textSquare,
+        tight: _t.textTight,
+        through: _t.textThrough,
+        'top-bottom': _t.textTopAndBottom,
+        infront: _t.textInFront,
+        behind: _t.textBehind
+    };
+
     if (!imageObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
     }
+
     return (
         <Page>
-            <Navbar title={_t.textWrap} backLink={_t.textBack}>
+            <Navbar title={t('Edit.textTextWrapping')} backLink={_t.textBack}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -37,30 +52,31 @@ const PageWrap = props => {
                 }
             </Navbar>
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}>
+                <ListItem title={t('Edit.textWrappingStyle')} after={typesWrapping[wrappingStyle]} link='/edit-image-wrapping-style/' routeProps={{
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
+                    onWrapType: props.onWrapType,
-                </ListItem>
+                    wrappingStyle,
-                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
+                    setWrappingStyle
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
+                }}></ListItem>
-                </ListItem>
-                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}>
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
-                </ListItem>
-                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}>
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
-                </ListItem>
-                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}>
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
-                </ListItem>
-                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}>
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
-                </ListItem>
-                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}>
-                    {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
-                </ListItem>
             </List>
-            {
+            {('inline' !== wrappingStyle && 'behind' !== wrappingStyle && 'infront' !== wrappingStyle) &&
-                wrapType !== 'inline' &&
+                <Fragment>
+                    <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
+                    <List>
+                        <ListItem>
+                            <div slot='inner' style={{width: '100%'}}>
+                                <Range min={0} max={200} step={1} value={stateDistance}
+                                       onRangeChange={(value) => {setDistance(value)}}
+                                       onRangeChanged={(value) => {props.onWrapDistance(value)}}
+                                ></Range>
+                            </div>
+                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                                {stateDistance + ' ' + metricText}
+                            </div>
+                        </ListItem>
+                    </List>
+                </Fragment>
+            }
+            {wrapType !== 'inline' &&
                 <Fragment>
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
@@ -97,29 +113,88 @@ const PageWrap = props => {
                     <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
                 </ListItem>
             </List>
-            {
-                ('inline' !== wrapType && 'behind' !== wrapType && 'infront' !== wrapType) &&
-                <Fragment>
-                    <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
-                    <List>
-                        <ListItem>
-                            <div slot='inner' style={{width: '100%'}}>
-                                <Range min={0} max={200} step={1} value={stateDistance}
-                                       onRangeChange={(value) => {setDistance(value)}}
-                                       onRangeChanged={(value) => {props.onWrapDistance(value)}}
-                                ></Range>
-                            </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
-                                {stateDistance + ' ' + metricText}
-                            </div>
-                        </ListItem>
-                    </List>
-                </Fragment>
-            }
         </Page>
     )
 };
 
+const PageWrappingStyle = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const imageObject = props.storeFocusObjects.imageObject;
+    const [wrapType, setWrapType] = useState(props.wrappingStyle);
+
+    if (!imageObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textWrappingStyle')} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <List>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {
+                    setWrapType('inline');
+                    props.setWrappingStyle('inline');
+                    props.onWrapType('inline');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {
+                    setWrapType('square');
+                    props.setWrappingStyle('square');
+                    props.onWrapType('square');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {
+                    setWrapType('tight');
+                    props.setWrappingStyle('tight');
+                    props.onWrapType('tight');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-tight"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {
+                    setWrapType('through');
+                    props.setWrappingStyle('through');
+                    props.onWrapType('through');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-through"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {
+                    setWrapType('top-bottom');
+                    props.setWrappingStyle('top-bottom');
+                    props.onWrapType('top-bottom');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-top-bottom"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {
+                    setWrapType('infront');
+                    props.setWrappingStyle('infront');
+                    props.onWrapType('infront');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-infront"></Icon>}
+                </ListItem>
+                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {
+                    setWrapType('behind');
+                    props.setWrappingStyle('behind');
+                    props.onWrapType('behind');
+                }}>
+                    {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
+                </ListItem>
+            </List>
+        </Page>
+    )
+}
+
 const PageLinkSettings = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
@@ -244,14 +319,14 @@ const EditImage = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textWrap} link='/edit-image-wrap/' routeProps={{
+                <ListItem title={t('Edit.textTextWrapping')} link='/edit-image-wrap/' routeProps={{
                     onWrapType: props.onWrapType,
                     onAlign: props.onAlign,
                     onMoveText: props.onMoveText,
                     onOverlap: props.onOverlap,
                     onWrapDistance: props.onWrapDistance
                 }}></ListItem>
-                <ListItem title={_t.textReplace} link='/edit-image-replace/' className={pluginGuid ? 'disabled' : ''} routeProps={{
+                <ListItem title={t('Edit.textReplaceImage')} link='/edit-image-replace/' className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
@@ -261,7 +336,7 @@ const EditImage = props => {
             </List>
             <List className="buttons-list">
                 <ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
-                <ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
+                <ListButton className='button-red button-fill button-raised' title={t('Edit.textDeleteImage')} onClick={() => {props.onRemoveImage()}}/>
             </List>
         </Fragment>
     )
@@ -272,9 +347,11 @@ const PageWrapContainer = inject("storeFocusObjects", "storeImageSettings")(obse
 const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace));
 const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
 const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
+const PageWrappingStyleContainer = inject("storeFocusObjects")(observer(PageWrappingStyle));
 
 export {EditImageContainer as EditImage,
         PageWrapContainer as PageImageWrap,
         PageReplaceContainer as PageImageReplace,
         PageReorderContainer as PageImageReorder,
-        PageLinkSettingsContainer as PageLinkSettings}
+        PageLinkSettingsContainer as PageLinkSettings,
+        PageWrappingStyleContainer as PageWrappingStyle}

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -312,6 +312,7 @@ const PageWrap = props => {
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = props.storeFocusObjects.shapeObject;
     let wrapType, align, moveText, overlap, distance;
+
     if (shapeObject) {
         wrapType = storeShapeSettings.getWrapType(shapeObject);
         align = storeShapeSettings.getAlign(shapeObject);
@@ -319,12 +320,15 @@ const PageWrap = props => {
         overlap = storeShapeSettings.getOverlap(shapeObject);
         distance = Common.Utils.Metric.fnRecalcFromMM(storeShapeSettings.getWrapDistance(shapeObject));
     }
+
     const metricText = Common.Utils.Metric.getCurrentMetricName();
     const [stateDistance, setDistance] = useState(distance);
+
     if (!shapeObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
     }
+
     return (
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack}>
@@ -359,46 +363,7 @@ const PageWrap = props => {
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-behind"></Icon>}
                 </ListItem>
             </List>
-            {
+            {('behind' !== wrapType && 'infront' !== wrapType) &&
-                wrapType !== 'inline' &&
-                <Fragment>
-                <BlockTitle>{_t.textAlign}</BlockTitle>
-                <List>
-                    <ListItem className='buttons'>
-                        <Row>
-                            <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
-                               onClick={() => {
-                                   props.onShapeAlign(Asc.c_oAscAlignH.Left)
-                               }}>
-                                <Icon slot="media" icon="icon-text-align-left"></Icon>
-                            </a>
-                            <a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
-                               onClick={() => {
-                                   props.onShapeAlign(Asc.c_oAscAlignH.Center)
-                               }}>
-                                <Icon slot="media" icon="icon-text-align-center"></Icon>
-                            </a>
-                            <a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
-                               onClick={() => {
-                                   props.onShapeAlign(Asc.c_oAscAlignH.Right)
-                               }}>
-                                <Icon slot="media" icon="icon-text-align-right"></Icon>
-                            </a>
-                        </Row>
-                    </ListItem>
-                </List>
-                </Fragment>
-            }
-            <List>
-                <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
-                    <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
-                </ListItem>
-                <ListItem title={_t.textAllowOverlap}>
-                    <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
-                </ListItem>
-            </List>
-            {
-                ('behind' !== wrapType && 'infront' !== wrapType) &&
                 <Fragment>
                     <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
                     <List>
@@ -416,6 +381,43 @@ const PageWrap = props => {
                     </List>
                 </Fragment>
             }
+            {wrapType !== 'inline' &&
+                <Fragment>
+                    <BlockTitle>{_t.textAlign}</BlockTitle>
+                    <List>
+                        <ListItem className='buttons'>
+                            <Row>
+                                <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
+                                   onClick={() => {
+                                       props.onShapeAlign(Asc.c_oAscAlignH.Left)
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-left"></Icon>
+                                </a>
+                                <a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
+                                   onClick={() => {
+                                       props.onShapeAlign(Asc.c_oAscAlignH.Center)
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-center"></Icon>
+                                </a>
+                                <a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
+                                   onClick={() => {
+                                       props.onShapeAlign(Asc.c_oAscAlignH.Right)
+                                   }}>
+                                    <Icon slot="media" icon="icon-text-align-right"></Icon>
+                                </a>
+                            </Row>
+                        </ListItem>
+                    </List>
+                </Fragment>
+            }
+            <List>
+                <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
+                    <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
+                </ListItem>
+                <ListItem title={_t.textAllowOverlap}>
+                    <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
+                </ListItem>
+            </List>
         </Page>
     )
 };
@@ -509,6 +511,7 @@ const EditShape = props => {
     const canFill = props.storeFocusObjects.shapeObject.get_ShapeProperties().get_CanFill();
     const shapeObject = props.storeFocusObjects.shapeObject;
     const wrapType = props.storeShapeSettings.getWrapType(shapeObject);
+    const settings = props.storeFocusObjects.settings;
 
     const shapeType = shapeObject.get_ShapeProperties().asc_getType();
     const hideChangeType = shapeObject.get_ShapeProperties().get_FromChart() || shapeObject.get_ShapeProperties().get_FromSmartArt() 
@@ -548,7 +551,7 @@ const EditShape = props => {
                             onBorderColor: props.onBorderColor
                         }}></ListItem>
                 : null}
-                { !isFromGroup &&
+                {(!isFromGroup && settings.indexOf('image') === -1) &&
                     <ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
                         onWrapType: props.onWrapType,
                         onShapeAlign: props.onShapeAlign,
@@ -558,17 +561,19 @@ const EditShape = props => {
                     }}></ListItem>
                 }
                 {(!hideChangeType && !fixedSize) &&
-                    <ListItem title={_t.textReplace} link='/edit-shape-replace/' routeProps={{
+                    <ListItem title={t('Edit.textChangeShape')} link='/edit-shape-replace/' routeProps={{
                         onReplace: props.onReplace
                     }}></ListItem>
                 }
-                { (wrapType !== 'inline' && !isSmartArtInternal) && <ListItem  title={_t.textReorder} link='/edit-shape-reorder/' routeProps={{
+                {(wrapType !== 'inline' && !isSmartArtInternal && settings.indexOf('image') === -1) && <ListItem  title={_t.textReorder} link='/edit-shape-reorder/' routeProps={{
                     onReorder: props.onReorder
                 }}></ListItem> }
             </List>
-            <List className="buttons-list">
+            {settings.indexOf('image') === -1 &&
-                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
+                <List className="buttons-list">
-            </List>
+                    <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
+                </List>
+            }
         </Fragment>
     )
 };

apps/presentationeditor/mobile/locale/en.json

@@ -359,13 +359,16 @@
       "textPt": "pt",
       "textPush": "Push",
       "textRemoveChart": "Remove Chart",
-      "textRemoveImage": "Remove Image",
+      "del_textRemoveImage": "Remove Image",
+      "textDeleteImage": "Delete Image",
       "del_textRemoveLink": "Remove Link",
       "textDeleteLink": "Delete Link",
       "textRemoveShape": "Remove Shape",
       "textRemoveTable": "Remove Table",
-      "textReorder": "Reorder",
+      "del_textReorder": "Reorder",
+      "textArrange": "Arrange",
       "textReplace": "Replace",
+      "textChangeShape": "Change Shape",
       "textReplaceAll": "Replace All",
       "textReplaceImage": "Replace Image",
       "textRight": "Right",

apps/presentationeditor/mobile/src/view/edit/EditImage.jsx

@@ -15,11 +15,11 @@ const EditImage = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
+                <ListItem title={t('View.Edit.textReplaceImage')} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
-                <ListItem title={_t.textReorder} link="/edit-reorder-image/" routeProps={{
+                <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-image/" routeProps={{
                     onReorder: props.onReorder
                 }}></ListItem>
                 <ListItem title={_t.textAlign} link="/edit-align-image/" routeProps={{
@@ -28,7 +28,7 @@ const EditImage = props => {
             </List>
             <List className="buttons-list">
                 <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
-                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
+                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{t('View.Edit.textDeleteImage')}</ListButton>
             </List>
         </Fragment>
     )
@@ -177,6 +177,7 @@ const PageLinkSettings = props => {
             f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
         }
     };
+
     return (
         <Page>
             <Navbar title={_t.textLinkSettings} backLink={_t.textBack}>

apps/presentationeditor/mobile/src/view/edit/EditShape.jsx

@@ -9,9 +9,9 @@ const EditShape = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
+    const settings = storeFocusObjects.settings;
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_CanFill();
-
     const shapeType = shapeObject.asc_getType();
     const hideChangeType = shapeObject.get_FromChart() || shapeObject.get_FromSmartArt() 
     || shapeType=='line' || shapeType=='bentConnector2' || shapeType=='bentConnector3'
@@ -38,23 +38,27 @@ const EditShape = props => {
                         onBorderColor: props.onBorderColor
                     }}></ListItem>
                 }
-                { !hideChangeType &&
+                {!hideChangeType &&
-                    <ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
+                    <ListItem title={t('View.Edit.textChangeShape')} link="/edit-replace-shape/" routeProps={{
                         onReplace: props.onReplace
                     }}></ListItem>
                 }
-                { !isSmartArtInternal &&
+                {(!isSmartArtInternal && settings.indexOf('image') === -1) &&
-                    <ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
+                    <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-shape/" routeProps={{
                         onReorder: props.onReorder
                     }}></ListItem>
                 }
-                <ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
+                {settings.indexOf('image') === -1 &&
-                    onAlign: props.onAlign
+                    <ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
-                }}></ListItem>
+                        onAlign: props.onAlign
-            </List>
+                    }}></ListItem>
-            <List className="buttons-list">
+                }
-                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
             </List>
+            {settings.indexOf('image') === -1 &&
+                <List className="buttons-list">
+                    <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
+                </List>
+            }
         </Fragment>
     )
 };

apps/spreadsheeteditor/mobile/locale/en.json

@@ -512,13 +512,16 @@
       "textPt": "pt",
       "textRange": "Range",
       "textRemoveChart": "Remove Chart",
-      "textRemoveImage": "Remove Image",
+      "del_textRemoveImage": "Remove Image",
+      "textDeleteImage": "Delete Image",
       "del_textRemoveLink": "Remove Link",
       "textDeleteLink": "Delete Link",
       "textRemoveShape": "Remove Shape",
-      "textReorder": "Reorder",
+      "del_textReorder": "Reorder",
+      "textArrange": "Arrange",
       "textReplace": "Replace",
       "textReplaceImage": "Replace Image",
+      "textChangeShape": "Change Shape",
       "textRequired": "Required",
       "textRight": "Right",
       "textRightBorder": "Right Border",

apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx

@@ -14,17 +14,17 @@ const EditImage = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textReplace} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
+                <ListItem title={t('View.Edit.textReplaceImage')} link="/edit-replace-image/" className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
                     onReplaceByUrl: props.onReplaceByUrl
                 }}></ListItem>
-                <ListItem title={_t.textReorder} link="/edit-reorder-image/" routeProps={{
+                <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-image/" routeProps={{
                     onReorder: props.onReorder
                 }}></ListItem>
             </List>
             <List className="buttons-list">
                 <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
-                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
+                <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{t('View.Edit.textDeleteImage')}</ListButton>
             </List>
         </Fragment>
     )

apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx

@@ -9,6 +9,7 @@ const EditShape = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
+    const objects = storeFocusObjects.objects;
     const shapeObject = storeFocusObjects.shapeObject;
     const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
 
@@ -38,20 +39,22 @@ const EditShape = props => {
                         onBorderColor: props.onBorderColor
                     }}></ListItem>
                 }
-                { !hideChangeType &&
+                {!hideChangeType &&
-                    <ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
+                    <ListItem title={t('View.Edit.textChangeShape')} link="/edit-replace-shape/" routeProps={{
                         onReplace: props.onReplace
                     }}></ListItem>
                 }
-                { !isSmartArtInternal &&
+                {(!isSmartArtInternal && objects.indexOf('image') === -1) &&
-                    <ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
+                    <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-shape/" routeProps={{
                         onReorder: props.onReorder
                     }}></ListItem>
                 }
             </List>
-            <List className="buttons-list">
+            {objects.indexOf('image') === -1 &&
-                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
+                <List className="buttons-list">
-            </List>
+                    <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
+                </List>
+            }
         </Fragment>
     )
 };