[SSE mobile] Make Spreadsheet Settings
This commit is contained in:
SergeyEzhin
parent
37248d0c0e
commit
aeb2daacab
|
|
@ -216,6 +216,33 @@
|
|||
"textDefault": "Selected range",
|
||||
"textInvalidRange": "Invalid cells range",
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
|
||||
},
|
||||
"Settings": {
|
||||
"textFindAndReplace": "Find and Replace",
|
||||
"textSpreadsheetSettings": "Spreadsheet Settings",
|
||||
"textApplicationSettings": "Application Settings",
|
||||
"textDownload": "Download",
|
||||
"textPrint": "Print",
|
||||
"textSpreadsheetInfo": "Spreadsheet Info",
|
||||
"textHelp": "Help",
|
||||
"textAbout": "About",
|
||||
"textDone": "Done",
|
||||
"textSettings": "Settings",
|
||||
"textBack": "Back",
|
||||
"textOrientation": "Orientation",
|
||||
"textPortrait": "Portrait",
|
||||
"textLandscape": "Landscape",
|
||||
"textFormat": "Format",
|
||||
"textMargins": "Margins",
|
||||
"textColorSchemes": "Color Schemes",
|
||||
"textHideHeadings": "Hide Headings",
|
||||
"textHideGridlines": "Hide Gridlines",
|
||||
"textLeft": "Left",
|
||||
"textBottom": "Bottom",
|
||||
"textTop": "Top",
|
||||
"textRight": "Right",
|
||||
"textCustomSize": "Custom Size",
|
||||
"textSpreadsheetFormats": "Spreadsheet Formats"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { f7 } from 'framework7-react';
|
|||
import { withTranslation } from 'react-i18next';
|
||||
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||
|
||||
@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings")
|
||||
@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings")
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -204,6 +204,7 @@ class MainController extends Component {
|
|||
// me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me));
|
||||
me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me));
|
||||
|
||||
const storeSpreadsheetSettings = this.props.storeSpreadsheetSettings;
|
||||
const storeFocusObjects = this.props.storeFocusObjects;
|
||||
const storeCellSettings = this.props.storeCellSettings;
|
||||
const storeTextSettings = this.props.storeTextSettings;
|
||||
|
|
@ -251,6 +252,12 @@ class MainController extends Component {
|
|||
Common.Utils.ThemeColor.setColors(colors, standart_colors);
|
||||
});
|
||||
|
||||
// Spreadsheet Settings
|
||||
|
||||
this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => {
|
||||
storeSpreadsheetSettings.addSchemes(schemes);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
_onLongActionEnd(type, id) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
import React, {Component} from 'react';
|
||||
import {SpreadsheetSettings} from '../../view/settings/SpreadsheetSettings';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
class SpreadsheetSettingsController extends Component {
|
||||
constructor (props) {
|
||||
super (props);
|
||||
this.initSpreadsheetMargins = this.initSpreadsheetMargins.bind(this);
|
||||
this.onFormatChange = this.onFormatChange.bind(this);
|
||||
this.onPageMarginsChange = this.onPageMarginsChange.bind(this);
|
||||
this.initSpreadsheetSettings();
|
||||
}
|
||||
|
||||
initSpreadsheetSettings() {
|
||||
const api = Common.EditorApi.get();
|
||||
const params = api.asc_getSheetViewSettings();
|
||||
const currentSheet = api.asc_getActiveWorksheetIndex();
|
||||
const propsSheet = api.asc_getPageOptions(currentSheet);
|
||||
const opt = propsSheet.asc_getPageSetup();
|
||||
|
||||
this.props.storeSpreadsheetSettings.changeHideHeadings(!params.asc_getShowRowColHeaders());
|
||||
this.props.storeSpreadsheetSettings.changeHideGridlines(!params.asc_getShowGridLines());
|
||||
this.props.storeSpreadsheetSettings.resetPortrait(opt.asc_getOrientation() === Asc.c_oAscPageOrientation.PagePortrait ? true : false);
|
||||
this.props.storeSpreadsheetSettings.changeDocSize(opt.asc_getWidth(), opt.asc_getHeight());
|
||||
}
|
||||
|
||||
initSpreadsheetMargins() {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
// Init page margins
|
||||
|
||||
let currentSheet = api.asc_getActiveWorksheetIndex(),
|
||||
props = api.asc_getPageOptions(currentSheet);
|
||||
|
||||
this.localMarginProps = props.asc_getPageMargins();
|
||||
|
||||
let left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getLeft()).toFixed(2)),
|
||||
top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getTop()).toFixed(2)),
|
||||
right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getRight()).toFixed(2)),
|
||||
bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getBottom()).toFixed(2));
|
||||
|
||||
return {left, top, right, bottom};
|
||||
}
|
||||
|
||||
onPageMarginsChange(align, marginValue) {
|
||||
const api = Common.EditorApi.get();
|
||||
let changeProps = new Asc.asc_CPageMargins();
|
||||
|
||||
changeProps.asc_setTop(this.localMarginProps.asc_getTop());
|
||||
changeProps.asc_setBottom(this.localMarginProps.asc_getBottom());
|
||||
changeProps.asc_setLeft(this.localMarginProps.asc_getLeft());
|
||||
changeProps.asc_setRight(this.localMarginProps.asc_getRight());
|
||||
|
||||
switch (align) {
|
||||
case 'left': changeProps.asc_setLeft(marginValue); break;
|
||||
case 'top': changeProps.asc_setTop(marginValue); break;
|
||||
case 'right': changeProps.asc_setRight(marginValue); break;
|
||||
case 'bottom': changeProps.asc_setBottom(marginValue); break;
|
||||
}
|
||||
|
||||
api.asc_changePageMargins(changeProps.asc_getLeft(), changeProps.asc_getRight(), changeProps.asc_getTop(), changeProps.asc_getBottom(), api.asc_getActiveWorksheetIndex());
|
||||
// this.initSpreadsheetMargins();
|
||||
}
|
||||
|
||||
onOrientationChange(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_changePageOrient(+value === Asc.c_oAscPageOrientation.PagePortrait, api.asc_getActiveWorksheetIndex());
|
||||
}
|
||||
|
||||
clickCheckboxHideHeadings(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_setDisplayHeadings(!value);
|
||||
}
|
||||
|
||||
clickCheckboxHideGridlines(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_setDisplayGridlines(!value);
|
||||
}
|
||||
|
||||
initPageColorSchemes() {
|
||||
const api = Common.EditorApi.get();
|
||||
return api.asc_GetCurrentColorSchemeIndex();
|
||||
}
|
||||
|
||||
onColorSchemeChange(index) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_ChangeColorSchemeByIdx(+index);
|
||||
}
|
||||
|
||||
onFormatChange(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_changeDocSize(parseFloat(value[0]), parseFloat(value[1]), api.asc_getActiveWorksheetIndex());
|
||||
this.initSpreadsheetSettings();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<SpreadsheetSettings
|
||||
isPortrait={this.isPortrait}
|
||||
isHideHeadings={this.isHideHeadings}
|
||||
isHideGridlines={this.isHideGridlines}
|
||||
onOrientationChange={this.onOrientationChange}
|
||||
clickCheckboxHideHeadings={this.clickCheckboxHideHeadings}
|
||||
clickCheckboxHideGridlines={this.clickCheckboxHideGridlines}
|
||||
initPageColorSchemes={this.initPageColorSchemes}
|
||||
onColorSchemeChange={this.onColorSchemeChange}
|
||||
onFormatChange={this.onFormatChange}
|
||||
initSpreadsheetMargins={this.initSpreadsheetMargins}
|
||||
onPageMarginsChange={this.onPageMarginsChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("storeSpreadsheetSettings")(observer(SpreadsheetSettingsController));
|
||||
|
|
@ -12,10 +12,11 @@ import {storeCellSettings} from "./cellSettings";
|
|||
// import {storeImageSettings} from "./imageSettings";
|
||||
// import {storeTableSettings} from "./tableSettings";
|
||||
import {storeChartSettings} from "./chartSettings";
|
||||
import {storeSpreadsheetSettings} from "./spreadsheetSettings";
|
||||
|
||||
export const stores = {
|
||||
storeFocusObjects: new storeFocusObjects(),
|
||||
// storeDocumentSettings: new storeDocumentSettings(),
|
||||
storeSpreadsheetSettings: new storeSpreadsheetSettings(),
|
||||
users: new storeUsers(),
|
||||
sheets: new storeWorksheets(),
|
||||
storeFunctions: new storeFunctions(),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
|
||||
export class storeSpreadsheetSettings {
|
||||
|
||||
@observable isPortrait = true;
|
||||
|
||||
@action resetPortrait (isPortrait) {
|
||||
this.isPortrait = isPortrait === true;
|
||||
}
|
||||
|
||||
// Spreadsheet Formats
|
||||
|
||||
@observable widthDocument;
|
||||
@observable heightDocument;
|
||||
|
||||
@action changeDocSize (width, height) {
|
||||
this.widthDocument = width;
|
||||
this.heightDocument = height;
|
||||
}
|
||||
|
||||
getPageSizesList () {
|
||||
const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm);
|
||||
const pageSizes = [
|
||||
{ caption: 'US Letter', subtitle: '21,59 ' + txtCm + ' x 27,94 ' + txtCm, value: [215.9, 279.4] },
|
||||
{ caption: 'US Legal', subtitle: '21,59 ' + txtCm + ' x 35,56 ' + txtCm, value: [215.9, 355.6] },
|
||||
{ caption: 'A4', subtitle: '21 ' + txtCm + ' x 29,7 ' + txtCm, value: [210, 297] },
|
||||
{ caption: 'A5', subtitle: '14,8 ' + txtCm + ' x 21 ' + txtCm, value: [148, 210] },
|
||||
{ caption: 'B5', subtitle: '17,6 ' + txtCm + ' x 25 ' + txtCm, value: [176, 250] },
|
||||
{ caption: 'Envelope #10', subtitle: '10,48 ' + txtCm + ' x 24,13 ' + txtCm, value: [104.8, 241.3] },
|
||||
{ caption: 'Envelope DL', subtitle: '11 ' + txtCm + ' x 22 ' + txtCm, value: [110, 220] },
|
||||
{ caption: 'Tabloid', subtitle: '27,94 ' + txtCm + ' x 43,18 ' + txtCm, value: [279.4, 431.8] },
|
||||
{ caption: 'A3', subtitle: '29,7 ' + txtCm + ' x 42 ' + txtCm, value: [297, 420] },
|
||||
{ caption: 'Tabloid Oversize', subtitle: '30,48 ' + txtCm + ' x 45,71 ' + txtCm, value: [304.8, 457.1] },
|
||||
{ caption: 'ROC 16K', subtitle: '19,68 ' + txtCm + ' x 27,3 ' + txtCm, value: [196.8, 273] },
|
||||
{ caption: 'Envelope Choukei 3', subtitle: '11,99 ' + txtCm + ' x 23,49 ' + txtCm, value: [119.9, 234.9] },
|
||||
{ caption: 'Super B/A3', subtitle: '33,02 ' + txtCm + ' x 48,25 ' + txtCm, value: [330.2, 482.5] },
|
||||
{ caption: 'A0', subtitle: '84,1 ' + txtCm + ' x 118,9 ' + txtCm, value: [841, 1189] },
|
||||
{ caption: 'A1', subtitle: '59,4 ' + txtCm + ' x 84,1 ' + txtCm, value: [594, 841] },
|
||||
{ caption: 'A2', subtitle: '42 ' + txtCm + ' x 59,4 ' + txtCm, value: [420, 594] },
|
||||
{ caption: 'A6', subtitle: '10,5 ' + txtCm + ' x 14,8 ' + txtCm, value: [105, 148] }
|
||||
];
|
||||
|
||||
return pageSizes;
|
||||
}
|
||||
|
||||
@computed get pageSizesIndex () {
|
||||
let w = this.widthDocument;
|
||||
let h = this.heightDocument;
|
||||
let ind;
|
||||
const pageSizes = this.getPageSizesList();
|
||||
|
||||
pageSizes.forEach(function callback(size, index) {
|
||||
if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) {
|
||||
ind = index;
|
||||
}
|
||||
}, this);
|
||||
|
||||
return ind;
|
||||
}
|
||||
|
||||
// Color Schemes
|
||||
|
||||
@observable allSchemes;
|
||||
|
||||
@action addSchemes(arr) {
|
||||
this.allSchemes = arr;
|
||||
}
|
||||
|
||||
@observable isHideHeadings;
|
||||
@observable isHideGridlines;
|
||||
|
||||
@action changeHideHeadings(value) {
|
||||
this.isHideHeadings = value;
|
||||
}
|
||||
|
||||
@action changeHideGridlines(value) {
|
||||
this.isHideGridlines = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,20 +3,30 @@ import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'f
|
|||
import { withTranslation } from 'react-i18next';
|
||||
import {f7} from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
|
||||
import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: 'TSettingsView'
|
||||
},
|
||||
/*{
|
||||
path: '/presentation-settings/',
|
||||
component: PresentationSettingsController,
|
||||
{
|
||||
path: '/spreadsheet-settings/',
|
||||
component: SpreadsheetSettingsController,
|
||||
},
|
||||
{
|
||||
path: "/presentation-info/",
|
||||
component: PresentationInfoController,
|
||||
}*/
|
||||
path: "/color-schemes/",
|
||||
component: SpreadsheetColorSchemes
|
||||
},
|
||||
{
|
||||
path: '/spreadsheet-formats/',
|
||||
component: SpreadsheetFormats
|
||||
},
|
||||
{
|
||||
path: '/margins/',
|
||||
component: SpreadsheetMargins
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -38,12 +48,12 @@ const SettingsList = withTranslation()(props => {
|
|||
{navbar}
|
||||
<List>
|
||||
{!props.inPopover &&
|
||||
<ListItem title={_t.textFindAndReplace}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textFindAndReplace}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
}
|
||||
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
|
||||
<Icon slot="media" icon="icon-setup"></Icon>
|
||||
<ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
|
||||
<Icon slot="media" icon="icon-table-settings"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textApplicationSettings} link="#">
|
||||
<Icon slot="media" icon="icon-app-settings"></Icon>
|
||||
|
|
@ -54,7 +64,7 @@ const SettingsList = withTranslation()(props => {
|
|||
<ListItem title={_t.textPrint}>
|
||||
<Icon slot="media" icon="icon-print"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
|
||||
<ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
|
||||
<Icon slot="media" icon="icon-info"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textHelp} link="#">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,270 @@
|
|||
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 _t = t('View.Settings', {returnObjects: true});
|
||||
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
|
||||
const allSchemes = storeSpreadsheetSettings.allSchemes;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
|
||||
<List>
|
||||
{
|
||||
allSchemes ? allSchemes.map((scheme, index) => {
|
||||
return (
|
||||
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
|
||||
onChange={() => {
|
||||
if(index !== curScheme) {
|
||||
setScheme(index);
|
||||
props.onColorSchemeChange(index);
|
||||
};
|
||||
}}>
|
||||
<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();
|
||||
console.log(margins);
|
||||
|
||||
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(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(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(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(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(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(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(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(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 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 simpleList>
|
||||
<ListItem>
|
||||
<span>{_t.textHideHeadings}</span>
|
||||
<Toggle checked={isHideHeadings} onChange={() => {
|
||||
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
|
||||
props.clickCheckboxHideHeadings(!isHideHeadings)
|
||||
}} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<span>{_t.textHideGridlines}</span>
|
||||
<Toggle checked={isHideGridlines} onChange={() => {
|
||||
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
|
||||
props.clickCheckboxHideGridlines(!isHideGridlines)
|
||||
}} />
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textColorSchemes} 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")(observer(PageSpreadsheetSettings));
|
||||
const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes));
|
||||
|
||||
export {
|
||||
SpreadsheetSettings,
|
||||
SpreadsheetFormats,
|
||||
SpreadsheetMargins,
|
||||
SpreadsheetColorSchemes
|
||||
};
|
||||
Loading…
Reference in a new issue