[DE mobile] Add format settings (size, margins) into document settings
This commit is contained in:
parent
61999b2037
commit
348bbf6341
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"ViewSettings": {
|
"Settings": {
|
||||||
"textSettings": "Settings",
|
"textSettings": "Settings",
|
||||||
"textDone": "Done",
|
"textDone": "Done",
|
||||||
"textFindAndReplace": "Find and Replace",
|
"textFindAndReplace": "Find and Replace",
|
||||||
|
@ -15,7 +15,12 @@
|
||||||
"textLandscape": "Landscape",
|
"textLandscape": "Landscape",
|
||||||
"textFormat": "Format",
|
"textFormat": "Format",
|
||||||
"textMargins": "Margins",
|
"textMargins": "Margins",
|
||||||
"textBack": "Back"
|
"textBack": "Back",
|
||||||
|
"textCustomSize": "Custom Size",
|
||||||
|
"textTop": "Top",
|
||||||
|
"textBottom": "Bottom",
|
||||||
|
"textLeft": "Left",
|
||||||
|
"textRight": "Right"
|
||||||
},
|
},
|
||||||
"Collaboration": {
|
"Collaboration": {
|
||||||
"textEditUser": "Users who are editing the file:"
|
"textEditUser": "Users who are editing the file:"
|
||||||
|
|
|
@ -4,9 +4,8 @@ import { withTranslation } from 'react-i18next';
|
||||||
import {f7} from 'framework7-react';
|
import {f7} from 'framework7-react';
|
||||||
import {Device} from '../../../../../common/mobile/utils/device'
|
import {Device} from '../../../../../common/mobile/utils/device'
|
||||||
|
|
||||||
import DocumentSettingsController from "../settings/controller/DocumentSettings.jsx";
|
import DocumentSettingsController from "../settings/controller/DocumentSettings";
|
||||||
import Margins from "../settings/document-settings/Margins.jsx";
|
import { DocumentFormats, DocumentMargins } from "../settings/document-settings/DocumentSettings";
|
||||||
import DocumentFormats from "../settings/document-settings/DocumentFormats.jsx";
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
@ -19,7 +18,7 @@ const routes = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/margins/',
|
path: '/margins/',
|
||||||
component: Margins,
|
component: DocumentMargins,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/document-formats/',
|
path: '/document-formats/',
|
||||||
|
@ -30,9 +29,9 @@ const routes = [
|
||||||
|
|
||||||
const SettingsList = withTranslation()(props => {
|
const SettingsList = withTranslation()(props => {
|
||||||
const {t} = props;
|
const {t} = props;
|
||||||
const _t = t('ViewSettings', {returnObjects: true});
|
const _t = t('Settings', {returnObjects: true});
|
||||||
const navbar = <Navbar title={t('ViewSettings.textSettings')}>
|
const navbar = <Navbar title={_t.textSettings}>
|
||||||
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link></NavRight>}
|
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
|
||||||
</Navbar>;
|
</Navbar>;
|
||||||
|
|
||||||
const onoptionclick = page => {
|
const onoptionclick = page => {
|
||||||
|
@ -62,16 +61,16 @@ const SettingsList = withTranslation()(props => {
|
||||||
<ListItem title={_t.textDownload} link="#">
|
<ListItem title={_t.textDownload} link="#">
|
||||||
<Icon slot="media" icon="icon-download"></Icon>
|
<Icon slot="media" icon="icon-download"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={t('ViewSettings.textPrint')}>
|
<ListItem title={_t.textPrint}>
|
||||||
<Icon slot="media" icon="icon-print"></Icon>
|
<Icon slot="media" icon="icon-print"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
|
<ListItem title={_t.textDocumentInfo} link="#">
|
||||||
<Icon slot="media" icon="icon-info"></Icon>
|
<Icon slot="media" icon="icon-info"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={t('ViewSettings.textHelp')} link="#">
|
<ListItem title={_t.textHelp} link="#">
|
||||||
<Icon slot="media" icon="icon-help"></Icon>
|
<Icon slot="media" icon="icon-help"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={t('ViewSettings.textAbout')} link="#">
|
<ListItem title={_t.textAbout} link="#">
|
||||||
<Icon slot="media" icon="icon-about"></Icon>
|
<Icon slot="media" icon="icon-about"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
|
|
|
@ -1,21 +1,82 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import DocumentSettings from '../document-settings/DocumentSettings'
|
import {DocumentSettings} from '../document-settings/DocumentSettings';
|
||||||
|
|
||||||
|
|
||||||
class DocumentSettingsController extends Component {
|
class DocumentSettingsController extends Component {
|
||||||
constructor(props) {
|
constructor (props) {
|
||||||
super(props);
|
super (props);
|
||||||
|
this.getMargins = this.getMargins.bind(this);
|
||||||
|
this.applyMargins = this.applyMargins.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onPageOrientation(value){
|
onPageOrientation (value){
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
api.change_PageOrient(value=='portrait');
|
if (api) {
|
||||||
|
api.change_PageOrient(value == 'portrait');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
onFormatChange (value) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
if (api) {
|
||||||
|
api.change_DocSize(value[0], value[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getMargins () {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
if (api) {
|
||||||
|
this.localSectionProps = api.asc_GetSectionProps();
|
||||||
|
if (this.localSectionProps) {
|
||||||
|
this.maxMarginsH = this.localSectionProps.get_H() - 26;
|
||||||
|
this.maxMarginsW = this.localSectionProps.get_W() - 127;
|
||||||
|
|
||||||
|
const top = this.localSectionProps.get_TopMargin();
|
||||||
|
const bottom = this.localSectionProps.get_BottomMargin();
|
||||||
|
const left = this.localSectionProps.get_LeftMargin();
|
||||||
|
const right = this.localSectionProps.get_RightMargin();
|
||||||
|
|
||||||
|
return {
|
||||||
|
top,
|
||||||
|
bottom,
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
maxMarginsW: this.maxMarginsW,
|
||||||
|
maxMarginsH: this.maxMarginsH
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyMargins (align, value) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
if (api) {
|
||||||
|
switch (align) {
|
||||||
|
case 'left':
|
||||||
|
this.localSectionProps.put_LeftMargin(value);
|
||||||
|
break;
|
||||||
|
case 'top':
|
||||||
|
this.localSectionProps.put_TopMargin(value);
|
||||||
|
break;
|
||||||
|
case 'right':
|
||||||
|
this.localSectionProps.put_RightMargin(value);
|
||||||
|
break;
|
||||||
|
case 'bottom':
|
||||||
|
this.localSectionProps.put_BottomMargin(value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
api.asc_SetSectionProps(this.localSectionProps);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
return (
|
return (
|
||||||
<DocumentSettings onPageOrientation={this.onPageOrientation} />
|
<DocumentSettings onPageOrientation={this.onPageOrientation}
|
||||||
|
onFormatChange={this.onFormatChange}
|
||||||
|
getMargins={this.getMargins}
|
||||||
|
applyMargins={this.applyMargins}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,22 +0,0 @@
|
||||||
import React, {Component} from 'react';
|
|
||||||
import {
|
|
||||||
Page,
|
|
||||||
Navbar
|
|
||||||
} from 'framework7-react';
|
|
||||||
|
|
||||||
export default class DocumentFormats extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const textDocumentFormats = "Document Formats";
|
|
||||||
const textBack = "Back";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Page>
|
|
||||||
<Navbar title={textDocumentFormats} backLink={textBack} />
|
|
||||||
<div>{textDocumentFormats}</div>
|
|
||||||
</Page>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -1,35 +1,163 @@
|
||||||
import React, {Component} from 'react';
|
import React, {useState} from 'react';
|
||||||
import {observer, inject} from "mobx-react";
|
import {observer, inject} from "mobx-react";
|
||||||
import {Page,Navbar,List,ListItem,BlockTitle} from 'framework7-react';
|
import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button} from 'framework7-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
const DocumentSettings = props => {
|
|
||||||
const textDocumentSettings = "Document Settings";
|
|
||||||
const textBack = "Back";
|
|
||||||
const textOrientation = "Orientation";
|
|
||||||
const textPortrait = "Portrait";
|
|
||||||
const textLandscape = "Landscape";
|
|
||||||
const textFormat = "Format";
|
|
||||||
const textMargins = "Margins";
|
|
||||||
|
|
||||||
const format = "A4";
|
|
||||||
const formatSize = "21 cm x 29.7 cm";
|
|
||||||
|
|
||||||
|
const PageDocumentFormats = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('Settings', {returnObjects: true});
|
||||||
const storeSettings = props.storeDocumentSettings;
|
const storeSettings = props.storeDocumentSettings;
|
||||||
|
const pageSizesIndex = storeSettings.pageSizesIndex;
|
||||||
|
const pageSizes = storeSettings.getPageSizesList();
|
||||||
|
const textMetric = Common.Utils.Metric.getCurrentMetricName();
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<Navbar title={textDocumentSettings} backLink={textBack} />
|
<Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
|
||||||
<BlockTitle>{textOrientation}</BlockTitle>
|
|
||||||
<List>
|
|
||||||
<ListItem radio title={textPortrait} name="orientation-checkbox" checked={storeSettings.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
|
|
||||||
<ListItem radio title={textLandscape} name="orientation-checkbox" checked={!storeSettings.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
|
|
||||||
</List>
|
|
||||||
<BlockTitle>{textFormat}</BlockTitle>
|
|
||||||
<List mediaList>
|
<List mediaList>
|
||||||
<ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
|
{pageSizes.map((item, index) => <ListItem key={index}
|
||||||
<ListItem checkbox title={textMargins} link="/margins/"></ListItem>
|
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 PageDocumentMargins = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('Settings', {returnObjects: true});
|
||||||
|
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
|
||||||
|
const margins = props.getMargins();
|
||||||
|
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) => {
|
||||||
|
const step = Common.Utils.Metric.fnRecalcToMM(Common.Utils.Metric.getCurrentMetric() === Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
|
||||||
|
let marginValue;
|
||||||
|
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') ? margins.maxMarginsW : margins.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.applyMargins(align, marginValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textMargins} backLink={_t.textBack} />
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textTop}>
|
||||||
|
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>
|
||||||
|
<div slot='after'>
|
||||||
|
<Segmented>
|
||||||
|
<Button outline className='decrement' onClick={() => {onChangeMargins('top', true)}}> - </Button>
|
||||||
|
<Button outline className='increment' onClick={() => {onChangeMargins('top', false)}}> + </Button>
|
||||||
|
</Segmented>
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textBottom}>
|
||||||
|
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}</div>
|
||||||
|
<div slot='after'>
|
||||||
|
<Segmented>
|
||||||
|
<Button outline className='decrement' onClick={() => {onChangeMargins('bottom', true)}}> - </Button>
|
||||||
|
<Button outline className='increment' onClick={() => {onChangeMargins('bottom', false)}}> + </Button>
|
||||||
|
</Segmented>
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textLeft}>
|
||||||
|
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}</div>
|
||||||
|
<div slot='after'>
|
||||||
|
<Segmented>
|
||||||
|
<Button outline className='decrement' onClick={() => {onChangeMargins('left', true)}}> - </Button>
|
||||||
|
<Button outline className='increment' onClick={() => {onChangeMargins('left', false)}}> + </Button>
|
||||||
|
</Segmented>
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textRight}>
|
||||||
|
<div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}</div>
|
||||||
|
<div slot='after'>
|
||||||
|
<Segmented>
|
||||||
|
<Button outline className='decrement' onClick={() => {onChangeMargins('right', true)}}> - </Button>
|
||||||
|
<Button outline className='increment' onClick={() => {onChangeMargins('right', false)}}> + </Button>
|
||||||
|
</Segmented>
|
||||||
|
</div>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageDocumentSettings = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('Settings', {returnObjects: true});
|
||||||
|
|
||||||
|
const storeSettings = props.storeDocumentSettings;
|
||||||
|
|
||||||
|
//Init Format
|
||||||
|
const curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
|
||||||
|
const pageSizesIndex = storeSettings.pageSizesIndex;
|
||||||
|
const widthDoc = storeSettings.widthDocument;
|
||||||
|
const heightDoc = storeSettings.heightDocument;
|
||||||
|
let textFormat;
|
||||||
|
let sizeW;
|
||||||
|
let sizeH;
|
||||||
|
if (pageSizesIndex === -1) {
|
||||||
|
textFormat = _t.textCustomSize;
|
||||||
|
sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(widthDoc).toFixed(2));
|
||||||
|
sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(heightDoc).toFixed(2));
|
||||||
|
} else {
|
||||||
|
const pageSizes = storeSettings.getPageSizesList();
|
||||||
|
textFormat = pageSizes[pageSizesIndex]['caption'];
|
||||||
|
sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][0]).toFixed(2));
|
||||||
|
sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][1]).toFixed(2));
|
||||||
|
}
|
||||||
|
const pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
|
||||||
|
<BlockTitle>{_t.textOrientation}</BlockTitle>
|
||||||
|
<List>
|
||||||
|
<ListItem radio title={_t.textPortrait} name="orientation-checkbox" checked={storeSettings.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
|
||||||
|
<ListItem radio title={_t.textLandscape} name="orientation-checkbox" checked={!storeSettings.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
|
||||||
|
</List>
|
||||||
|
<BlockTitle>{_t.textFormat}</BlockTitle>
|
||||||
|
<List mediaList>
|
||||||
|
<ListItem title={textFormat} subtitle={pageSizeTxt} link="/document-formats/" routeProps={{
|
||||||
|
onFormatChange: props.onFormatChange
|
||||||
|
}}></ListItem>
|
||||||
|
<ListItem title={_t.textMargins} link="/margins/" routeProps={{
|
||||||
|
getMargins: props.getMargins,
|
||||||
|
applyMargins: props.applyMargins
|
||||||
|
}}></ListItem>
|
||||||
</List>
|
</List>
|
||||||
</Page>
|
</Page>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject("storeDocumentSettings")(observer(DocumentSettings));
|
const DocumentFormats = inject("storeDocumentSettings")(observer(PageDocumentFormats));
|
||||||
|
const DocumentMargins = inject("storeDocumentSettings")(observer(PageDocumentMargins));
|
||||||
|
const DocumentSettings = inject("storeDocumentSettings")(observer(PageDocumentSettings));
|
||||||
|
|
||||||
|
export {
|
||||||
|
DocumentSettings,
|
||||||
|
DocumentFormats,
|
||||||
|
DocumentMargins
|
||||||
|
}
|
||||||
|
|
|
@ -1,22 +0,0 @@
|
||||||
import React, {Component} from 'react';
|
|
||||||
import {
|
|
||||||
Page,
|
|
||||||
Navbar
|
|
||||||
} from 'framework7-react';
|
|
||||||
|
|
||||||
export default class Margins extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const textMargins = "Margins";
|
|
||||||
const textBack = "Back";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Page>
|
|
||||||
<Navbar title={textMargins} backLink={textBack} />
|
|
||||||
<div>{textMargins}</div>
|
|
||||||
</Page>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -158,9 +158,12 @@ class MainController extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
const storeSettings = this.props.storeDocumentSettings;
|
const storeDocumentSettings = this.props.storeDocumentSettings;
|
||||||
this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
|
this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
|
||||||
storeSettings.isPortrait = isPortrait === true;
|
storeDocumentSettings.resetPortrait(isPortrait);
|
||||||
|
});
|
||||||
|
this.api.asc_registerCallback('asc_onDocSize', (w, h) => {
|
||||||
|
storeDocumentSettings.changeDocSize(w, h);
|
||||||
});
|
});
|
||||||
const storeFocusObjects = this.props.storeFocusObjects;
|
const storeFocusObjects = this.props.storeFocusObjects;
|
||||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
||||||
|
|
|
@ -1,16 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { bindActionCreators } from 'redux';
|
|
||||||
import { changePageOrient } from '../store/actions/actions';
|
|
||||||
import DocumentSettingsView from '../components/settings/document-settings/DocumentSettings';
|
|
||||||
|
|
||||||
const DocumentSettingsController = connect(
|
|
||||||
state => ({
|
|
||||||
isPortrait: state.settings.isPortrait
|
|
||||||
}),
|
|
||||||
dispatch => bindActionCreators({
|
|
||||||
changePageOrient
|
|
||||||
}, dispatch)
|
|
||||||
)(DocumentSettingsView);
|
|
||||||
|
|
||||||
export { DocumentSettingsController as DocumentSettings};
|
|
|
@ -1,6 +1,62 @@
|
||||||
|
import {action, observable, computed} from 'mobx';
|
||||||
import {action, observable} from 'mobx';
|
|
||||||
|
|
||||||
export class storeDocumentSettings {
|
export class storeDocumentSettings {
|
||||||
@observable isPortrait = true
|
@observable isPortrait = true;
|
||||||
|
@action resetPortrait (isPortrait) {
|
||||||
|
this.isPortrait = isPortrait === true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Document Formats
|
||||||
|
@observable widthDocument;
|
||||||
|
@observable heightDocument;
|
||||||
|
@action changeDocSize (width, height) {
|
||||||
|
let w = width;
|
||||||
|
let h = height;
|
||||||
|
if (!this.isPortrait) {
|
||||||
|
const tempW = w;
|
||||||
|
w = h;
|
||||||
|
h = tempW;
|
||||||
|
}
|
||||||
|
this.widthDocument = w;
|
||||||
|
this.heightDocument = h;
|
||||||
|
}
|
||||||
|
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 = -1;
|
||||||
|
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);
|
||||||
|
if (ind === -1) {
|
||||||
|
ind = -1;
|
||||||
|
}
|
||||||
|
return ind;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue