[DE PE SSE mobile] Fix Bug 47800
This commit is contained in:
		
							parent
							
								
									8227926d6d
								
							
						
					
					
						commit
						1afb2c7abb
					
				| 
						 | 
				
			
			@ -322,7 +322,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",
 | 
			
		||||
| 
						 | 
				
			
			@ -371,6 +372,8 @@
 | 
			
		|||
    "textType": "Type",
 | 
			
		||||
    "textWe": "We",
 | 
			
		||||
    "textWrap": "Wrap",
 | 
			
		||||
    "textTextWrapping": "Text Wrapping",
 | 
			
		||||
    "textWrappingStyle": "Wrapping Style",
 | 
			
		||||
    "textTableOfCont": "TOC",
 | 
			
		||||
    "textPageNumbers": "Page Numbers",
 | 
			
		||||
    "textSimple": "Simple",
 | 
			
		||||
| 
						 | 
				
			
			@ -394,7 +397,8 @@
 | 
			
		|||
    "textStyles": "Styles",
 | 
			
		||||
    "textAmountOfLevels": "Amount of Levels",
 | 
			
		||||
    "textRecommended": "Recommended",
 | 
			
		||||
    "textRequired": "Required"
 | 
			
		||||
    "textRequired": "Required",
 | 
			
		||||
    "textChangeShape": "Change Shape"
 | 
			
		||||
  },
 | 
			
		||||
  "Error": {
 | 
			
		||||
    "convertationTimeoutText": "Conversion timeout exceeded.",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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')}}>
 | 
			
		||||
                    {!isAndroid && <Icon slot="media" icon="icon-wrap-inline"></Icon>}
 | 
			
		||||
                </ListItem>
 | 
			
		||||
                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}>
 | 
			
		||||
                    {!isAndroid && <Icon slot="media" icon="icon-wrap-square"></Icon>}
 | 
			
		||||
                </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>
 | 
			
		||||
                <ListItem title={t('Edit.textWrappingStyle')} after={typesWrapping[wrappingStyle]} link='/edit-image-wrapping-style/' routeProps={{
 | 
			
		||||
                    onWrapType: props.onWrapType,
 | 
			
		||||
                    wrappingStyle,
 | 
			
		||||
                    setWrappingStyle
 | 
			
		||||
                }}></ListItem>
 | 
			
		||||
            </List>
 | 
			
		||||
            {
 | 
			
		||||
                wrapType !== 'inline' &&
 | 
			
		||||
            {('inline' !== wrappingStyle && 'behind' !== wrappingStyle && 'infront' !== wrappingStyle) &&
 | 
			
		||||
                <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}
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
            {
 | 
			
		||||
                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) &&
 | 
			
		||||
            {('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">
 | 
			
		||||
                <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
 | 
			
		||||
            </List>
 | 
			
		||||
            {settings.indexOf('image') === -1 &&
 | 
			
		||||
                <List className="buttons-list">
 | 
			
		||||
                    <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} />
 | 
			
		||||
                </List>
 | 
			
		||||
            }
 | 
			
		||||
        </Fragment>
 | 
			
		||||
    )
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -356,13 +356,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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 &&
 | 
			
		||||
                    <ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
 | 
			
		||||
                {!hideChangeType &&
 | 
			
		||||
                    <ListItem title={t('View.Edit.textChangeShape')} link="/edit-replace-shape/" routeProps={{
 | 
			
		||||
                        onReplace: props.onReplace
 | 
			
		||||
                    }}></ListItem>
 | 
			
		||||
                }
 | 
			
		||||
                { !isSmartArtInternal &&
 | 
			
		||||
                    <ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
 | 
			
		||||
                {(!isSmartArtInternal && settings.indexOf('image') === -1) &&
 | 
			
		||||
                    <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-shape/" routeProps={{
 | 
			
		||||
                        onReorder: props.onReorder
 | 
			
		||||
                    }}></ListItem>
 | 
			
		||||
                }
 | 
			
		||||
                <ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
 | 
			
		||||
                    onAlign: props.onAlign
 | 
			
		||||
                }}></ListItem>
 | 
			
		||||
            </List>
 | 
			
		||||
            <List className="buttons-list">
 | 
			
		||||
                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
 | 
			
		||||
                {settings.indexOf('image') === -1 &&
 | 
			
		||||
                    <ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
 | 
			
		||||
                        onAlign: props.onAlign
 | 
			
		||||
                    }}></ListItem>
 | 
			
		||||
                }
 | 
			
		||||
            </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>
 | 
			
		||||
    )
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -509,13 +509,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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
    )
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 &&
 | 
			
		||||
                    <ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
 | 
			
		||||
                {!hideChangeType &&
 | 
			
		||||
                    <ListItem title={t('View.Edit.textChangeShape')} link="/edit-replace-shape/" routeProps={{
 | 
			
		||||
                        onReplace: props.onReplace
 | 
			
		||||
                    }}></ListItem>
 | 
			
		||||
                }
 | 
			
		||||
                { !isSmartArtInternal &&
 | 
			
		||||
                    <ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
 | 
			
		||||
                {(!isSmartArtInternal && objects.indexOf('image') === -1) &&
 | 
			
		||||
                    <ListItem title={t('View.Edit.textArrange')} link="/edit-reorder-shape/" routeProps={{
 | 
			
		||||
                        onReorder: props.onReorder
 | 
			
		||||
                    }}></ListItem>
 | 
			
		||||
                }
 | 
			
		||||
            </List>
 | 
			
		||||
            <List className="buttons-list">
 | 
			
		||||
                <ListButton className={`button-red button-fill button-raised${disableRemove ? ' disabled' : ''}`} onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
 | 
			
		||||
            </List>
 | 
			
		||||
            {objects.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>
 | 
			
		||||
    )
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue