[DE PE SSE] Fix Bug 52260
This commit is contained in:
parent
f6107e516e
commit
e839088079
|
@ -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",
|
||||
|
|
|
@ -213,6 +213,7 @@
|
|||
"textBefore": "Перед",
|
||||
"textBehind": "За текстом",
|
||||
"textBorder": "Граница",
|
||||
"textDesign": "Вид",
|
||||
"textBringToForeground": "Перенести на передний план",
|
||||
"textBullets": "Маркеры",
|
||||
"textBulletsAndNumbers": "Маркеры и нумерация",
|
||||
|
|
|
@ -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/',
|
||||
|
|
|
@ -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();
|
||||
|
@ -172,6 +251,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();
|
||||
return null;
|
||||
|
@ -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,
|
||||
|
|
|
@ -286,6 +286,7 @@
|
|||
"textDoubleStrikethrough": "Double Strikethrough",
|
||||
"textDuplicateSlide": "Duplicate Slide",
|
||||
"textDuration": "Duration",
|
||||
"textDesign": "Design",
|
||||
"textEditLink": "Edit Link",
|
||||
"textEffect": "Effect",
|
||||
"textEffects": "Effects",
|
||||
|
|
|
@ -369,6 +369,7 @@
|
|||
"textText": "Текст",
|
||||
"textTheme": "Тема",
|
||||
"textTop": "Сверху",
|
||||
"textDesign": "Вид",
|
||||
"textTopLeft": "Сверху слева",
|
||||
"textTopRight": "Сверху справа",
|
||||
"textTotalRow": "Строка итогов",
|
||||
|
|
|
@ -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/',
|
||||
|
|
|
@ -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,9 +259,45 @@ 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();
|
||||
return null;
|
||||
|
@ -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,
|
||||
|
|
|
@ -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/',
|
||||
|
|
|
@ -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();
|
||||
|
@ -183,6 +259,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();
|
||||
return null;
|
||||
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue