diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 90a7800b9..266f24b3e 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/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": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 2f93ddeb8..4a834e813 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/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) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx new file mode 100644 index 000000000..3ac59f0d2 --- /dev/null +++ b/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 ( + + ) + } +} + +export default inject("storeSpreadsheetSettings")(observer(SpreadsheetSettingsController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index eb5e244fe..ebf80f0ac 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/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(), diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js new file mode 100644 index 000000000..f466f3c6d --- /dev/null +++ b/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; + } + +} diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 4a4ee90c4..d0940cae1 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/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/', - 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} {!props.inPopover && - - - + + + } - - + + @@ -54,7 +64,7 @@ const SettingsList = withTranslation()(props => { - + diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx new file mode 100644 index 000000000..461b37081 --- /dev/null +++ b/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 ( + + + + { + allSchemes ? allSchemes.map((scheme, index) => { + return ( + { + if(index !== curScheme) { + setScheme(index); + props.onColorSchemeChange(index); + }; + }}> +
+ + { + 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 ( + + ) + } + }) + } + + +
+ + ) + }) : null + } + + + + ) +}; + +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 ( + + + + {pageSizes.map((item, index) => ( + {props.onFormatChange(item.value)}}> + + ))} + + + ) +}; + +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 ( + + + + + {!isAndroid &&
{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+ + + {!isAndroid &&
{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+ + + {!isAndroid &&
{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+ + + {!isAndroid &&
{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+ + + + ) +}; + +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 ( + + + {_t.textOrientation} + + { + storeSpreadsheetSettings.resetPortrait(true); + props.onOrientationChange(0)}}> + + { + storeSpreadsheetSettings.resetPortrait(false); + props.onOrientationChange(1)}}> + + + {_t.textFormat} + + + + + + + {_t.textHideHeadings} + { + storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings); + props.clickCheckboxHideHeadings(!isHideHeadings) + }} /> + + + {_t.textHideGridlines} + { + storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines); + props.clickCheckboxHideGridlines(!isHideGridlines) + }} /> + + + + + + + ) +}; + +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 +};