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

[DE mobile] Fixed edit shape style settings when image focused

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-15 00:37:29 +03:00
parent 1511daaa00
commit 35fcb8ea37
2 changed files with 69 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
import {PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
import {PageChartWrap, PageChartReorder} from "./EditChart";
@ -77,6 +77,10 @@ const routes = [
path: '/edit-shape-style/',
component: PageShapeStyle,
},
{
path: '/edit-shape-style-no-fill/',
component: PageShapeStyleNoFill,
},
{
path: '/edit-shape-custom-fill-color/',
component: PageShapeCustomFillColor,

70
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -197,6 +197,55 @@ const PageStyle = props => {
)
};
const PageStyleNoFill = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
const stroke = shapeObject.get_ShapeProperties().get_stroke();
// Init border size
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
const borderSize = stroke.get_width() * 72.0 / 25.4;
const borderType = stroke.get_type();
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
const borderColor = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
<List>
<ListItem>
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
<div slot='inner' style={{width: '100%'}}>
<Range min="0" max="7" step="1" value={stateBorderSize}
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range>
</div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div>
</ListItem>
<ListItem title={_t.textColor} link='/edit-shape-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
></span>
</ListItem>
</List>
</Page>
)
};
const PageWrap = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
@ -352,15 +401,22 @@ const PageReorder = props => {
const EditShape = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const canFill = props.storeFocusObjects.shapeObject.get_ShapeProperties().get_CanFill();
return (
<Fragment>
<List>
<ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
onFillColor: props.onFillColor,
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor,
onOpacity: props.onOpacity
}}></ListItem>
{canFill ?
<ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
onFillColor: props.onFillColor,
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor,
onOpacity: props.onOpacity
}}></ListItem> :
<ListItem title={_t.textStyle} link='/edit-shape-style-no-fill/' routeProps={{
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor
}}></ListItem>
}
<ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
onWrapType: props.onWrapType,
onShapeAlign: props.onShapeAlign,
@ -384,6 +440,7 @@ const EditShape = props => {
const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
const PageShapeStyleNoFill = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyleNoFill));
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
@ -393,6 +450,7 @@ const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
export {EditShapeContainer as EditShape,
PageShapeStyle,
PageShapeStyleNoFill,
PageShapeCustomFillColor,
PageShapeBorderColor,
PageShapeCustomBorderColor,