Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Add format settings (size, margins) into document settings

Browse source
This commit is contained in:
JuliaSvinareva 2020-11-17 00:35:05 +03:00
parent 61999b2037
commit 348bbf6341
9 changed files with 301 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/documenteditor/mobile/locale/en.json
View file

@ -1,5 +1,5 @@
{
"ViewSettings": {
"Settings": {
"textSettings": "Settings",
"textDone": "Done",
"textFindAndReplace": "Find and Replace",
@ -15,7 +15,12 @@
"textLandscape": "Landscape",
"textFormat": "Format",
"textMargins": "Margins",
"textBack": "Back"
"textBack": "Back",
"textCustomSize": "Custom Size",
"textTop": "Top",
"textBottom": "Bottom",
"textLeft": "Left",
"textRight": "Right"
},
"Collaboration": {
"textEditUser": "Users who are editing the file:"

21
apps/documenteditor/mobile/src/components/settings/Settings.jsx
View file

@ -4,9 +4,8 @@ import { withTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device'
import DocumentSettingsController from "../settings/controller/DocumentSettings.jsx";
import Margins from "../settings/document-settings/Margins.jsx";
import DocumentFormats from "../settings/document-settings/DocumentFormats.jsx";
import DocumentSettingsController from "../settings/controller/DocumentSettings";
import { DocumentFormats, DocumentMargins } from "../settings/document-settings/DocumentSettings";
const routes = [
{
@ -19,7 +18,7 @@ const routes = [
},
{
path: '/margins/',
component: Margins,
component: DocumentMargins,
},
{
path: '/document-formats/',
@ -30,9 +29,9 @@ const routes = [
const SettingsList = withTranslation()(props => {
const {t} = props;
const _t = t('ViewSettings', {returnObjects: true});
const navbar = <Navbar title={t('ViewSettings.textSettings')}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link></NavRight>}
const _t = t('Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
@ -62,16 +61,16 @@ const SettingsList = withTranslation()(props => {
<ListItem title={_t.textDownload} link="#">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textPrint')}>
<ListItem title={_t.textPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
<ListItem title={_t.textDocumentInfo} link="#">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textHelp')} link="#">
<ListItem title={_t.textHelp} link="#">
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textAbout')} link="#">
<ListItem title={_t.textAbout} link="#">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
</List>

75
apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx
View file

@ -1,21 +1,82 @@
import React, {Component} from 'react';
import DocumentSettings from '../document-settings/DocumentSettings'
import {DocumentSettings} from '../document-settings/DocumentSettings';
class DocumentSettingsController extends Component {
constructor(props) {
super(props);
constructor (props) {
super (props);
this.getMargins = this.getMargins.bind(this);
this.applyMargins = this.applyMargins.bind(this);
}
onPageOrientation(value){
onPageOrientation (value){
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 (
<DocumentSettings onPageOrientation={this.onPageOrientation} />
<DocumentSettings onPageOrientation={this.onPageOrientation}
onFormatChange={this.onFormatChange}
getMargins={this.getMargins}
applyMargins={this.applyMargins}
/>
)
}
}

22
apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx
View file

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

176
apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx
View file

@ -1,35 +1,163 @@
import React, {Component} from 'react';
import React, {useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page,Navbar,List,ListItem,BlockTitle} from 'framework7-react';
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";
import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button} from 'framework7-react';
import { useTranslation } from 'react-i18next';
const PageDocumentFormats = props => {
const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const storeSettings = props.storeDocumentSettings;
const pageSizesIndex = storeSettings.pageSizesIndex;
const pageSizes = storeSettings.getPageSizesList();
const textMetric = Common.Utils.Metric.getCurrentMetricName();
return (
<Page>
<Navbar title={textDocumentSettings} backLink={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>
<Navbar title={_t.textDocumentSettings} backLink={_t.textBack} />
<List mediaList>
<ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
<ListItem checkbox title={textMargins} link="/margins/"></ListItem>
{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 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>
</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
}

22
apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx
View file

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

7
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -158,9 +158,12 @@ class MainController extends Component {
}
bindEvents() {
const storeSettings = this.props.storeDocumentSettings;
const storeDocumentSettings = this.props.storeDocumentSettings;
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;
this.api.asc_registerCallback('asc_onFocusObject', objects => {

16
apps/documenteditor/mobile/src/controllers/Settings.jsx
View file

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

62
apps/documenteditor/mobile/src/store/documentSettings.js
View file

@ -1,6 +1,62 @@
import {action, observable} from 'mobx';
import {action, observable, computed} from 'mobx';
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;
}
}