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

[DE PE SSE] Fix Bug 52260

Browse source
This commit is contained in:
ShimaginAndrey 2021-09-15 15:21:49 +03:00
parent f6107e516e
commit e839088079
10 changed files with 502 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/documenteditor/mobile/locale/en.json
View file

@ -230,6 +230,7 @@
"textEditLink": "Edit Link",
"textEffects": "Effects",
"textEmptyImgUrl": "You need to specify image URL.",
"textDesign": "Design",
"textFill": "Fill",
"textFirstColumn": "First Column",
"textFirstLine": "FirstLine",

1
apps/documenteditor/mobile/locale/ru.json
View file

@ -213,6 +213,7 @@
"textBefore": "Перед",
"textBehind": "За текстом",
"textBorder": "Граница",
"textDesign": "Вид",
"textBringToForeground": "Перенести на передний план",
"textBullets": "Маркеры",
"textBulletsAndNumbers": "Маркеры и нумерация",

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

@ -19,7 +19,7 @@ import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor}
import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
import {PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
const routes = [
//Edit text
@ -156,9 +156,25 @@ const routes = [
path: '/edit-chart-reorder/',
component: PageChartReorder,
},
{
path: '/edit-chart-design/',
component: PageChartDesign,
},
{
path: '/edit-chart-type/',
component: PageChartDesignType
},
{
path: '/edit-chart-style/',
component: PageChartStyle,
component: PageChartDesignStyle
},
{
path: '/edit-chart-fill/',
component: PageChartDesignFill
},
{
path: '/edit-chart-border/',
component: PageChartDesignBorder
},
{
path: '/edit-chart-custom-fill-color/',

238
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -139,21 +139,100 @@ const PageBorderColor = props => {
)
};
const PageStyle = props => {
const PageChartType = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
const types = storeChartSettings.types;
const curType = chartProperties ? chartProperties.getType() : null;
const chartStyles = storeChartSettings.chartStyles;
const isAndroid = Device.android;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textType} />
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={() => {props.onType(type.type)}}>
<div className={'thumb'}
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</div>
</div>
</Page>
)
}
const PageChartStyle = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const styles = storeChartSettings.styles;
const chartStyles = storeChartSettings.chartStyles;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textStyle} />
{chartStyles ?
<div id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
<ul className="row">
{styles ? styles.map((row, rowIndex) => {
return (
row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})
)
}) : <div className={'text-content'}>{_t.textNoStyles}</div>
}
</ul>
</div>
</div>
: null}
</Page>
)
}
const PageChartDesignFill = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textFill} />
<div id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</div>
</Page>
)
}
const PageChartBorder = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
let borderSize, borderType, borderColor;
if (shapeObject) {
const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
@ -171,6 +250,46 @@ const PageStyle = props => {
// Init border color
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textBorder} />
<div id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor }}
></span>
</ListItem>
</List>
</div>
</Page>
)
}
const PageDesign = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
if (!chartProperties && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -179,14 +298,7 @@ const PageStyle = props => {
return (
<Page>
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"de-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
{chartStyles ? <Link key={"de-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"de-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"de-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
{isAndroid && <span className='tab-link-highlight'></span>}
</div>
<Navbar backLink={_t.textBack} title={_t.textDesign}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -195,78 +307,17 @@ const PageStyle = props => {
</NavRight>
}
</Navbar>
<Tabs animated>
<Tab key={"de-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={()=>{props.onType(type.type)}}>
<div className={'thumb'}
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</div>
</Tab>
{chartStyles ?
<Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>
<Tab key={"de-tab-chart-border"} id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
></span>
</ListItem>
</List>
</Tab>
</Tabs>
<Fragment>
<List>
<ListItem title={_t.textType} link='/edit-chart-type/' routeProps = {{onType: props.onType}} />
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps = {{onStyle: props.onStyle}} />
<ListItem title={_t.textFill} link='/edit-chart-fill/' routeProps = {{onFillColor: props.onFillColor}} />
<ListItem title={_t.textBorder} link='/edit-chart-border/' routeProps = {{
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor
}} />
</List>
</Fragment>
</Page>
)
};
@ -430,7 +481,7 @@ const EditChart = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps={{
<ListItem title={_t.textDesign} link='/edit-chart-design/' routeProps={{
onType: props.onType,
onStyle: props.onStyle,
onFillColor: props.onFillColor,
@ -455,7 +506,10 @@ const EditChart = props => {
)
};
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign));
const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType));
const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle));
const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder));
const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap));
const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
@ -463,7 +517,11 @@ const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observ
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
export {EditChart,
PageChartStyle,
PageChartDesign,
PageChartDesignType,
PageChartDesignStyle,
PageChartDesignFill,
PageChartDesignBorder,
PageChartCustomFillColor,
PageChartBorderColor,
PageChartCustomBorderColor,

1
apps/presentationeditor/mobile/locale/en.json
View file

@ -286,6 +286,7 @@
"textDoubleStrikethrough": "Double Strikethrough",
"textDuplicateSlide": "Duplicate Slide",
"textDuration": "Duration",
"textDesign": "Design",
"textEditLink": "Edit Link",
"textEffect": "Effect",
"textEffects": "Effects",

1
apps/presentationeditor/mobile/locale/ru.json
View file

@ -369,6 +369,7 @@
"textText": "Текст",
"textTheme": "Тема",
"textTop": "Сверху",
"textDesign": "Вид",
"textTopLeft": "Сверху слева",
"textTopRight": "Сверху справа",
"textTotalRow": "Строка итогов",

20
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -18,7 +18,7 @@ import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddF
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
import { PageLinkTo, PageTypeLink } from './EditLink'
const routes = [
@ -168,9 +168,25 @@ const routes = [
// Chart
{
path: '/edit-chart-design/',
component: PageChartDesign,
},
{
path: '/edit-chart-type/',
component: PageChartDesignType
},
{
path: '/edit-chart-style/',
component: PageChartStyle
component: PageChartDesignStyle
},
{
path: '/edit-chart-fill/',
component: PageChartDesignFill
},
{
path: '/edit-chart-border/',
component: PageChartDesignBorder
},
{
path: '/edit-chart-reorder/',

239
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
View file

@ -149,21 +149,102 @@ const PageBorderColor = props => {
)
};
const PageStyle = props => {
const PageChartType = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
const types = storeChartSettings.types;
const curType = chartProperties ? chartProperties.getType() : null;
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textType} />
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={() => {props.onType(type.type)}}>
<div className={'thumb'}
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</div>
</div>
</Page>
)
}
const PageChartStyle = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const styles = storeChartSettings.styles;
const shapeObject = props.storeFocusObjects.shapeObject;
const chartStyles = storeChartSettings.chartStyles;
const isAndroid = Device.android;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textStyle} />
{chartStyles ?
<div id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
<ul className="row">
{styles ? styles.map((row, rowIndex) => {
return (
row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})
)
}) : <div className={'text-content'}>{_t.textNoStyles}</div>
}
</ul>
</div>
</div>
: null}
</Page>
)
}
const PageChartDesignFill = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textFill} />
<div id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</div>
</Page>
)
}
const PageChartBorder = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
let borderSize, borderType, borderColor;
if(shapeObject) {
if (shapeObject) {
const shapeStroke = shapeObject.get_stroke();
borderSize = shapeStroke.get_width() * 72.0 / 25.4;
borderType = shapeStroke.get_type();
@ -171,7 +252,6 @@ const PageStyle = props => {
}
// Init border size
const borderSizeTransform = storeChartSettings.borderSizeTransform();
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
@ -179,8 +259,44 @@ const PageStyle = props => {
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textBorder} />
<div id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor }}
></span>
</ListItem>
</List>
</div>
</Page>
)
}
const PageDesign = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
if (!chartProperties && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -189,14 +305,7 @@ const PageStyle = props => {
return (
<Page>
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
{chartStyles ? <Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
{isAndroid && <span className='tab-link-highlight'></span>}
</div>
<Navbar backLink={_t.textBack} title={_t.textDesign}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -205,78 +314,17 @@ const PageStyle = props => {
</NavRight>
}
</Navbar>
<Tabs animated>
<Tab key={"pe-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={()=>{props.onType(type.type)}}>
<div className={'thumb'}
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</div>
</Tab>
{chartStyles ?
<Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>
<Tab key={"pe-tab-chart-border"} id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
></span>
</ListItem>
</List>
</Tab>
</Tabs>
<Fragment>
<List>
<ListItem title={_t.textType} link='/edit-chart-type/' routeProps = {{onType: props.onType}} />
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps = {{onStyle: props.onStyle}} />
<ListItem title={_t.textFill} link='/edit-chart-fill/' routeProps = {{onFillColor: props.onFillColor}} />
<ListItem title={_t.textBorder} link='/edit-chart-border/' routeProps = {{
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor
}} />
</List>
</Fragment>
</Page>
)
};
@ -380,7 +428,7 @@ const EditChart = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps={{
<ListItem title={_t.textDesign} link='/edit-chart-design/' routeProps={{
onType: props.onType,
onStyle: props.onStyle,
onFillColor: props.onFillColor,
@ -401,7 +449,10 @@ const EditChart = props => {
)
};
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign));
const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType));
const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle));
const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder));
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
@ -410,7 +461,11 @@ const PageChartAlign = inject("storeFocusObjects")(observer(PageAlign));
export {
EditChart,
PageChartStyle,
PageChartDesign,
PageChartDesignType,
PageChartDesignStyle,
PageChartDesignFill,
PageChartDesignBorder,
PageChartCustomFillColor,
PageChartBorderColor,
PageChartCustomBorderColor,

20
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -16,7 +16,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell';
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
import { PageTypeLink, PageSheet } from './EditLink';
const routes = [
@ -151,9 +151,25 @@ const routes = [
// Chart
{
path: '/edit-chart-design/',
component: PageChartDesign,
},
{
path: '/edit-chart-type/',
component: PageChartDesignType
},
{
path: '/edit-chart-style/',
component: PageChartStyle
component: PageChartDesignStyle
},
{
path: '/edit-chart-fill/',
component: PageChartDesignFill
},
{
path: '/edit-chart-border/',
component: PageChartDesignBorder
},
{
path: '/edit-chart-border-color/',

240
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -144,24 +144,100 @@ const PageBorderColor = props => {
)
};
const PageStyle = props => {
const PageChartType = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const isAndroid = Device.android;
const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types;
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textType} />
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={() => {props.onType(type.type)}}>
<div className={'thumb' + ` ${type.thumb}`}></div>
</li>
)
})}
</ul>
)
})}
</div>
</div>
</Page>
)
}
const PageChartStyle = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const styles = storeChartSettings.styles;
const chartStyles = storeChartSettings.chartStyles;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textStyle} />
{chartStyles ?
<div id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
<ul className="row">
{styles ? styles.map((row, rowIndex) => {
return (
row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})
)
}) : <div className={'text-content'}>{_t.textNoStyles}</div>
}
</ul>
</div>
</div>
: null}
</Page>
)
}
const PageChartDesignFill = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textFill} />
<div id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</div>
</Page>
)
}
const PageChartBorder = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const storeFocusObjects = props.storeFocusObjects;
const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties();
const styles = storeChartSettings.styles;
const types = storeChartSettings.types;
const curType = chartProperties && chartProperties.getType();
const chartStyles = storeChartSettings.chartStyles;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
// Init border size
let borderSize, borderType;
if (shapeProperties) {
const shapeStroke = shapeProperties.get_stroke();
@ -182,6 +258,47 @@ const PageStyle = props => {
const borderColor = storeChartSettings.borderColor;
const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
return (
<Page>
<Navbar backLink={_t.textBack} title={_t.textBorder} />
<div id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor }}
></span>
</ListItem>
</List>
</div>
</Page>
)
}
const PageDesign = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -190,90 +307,24 @@ const PageStyle = props => {
return (
<Page>
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"sse-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
{chartStyles ? <Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
{isAndroid && <span className='tab-link-highlight'></span>}
</div>
<Navbar backLink={_t.textBack} title={_t.textDesign}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<Tabs animated>
<Tab key={"sse-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
<div className="chart-types">
{types.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index)=>{
return(
<li key={`${rowIndex}-${index}`}
className={curType === type.type ? ' active' : ''}
onClick={() => {props.onType(type.type)}}>
<div className={'thumb' + ` ${type.thumb}`}></div>
</li>
)
})}
</ul>
)
})}
</div>
</Tab>
{chartStyles ?
<Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"sse-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>
<Tab key={"sse-tab-chart-border"} id={"edit-chart-border"} className="page-content no-padding-top">
<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-chart-border-color/' routeProps={{
onBorderColor: props.onBorderColor
}}>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor }}
></span>
</ListItem>
</List>
</Tab>
</Tabs>
<Fragment>
<List>
<ListItem title={_t.textType} link='/edit-chart-type/' routeProps = {{onType: props.onType}} />
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps = {{onStyle: props.onStyle}} />
<ListItem title={_t.textFill} link='/edit-chart-fill/' routeProps = {{onFillColor: props.onFillColor}} />
<ListItem title={_t.textBorder} link='/edit-chart-border/' routeProps = {{
onBorderSize: props.onBorderSize,
onBorderColor: props.onBorderColor
}} />
</List>
</Fragment>
</Page>
)
};
@ -1410,7 +1461,7 @@ const EditChart = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textDesign} link='/edit-chart-style/' routeProps={{
<ListItem title={_t.textDesign} link='/edit-chart-design/' routeProps={{
onType: props.onType,
onStyle: props.onStyle,
onFillColor: props.onFillColor,
@ -1476,7 +1527,10 @@ const EditChart = props => {
};
const PageEditChart = inject("storeFocusObjects")(observer(EditChart));
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign));
const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType));
const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle));
const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder));
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
@ -1487,7 +1541,11 @@ const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
export {
PageEditChart as EditChart,
PageChartStyle,
PageChartDesign,
PageChartDesignType,
PageChartDesignStyle,
PageChartDesignFill,
PageChartDesignBorder,
PageChartCustomFillColor,
PageChartBorderColor,
PageChartCustomBorderColor,