From 348bbf634142489b68c09fe6804b042a7dbdf9f1 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 17 Nov 2020 00:35:05 +0300 Subject: [PATCH] [DE mobile] Add format settings (size, margins) into document settings --- apps/documenteditor/mobile/locale/en.json | 9 +- .../src/components/settings/Settings.jsx | 21 +-- .../settings/controller/DocumentSettings.jsx | 75 +++++++- .../document-settings/DocumentFormats.jsx | 22 --- .../document-settings/DocumentSettings.jsx | 176 +++++++++++++++--- .../settings/document-settings/Margins.jsx | 22 --- .../mobile/src/controller/Main.jsx | 7 +- .../mobile/src/controllers/Settings.jsx | 16 -- .../mobile/src/store/documentSettings.js | 62 +++++- 9 files changed, 301 insertions(+), 109 deletions(-) delete mode 100644 apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx delete mode 100644 apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx delete mode 100644 apps/documenteditor/mobile/src/controllers/Settings.jsx diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 996047ddc..c4abfe0d9 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -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:" diff --git a/apps/documenteditor/mobile/src/components/settings/Settings.jsx b/apps/documenteditor/mobile/src/components/settings/Settings.jsx index fb406ceae..93eb1d0c6 100644 --- a/apps/documenteditor/mobile/src/components/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/Settings.jsx @@ -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 = - {!props.inPopover && {t('ViewSettings.textDone')}} + const _t = t('Settings', {returnObjects: true}); + const navbar = + {!props.inPopover && {_t.textDone}} ; const onoptionclick = page => { @@ -62,16 +61,16 @@ const SettingsList = withTranslation()(props => { - + - + - + - + diff --git a/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx index 9908529af..b0a11ca68 100644 --- a/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx @@ -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 ( - + ) } } diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx deleted file mode 100644 index bfab9c16d..000000000 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx +++ /dev/null @@ -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 ( - - -
{textDocumentFormats}
- - ) - } -}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx index 935c37b11..6f42492be 100644 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx @@ -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 ( - - {textOrientation} - - props.onPageOrientation('portrait')}> - props.onPageOrientation('landscape')}> - - {textFormat} + - - + {pageSizes.map((item, index) => {props.onFormatChange(item.value)}} + >)} + + + ) +}; + +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 ( + + + + +
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}
+
+ + + + +
+ + +
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2))+ ' ' + metricText}
+
+ + + + +
+ + +
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2))+ ' ' + metricText}
+
+ + + + +
+ + +
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2))+ ' ' + metricText}
+
+ + + + +
+ + + + ) +}; + +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 ( + + + {_t.textOrientation} + + props.onPageOrientation('portrait')}> + props.onPageOrientation('landscape')}> + + {_t.textFormat} + + + ) }; -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 +} diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx deleted file mode 100644 index 3b585ab50..000000000 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx +++ /dev/null @@ -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 ( - - -
{textMargins}
- - ) - } -}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 6a20a6af3..69871530e 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -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 => { diff --git a/apps/documenteditor/mobile/src/controllers/Settings.jsx b/apps/documenteditor/mobile/src/controllers/Settings.jsx deleted file mode 100644 index e94391ca0..000000000 --- a/apps/documenteditor/mobile/src/controllers/Settings.jsx +++ /dev/null @@ -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}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index bfe004a91..1d7196575 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -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; + } + }