276 lines
14 KiB
JavaScript
276 lines
14 KiB
JavaScript
import React, {useState} from 'react';
|
|
import {observer, inject} from "mobx-react";
|
|
import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon, Toggle} from 'framework7-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {Device} from '../../../../../common/mobile/utils/device';
|
|
|
|
const PageSpreadsheetColorSchemes = props => {
|
|
const { t } = useTranslation();
|
|
const curScheme = props.initPageColorSchemes();
|
|
const [stateScheme, setScheme] = useState(curScheme);
|
|
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
|
|
const allSchemes = storeSpreadsheetSettings.allSchemes;
|
|
const SchemeNames = [ t('View.Settings.txtScheme22'),
|
|
t('View.Settings.txtScheme1'), t('View.Settings.txtScheme2'), t('View.Settings.txtScheme3'), t('View.Settings.txtScheme4'),
|
|
t('View.Settings.txtScheme5'), t('View.Settings.txtScheme6'), t('View.Settings.txtScheme7'), t('View.Settings.txtScheme8'),
|
|
t('View.Settings.txtScheme9'), t('View.Settings.txtScheme10'), t('View.Settings.txtScheme11'), t('View.Settings.txtScheme12'),
|
|
t('View.Settings.txtScheme13'), t('View.Settings.txtScheme14'), t('View.Settings.txtScheme15'), t('View.Settings.txtScheme16'),
|
|
t('View.Settings.txtScheme17'), t('View.Settings.txtScheme18'), t('View.Settings.txtScheme19'), t('View.Settings.txtScheme20'),
|
|
t('View.Settings.txtScheme21')
|
|
];
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={t('View.Settings.textColorSchemes')} backLink={t('View.Settings.textBack')} />
|
|
<List>
|
|
{
|
|
allSchemes ? allSchemes.map((scheme, index) => {
|
|
const name = scheme.get_name();
|
|
return (
|
|
<ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={(index < 22) ? (SchemeNames[index] || name) : name} checked={stateScheme === index}
|
|
onChange={() => {
|
|
setScheme(index);
|
|
setTimeout(() => props.onColorSchemeChange(index), 15);
|
|
}}>
|
|
<div slot="before-title">
|
|
<span className="color-schema-block">
|
|
{
|
|
scheme.get_colors().map((elem, index) => {
|
|
if(index >=2 && index < 7) {
|
|
let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())};
|
|
return (
|
|
<span className="color" key={index} style={clr}></span>
|
|
)
|
|
}
|
|
})
|
|
}
|
|
|
|
</span>
|
|
</div>
|
|
</ListItem>
|
|
)
|
|
}) : null
|
|
}
|
|
</List>
|
|
</Page>
|
|
|
|
)
|
|
};
|
|
|
|
const PageSpreadsheetFormats = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Settings', {returnObjects: true});
|
|
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
|
|
const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex;
|
|
const pageSizes = storeSpreadsheetSettings.getPageSizesList();
|
|
const textMetric = Common.Utils.Metric.getCurrentMetricName();
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textSpreadsheetFormats} backLink={_t.textBack} />
|
|
<List mediaList>
|
|
{pageSizes.map((item, index) => (
|
|
<ListItem
|
|
key={index}
|
|
radio
|
|
title={item.caption}
|
|
subtitle={parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) + ' ' + textMetric + ' x ' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) + ' ' + textMetric}
|
|
name="format-size-checkbox"
|
|
checked={pageSizesIndex === index}
|
|
onClick={e => {props.onFormatChange(item.value)}}>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageSpreadsheetMargins = props => {
|
|
const isAndroid = Device.android;
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Settings', {returnObjects: true});
|
|
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
|
|
const margins = props.initSpreadsheetMargins();
|
|
|
|
const [stateTop, setTop] = useState(margins.top);
|
|
const [stateBottom, setBottom] = useState(margins.bottom);
|
|
const [stateLeft, setLeft] = useState(margins.left);
|
|
const [stateRight, setRight] = useState(margins.right);
|
|
|
|
const onChangeMargins = (align, isDecrement) => {
|
|
let step = Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1;
|
|
step = Common.Utils.Metric.fnRecalcToMM(step);
|
|
|
|
let marginValue,
|
|
maxMarginsH = 482.5,
|
|
maxMarginsW = 482.5;
|
|
|
|
switch (align) {
|
|
case 'left': marginValue = stateLeft; break;
|
|
case 'top': marginValue = stateTop; break;
|
|
case 'right': marginValue = stateRight; break;
|
|
case 'bottom': marginValue = stateBottom; break;
|
|
}
|
|
|
|
if (isDecrement) {
|
|
marginValue = Math.max(0, marginValue - step);
|
|
} else {
|
|
marginValue = Math.min((align == 'left' || align == 'right') ? maxMarginsW : maxMarginsH, marginValue + step);
|
|
}
|
|
|
|
switch (align) {
|
|
case 'left': setLeft(marginValue); break;
|
|
case 'top': setTop(marginValue); break;
|
|
case 'right': setRight(marginValue); break;
|
|
case 'bottom': setBottom(marginValue); break;
|
|
}
|
|
|
|
props.onPageMarginsChange(align, marginValue);
|
|
};
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textMargins} backLink={_t.textBack} />
|
|
<List>
|
|
<ListItem title={_t.textTop}>
|
|
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
<ListItem title={_t.textBottom}>
|
|
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
<ListItem title={_t.textLeft}>
|
|
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
<ListItem title={_t.textRight}>
|
|
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageSpreadsheetSettings = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Settings', {returnObjects: true});
|
|
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
|
|
const storeWorksheets = props.storeWorksheets;
|
|
const wsProps = storeWorksheets.wsProps;
|
|
const isPortrait = storeSpreadsheetSettings.isPortrait;
|
|
const isHideHeadings = storeSpreadsheetSettings.isHideHeadings;
|
|
const isHideGridlines = storeSpreadsheetSettings.isHideGridlines;
|
|
|
|
// Init Format
|
|
|
|
const curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
|
|
const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex;
|
|
|
|
const pageSizes = storeSpreadsheetSettings.getPageSizesList();
|
|
const textFormat = pageSizes[pageSizesIndex]['caption'];
|
|
const sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][0]).toFixed(2));
|
|
const sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][1]).toFixed(2));
|
|
const pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textSpreadsheetSettings} backLink={_t.textBack} />
|
|
<BlockTitle>{_t.textOrientation}</BlockTitle>
|
|
<List>
|
|
<ListItem radio title={_t.textPortrait} name="orientation-checkbox" checked={isPortrait} onClick={() => {
|
|
storeSpreadsheetSettings.resetPortrait(true);
|
|
props.onOrientationChange(0)}}>
|
|
</ListItem>
|
|
<ListItem radio title={_t.textLandscape} name="orientation-checkbox" checked={!isPortrait} onClick={() => {
|
|
storeSpreadsheetSettings.resetPortrait(false);
|
|
props.onOrientationChange(1)}}>
|
|
</ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textFormat}</BlockTitle>
|
|
<List mediaList>
|
|
<ListItem title={textFormat} subtitle={pageSizeTxt} link="/spreadsheet-formats/" routeProps={{
|
|
onFormatChange: props.onFormatChange
|
|
}}></ListItem>
|
|
<ListItem title={_t.textMargins} link="/margins/" routeProps={{
|
|
initSpreadsheetMargins: props.initSpreadsheetMargins,
|
|
onPageMarginsChange: props.onPageMarginsChange
|
|
}}></ListItem>
|
|
</List>
|
|
<List>
|
|
<ListItem title={_t.textHideHeadings}>
|
|
<Toggle checked={isHideHeadings} onToggleChange={() => {
|
|
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
|
|
props.clickCheckboxHideHeadings(!isHideHeadings)
|
|
}} />
|
|
</ListItem>
|
|
<ListItem title={_t.textHideGridlines}>
|
|
<Toggle checked={isHideGridlines} onToggleChange={() => {
|
|
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
|
|
props.clickCheckboxHideGridlines(!isHideGridlines)
|
|
}} />
|
|
</ListItem>
|
|
</List>
|
|
<List>
|
|
<ListItem title={_t.textColorSchemes} className={wsProps.FormatCells ? 'disabled' : ''} link="/color-schemes/" routeProps={{
|
|
onColorSchemeChange: props.onColorSchemeChange,
|
|
initPageColorSchemes: props.initPageColorSchemes
|
|
}}></ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const SpreadsheetFormats = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetFormats));
|
|
const SpreadsheetMargins = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetMargins));
|
|
const SpreadsheetSettings = inject("storeSpreadsheetSettings", "storeWorksheets")(observer(PageSpreadsheetSettings));
|
|
const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes));
|
|
|
|
export {
|
|
SpreadsheetSettings,
|
|
SpreadsheetFormats,
|
|
SpreadsheetMargins,
|
|
SpreadsheetColorSchemes
|
|
};
|