[SSE mobile] Make Spreadsheet Settings

apps/spreadsheeteditor/mobile/locale/en.json

@@ -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": {

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -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) {

apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx

@@ -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));

apps/spreadsheeteditor/mobile/src/store/mainStore.js

@@ -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(),

apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js

@@ -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;
+    }
+
+}

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -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/',
+        path: '/spreadsheet-settings/',
-        component: PresentationSettingsController,
+        component: SpreadsheetSettingsController,
     },
     {
-        path: "/presentation-info/",
+        path: "/color-schemes/",
-        component: PresentationInfoController,
+        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}>
+                        <ListItem title={_t.textFindAndReplace}>
-                        <Icon slot="media" icon="icon-search"></Icon>
+                            <Icon slot="media" icon="icon-search"></Icon>
-                    </ListItem>
+                        </ListItem>
                     }
-                    <ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
+                    <ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
-                        <Icon slot="media" icon="icon-setup"></Icon>
+                        <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="#">

apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx

@@ -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
+};