diff --git a/apps/common/main/lib/util/LanguageInfo.js b/apps/common/main/lib/util/LanguageInfo.js index b672b15c6..7a6031c5b 100644 --- a/apps/common/main/lib/util/LanguageInfo.js +++ b/apps/common/main/lib/util/LanguageInfo.js @@ -38,10 +38,11 @@ * */ -if (Common === undefined) { - var Common = {}; +if ( window.Common === undefined ) { + window.Common = {}; } +// TODO: move to Common.Utils Common.util = Common.util||{}; Common.util.LanguageInfo = new(function() { diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index e16403d72..2f1db482a 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => { {row.map((effect, index) => { return( {onColorClick(effect.color, effect.effectId, effect.effectValue)}} > diff --git a/apps/common/mobile/lib/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx index 8a0983a5d..8727aa450 100644 --- a/apps/common/mobile/lib/controller/Search.jsx +++ b/apps/common/mobile/lib/controller/Search.jsx @@ -6,7 +6,7 @@ const SearchController = props => { console.log('on search: ' + params); }; - return + return }; export {SearchController, SearchView, SearchSettingsView}; diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 8ab31b908..17e4cfb4d 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -1,3 +1,4 @@ + import React, { Component } from 'react'; import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react'; import { Toggle } from 'framework7-react'; @@ -60,9 +61,9 @@ class SearchSettingsView extends Component { const extra = this.extraSearchOptions(); const content = - {/* */} - {/* {navbar} */} - {extra} + {/* + {navbar} */} + {extra} {/* */} ; return ( @@ -108,13 +109,13 @@ class SearchView extends Component { const $editor = $$('#editor_sdk'); // const $replaceLink = $$('#replace-link'); - - if (false /*iOSVersion() < 13*/) { - // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); - // $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me)); + + if (false /* iOSVersion < 13 */) { + // $editor.on('mousedown touchstart', this.onEditorTouchStart.bind(this)); + // $editor.on('mouseup touchend', this.onEditorTouchEnd.bind(this)); } else { - // $editor.single('pointerdown', this.onEditorTouchStart, me)); - // $editor.single('pointerup', _.bind(me.onEditorTouchEnd, me)); + // $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); + // $editor.on('pointerup', this.onEditorTouchEnd.bind(this)); } $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); @@ -213,7 +214,7 @@ class SearchView extends Component { distance = 0; } - // const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : + // const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 : // Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); if (distance < 1) { diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index c6a6c1b9b..139fa586b 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -1,7 +1,7 @@ // Encoded SVG Background -.encoded-svg-mask(@svg) { +.encoded-svg-mask(@svg, @color: @themeColor) { @url: `encodeURIComponent(@{svg})`; - background-color: @themeColor; + background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); } diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index f45704f6c..4f858bb52 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -2,8 +2,8 @@ .device-ios { @blockTitleColor: #6d6d72; @item-border-color: #c8c7cc; - --f7-list-item-border-color: @item-border-color; + @darkGreen: #40865c; --f7-navbar-link-color: @themeColor; --f7-navbar-text-color: @black; @@ -391,6 +391,33 @@ } } + // input[type="number"] + + input[type="number"] { + &::placeholder, + &::-webkit-input-placeholder, + &::-moz-placeholder, + &:-moz-placeholder, + &:-ms-input-placeholder + { + color: @darkGreen; + } + } + + // Regional Settings + + .regional-settings { + .item-title-row { + display: flex; + justify-content: flex-start; + align-items: center; + .item-title { + margin-left: 20px; + white-space: normal; + } + } + } + // Find and Replace .navbar { @@ -447,6 +474,7 @@ &.replace { height: 88px; .searchbar-inner { + height: 100%; &__center { .searchbar-input-wrap { margin: 8px 0; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 9e2afe6f5..6887a13fc 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -3,6 +3,9 @@ @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; @white: #fff; + @darkGreen: #40865c; + @darkGrey: #757575; + --f7-navbar-shadow-image: none; --f7-radio-active-color: @themeColor; --f7-toggle-active-color: @themeColor; @@ -278,7 +281,9 @@ } } } + // Color palette + #color-picker { .right-block { .button-round { @@ -287,6 +292,26 @@ } } + // Regional Settings + + .regional-settings { + .list { + .item-inner { + margin-left: 16px; + } + .item-title-row { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + flex-direction: row-reverse; + .item-title { + white-space: normal; + } + } + } + } + // Find and Replace .searchbar-inner { diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index ea20b6639..53f4f6848 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -1,3 +1,4 @@ +@import './about'; @white: #ffffff; @black: #000000; @@ -5,7 +6,6 @@ @darkGray: #6d6d72; @green: #4cd964; @red: #f00; -@background-normal: @white; @autoColor: @black; .popup, .popover, .sheet-modal { @@ -303,7 +303,7 @@ } &.active { .color-auto { - box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; border-radius: 1px; } } @@ -324,7 +324,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; z-index: 1; border-radius: 1px; } @@ -349,7 +349,7 @@ .dynamic-colors { .empty-color { - background-color: @background-normal; + background-color: @white; } } } @@ -421,3 +421,248 @@ } } } + +// Cell styles + +.cell-styles-list { + ul { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + } + li { + border: 0.5px solid #c8c7cc; + padding: 2px; + background-repeat: no-repeat; + width: 106px; + height: 56px; + margin-bottom: 10px; + background-position: center; + } + .item-inner:after { + display: none; + } + .item-theme.active:before { + content: ''; + position: absolute; + width: 22px; + height: 22px; + right: 2px; + bottom: 2px; + z-index: 1; + .encoded-svg-background(''); + } +} + +// input[type="number"] + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +// Regional Settings + +.icon.lang-flag { + background-size: 48px auto; + background-image: url(../img/controls/flags@2x.png); +} + +.icon.lang-flag { + width: 16px; + height: 12px; +} + +.lang-flag.ca, +.lang-flag.ca-ES { + background-position: 0 0; +} +.lang-flag.cs, +.lang-flag.cs-CZ { + background-position: -16px 0; +} +.lang-flag.da, +.lang-flag.da-DK { + background-position: -32px 0; +} +.lang-flag.de, +.lang-flag.de-DE { + background-position: 0 -12px; +} +.lang-flag.el, +.lang-flag.el-GR { + background-position: -16px -12px; +} +.lang-flag.en, +.lang-flag.en-US { + background-position: -32px -12px; +} +.lang-flag.fr, +.lang-flag.fr-FR { + background-position: 0 -24px; +} +.lang-flag.hu, +.lang-flag.hu-HU { + background-position: -16px -24px; +} +.lang-flag.it, +.lang-flag.it-IT { + background-position: -32px -24px; +} +.lang-flag.ko, +.lang-flag.ko-KR { + background-position: 0 -36px; +} +.lang-flag.nl, +.lang-flag.nl-NL { + background-position: -16px -36px; +} +.lang-flag.nb, +.lang-flag.nb-NO, +.lang-flag.nn, +.lang-flag.nn-NO { + background-position: -32px -36px; +} +.lang-flag.pl, +.lang-flag.pl-PL { + background-position: 0 -48px; +} +.lang-flag.pt, +.lang-flag.pt-BR { + background-position: -16px -48px; +} +.lang-flag.ro, +.lang-flag.ro-RO { + background-position: -32px -48px; +} +.lang-flag.ru, +.lang-flag.ru-RU { + background-position: 0 -60px; +} +.lang-flag.sv, +.lang-flag.sv-SE { + background-position: -32px -60px; +} +.lang-flag.tr, +.lang-flag.tr-TR { + background-position: 0 -72px; +} +.lang-flag.uk, +.lang-flag.uk-UA { + background-position: -16px -72px; +} +.lang-flag.lv, +.lang-flag.lv-LV { + background-position: -32px -72px; +} +.lang-flag.lt, +.lang-flag.lt-LT { + background-position: 0 -84px; +} +.lang-flag.vi, +.lang-flag.vi-VN { + background-position: -16px -84px; +} +.lang-flag.de-CH { + background-position: -32px -84px; +} +.lang-flag.pt-PT { + background-position: -16px -96px; +} +.lang-flag.de-AT { + background-position: -32px -96px; +} +.lang-flag.es, +.lang-flag.es-ES { + background-position: 0 -108px; +} +.lang-flag.en-GB { + background-position: -32px -108px; +} +.lang-flag.en-AU { + background-position: 0 -120px; +} +.lang-flag.az-Latn-AZ { + background-position: -16px -120px; +} +.lang-flag.id, +.lang-flag.id-ID { + background-position: -32px -120px; +} +.lang-flag.bg, +.lang-flag.bg-BG { + background-position: 0 -132px; +} +.lang-flag.ca-ES-valencia { + background-position: -16px -132px; +} +.lang-flag.en-CA { + background-position: -32px -132px; +} +.lang-flag.en-ZA { + background-position: 0 -144px; +} +.lang-flag.eu, +.lang-flag.eu-ES { + background-position: -16px -144px; +} +.lang-flag.gl, +.lang-flag.gl-ES { + background-position: -32px -144px; +} +.lang-flag.hr, +.lang-flag.hr-HR { + background-position: 0 -156px; +} +.lang-flag.lb, +.lang-flag.lb-LU { + background-position: -16px -156px; +} +.lang-flag.mn, +.lang-flag.mn-MN { + background-position: -32px -156px; +} +.lang-flag.sl, +.lang-flag.sl-SI { + background-position: 0 -168px; +} +.lang-flag.sr, +.lang-flag.sr-Cyrl-RS, +.lang-flag.sr-Latn-RS { + background-position: -16px -168px; +} +.lang-flag.sk, +.lang-flag.sk-SK { + background-position: -32px -168px; +} +.lang-flag.kk, +.lang-flag.kk-KZ { + background-position: 0 -180px; +} +.lang-flag.fi, +.lang-flag.fi-FI, +.lang-flag.sv-FI { + background-position: -16px -180px; +} +.lang-flag.zh, +.lang-flag.zh-CN { + background-position: -32px -180px; +} +.lang-flag.ja, +.lang-flag.ja-JP { + background-position: 0 -192px; +} +.lang-flag.es-MX { + background-position: -16px -192px; +} + + + + + + + diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 204df9989..d10587d10 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -1,4 +1,3 @@ - .device-ios { i.icon { &.icon_mask { diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index ef7b49987..7e9c08d45 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -1,4 +1,3 @@ - .device-android { i.icon { &.icon_mask { diff --git a/apps/common/mobile/resources/less/variables.less b/apps/common/mobile/resources/less/variables.less index 2ba2c9402..691855ff5 100644 --- a/apps/common/mobile/resources/less/variables.less +++ b/apps/common/mobile/resources/less/variables.less @@ -1,3 +1,9 @@ +.md { + --background-normal: #f1f1f1; +} + +@background-normal: var(--background-normal, #fff); + @border-regular-control: #cbcbcb; @text-normal: #000; diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index f33102459..2d9626f50 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -84,7 +84,230 @@ "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "notcriticalErrorTitle": "Warning", "textPictureFromLibrary": "Picture from Library", - "textPictureFromURL": "Picture from URL" + "textPictureFromURL": "Picture from URL", + "textTextColor": "Text Color", + "textFillColor": "Fill Color", + "textTextFormat": "Text Format", + "textTextOrientation": "Text Orientation", + "textBorderStyle": "Border Style", + "textFonts": "Fonts", + "textAuto": "Auto", + "textPt": "pt", + "textFormat": "Format", + "textCellStyles": "Cell Styles", + "textAlignLeft": "Align Left", + "textAlignCenter": "Align Center", + "textAlignRight": "Align Right", + "textJustified": "Justified", + "textAlignTop": "Align Top", + "textAlignMiddle": "Align Middle", + "textAlignBottom": "Align Bottom", + "textWrapText": "Wrap Text", + "textHorizontalText": "Horizontal Text", + "textAngleCounterclockwise": "Angle Counterclockwise", + "textAngleClockwise": "Angle Clockwise", + "textVerticalText": "Vertical Text", + "textRotateTextUp": "Rotate Text Up", + "textRotateTextDown": "Rotate Text Down", + "textNoBorder": "No Border", + "textAllBorders": "All Borders", + "textBottomBorder": "Bottom Border", + "textTopBorder": "Top Border", + "textLeftBorder": "Left Border", + "textRightBorder": "Right Border", + "textInsideBorders": "Inside Borders", + "textInsideVerticalBorder": "Inside Vertical Border", + "textInsideHorizontalBorder": "Inside Horizontal Border", + "textDiagonalUpBorder": "Diagonal Up Border", + "textDiagonalDownBorder": "Diagonal Down Border", + "textThin": "Thin", + "textMedium": "Medium", + "textThick": "Thick", + "textGeneral": "General", + "textNumber": "Number", + "textInteger": "Integer", + "textScientific": "Scientific", + "textAccounting": "Accounting", + "textCurrency": "Currency", + "textDate": "Date", + "textTime": "Time", + "textPercentage": "Percentage", + "textText": "Text", + "textDollar": "Dollar", + "textEuro": "Euro", + "textPound": "Pound", + "textRouble": "Rouble", + "textYen": "Yen", + "textChart": "Chart", + "textDesign": "Design", + "textVerticalAxis": "Vertical Axis", + "textHorizontalAxis": "Horizontal Axis", + "textRemoveChart": "Remove Chart", + "textLayout": "Layout", + "textType": "Type", + "textChartTitle": "Chart Title", + "textLegend": "Legend", + "textAxisTitle": "Axis Title", + "textHorizontal": "Horizontal", + "textVertical": "Vertical", + "textGridlines": "Gridlines", + "textDataLabels": "Data Labels", + "textNone": "None", + "textOverlay": "Overlay", + "textNoOverlay": "No Overlay", + "textLeft": "Left", + "textTop": "Top", + "textRight": "Right", + "textBottom": "Bottom", + "textLeftOverlay": "Left Overlay", + "textRightOverlay": "Right Overlay", + "textRotated": "Rotated", + "textMajor": "Major", + "textMinor": "Minor", + "textMajorAndMinor": "Major And Minor", + "textCenter": "Center", + "textInnerBottom": "Inner Bottom", + "textInnerTop": "Inner Top", + "textOuterTop": "Outer Top", + "textFit": "Fit Width", + "textMinimumValue": "Minimum Value", + "textMaximumValue": "Maximum Value", + "textAxisCrosses": "Axis Crosses", + "textDisplayUnits": "Display Units", + "textValuesInReverseOrder": "Values in Reverse Order", + "textTickOptions": "Tick Options", + "textMajorType": "Major Type", + "textMinorType": "Minor Type", + "textLabelOptions": "Label Options", + "textLabelPosition": "Label Position", + "textAxisOptions": "Axis Options", + "textValue": "Value", + "textHundreds": "Hundreds", + "textThousands": "Thousands", + "textMillions": "Millions", + "textBillions": "Billions", + "textTrillions": "Trillions", + "textTenThousands": "10 000", + "textHundredThousands": "100 000", + "textTenMillions": "10 000 000", + "textHundredMil": "100 000 000", + "textCross": "Cross", + "textIn": "In", + "textOut": "Out", + "textLow": "Low", + "textHigh": "High", + "textNextToAxis": "Next to Axis", + "textCrossesValue": "Crosses Value", + "textOnTickMarks": "On Tick Marks", + "textBetweenTickMarks": "Between Tick Marks", + "textAxisPosition": "Axis Position", + "textHyperlink": "Hyperlink", + "textLinkType": "Link Type", + "textLink": "Link", + "textSheet": "Sheet", + "textRange": "Range", + "textDisplay": "Display", + "textScreenTip": "Screen Tip", + "textEditLink": "Edit Link", + "textRemoveLink": "Remove Link", + "textRequired": "Required", + "textInternalDataRange": "Internal Data Range", + "textExternalLink": "External Link", + "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", + "textDownloadAs": "Download As", + "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?", + "notcriticalErrorTitle": "Warning", + "txtEncoding": "Encoding", + "txtDelimiter": "Delimiter", + "txtSpace": "Space", + "txtTab": "Tab", + "advCSVOptions": "Choose CSV Options", + "advDRMOptions": "Protected File", + "advDRMEnterPassword": "You password please:", + "advDRMPassword": "Password", + "closeButtonText": "Close File", + "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", + "textCancel": "Cancel", + "textUnitOfMeasurement": "Unit Of Measurement", + "textCentimeter": "Centimeter", + "textPoint": "Point", + "textInch": "Inch", + "textMacrosSettings": "Macros Settings", + "textFormulaLanguage": "Formula Language", + "textRegionalSettings": "Regional Settings", + "textCommentingDisplay": "Commenting Display", + "textComments": "Comments", + "textResolvedComments": "Resolved Comments", + "textR1C1Style": "R1C1 Reference Style", + "textDisableAll": "Disable All", + "textDisableAllMacrosWithoutNotification": "Disable all macros without a notification", + "textShowNotification": "Show Notification", + "textDisableAllMacrosWithNotification": "Disable all macros with a notification", + "textEnableAll": "Enable All", + "textEnableAllMacrosWithoutNotification": "Enable all macros without a notification", + "textSpreadsheetTitle": "Spreadsheet Title", + "textOwner": "Owner", + "textLocation": "Location", + "textUploaded": "Uploaded", + "textTitle": "Title", + "textSubject": "Subject", + "textComment": "Comment", + "textLastModified": "Last Modified", + "textLastModifiedBy": "Last Modified By", + "textCreated": "Created", + "textApplication": "Application", + "textAuthor": "Author", + "textVersion": "Version", + "textEmail": "Email", + "textAddress": "Address", + "textTel": "Tel", + "textPoweredBy": "Powered By", + "textFind": "Find", + "textSearch": "Search", + "textReplace": "Replace", + "textMatchCase": "Match Case", + "textMatchCell": "Match Cell", + "textSearchIn": "Search In", + "textWorkbook": "Workbook", + "textSheet": "Sheet", + "textHighlightRes": "Highlight results", + "textByColumns": "By columns", + "textByRows": "By rows", + "textSearchBy": "Search", + "textLookIn": "Look In", + "textFormulas": "Formulas", + "textValues": "Values", + "textNoTextFound": "Text not found", + "textReplaceAll": "Replace All" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index b396f5a1a..4f140b7b8 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -4,8 +4,9 @@ import { inject } from "mobx-react"; import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx' +import { onAdvancedOptions } from './settings/Download.jsx'; -@inject("storeFocusObjects") +@inject("storeAppOptions", "storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo") class MainController extends Component { constructor(props) { super(props) @@ -52,6 +53,8 @@ class MainController extends Component { me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, me.textAnonymous); me.appOptions.lang = me.editorConfig.lang; + this.props.storeAppOptions.setConfigOptions(this.editorConfig); + // var value = Common.localStorage.getItem("sse-settings-regional"); // if (value!==null) // this.api.asc_setLocale(parseInt(value)); @@ -92,8 +95,10 @@ class MainController extends Component { let _permissions = Object.assign({}, data.doc.permissions), _user = new Asc.asc_CUserInfo(); - _user.put_Id(this.appOptions.user.id); - _user.put_FullName(this.appOptions.user.fullname); + const _userOptions = this.props.storeAppOptions.user; + + _user.put_Id(_userOptions.id); + _user.put_FullName(_userOptions.fullname); docInfo = new Asc.asc_CDocInfo(); docInfo.put_Id(data.doc.key); @@ -124,6 +129,12 @@ class MainController extends Component { this.api.asc_enableKeyEvents(true); // Common.SharedSettings.set('document', data.doc); + + // Document Info + + const storeSpreadsheetInfo = this.props.storeSpreadsheetInfo; + + storeSpreadsheetInfo.setDataDoc(this.document); }; const onEditorPermissions = params => { @@ -131,6 +142,8 @@ class MainController extends Component { const licType = params.asc_getLicenseType(); me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); + + this.props.storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions); // me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review // (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined // (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true @@ -204,18 +217,68 @@ 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; + const storeChartSettings = this.props.storeChartSettings; + const styleSize = storeCellSettings.styleSize; this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { - // console.log(cellInfo); + console.log(cellInfo); + storeFocusObjects.resetCellInfo(cellInfo); + storeCellSettings.initCellSettings(cellInfo); + storeTextSettings.initTextSettings(cellInfo); + let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); - storeFocusObjects.resetFocusObjects(selectedObjects); + + if(selectedObjects.length) { + storeFocusObjects.resetFocusObjects(selectedObjects); + + // Chart Settings + + if (storeFocusObjects.chartObject) { + storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType())); + } + } + }); + + this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height); + + this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => { + storeCellSettings.initEditorFonts(fonts, select); + storeTextSettings.initEditorFonts(fonts, select); + }); + + this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => { + console.log(fontObj) + storeCellSettings.initFontInfo(fontObj); + storeTextSettings.initFontInfo(fontObj); + }); + + this.api.asc_registerCallback('asc_onInitEditorStyles', styles => { + storeCellSettings.initCellStyles(styles); }); this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => { Common.Utils.ThemeColor.setColors(colors, standart_colors); }); + + // Spreadsheet Settings + + this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => { + storeSpreadsheetSettings.addSchemes(schemes); + }); + + // Downloaded Advanced Options + + this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => { + const {t} = this.props; + const _t = t("Settings", { returnObjects: true }); + onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this.props.storeAppOptions.canRequestClose); + }); + } _onLongActionEnd(type, id) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx new file mode 100644 index 000000000..c5da9a6b1 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx @@ -0,0 +1,209 @@ +import React, { Fragment, useEffect } from 'react'; +import { List, ListItem, Toggle, BlockTitle, Navbar, NavRight, Link, Page } from 'framework7-react'; +import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; +import { f7 } from 'framework7-react'; +import { withTranslation } from 'react-i18next'; +import { Dom7 } from 'framework7'; +import { Device } from '../../../../common/mobile/utils/device'; + +class SearchSettings extends SearchSettingsView { + constructor(props) { + super(props); + + this.onToggleMarkResults = this.onToggleMarkResults.bind(this); + } + + onToggleMarkResults(checked) { + const api = Common.EditorApi.get(); + api.asc_selectSearchingResults(checked); + } + + extraSearchOptions() { + const anc_markup = super.extraSearchOptions(); + const show_popover = !Device.phone; + const { t } = this.props; + const _t = t("View.Settings", { returnObjects: true }); + + const markup = ( + + + {!show_popover && + + {_t.textDone} + + } + + + this.onFindReplaceClick('find')} /> + this.onFindReplaceClick('replace')} /> + + {_t.textSearchIn} + + this.setState({ + searchIn: 0 + })} /> + this.setState({ + searchIn: 1 + })} /> + + {_t.textSearchBy} + + this.setState({ + searchBy: 0 + })} /> + this.setState({ + searchBy: 1 + })} /> + + {_t.textLookIn} + + this.setState({ + lookIn: 0 + })} /> + this.setState({ + lookIn: 1 + })} /> + + + + this.setState({ + isMatchCase: !this.state.isMatchCase + })} /> + + + this.setState({ + isMatchCell: !this.state.isMatchCell + })} /> + + + + + + + ) + + return {...anc_markup, ...markup}; + } +} + +class SESearchView extends SearchView { + constructor(props) { + super(props); + } + + searchParams() { + let params = super.searchParams(); + const $$ = Dom7; + + const checkboxMatchCase = f7.toggle.get('.toggle-match-case'), + checkboxMatchCell = f7.toggle.get('.toggle-match-cell'), + checkboxMarkResults = f7.toggle.get('.toggle-mark-results'), + checkboxSearchIn = $$('[name="search-in-checkbox"]:checked')[0], + checkboxSearchBy = $$('[name="search-by-checkbox"]:checked')[0], + checkboxLookIn = $$('[name="look-in-checkbox"]:checked')[0]; + + const searchOptions = { + caseSensitive: checkboxMatchCase.checked, + highlight: checkboxMarkResults.checked, + matchCell: checkboxMatchCell.checked, + searchIn: checkboxSearchIn.value, + searchBy: checkboxSearchBy.value, + lookIn: checkboxLookIn.value, + }; + + return {...params, ...searchOptions}; + } + + onSearchbarShow(isshowed, bar) { + super.onSearchbarShow(isshowed, bar); + + const api = Common.EditorApi.get(); + if ( isshowed ) { + const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); + api.asc_selectSearchingResults(checkboxMarkResults.checked); + } else api.asc_selectSearchingResults(false); + } +} + +const Search = withTranslation()(props => { + const { t } = props; + const _t = t('View.Settings', {returnObjects: true}); + + const onSearchQuery = params => { + const api = Common.EditorApi.get(); + + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setScanForward(params.forward); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + + if (!api.asc_findText(options)) { + f7.dialog.alert(null, _t.textNoTextFound); + } + } + }; + + const onReplaceQuery = params => { + const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + api.isReplaceAll = false; + + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setReplaceWith(params.replace); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + options.asc_setIsReplaceAll(false); + + api.asc_replaceText(options); + } + } + + const onReplaceAllQuery = params => { + const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + api.isReplaceAll = true; + + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setReplaceWith(params.replace); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + options.asc_setIsReplaceAll(true); + + api.asc_replaceText(options); + } + } + + return +}); + +const SearchSettingsWithTranslation = withTranslation()(SearchSettings); + +export {Search, SearchSettingsWithTranslation as SearchSettings} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index d74d69b64..22c23b7ae 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -2,16 +2,172 @@ import React, {Component} from 'react'; import { f7 } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; -import EditCell from '../../view/edit/EditCell'; +import { EditCell } from '../../view/edit/EditCell'; class EditCellController extends Component { constructor (props) { super(props); } + toggleBold(value) { + const api = Common.EditorApi.get(); + api.asc_setCellBold(value); + } + + toggleItalic(value) { + const api = Common.EditorApi.get(); + api.asc_setCellItalic(value); + + } + + toggleUnderline(value) { + const api = Common.EditorApi.get(); + api.asc_setCellUnderline(value); + } + + onStyleClick(type) { + const api = Common.EditorApi.get(); + api.asc_setCellStyle(type); + } + + onTextColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color)); + } + + onFontSize(curSize, isDecrement) { + const api = Common.EditorApi.get(); + let size = curSize; + + if (isDecrement) { + typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size); + } else { + typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size); + } + + if (typeof size !== 'undefined') { + api.asc_setCellFontSize(size); + } + } + + onFontClick(name) { + const api = Common.EditorApi.get(); + + if (name) { + api.asc_setCellFontName(name); + } + } + + onHAlignChange(value) { + const api = Common.EditorApi.get(); + let type; + + if (value == 'center') { + type = AscCommon.align_Center; + } else if (value == 'right') { + type = AscCommon.align_Right; + } else if (value == 'justify') { + type = AscCommon.align_Justify; + } else if (value == 'left') { + type = AscCommon.align_Left; + } + + api.asc_setCellAlign(type); + } + + onVAlignChange(value) { + const api = Common.EditorApi.get(); + let type; + + if (value == 'top') { + type = Asc.c_oAscVAlign.Top; + } else if (value == 'center') { + type = Asc.c_oAscVAlign.Center; + } else if (value == 'bottom') { + type = Asc.c_oAscVAlign.Bottom; + } + + api.asc_setCellVertAlign(type); + } + + onWrapTextChange(checked) { + const api = Common.EditorApi.get(); + console.log(checked); + api.asc_setCellTextWrap(checked); + } + + onTextOrientationChange(value) { + const api = Common.EditorApi.get(); + let angle = 0; + + switch (value) { + case 'anglecount': angle = 45; break; + case 'angleclock': angle = -45; break; + case 'vertical': angle = 255; break; + case 'rotateup': angle = 90; break; + case 'rotatedown': angle = -90; break; + } + + api.asc_setCellAngle(angle); + } + + onCellFormat(value) { + const api = Common.EditorApi.get(); + let type = decodeURIComponent(atob(value)); + api.asc_setCellFormat(type); + } + + onBorderStyle(type, borderInfo) { + const api = Common.EditorApi.get(); + let newBorders = [], + bordersWidth = borderInfo.width, + bordersColor = Common.Utils.ThemeColor.getRgbColor(borderInfo.color); + + if (type == 'inner') { + newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type == 'all') { + newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type == 'outer') { + newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type != 'none') { + var borderId = parseInt(type); + newBorders[borderId] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } + + api.asc_setCellBorders(newBorders); + } + render () { return ( - ) } diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx new file mode 100644 index 000000000..55876d155 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -0,0 +1,395 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditChart } from '../../view/edit/EditChart'; + +class EditChartController extends Component { + constructor (props) { + super(props); + this.onRemoveChart = this.onRemoveChart.bind(this); + this.onType = this.onType.bind(this); + this.onStyle = this.onStyle.bind(this); + this.onBorderColor = this.onBorderColor.bind(this); + this.onBorderSize = this.onBorderSize.bind(this); + this.onVerAxisMinValue = this.onVerAxisMinValue.bind(this); + this.onVerAxisMaxValue = this.onVerAxisMaxValue.bind(this); + this.onVerAxisCrossType = this.onVerAxisCrossType.bind(this); + this.onVerAxisCrossValue = this.onVerAxisCrossValue.bind(this); + this.onVerAxisDisplayUnits = this.onVerAxisDisplayUnits.bind(this); + this.onVerAxisReverse = this.onVerAxisReverse.bind(this); + this.onVerAxisTickMajor = this.onVerAxisTickMajor.bind(this); + this.onVerAxisTickMinor = this.onVerAxisTickMinor.bind(this); + this.onVerAxisLabelPos = this.onVerAxisLabelPos.bind(this); + this.onHorAxisCrossType = this.onHorAxisCrossType.bind(this); + this.onHorAxisCrossValue = this.onHorAxisCrossValue.bind(this); + this.onHorAxisPos = this.onHorAxisPos.bind(this); + this.onHorAxisReverse = this.onHorAxisReverse.bind(this); + this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this); + this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this); + this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onRemoveChart() { + const api = Common.EditorApi.get(); + api.asc_Remove(); + this.closeModal(); + } + + onStyle(type) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + + chart.putStyle(type); + image.put_ChartProperties(chart); + + api.asc_setGraphicObjectProps(image); + + } + + onType(type) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + + chart.changeType(type); + image.put_ChartProperties(chart); + + api.asc_setGraphicObjectProps(image); + + // Force update styles + this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType())); + + // me.updateAxisProps(type); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + shape = new Asc.asc_CShapeProperty(), + fill = new Asc.asc_CShapeFill(); + + if (color == 'transparent') { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL); + fill.put_fill(null); + } else { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID); + fill.put_fill(new Asc.asc_CFillSolid()); + fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color)); + } + + shape.put_fill(fill); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + + onBorderColor(color) { + const api = Common.EditorApi.get(); + const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties(); + let image = new Asc.asc_CImgProperty(), + shape = new Asc.asc_CShapeProperty(), + stroke = new Asc.asc_CStroke(); + + if(currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { + + if (currentShape.get_stroke().get_width() < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color)); + stroke.put_width(currentShape.get_stroke().get_width()); + stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash()); + } + + shape.put_stroke(stroke); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + } + + onBorderSize(value) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + const shape = new Asc.asc_CShapeProperty(); + const stroke = new Asc.asc_CStroke(); + + const _borderColor = this.props.storeChartSettings.borderColor; + + if (value < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + if (_borderColor == 'transparent') + stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29})); + else + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor))); + stroke.put_width(value * 25.4 / 72.0); + } + + shape.put_stroke(stroke); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_ShapeProperties()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR + } + + onReorder(type) { + const api = Common.EditorApi.get(); + let ascType; + + if (type == 'all-up') { + ascType = Asc.c_oAscDrawingLayerType.BringToFront; + } else if (type == 'all-down') { + ascType = Asc.c_oAscDrawingLayerType.SendToBack; + } else if (type == 'move-up') { + ascType = Asc.c_oAscDrawingLayerType.BringForward; + } else { + ascType = Asc.c_oAscDrawingLayerType.SendBackward; + } + + api.asc_setSelectedDrawingObjectLayer(ascType); + } + + setLayoutProperty(propertyMethod, value) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(); + + if (chartObject && value) { + + chartObject[propertyMethod](+value); + + if ("putDataLabelsPos" == propertyMethod && +value != 0) { + chartObject["putShowVal"](true); + } + + api.asc_editChartDrawingObject(chartObject); + } + } + + getVerticalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + return (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartObject.getHorAxisProps(); + } + + setVerticalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onVerAxisMinValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMinValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMinVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisMaxValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMaxValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMaxVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossType(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossValue(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisDisplayUnits(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putDispUnitsRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisReverse(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putInvertValOrder(value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMajor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMinor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisLabelPos(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setVerticalAxisProp(axisProps); + } + + // Horizontal + + getHorizontalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verHorProps = chartObject.getHorAxisProps(); + + return (verHorProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartObject.getVertAxisProps() : verHorProps; + } + + setHorizontalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getHorAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onHorAxisCrossType(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisCrossValue(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putLabelsPosition(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisReverse(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putInvertCatOrder(value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMajor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMinor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisLabelPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setHorizontalAxisProp(axisProps); + } + + render () { + return ( + + ) + } +} + +export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx new file mode 100644 index 000000000..92e221136 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx @@ -0,0 +1,145 @@ +import React, { Component } from 'react'; +import { f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; +import { withTranslation } from 'react-i18next'; + +import { EditLink } from '../../view/edit/EditLink'; + +class EditLinkController extends Component { + constructor (props) { + super(props); + this.onEditLink = this.onEditLink.bind(this); + this.onRemoveLink = this.onRemoveLink.bind(this); + + const api = Common.EditorApi.get(); + const cellInfo = api.asc_getCellInfo(); + + this.linkInfo = cellInfo.asc_getHyperlink(); + this.isLock = cellInfo.asc_getLockText(); + this.currentSheet = api.asc_getWorksheetName(api.asc_getActiveWorksheetIndex()); + + // Sheets + + let items = []; + let wsc = api.asc_getWorksheetsCount(); + const aws = api.asc_getActiveWorksheetIndex(); + + if (wsc > 0) { + items = []; + while ( !(--wsc < 0) ) { + if ( !api.asc_isWorksheetHidden(wsc) ) { + items.unshift({ + value: wsc, + caption: api.asc_getWorksheetName(wsc) + }); + if (wsc === aws) { + this.activeSheet = { + value: wsc, + caption: api.asc_getWorksheetName(wsc) + } + } + } + } + this.sheets = items; + } + } + + closeModal () { + if ( Device.phone ) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + } + + onEditLink(args) { + const api = Common.EditorApi.get(); + const { t } = this.props; + const _t = t("View.Edit", {returnObjects: true}); + + let linkProps = new Asc.asc_CHyperlink(), + sheet = "", + displayText = args.text, + tip = args.tooltip, + defaultDisplay = ""; + + linkProps.asc_setType(args.type); + + if(args.type === Asc.c_oAscHyperlinkType.RangeLink) { + let range = args.url, + isValidRange = /^[A-Z]+[1-9]\d*:[A-Z]+[1-9]\d*$/.test(range); + + if (!isValidRange) + isValidRange = /^[A-Z]+[1-9]\d*$/.test(range); + + if (!isValidRange) { + f7.dialog.alert(_t.textInvalidRange, _t.notcriticalErrorTitle); + return; + } + + sheet = args.sheet; + + linkProps.asc_setSheet(sheet); + linkProps.asc_setRange(range); + defaultDisplay = sheet + '!' + range; + } else { + let url = args.url.replace(/^\s+|\s+$/g,''); + + if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url)) { + let urlType = api.asc_getUrlType(url.trim()); + + if (urlType < 1) { + f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle); + return; + } + + url = ( (urlType == 2) ? 'mailto:' : 'http://' ) + url; + } + + url = url.replace(new RegExp("%20",'g')," "); + + linkProps.asc_setHyperlinkUrl(url); + defaultDisplay = url; + } + + if (this.isLock) { + linkProps.asc_setText(null); + } else { + if (!displayText) { + displayText = defaultDisplay; + } + linkProps.asc_setText(displayText); + } + + linkProps.asc_setTooltip(tip); + + api.asc_insertHyperlink(linkProps); + this.closeModal(); + + } + + onRemoveLink() { + const api = Common.EditorApi.get(); + api.asc_removeHyperlink(); + this.closeModal(); + } + + render () { + return ( + + ) + } +} + +const EditLinkWithTranslation = withTranslation()(EditLinkController); + +export {EditLinkWithTranslation as EditLinkController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx new file mode 100644 index 000000000..5be6e60dd --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx @@ -0,0 +1,108 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; + +import { EditText } from '../../view/edit/EditText'; + +class EditTextController extends Component { + constructor (props) { + super(props); + } + + toggleBold(value) { + const api = Common.EditorApi.get(); + api.asc_setCellBold(value); + }; + + toggleItalic(value) { + const api = Common.EditorApi.get(); + api.asc_setCellItalic(value); + }; + + toggleUnderline(value) { + const api = Common.EditorApi.get(); + api.asc_setCellUnderline(value); + }; + + onParagraphAlign(type) { + const api = Common.EditorApi.get(); + let value = AscCommon.align_Left; + + switch (type) { + case 'justify': + value = AscCommon.align_Justify; + break; + case 'right': + value = AscCommon.align_Right; + break; + case 'center': + value = AscCommon.align_Center; + break; + } + + api.asc_setCellAlign(value); + }; + + onParagraphValign(type) { + const api = Common.EditorApi.get(); + let value; + + switch(type) { + case 'top': + value = Asc.c_oAscVAlign.Top; + break; + case 'center': + value = Asc.c_oAscVAlign.Center; + break; + case 'bottom': + value = Asc.c_oAscVAlign.Bottom; + break; + } + + api.asc_setCellVertAlign(value); + }; + + changeFontSize(curSize, isDecrement) { + const api = Common.EditorApi.get(); + let size = curSize; + + if (isDecrement) { + typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size); + } else { + typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size); + } + + if (typeof size !== 'undefined') { + api.asc_setCellFontSize(size); + } + }; + + changeFontFamily(name) { + const api = Common.EditorApi.get(); + if (name) { + api.asc_setCellFontName(name); + } + } + + onTextColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + + render () { + return ( + + ) + } +} + +export default EditTextController; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx new file mode 100644 index 000000000..1704fee0c --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -0,0 +1,105 @@ +import React, { Component } from "react"; +import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; +import {observer, inject} from "mobx-react"; + +class ApplicationSettingsController extends Component { + constructor(props) { + super(props); + this.onFormulaLangChange = this.onFormulaLangChange.bind(this); + this.onRegSettings = this.onRegSettings.bind(this); + this.initRegSettings = this.initRegSettings.bind(this); + this.props.storeApplicationSettings.initRegData(); + this.initRegSettings(); + } + + initRegSettings() { + this.props.storeApplicationSettings.getRegCode(); + + const info = new Asc.asc_CFormatCellsInfo(); + const api = Common.EditorApi.get(); + const regCode = this.props.storeApplicationSettings.regCode; + + info.asc_setType(Asc.c_oAscNumFormatType.None); + info.asc_setSymbol(regCode); + + const arr = api.asc_getFormatCells(info); + const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regCode), + text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regCode), + text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regCode); + + this.props.storeApplicationSettings.setRegExample(`${text4} ${text5} ${text6}`); + } + + onChangeDisplayComments(displayComments) { + const api = Common.EditorApi.get(); + + if (!displayComments) { + api.asc_hideComments(); + Common.localStorage.setBool("sse-settings-resolvedcomment", false); + } else { + let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment"); + api.asc_showComments(resolved); + } + + Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments); + } + + onChangeDisplayResolved(value) { + const api = Common.EditorApi.get(); + let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment"); + + if (displayComments) { + api.asc_showComments(value); + Common.localStorage.setBool("sse-settings-resolvedcomment", value); + } + } + + clickR1C1Style(checked) { + const api = Common.EditorApi.get(); + Common.localStorage.setBool('sse-settings-r1c1', checked); + api.asc_setR1C1Mode(checked); + } + + unitMeasurementChange(value) { + value = value ? +value : Common.Utils.Metric.getDefaultMetric(); + Common.Utils.Metric.setCurrentMetric(value); + Common.localStorage.setItem("se-mobile-settings-unit", value); + } + + onChangeMacrosSettings(value) { + Common.Utils.InternalSettings.set("sse-mobile-macros-mode", +value); + Common.localStorage.setItem("sse-mobile-macros-mode", +value); + } + + onFormulaLangChange(value) { + Common.localStorage.setItem("sse-settings-func-lang", value); + this.initRegSettings(); + // SSE.getController('AddFunction').onDocumentReady(); + } + + onRegSettings(regCode) { + const api = Common.EditorApi.get(); + Common.localStorage.setItem("sse-settings-regional", regCode); + this.initRegSettings(); + if (regCode!==null) api.asc_setLocale(+regCode); + } + + render() { + return ( + + ) + } +} + + +export default inject("storeApplicationSettings")(observer(ApplicationSettingsController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx new file mode 100644 index 000000000..2ee98c31d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx @@ -0,0 +1,168 @@ +import React, { Component } from "react"; +import Download from "../../view/settings/Download"; +import { Device } from '../../../../../common/mobile/utils/device'; +import { withTranslation, useTranslation } from 'react-i18next'; +import { f7 } from 'framework7-react'; + +class DownloadController extends Component { + constructor(props) { + super(props); + this.onSaveFormat = this.onSaveFormat.bind(this); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + } + + onSaveFormat(format) { + const api = Common.EditorApi.get(); + const { t } = this.props; + const _t = t("View.Settings", {returnObjects: true}); + + this.closeModal(); + + if (format) { + if (format == Asc.c_oAscFileType.CSV) { + f7.dialog.confirm( + _t.warnDownloadAs, + _t.notcriticalErrorTitle, + function () { + onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t) + } + ) + } else { + api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format)); + } + } + } + + render() { + return ( + + ); + } +} + +const DownloadWithTranslation = withTranslation()(DownloadController); + +const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequestClose) => { + const api = Common.EditorApi.get(); + + if (type == Asc.c_oAscAdvancedOptionsID.CSV) { + let picker; + const pages = []; + const pagesName = []; + + for (let page of advOptions.asc_getCodePages()) { + pages.push(page.asc_getCodePage()); + pagesName.push(page.asc_getCodePageName()); + } + + // me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument); + + const buttons = []; + + if (mode === 2) { + buttons.push({ + text: _t.textCancel + }); + } + + buttons.push({ + text: 'OK', + bold: true, + onClick: function() { + let encoding = picker.cols[0].value, + delimiter = picker.cols[1].value; + + if (mode == 2) { + formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter)); + api.asc_DownloadAs(formatOptions); + } else { + api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter)); + } + + //if (!me._isDocReady) { + //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + //} + } + }); + + const dialog = f7.dialog.create({ + title: _t.advCSVOptions, + text: '', + content: + '
' + + '
' + + '
' + _t.txtEncoding + '
' + + '
' + _t.txtDelimiter + '
' + + '
' + + '
' + + '
', + buttons: buttons + }).open(); + + const recommendedSettings = advOptions.asc_getRecommendedSettings(); + + dialog.on('opened', () => { + picker = f7.picker.create({ + containerEl: document.getElementById('txt-encoding'), + cols: [{ + textAlign: 'left', + values: pages, + displayValues: pagesName + },{ + textAlign: 'right', + width: 120, + values: [4, 2, 3, 1, 5], + displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace] + }], + toolbar: false, + rotateEffect: true, + value: [ + recommendedSettings && recommendedSettings.asc_getCodePage(), + (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4 + ], + }); + }); + + } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) { + //me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument); + const buttons = [{ + text: 'OK', + bold: true, + onClick: function () { + const password = document.getElementById('modal-password').value; + api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password)); + //if (!me._isDocReady) { + //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + //} + } + }]; + + if (canRequestClose) + buttons.push({ + text: _t.closeButtonText, + onClick: function () { + Common.Gateway.requestClose(); + } + }); + + f7.dialog.create({ + title: _t.advDRMOptions, + text: _t.txtProtected, + content: + '
', + buttons: buttons + }).open(); + } +}; + +export { + DownloadWithTranslation, + onAdvancedOptions +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx new file mode 100644 index 000000000..238036bcd --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx @@ -0,0 +1,103 @@ +import React, { Component } from "react"; +import { observer, inject } from "mobx-react"; +import SpreadsheetInfo from "../../view/settings/SpreadsheetInfo"; + +class SpreadsheetInfoController extends Component { + constructor(props) { + super(props); + this.docProps = this.getDocProps(); + this.getModified = this.getModified(); + this.getModifiedBy = this.getModifiedBy(); + this.getCreators = this.getCreators(); + this.title = this.getTitle(); + this.subject = this.getSubject(); + this.description = this.getDescription(); + this.getCreated = this.getCreated(); + } + + getDocProps() { + const api = Common.EditorApi.get(); + return api.asc_getCoreProps(); + } + + getAppProps() { + const api = Common.EditorApi.get(); + const appProps = api.asc_getAppProps(); + + if (appProps) { + let appName = + (appProps.asc_getApplication() || "") + + (appProps.asc_getAppVersion() ? " " : "") + + (appProps.asc_getAppVersion() || ""); + return appName; + } + } + + getModified() { + let valueModified = this.docProps.asc_getModified(); + const _lang = this.props.storeAppOptions.lang; + + if (valueModified) { + return ( + valueModified.toLocaleString(_lang, { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + + " " + + valueModified.toLocaleTimeString(_lang, { timeStyle: "short" }) + ); + } + } + + getModifiedBy() { + let valueModifiedBy = this.docProps.asc_getLastModifiedBy(); + + if (valueModifiedBy) { + return Common.Utils.UserInfoParser.getParsedName(valueModifiedBy); + } + } + + getCreators() { + return this.docProps.asc_getCreator(); + } + + getTitle() { + return this.docProps.asc_getTitle(); + } + + getSubject() { + return this.docProps.asc_getSubject(); + } + + getDescription() { + return this.docProps.asc_getDescription(); + } + + getCreated() { + let value = this.docProps.asc_getCreated(); + const _lang = this.props.storeAppOptions.lang; + + if(value) { + return value.toLocaleString(_lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleTimeString(_lang, {timeStyle: 'short'}); + } + } + + render() { + return ( + + ); + } +} + + +export default inject("storeAppOptions")(observer(SpreadsheetInfoController)); \ No newline at end of file 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..b1030ab10 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx @@ -0,0 +1,115 @@ + +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 = this.localMarginProps.asc_getLeft(), + top = this.localMarginProps.asc_getTop(), + right = this.localMarginProps.asc_getRight(), + bottom = this.localMarginProps.asc_getBottom(); + + 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()); + } + + 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/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 3941298d0..386e8d550 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -9,7 +9,9 @@ @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @import '../../../../common/mobile/resources/less/common-material.less'; +@import '../../../../common/mobile/resources/less/icons.less'; @import '../../../../common/mobile/resources/less/dataview.less'; +@import '../../../../common/mobile/resources/less/search.less'; @import './app-material.less'; @import './app-ios.less'; @import './icons-ios.less'; diff --git a/apps/spreadsheeteditor/mobile/src/less/celleditor.less b/apps/spreadsheeteditor/mobile/src/less/celleditor.less index 8078b0d05..53be7192a 100644 --- a/apps/spreadsheeteditor/mobile/src/less/celleditor.less +++ b/apps/spreadsheeteditor/mobile/src/less/celleditor.less @@ -13,6 +13,7 @@ } display: flex; + z-index: 5001; height: @cellEditorHeight; min-height: @cellEditorHeight; @@ -27,7 +28,7 @@ &:after { content: ''; position: absolute; - background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); + background-color: @border-regular-control; display: block; z-index: 15; top: auto; @@ -43,6 +44,10 @@ #box-cell-name { display: inline-flex; background-color: var(--f7-navbar-bg-color); + + .md & { + background-color: @gray-light; + } } #idx-cell-name { @@ -60,6 +65,12 @@ } } + .phone & { + #idx-cell-name { + display: none; + } + } + #idx-btn-function { height: @cellEditorHeight; line-height: @cellEditorHeight; diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index a142d2bb9..3ce1c36cd 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -51,8 +51,12 @@ } i.icon { + width: 22px; + height: 22px; &.icon-plus { - .encoded-svg-background(''); + @source: ''; + .encoded-svg-mask(@source, @fontColor); + background-image: none; } } } diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index fe83bfcab..28fac09c7 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -8,9 +8,11 @@ import { f7ready } from 'framework7-react'; import routes from '../router/routes.js'; import '../../../../common/main/lib/util/utils.js'; -import Notifications from '../../../../common/mobile/utils/notifications.js' +import '../../../../common/main/lib/util/LanguageInfo.js'; +import {LocalStorage} from '../../../../common/mobile/utils/LocalStorage.js'; +import Notifications from '../../../../common/mobile/utils/notifications.js'; import {MainController} from '../controller/Main'; -import {Device} from '../../../../common/mobile/utils/device' +import {Device} from '../../../../common/mobile/utils/device'; import CellEditor from '../controller/CellEditor'; const f7params = { @@ -23,8 +25,9 @@ const f7params = { export default class extends React.Component { constructor() { super(); - + Common.Notifications = new Notifications(); + Common.localStorage = LocalStorage; } render() { diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 74a76ff28..ef2c0d5f6 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -8,6 +8,8 @@ import CellEditor from '../controller/CellEditor'; import Statusbar from '../controller/StatusBar' import AddOptions from "../view/add/Add"; import EditOptions from "../view/edit/Edit"; +import { Device } from '../../../../common/mobile/utils/device'; +import { Search, SearchSettings } from '../controller/Search'; import {FunctionGroups} from "../controller/add/AddFunction"; @@ -56,44 +58,47 @@ export default class MainPage extends Component { render() { return ( - + {/* Top Navbar */} - - {/*
*/} - - - - - - this.handleClickToOpenOptions('edit')}> - this.handleClickToOpenOptions('add')}> - this.handleClickToOpenOptions('coauth')}> - this.handleClickToOpenOptions('settings')}> - -
- this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> - {/* Page content */} - - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - + + {/*
*/} + + + + + + this.handleClickToOpenOptions('edit')}> + this.handleClickToOpenOptions('add')}> + { Device.phone ? null : } + this.handleClickToOpenOptions('coauth')}> + this.handleClickToOpenOptions('settings')}> + + +
+ this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> + {/* Page content */} + + + { + !this.state.editOptionsVisible ? null : + + } + { + !this.state.addOptionsVisible ? null : + + } + { + !this.state.settingsVisible ? null : + + } + { + !this.state.collaborationVisible ? null : + + } + - {/* hidden component*/} -
+ {/* hidden component*/} +
) } }; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js new file mode 100644 index 000000000..70d85c02d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/appOptions.js @@ -0,0 +1,67 @@ +import {action, observable, makeObservable} from 'mobx'; + +export class storeAppOptions { + constructor() { + makeObservable(this, { + setConfigOptions: action, + setPermissionOptions: action + }); + } + + config = {}; + + setConfigOptions (config) { + this.config = config; + this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/); + this.isDesktopApp = config.targetApp == 'desktop'; + this.canCreateNew = !!config.createUrl && !this.isDesktopApp; + this.canOpenRecent = config.recent !== undefined && !this.isDesktopApp; + this.templates = config.templates; + this.recent = config.recent; + this.createUrl = config.createUrl; + this.lang = config.lang; + this.location = (typeof (config.location) == 'string') ? config.location.toLowerCase() : ''; + this.region = (typeof (config.region) == 'string') ? config.region.toLowerCase() : config.region; + this.sharingSettingsUrl = config.sharingSettingsUrl; + this.fileChoiceUrl = config.fileChoiceUrl; + this.isEditDiagram = config.mode == 'editdiagram'; + this.isEditMailMerge = config.mode == 'editmerge'; + this.mergeFolderUrl = config.mergeFolderUrl; + this.canAnalytics = false; + this.canRequestClose = config.canRequestClose; + this.customization = config.customization; + this.canBackToFolder = (config.canBackToFolder!==false) && (typeof (config.customization) == 'object') && (typeof (config.customization.goback) == 'object') + && (!!(config.customization.goback.url) || config.customization.goback.requestClose && this.canRequestClose); + this.canBack = this.canBackToFolder === true; + this.canPlugins = false; + } + + setPermissionOptions (document, licType, params, permissions) { + permissions.edit = params.asc_getRights() !== Asc.c_oRights.Edit ? false : true; + this.canAutosave = true; + this.canAnalytics = params.asc_getIsAnalyticsEnable(); + this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); + this.isLightVersion = params.asc_getIsLight(); + this.canCoAuthoring = !this.isLightVersion; + this.isOffline = Common.EditorApi.get().asc_isOffline(); + this.canRequestEditRights = this.config.canRequestEditRights; + this.canEdit = permissions.edit !== false && // can edit or review + (this.config.canRequestEditRights || this.config.mode !== 'view') && true; // if mode=="view" -> canRequestEditRights must be defined + // (!this.isReviewOnly || this.canLicense) && // if isReviewOnly==true -> canLicense must be true + // true /*isSupportEditFeature*/; + this.isEdit = (this.canLicense || this.isEditDiagram || this.isEditMailMerge) && permissions.edit !== false && this.config.mode !== 'view' && true; + this.canComments = this.canLicense && (permissions.comment === undefined ? this.isEdit : permissions.comment) && (this.config.mode !== 'view'); + this.canComments = this.canComments && !((typeof (this.customization) == 'object') && this.customization.comments===false); + this.canViewComments = this.canComments || !((typeof (this.customization) == 'object') && this.customization.comments===false); + this.canEditComments = this.isOffline || !(typeof (this.customization) == 'object' && this.customization.commentAuthorOnly); + this.canChat = this.canLicense && !this.isOffline && !((typeof (this.customization) == 'object') && this.customization.chat === false); + this.canPrint = (permissions.print !== false); + this.isRestrictedEdit = !this.isEdit && this.canComments; + this.trialMode = params.asc_getLicenseMode(); + this.canDownloadOrigin = permissions.download !== false; + this.canDownload = permissions.download !== false; + this.canBranding = params.asc_getCustomization(); + this.canBrandingExt = params.asc_getCanBranding() && (typeof this.customization == 'object'); + this.canUseReviewPermissions = this.canLicense && this.customization && this.customization.reviewPermissions && (typeof (this.customization.reviewPermissions) == 'object'); + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js new file mode 100644 index 000000000..faea20f77 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -0,0 +1,118 @@ +import {makeObservable, action, observable} from 'mobx'; + +export class storeApplicationSettings { + constructor() { + makeObservable(this, { + unitMeasurement: observable, + macrosMode: observable, + formulaLang: observable, + regCode: observable, + regExample: observable, + regData: observable, + isRefStyle: observable, + isComments: observable, + isResolvedComments: observable, + initRegData: action, + getRegCode: action, + changeRegCode: action, + setRegExample: action, + changeUnitMeasurement: action, + changeMacrosSettings: action, + changeDisplayComments: action, + changeDisplayResolved: action, + changeRefStyle: action, + changeFormulaLang: action + }); + } + + unitMeasurement = Common.Utils.Metric.getCurrentMetric(); + macrosMode = 0; + formulaLang = Common.Locale.currentLang || dataLang[0].value; + regCode = undefined; + regExample = ''; + regData = []; + isRefStyle = false; + isComments = true; + isResolvedComments = true; + + getFormulaLanguages() { + const dataLang = [ + { value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' }, + { value: 'de', displayValue: 'Deutsch', exampleValue: ' SUMME; MIN; MAX; ANZAHL' }, + { value: 'es', displayValue: 'Spanish', exampleValue: ' SUMA; MIN; MAX; CALCULAR' }, + { value: 'fr', displayValue: 'French', exampleValue: ' SOMME; MIN; MAX; NB' }, + { value: 'it', displayValue: 'Italian', exampleValue: ' SOMMA; MIN; MAX; CONTA.NUMERI' }, + { value: 'ru', displayValue: 'Russian', exampleValue: ' СУММ; МИН; МАКС; СЧЁТ' }, + { value: 'pl', displayValue: 'Polish', exampleValue: ' SUMA; MIN; MAX; ILE.LICZB' } + ] + + return dataLang; + } + + getRegDataCodes() { + const regDataCode = [ + { value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 }, {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A }, + { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 }, + { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 } + ]; + + return regDataCode; + } + + initRegData() { + const regDataCodes = this.getRegDataCodes(); + + regDataCodes.forEach(item => { + let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value); + this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]}); + }) + } + + getRegCode() { + const regData = this.regData; + let value = Number(Common.localStorage.getItem('sse-settings-regional')); + + regData.forEach(obj => { + if(obj.code === value) { + this.regCode = obj.code; + } + }); + + if(!this.regCode) { + this.regCode = 0x0409; + } + } + + changeRegCode(value) { + this.regCode = value; + } + + setRegExample(value) { + this.regExample = value; + } + + changeUnitMeasurement(value) { + this.unitMeasurement = +value; + } + + changeMacrosSettings(value) { + this.macrosMode = +value; + } + + changeDisplayComments(value) { + this.isComments = value; + if (!value) this.changeDisplayResolved(value); + } + + changeDisplayResolved(value) { + this.isResolvedComments = value; + } + + changeRefStyle(value) { + this.isRefStyle = value; + } + + changeFormulaLang(value) { + this.formulaLang = value; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js new file mode 100644 index 000000000..f4b7e4e81 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -0,0 +1,196 @@ +import {makeObservable, action, observable, computed} from 'mobx'; + +export class storeCellSettings { + constructor() { + makeObservable(this, { + styleSize: observable, + borderInfo: observable, + borderStyle: observable, + cellStyles: observable, + fontsArray: observable, + fontInfo: observable, + fillColor: observable, + fontColor: observable, + styleName: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + hAlignStr: observable, + vAlignStr: observable, + isWrapText: observable, + orientationStr: observable, + initCellSettings: action, + initTextFormat: action, + initTextOrientation: action, + initFontSettings: action, + initEditorFonts: action, + initCellStyles: action, + initFontInfo: action, + changeFontColor: action, + changeFillColor: action, + changeBorderColor: action, + changeBorderSize: action, + changeBorderStyle: action + }); + } + + styleSize = { + width: 100, + height: 50 + }; + + borderInfo = { + color: '000000', + width: 12 // Asc.c_oAscBorderStyles.Medium + }; + + borderStyle = 'none'; + + cellStyles = []; + fontsArray = []; + fontInfo = {}; + + fillColor = undefined; + fontColor = undefined; + styleName = undefined; + + isBold = false; + isItalic = false; + isUnderline = false; + + hAlignStr = 'left'; + vAlignStr = 'bottom'; + isWrapText; + + orientationStr = 'horizontal'; + + initCellSettings(cellInfo) { + + let xfs = cellInfo.asc_getXfs(); + this.initFontSettings(xfs); + + let color = xfs.asc_getFillColor(); + // console.log(color); + + const clr = color.get_auto() ? 'transparent' : this.resetColor(color); + + this.fillColor = clr; + this.styleName = cellInfo.asc_getStyleName(); + + this.initTextOrientation(xfs); + this.initTextFormat(xfs); + + } + + initTextFormat(xfs) { + let hAlign = xfs.asc_getHorAlign(); + let vAlign = xfs.asc_getVertAlign(); + let isWrapText = xfs.asc_getWrapText(); + + if (vAlign == Asc.c_oAscVAlign.Top) + this.vAlignStr = 'top'; + else if (vAlign == Asc.c_oAscVAlign.Center) + this.vAlignStr = 'center'; + else if (vAlign == Asc.c_oAscVAlign.Bottom) + this.vAlignStr = 'bottom'; + + switch (hAlign) { + case AscCommon.align_Left: this.hAlignStr = 'left'; break; + case AscCommon.align_Center: this.hAlignStr = 'center'; break; + case AscCommon.align_Right: this.hAlignStr = 'right'; break; + case AscCommon.align_Justify: this.hAlignStr = 'justify'; break; + } + + this.isWrapText = isWrapText; + } + + initTextOrientation(xfs) { + switch( xfs.asc_getAngle() ) { + case 45: this.orientationStr = 'anglecount'; break; + case -45: this.orientationStr = 'angleclock'; break; + case 255: this.orientationStr = 'vertical'; break; + case 90: this.orientationStr = 'rotateup'; break; + case -90: this.orientationStr = 'rotatedown'; break; + case 0: this.orientationStr = 'horizontal'; break; + } + } + + initFontSettings(xfs) { + this.fontInfo.name = xfs.asc_getFontName(); + this.fontInfo.size = xfs.asc_getFontSize(); + + this.fontInfo.color = xfs.asc_getFontColor(); + this.fontColor = this.resetColor(this.fontInfo.color); + + this.isBold = xfs.asc_getFontBold(); + this.isItalic = xfs.asc_getFontItalic(); + this.isUnderline = xfs.asc_getFontUnderline(); + } + + initEditorFonts(fonts, select) { + let array = []; + + for (let font of fonts) { + array.push({ + id : font.asc_getFontId(), + name : font.asc_getFontName(), + //displayValue: font.asc_getFontName(), + imgidx : font.asc_getFontThumbnail(), + type : font.asc_getFontType() + }); + } + + this.fontsArray = array; + } + + initCellStyles(styles) { + this.cellStyles = styles; + } + + initFontInfo(fontObj) { + this.fontInfo = fontObj; + } + + changeFontColor(color) { + this.fontColor = color; + } + + changeFillColor(color) { + this.fillColor = color; + } + + changeBorderColor(color) { + this.borderInfo.color = color; + } + + changeBorderSize(size) { + this.borderInfo.width = size; + console.log('change border width ' + size); + } + + changeBorderStyle(type) { + this.borderStyle = type; + } + + resetColor(color) { + let clr = 'transparent'; + + if(color) { + if (color.get_auto()) { + clr = 'auto' + } else { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + + return clr; + } + +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index edda7ebe6..3d1ea1dbb 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -1,7 +1,79 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeChartSettings { - @computed get types () { + constructor() { + makeObservable(this, { + borderColor: observable, + fillColor: observable, + chartStyles: observable, + setBorderColor: action, + initBorderColor: action, + setFillColor: action, + getFillColor: action, + clearChartStyles: action, + updateChartStyles: action, + styles: computed, + types: computed, + }); + } + + borderColor = undefined; + + setBorderColor (color) { + this.borderColor = color; + } + + initBorderColor(shapeProperties) { + let stroke = shapeProperties.get_stroke(); + this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent'; + } + + fillColor = undefined; + + setFillColor (color) { + this.fillColor = color; + } + + getFillColor (shapeProperties) { + const fill = shapeProperties.asc_getFill(); + const fillType = fill.asc_getType(); + + if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { + this.fillColor = this.resetColor(fill.asc_getFill().asc_getColor()); + } + + return this.fillColor; + } + + chartStyles = null; + + clearChartStyles () { + this.chartStyles = null; + } + + updateChartStyles (styles) { + this.chartStyles = styles; + } + + get styles () { + if (!this.chartStyles) return null; + const widthContainer = document.querySelector(".page-content").clientWidth; + const columns = parseInt(widthContainer / 70); // magic + let row = -1; + const styles = []; + + this.chartStyles.forEach((style, index) => { + if (0 == index % columns) { + styles.push([]); + row++ + } + styles[row].push(style); + }); + + return styles; + } + + get types () { const _types = [ { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'bar-normal'}, { type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'bar-stacked'}, @@ -41,4 +113,52 @@ export class storeChartSettings { }); return groups; } + + borderSizeTransform () { + const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; + + return { + sizeByIndex: function (index) { + if (index < 1) return _sizes[0]; + if (index > _sizes.length - 1) return _sizes[_sizes.length - 1]; + return _sizes[index]; + }, + + indexSizeByValue: function (value) { + let index = 0; + _sizes.forEach((size, idx) => { + if (Math.abs(size - value) < 0.25) { + index = idx; + } + }); + return index; + }, + + sizeByValue: function (value) { + return _sizes[this.indexSizeByValue(value)]; + } + } + } + + resetColor(color) { + let clr = 'transparent'; + + if(color) { + if (color.get_auto()) { + clr = 'auto' + } else { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + + return clr; + } + } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index 8058e49c3..a5d710292 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js @@ -1,16 +1,30 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeFocusObjects { - @observable focusOn = undefined; + constructor() { + makeObservable(this, { + focusOn: observable, + _focusObjects: observable, + _cellInfo: observable, + resetFocusObjects: action, + objects: computed, + resetCellInfo: action, + selections: computed, + shapeObject: computed, + imageObject: computed, + chartObject: computed + }); + } - @observable _focusObjects = []; + focusOn = undefined; + _focusObjects = []; - @action resetFocusObjects(objects) { + resetFocusObjects(objects) { this.focusOn = 'obj'; this._focusObjects = objects; } - @computed get objects() { + get objects() { const _objects = []; for (let object of this._focusObjects) { const type = object.get_ObjectType(); @@ -39,14 +53,14 @@ export class storeFocusObjects { return resultArr; } - @observable _cellInfo; + _cellInfo; - @action resetCellInfo (cellInfo) { + resetCellInfo (cellInfo) { this.focusOn = 'cell'; this._cellInfo = cellInfo; } - @computed get selections () { + get selections () { const _selections = []; let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart, @@ -92,7 +106,7 @@ export class storeFocusObjects { } } } else if (isTextShape || isTextChart) { - const selectedObjects = this.api.asc_getGraphicObjectProps(); + const selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); let isEquation = false; for (var i = 0; i < selectedObjects.length; i++) { @@ -134,7 +148,7 @@ export class storeFocusObjects { return _selections; } - @computed get shapeObject() { + get shapeObject() { const shapes = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -151,7 +165,7 @@ export class storeFocusObjects { } } - @computed get imageObject() { + get imageObject() { const images = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -165,4 +179,22 @@ export class storeFocusObjects { return undefined; } } + + get chartObject() { + const charts = []; + for (let object of this._focusObjects) { + if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { + if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) { + charts.push(object); + } + } + } + if (charts.length > 0) { + const object = charts[charts.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + } + } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/functions.js b/apps/spreadsheeteditor/mobile/src/store/functions.js index b719d5583..7c5b90a6d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/functions.js +++ b/apps/spreadsheeteditor/mobile/src/store/functions.js @@ -1,11 +1,19 @@ -import {action, computed} from 'mobx'; +import {action, computed, makeObservable} from 'mobx'; export class storeFunctions { - @action initFunctions (groups, data) { + constructor() { + makeObservable(this, { + initFunctions: action, + functions: computed + }); + } + + initFunctions (groups, data) { this.groups = groups; this.data = data; } - @computed get functions () { + + get functions () { const groups = this.groups; const data = this.data; const functions = {}; diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 7b3378a5b..c5b523722 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -5,24 +5,32 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeWorksheets} from './sheets'; import {storeFunctions} from './functions'; import {storePalette} from "./palette"; -// import {storeTextSettings} from "./textSettings"; -// import {storeParagraphSettings} from "./paragraphSettings"; +import {storeTextSettings} from "./textSettings"; +import {storeApplicationSettings} from "./applicationSettings"; import {storeShapeSettings} from "./shapeSettings"; +import {storeCellSettings} from "./cellSettings"; +import {storeSpreadsheetInfo} from "./spreadsheetInfo"; +import {storeAppOptions} from "./appOptions"; // 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(), + storeApplicationSettings: new storeApplicationSettings(), users: new storeUsers(), sheets: new storeWorksheets(), storeFunctions: new storeFunctions(), - // storeTextSettings: new storeTextSettings(), + storeTextSettings: new storeTextSettings(), + storeSpreadsheetInfo: new storeSpreadsheetInfo(), + storeAppOptions: new storeAppOptions(), // storeParagraphSettings: new storeParagraphSettings(), storeShapeSettings: new storeShapeSettings(), storeChartSettings: new storeChartSettings(), - storePalette: new storePalette() + storePalette: new storePalette(), + storeCellSettings: new storeCellSettings() // storeImageSettings: new storeImageSettings(), // storeTableSettings: new storeTableSettings() }; diff --git a/apps/spreadsheeteditor/mobile/src/store/palette.js b/apps/spreadsheeteditor/mobile/src/store/palette.js index 01ec9aa24..0633a3140 100644 --- a/apps/spreadsheeteditor/mobile/src/store/palette.js +++ b/apps/spreadsheeteditor/mobile/src/store/palette.js @@ -1,9 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, makeObservable, observable} from 'mobx'; export class storePalette { - @observable customColors = []; + constructor() { + makeObservable(this, { + customColors: observable, + changeCustomColors: action + }); + } + + customColors = []; - @action changeCustomColors (colors) { + changeCustomColors (colors) { this.customColors = colors; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js index 7a4ea1929..f9cdad438 100644 --- a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js @@ -1,6 +1,16 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeShapeSettings { + constructor() { + makeObservable(this, { + fillColor: observable, + borderColorView: observable, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColorView: action + }); + } getStyleGroups () { const styles = [ @@ -125,8 +135,10 @@ export class storeShapeSettings { type: 'cloudCallout' } ]; + const groups = []; let i = 0; + for (let row=0; row { if ( model.active ) diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js new file mode 100644 index 000000000..406bda2ec --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js @@ -0,0 +1,16 @@ +import {action, observable, makeObservable} from 'mobx'; + +export class storeSpreadsheetInfo { + constructor() { + makeObservable(this, { + dataDoc: observable, + setDataDoc: action + }) + } + + dataDoc; + + setDataDoc(obj) { + this.dataDoc = obj; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js new file mode 100644 index 000000000..9d2757b44 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js @@ -0,0 +1,96 @@ +import {action, observable, computed, makeObservable} from 'mobx'; + +export class storeSpreadsheetSettings { + constructor() { + makeObservable(this, { + isPortrait: observable, + widthDocument: observable, + heightDocument: observable, + allSchemes: observable, + isHideHeadings: observable, + isHideGridlines: observable, + resetPortrait: action, + changeDocSize: action, + pageSizesIndex: computed, + addSchemes: action, + changeHideHeadings: action, + changeHideGridlines: action + }) + } + + isPortrait = true; + + resetPortrait (isPortrait) { + this.isPortrait = isPortrait === true; + } + + // Spreadsheet Formats + + widthDocument; + heightDocument; + + 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; + } + + 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 + + allSchemes; + + addSchemes(arr) { + this.allSchemes = arr; + } + + isHideHeadings; + isHideGridlines; + + changeHideHeadings(value) { + this.isHideHeadings = value; + } + + changeHideGridlines(value) { + this.isHideGridlines = value; + } + +} diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js new file mode 100644 index 000000000..38dc619da --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js @@ -0,0 +1,112 @@ +import {action, observable, makeObservable, computed} from 'mobx'; + +export class storeTextSettings { + constructor() { + makeObservable(this, { + fontsArray: observable, + fontInfo: observable, + fontName: observable, + fontSize: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + textColor: observable, + customTextColors: observable, + paragraphAlign: observable, + paragraphValign: observable, + textIn: observable, + initTextSettings: action, + initEditorFonts: action, + initFontInfo: action, + changeTextColor: action, + changeCustomTextColors: action + }); + } + + fontsArray = []; + fontInfo = {}; + fontName = ''; + fontSize = undefined; + isBold = false; + isItalic = false; + isUnderline = false; + textColor = undefined; + customTextColors = []; + paragraphAlign = undefined; + paragraphValign = undefined; + textIn = undefined; + + initTextSettings(cellInfo) { + let xfs = cellInfo.asc_getXfs(); + let selectType = cellInfo.asc_getSelectionType(); + + switch (selectType) { + case Asc.c_oAscSelectionType.RangeChartText: this.textIn = 1; break; + case Asc.c_oAscSelectionType.RangeShapeText: this.textIn = 2; break; + default: this.textIn = 0; + } + + this.fontName = xfs.asc_getFontName(); + this.fontSize = xfs.asc_getFontSize(); + + this.isBold = xfs.asc_getFontBold(); + this.isItalic = xfs.asc_getFontItalic(); + this.isUnderline = xfs.asc_getFontUnderline(); + + let color = xfs.asc_getFontColor(); + // console.log(color); + this.textColor = this.resetTextColor(color); + + this.paragraphAlign = xfs.asc_getHorAlign(); + this.paragraphValign = xfs.asc_getVertAlign(); + } + + initEditorFonts (fonts, select) { + let array = []; + for (let font of fonts) { + let fontId = font.asc_getFontId(); + array.push({ + id : fontId, + name : font.asc_getFontName(), + //displayValue: font.asc_getFontName(), + imgidx : font.asc_getFontThumbnail(), + type : font.asc_getFontType() + }); + } + + this.fontsArray = array; + } + + initFontInfo(fontObj) { + this.fontInfo = fontObj; + } + + changeTextColor(value) { + this.textColor = value; + } + + resetTextColor (color) { + let value; + + if (color) { + if (color.get_auto()) { + value = 'auto'; + } else { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + value = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + + return value; + } + + changeCustomTextColors (colors) { + this.customTextColors = colors; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index ef26b37ab..3df3425df 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -8,9 +8,16 @@ import {Device} from '../../../../../common/mobile/utils/device'; import EditCellController from "../../controller/edit/EditCell"; import EditShapeController from "../../controller/edit/EditShape"; import EditImageController from "../../controller/edit/EditImage"; +import EditTextController from "../../controller/edit/EditText"; +import EditChartController from "../../controller/edit/EditChart"; +import { EditLinkController } from "../../controller/edit/EditLink"; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell'; +import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; +import { PageTypeLink, PageSheet } from './EditLink'; const routes = [ @@ -58,8 +65,211 @@ const routes = [ { path: '/edit-image-link/', component: PageLinkSettings + }, + + // Cell + + { + path: '/edit-cell-text-color/', + component: TextColorCell + }, + { + path: '/edit-cell-fill-color/', + component: FillColorCell + }, + { + path: '/edit-cell-text-custom-color/', + component: CustomTextColorCell + }, + { + path: '/edit-cell-fill-custom-color/', + component: CustomFillColorCell + }, + { + path: '/edit-cell-text-fonts/', + component: FontsCell + }, + { + path: '/edit-cell-text-format/', + component: TextFormatCell + }, + { + path: '/edit-cell-text-orientation/', + component: TextOrientationCell + }, + { + path: '/edit-cell-border-style/', + component: BorderStyleCell + }, + { + path: '/edit-border-color-cell/', + component: BorderColorCell + }, + { + path: '/edit-border-custom-color-cell/', + component: CustomBorderColorCell + }, + { + path: '/edit-border-size-cell/', + component: BorderSizeCell + }, + { + path: '/edit-format-cell/', + component: PageFormatCell + }, + { + path: '/edit-accounting-format-cell/', + component: PageAccountingFormatCell + }, + { + path: '/edit-currency-format-cell/', + component: PageCurrencyFormatCell + }, + { + path: '/edit-date-format-cell/', + component: PageDateFormatCell + }, + { + path: '/edit-time-format-cell/', + component: PageTimeFormatCell + }, + + // Text + + { + path: '/edit-text-fonts/', + component: PageTextFonts + }, + { + path: '/edit-text-font-color/', + component: PageTextFontColor + }, + { + path: '/edit-text-custom-font-color/', + component: PageTextCustomFontColor + }, + + // Chart + + { + path: '/edit-chart-style/', + component: PageChartStyle + }, + { + path: '/edit-chart-border-color/', + component: PageChartBorderColor + }, + { + path: '/edit-chart-custom-fill-color/', + component: PageChartCustomFillColor + }, + { + path: '/edit-chart-custom-border-color/', + component: PageChartCustomBorderColor + }, + { + path: '/edit-chart-reorder/', + component: PageChartReorder + }, + { + path: '/edit-chart-layout/', + component: PageChartLayout + }, + { + path: '/edit-chart-title/', + component: PageChartTitle + }, + { + path: '/edit-chart-legend/', + component: PageLegend + }, + { + path: '/edit-horizontal-axis-title/', + component: PageHorizontalAxisTitle + }, + { + path: '/edit-vertical-axis-title/', + component: PageVerticalAxisTitle + }, + { + path: '/edit-horizontal-gridlines/', + component: PageHorizontalGridlines + }, + { + path: '/edit-vertical-gridlines/', + component: PageVerticalGridlines + }, + { + path: '/edit-data-labels/', + component: PageDataLabels + }, + + // Vertical Axis + + { + path: '/edit-chart-vertical-axis/', + component: PageChartVerticalAxis + }, + { + path: '/edit-vert-axis-crosses/', + component: PageVertAxisCrosses + }, + { + path: '/edit-display-units/', + component: PageDisplayUnits + }, + { + path: '/edit-vert-major-type/', + component: PageVertMajorType + }, + { + path: '/edit-vert-minor-type/', + component: PageVertMinorType + }, + { + path: '/edit-vert-label-position/', + component: PageVertLabelPosition + }, + + // Horizontal Axis + + { + path: '/edit-chart-horizontal-axis/', + component: PageChartHorizontalAxis + }, + { + path: '/edit-hor-axis-crosses/', + component: PageHorAxisCrosses + }, + { + path: '/edit-hor-axis-position/', + component: PageHorAxisPosition + }, + { + path: '/edit-hor-major-type/', + component: PageHorMajorType + }, + { + path: '/edit-hor-minor-type/', + component: PageHorMinorType + }, + { + path: '/edit-hor-label-position/', + component: PageHorLabelPosition + }, + + // Link + + { + path: '/edit-link-type/', + component: PageTypeLink + }, + { + path: '/edit-link-sheet', + component: PageSheet } + ]; const EmptyEditLayout = () => { @@ -122,6 +332,7 @@ const EditTabs = props => { const store = props.storeFocusObjects; const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); let editors = []; + if (settings.length < 1) { editors.push({ caption: _t.textSettings, @@ -149,6 +360,27 @@ const EditTabs = props => { component: }) } + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + if (settings.indexOf('hyperlink') > -1) { + editors.push({ + caption: _t.textHyperlink, + id: 'edit-link', + component: + }) + } } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 629985711..ad0e74b9a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -1,12 +1,855 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; const EditCell = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + // const metricText = Common.Utils.Metric.getCurrentMetricName(); + const storeCellSettings = props.storeCellSettings; + const cellStyles = storeCellSettings.cellStyles; + const styleName = storeCellSettings.styleName; + + // console.log(storeCellSettings); + + const fontInfo = storeCellSettings.fontInfo; + const fontName = fontInfo.name || _t.textFonts; + const fontSize = fontInfo.size; + const fontColor = storeCellSettings.fontColor; + const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; + const fillColor = storeCellSettings.fillColor; + + // console.log(fillColor); + + const isBold = storeCellSettings.isBold; + const isItalic = storeCellSettings.isItalic; + const isUnderline = storeCellSettings.isUnderline; + + const fontColorPreview = fontColor !== 'auto' ? + : + ; + + const fillColorPreview = fillColor !== 'transparent' ? + : + ; + return ( - + + + + + {props.toggleBold(!isBold)}}>B + {props.toggleItalic(!isItalic)}}>I + {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U + + + + {!isAndroid ? + {fontColorPreview} : + fontColorPreview + } + + + {!isAndroid ? + {fillColorPreview} : + fillColorPreview + } + + + {!isAndroid ? + : null + } + + + {!isAndroid ? + : null + } + + + {!isAndroid ? + : null + } + + + + + {!isAndroid ? + : null + } + + + {_t.textCellStyles} + {cellStyles.length ? ( + + {cellStyles.map((elem, index) => { + return ( + props.onStyleClick(elem.name)}> + + ) + })} + + ) : null} ) }; -export default EditCell; \ No newline at end of file +const PageFontsCell = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const fontInfo = storeCellSettings.fontInfo; + const size = fontInfo.size; + const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; + const curFontName = fontInfo.name; + const fonts = storeCellSettings.fontsArray; + + const [vlFonts, setVlFonts] = useState({ + vlData: { + items: [], + } + }); + + const renderExternal = (vl, vlData) => { + setVlFonts((prevState) => { + let fonts = [...prevState.vlData.items]; + fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items); + return {vlData: { + items: fonts, + }}; + }); + }; + + return ( + + + + + {!isAndroid &&
{displaySize}
} +
+ + + {isAndroid && } + + +
+
+
+ {_t.textFonts} + +
    + {vlFonts.vlData.items.map((item, index) => ( + {props.onFontClick(item.name)}} + > + ))} +
+
+
+ ); +}; + +const PageTextColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const customColors = storePalette.customColors; + const fontColor = storeCellSettings.fontColor; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeCellSettings.changeFontColor(newColor); + props.onTextColor(newColor); + } else { + storeCellSettings.changeFontColor(color); + props.onTextColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-cell-text-custom-color/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageFillColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const customColors = storePalette.customColors; + const fillColor = storeCellSettings.fillColor; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeCellSettings.changeFillColor(newColor); + props.onFillColor(newColor); + } else { + storeCellSettings.changeFillColor(color); + props.onFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-cell-fill-custom-color/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageCustomTextColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + let fontColor = props.storeCellSettings.fontColor; + + if (typeof fontColor === 'object') { + fontColor = fontColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onTextColor(color); + props.storeCellSettings.changeFontColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageCustomFillColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + let fillColor = props.storeCellSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeCellSettings.changeFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageTextFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const isAndroid = Device.android; + const storeCellSettings = props.storeCellSettings; + const hAlignStr = storeCellSettings.hAlignStr; + const vAlignStr = storeCellSettings.vAlignStr; + const isWrapText = storeCellSettings.isWrapText; + + return ( + + + + { + props.onHAlignChange('left'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('center'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('right'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('justify'); + }}> + {!isAndroid ? + : null + } + + + + { + props.onVAlignChange('top'); + }}> + {!isAndroid ? : null} + + { + props.onVAlignChange('center'); + }}> + {!isAndroid ? : null} + + { + props.onVAlignChange('bottom'); + }}> + {!isAndroid ? : null} + + + + + {!isAndroid ? : null} + {props.onWrapTextChange(!isWrapText)}} /> + + + + ) +}; + +const PageTextOrientationCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const isAndroid = Device.android; + const storeCellSettings = props.storeCellSettings; + const orientationStr = storeCellSettings.orientationStr; + + return ( + + + + : null} onChange={() => { + props.onTextOrientationChange('horizontal'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('anglecount'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('angleclock'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('vertical'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('rotateup'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('rotatedown'); + }}> + {!isAndroid ? + : null + } + + + + ) +}; + +const PageBorderStyleCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + + const borderSizes = { + 7: `${_t.textThin}`, + 12: `${_t.textMedium}`, + 13: `${_t.textThick}` + }; + + return ( + + + + { + storeCellSettings.changeBorderStyle('none'); + props.onBorderStyle('none', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('all'); + props.onBorderStyle('all', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('2'); + props.onBorderStyle('2', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('0'); + props.onBorderStyle('0', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('3'); + props.onBorderStyle('3', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('1'); + props.onBorderStyle('1', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('inner'); + props.onBorderStyle('inner', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('6'); + props.onBorderStyle('6', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('7'); + props.onBorderStyle('7', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('5'); + props.onBorderStyle('5', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('4'); + props.onBorderStyle('4', borderInfo); + }}> + + + + + + + + + + + + ) +}; + +const PageBorderColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + const borderColor = borderInfo.color; + const borderStyle = storeCellSettings.borderStyle; + const customColors = storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeCellSettings.changeBorderColor(newColor); + props.onBorderStyle(borderStyle, borderInfo); + } else { + storeCellSettings.changeBorderColor(color); + props.onBorderStyle(borderStyle, borderInfo); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-border-custom-color-cell/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageCustomBorderColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const storePalette = props.storePalette; + const borderInfo = storeCellSettings.borderInfo; + let borderColor = borderInfo.color; + + if(typeof borderColor === "object") { + borderColor = borderInfo.color.color; + } + + const borderStyle = storeCellSettings.borderStyle; + + const onAddNewColor = (colors, color) => { + storePalette.changeCustomColors(colors); + storeCellSettings.changeBorderColor(color); + props.onBorderStyle(borderStyle, borderInfo); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderSizeCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + const borderStyle = storeCellSettings.borderStyle; + + const borderSizes = { + 7: `${_t.textThin}`, + 12: `${_t.textMedium}`, + 13: `${_t.textThick}` + } + + return ( + + + + {Object.keys(borderSizes).map(key => { + return ( + { + storeCellSettings.changeBorderSize(+key); + props.onBorderStyle(borderStyle, borderInfo); + }}> + ) + })} + + + ) +} + +const PageFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('R2VuZXJhbA==')}> + + + props.onCellFormat('MC4wMA==')}> + + + props.onCellFormat('JTIzMA==')}> + + + props.onCellFormat('MC4wMEUlMkIwMA==')}> + + + + + + + + + + + + + + + props.onCellFormat('MC4wMCUyNQ==')}> + + + props.onCellFormat('JTQw')}> + + + + + ) +} + +const PageAccountingFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('XyglRTIlODIlQUMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglRTIlODIlQUMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglRTIlODIlQUMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('XyglQzIlQTMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('Xy0qJTIwJTIzJTJDJTIzJTIzMC4wMCU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0ItKiUyMCUyMyUyQyUyMyUyMzAuMDAlNUIlMjQlRDElODAuLTQxOSU1RF8tJTNCXy0qJTIwJTIyLSUyMiUzRiUzRiU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0JfLSU0MF8t')}> + + props.onCellFormat('XyglQzIlQTUqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTUqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTUqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + + + ) +} + +const PageCurrencyFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('JTI0JTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JUUyJTgyJUFDJTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JUMyJUEzJTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JTIzJTJDJTIzJTIzMC4wMCUyMiVEMSU4MC4lMjI=')}> + + props.onCellFormat('JUMyJUE1JTIzJTJDJTIzJTIzMC4wMA==')}> + + + + ) +} + +const PageDateFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('TU0tZGQteXk=')}> + props.onCellFormat('TU0tZGQteXl5eQ==')}> + + props.onCellFormat('ZGQtTU0teXk=')}> + + props.onCellFormat('ZGQtTU0teXl5eQ==')}> + + props.onCellFormat('ZGQtTU1NLXl5eXk=')}> + + props.onCellFormat('ZGQtTU1N')}> + + props.onCellFormat('TU1NLXl5')}> + + + + ) +} + +const PageTimeFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('aCUzQW1tJTNCJTQw')}> + + props.onCellFormat('aCUzQW1tJTNBc3MlM0IlNDA=')}> + + props.onCellFormat('aCUzQW1tJTIwQU0lMkZQTSUzQiU0MA==')}> + + props.onCellFormat('aCUzQW1tJTNBc3MlMjBBTSUyRlBNJTNCJTQw')}> + + props.onCellFormat('JTVCaCU1RCUzQW1tJTNBc3MlM0IlNDA=')}> + + + + ) +} + + +const PageEditCell = inject("storeCellSettings")(observer(EditCell)); +const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell)); +const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell)); +const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell)); +const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell)); +const FontsCell = inject("storeCellSettings")(observer(PageFontsCell)); +const TextFormatCell = inject("storeCellSettings")(observer(PageTextFormatCell)); +const TextOrientationCell = inject("storeCellSettings")(observer(PageTextOrientationCell)); +const BorderStyleCell = inject("storeCellSettings")(observer(PageBorderStyleCell)); +const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell)); +const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell)); +const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell)); + +export { + PageEditCell as EditCell, + TextColorCell, + FillColorCell, + CustomFillColorCell, + CustomTextColorCell, + FontsCell, + TextFormatCell, + TextOrientationCell, + BorderStyleCell, + BorderColorCell, + CustomBorderColorCell, + BorderSizeCell, + PageFormatCell, + PageAccountingFormatCell, + PageCurrencyFormatCell, + PageDateFormatCell, + PageTimeFormatCell +}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx new file mode 100644 index 000000000..d7c291a6a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -0,0 +1,1275 @@ +import React, {Fragment, useState, useEffect} from 'react'; +import {observer, inject} from "mobx-react"; +import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let fillColor = props.storeChartSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeChartSettings.setFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + const curFillColor = storeChartSettings.fillColor ? storeChartSettings.fillColor : storeChartSettings.getFillColor(shapeProperties); + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeChartSettings.setFillColor(newColor); + } else { + props.onFillColor(color); + storeChartSettings.setFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-fill-color/'); + } + }; + + return ( + + + + + + + ) +})); + +const PageCustomBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let borderColor = props.storeChartSettings.borderColor; + + if (typeof borderColor === 'object') { + borderColor = borderColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onBorderColor(color); + props.storeChartSettings.setBorderColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const storePalette = props.storePalette; + const borderColor = storeChartSettings.borderColor; + const customColors = storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onBorderColor(newColor); + storeChartSettings.setBorderColor(newColor); + } else { + props.onBorderColor(color); + storeChartSettings.setBorderColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-border-color/'); + } + }; + + return ( + + + + + + + + ) +}; + +const PageStyle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties(); + const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + + const styles = storeChartSettings.styles; + const types = storeChartSettings.types; + const curType = chartProperties.getType(); + + // Init border size + + const shapeStroke = shapeProperties.get_stroke(); + const borderSizeTransform = storeChartSettings.borderSizeTransform(); + const borderSize = shapeStroke.get_width() * 72.0 / 25.4; + const borderType = shapeStroke.get_type(); + const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize); + const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize); + const [stateBorderSize, setBorderSize] = useState(displayBorderSize); + const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); + + // Init border color + + if(!storeChartSettings.borderColor) { + storeChartSettings.initBorderColor(shapeProperties); + } + + const borderColor = storeChartSettings.borderColor; + const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; + + return ( + + +
+ {_t.textType} + {_t.textStyle} + {_t.textFill} + {_t.textBorder} +
+
+ + +
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    +
  • + ) + })} +
+ ) + })} +
+
+ +
+ {styles ? styles.map((row, rowIndex) => { + return ( +
    + {row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
  • + ) + })} +
+ ) + }) : +
{_t.textNoStyles}
+ } +
+
+ + + + + + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+
+ + + +
+
+
+
+ ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReorder('all-up')}} link='#' className='no-indicator'> + + + {props.onReorder('all-down')}} link='#' className='no-indicator'> + + + {props.onReorder('move-up')}} link='#' className='no-indicator'> + + + {props.onReorder('move-down')}} link='#' className='no-indicator'> + + + + + ) +}; + +const PageLayout = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + const chartObject = storeFocusObjects.chartObject; + const chartProperties = chartObject.get_ChartProperties(); + const chartType = chartProperties.getType(); + + const [chartTitle, setTitle] = useState(chartProperties.getTitle()); + const [chartLegend, setLegend] = useState(chartProperties.getLegendPos()); + const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel()); + const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel()); + const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines()); + const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines()); + const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos()); + + let dataLabelPos = [ + { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, + { value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: _t.textCenter } + ]; + + if (chartType == Asc.c_oAscChartTypeSettings.barNormal || chartType == Asc.c_oAscChartTypeSettings.hBarNormal) { + dataLabelPos.push( + {value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom}, + {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop}, + {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop} + ); + } else if ( chartType == Asc.c_oAscChartTypeSettings.barStacked || + chartType == Asc.c_oAscChartTypeSettings.barStackedPer || + chartType == Asc.c_oAscChartTypeSettings.hBarStacked || + chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ) { + dataLabelPos.push( + { value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom }, + { value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop } + ); + } else if (chartType == Asc.c_oAscChartTypeSettings.lineNormal || + chartType == Asc.c_oAscChartTypeSettings.lineStacked || + chartType == Asc.c_oAscChartTypeSettings.lineStackedPer || + chartType == Asc.c_oAscChartTypeSettings.stock || + chartType == Asc.c_oAscChartTypeSettings.scatter) { + dataLabelPos.push( + { value: Asc.c_oAscChartDataLabelsPos.l, displayValue: _t.textLeft }, + { value: Asc.c_oAscChartDataLabelsPos.r, displayValue: _t.textRight }, + { value: Asc.c_oAscChartDataLabelsPos.t, displayValue: _t.textTop }, + { value: Asc.c_oAscChartDataLabelsPos.b, displayValue: _t.textBottom } + ); + } else if (chartType == Asc.c_oAscChartTypeSettings.pie || chartType == Asc.c_oAscChartTypeSettings.pie3d) { + dataLabelPos.push( + {value: Asc.c_oAscChartDataLabelsPos.bestFit, displayValue: _t.textFit}, + {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop}, + {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop} + ); + } + + const disableSetting = props.disableSetting; + + const chartLayoutTitles = { + 0: `${_t.textNone}`, + 1: `${_t.textOverlay}`, + 2: `${_t.textNoOverlay}` + }; + + const chartLayoutLegends = { + 0: `${_t.textNone}`, + 1: `${_t.textLeft}`, + 2: `${_t.textTop}`, + 3: `${_t.textRight}`, + 4: `${_t.textBottom}`, + 5: `${_t.textLeftOverlay}`, + 6: `${_t.textRightOverlay}` + }; + + const chartLayoutAxisTitleHorizontal = { + 0: `${_t.textNone}`, + 1: `${_t.textNoOverlay}` + }; + + const chartLayoutAxisTitleVertical = { + 0: `${_t.textNone}`, + 1: `${_t.textRotated}`, + 3: `${_t.textHorizontal}` + }; + + const chartLayoutGridlinesHorizontal = { + 0: `${_t.textNone}`, + 1: `${_t.textMajor}`, + 2: `${_t.textMinor}`, + 3: `${_t.textMajorAndMinor}` + }; + + const chartLayoutGridlinesVertical = { + 0: `${_t.textNone}`, + 1: `${_t.textMajor}`, + 2: `${_t.textMinor}`, + 3: `${_t.textMajorAndMinor}` + }; + + const chartDataLabels = { + 0: `${_t.textNone}`, + 3: `${_t.textCenter}`, + 2: `${_t.textFit}`, + 5: `${_t.textInnerTop}`, + 7: `${_t.textOuterTop}` + }; + + return ( + + + + + + + + + {_t.textAxisTitle} + + + + + + + {_t.textGridlines} + + + + + + + + + + + + ) +} + +const PageChartTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutTitles = props.chartLayoutTitles; + const [currentTitle, setTitle] = useState(props.chartTitle); + + return ( + + + + {Object.keys(chartLayoutTitles).map(key => { + return ( + { + props.setTitle(+key); + setTitle(+key); + props.setLayoutProperty('putTitle', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageLegend = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutLegends = props.chartLayoutLegends; + const [currentLegend, setLegend] = useState(props.chartLegend); + + return ( + + + + {Object.keys(chartLayoutLegends).map(key => { + return ( + { + props.setLegend(+key); + setLegend(+key); + props.setLayoutProperty('putLegendPos', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageHorizontalAxisTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal; + const [currentAxisHorTitle, setAxisHorTitle] = useState(props.chartAxisHorTitle); + + return ( + + + + {Object.keys(chartLayoutAxisTitleHorizontal).map(key => { + return ( + { + props.setAxisHorTitle(+key); + setAxisHorTitle(+key); + props.setLayoutProperty('putHorAxisLabel', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageVerticalAxisTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical; + const [currentAxisVertTitle, setAxisVertTitle] = useState(props.chartAxisVertTitle); + + return ( + + + + {Object.keys(chartLayoutAxisTitleVertical).map(key => { + return ( + { + props.setAxisVertTitle(+key); + setAxisVertTitle(+key); + props.setLayoutProperty('putVertAxisLabel', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageHorizontalGridlines = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal; + const [currentChartHorGridlines, setHorGridlines] = useState(props.chartHorGridlines); + + return ( + + + + {Object.keys(chartLayoutGridlinesHorizontal).map(key => { + return ( + { + props.setHorGridlines(+key); + setHorGridlines(+key); + props.setLayoutProperty('putHorGridLines', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageVerticalGridlines = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical; + const [currentChartVertGridlines, setVertGridlines] = useState(props.chartVertGridlines); + + return ( + + + + {Object.keys(chartLayoutGridlinesVertical).map(key => { + return ( + { + props.setVertGridlines(+key); + setVertGridlines(+key); + props.setLayoutProperty('putVertGridLines', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageDataLabels = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartDataLabels = props.chartDataLabels; + const [currentChartDataLabel, setDataLabel] = useState(props.chartDataLabel); + + return ( + + + + {Object.keys(chartDataLabels).map(key => { + return ( + { + props.setDataLabel(+key); + setDataLabel(+key); + props.setLayoutProperty('putDataLabelsPos', key); + props.f7router.back(); + }}> + ) + })} + + + ) +} + +const PageVerticalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); + const isIos = Device.ios; + const verAxisProps = chartProperty.getVertAxisProps(); + const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const vertAxisDisplayUnits = [ + {display: `${_t.textNone}`, value: Asc.c_oAscValAxUnits.none}, + {display: `${_t.textHundreds}`, value: Asc.c_oAscValAxUnits.HUNDREDS}, + {display: `${_t.textThousands}`, value: Asc.c_oAscValAxUnits.THOUSANDS}, + {display: `${_t.textTenThousands}`, value: Asc.c_oAscValAxUnits.TEN_THOUSANDS}, + {display: `${_t.textHundredThousands}`, value: Asc.c_oAscValAxUnits.HUNDRED_THOUSANDS}, + {display: `${_t.textMillions}`, value: Asc.c_oAscValAxUnits.MILLIONS}, + {display: `${_t.textTenMillions}`, value: Asc.c_oAscValAxUnits.TEN_MILLIONS}, + {display: `${_t.textHundredMil}`, value: Asc.c_oAscValAxUnits.HUNDRED_MILLIONS}, + {display: `${_t.textBillions}`, value: Asc.c_oAscValAxUnits.BILLIONS}, + {display: `${_t.textTrillions}`, value: Asc.c_oAscValAxUnits.TRILLIONS} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const verticalAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses()); + + const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); + const [currentDisplayUnits, setDisplayUnits] = useState(defineCurrentDisplayUnits()); + + const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertValOrder()); + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType)); + const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType)); + + const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition()); + + const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); + const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal()); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + props.onVerAxisMinValue(e.target.value)} + onInput={e => setMinValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> + + props.onVerAxisMaxValue(e.target.value)} + onInput={e => setMaxValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> + + + + {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? ( + props.onVerAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> + ) : null} + + + + +
+ { + toggleValuesReverseOrder(!valuesReverseOrder); + props.onVerAxisReverse(!valuesReverseOrder); + }} /> +
+
+
+ {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + +
+ ) +} + +const PageVertAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const axisCrosses = props.axisCrosses; + const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses); + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + props.setAxisCrosses(elem); + setAxisCrosses(elem); + props.onVerAxisCrossType(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageDisplayUnits = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const vertAxisDisplayUnits = props.vertAxisDisplayUnits; + const [currentDisplayUnits, setDisplayUnits] = useState(props.currentDisplayUnits); + + return ( + + + + {vertAxisDisplayUnits.map((elem, index) => { + return ( + { + props.setDisplayUnits(elem); + setDisplayUnits(elem); + props.onVerAxisDisplayUnits(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageVertMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentMajorType, setMajorType] = useState(props.currentMajorType); + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + props.setMajorType(elem); + setMajorType(elem); + props.onVerAxisTickMajor(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageVertMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentMinorType, setMinorType] = useState(props.currentMinorType); + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + props.setMinorType(elem); + setMinorType(elem); + props.onVerAxisTickMinor(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageVertLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition); + const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition; + + return ( + + + + {verticalAxisLabelsPosition.map((elem, index) => { + return ( + { + props.setLabelsPosition(elem); + setLabelsPosition(elem); + props.onVerAxisLabelPos(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageHorizontalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const isIos = Device.ios; + const chartProperty = api.asc_getChartObject(); + const horAxisProps = chartProperty.getHorAxisProps(); + const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const horAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const horAxisPosition = [ + {display: `${_t.textOnTickMarks}`, value: Asc.c_oAscLabelsPosition.byDivisions}, + {display: `${_t.textBetweenTickMarks}`, value: Asc.c_oAscLabelsPosition.betweenDivisions} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses()); + + const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); + const [axisPosition, setAxisPosition] = useState(defineAxisPosition()); + + const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertCatOrder()); + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + + const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType)); + const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType)); + + const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition()); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + + {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? ( + props.onHorAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> + ) : null} + + + + +
+ { + toggleValuesReverseOrder(!valuesReverseOrder); + props.onHorAxisReverse(!valuesReverseOrder); + }} /> +
+
+
+ {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + +
+ ) +} + +const PageHorAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses); + const axisCrosses = props.axisCrosses; + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + props.setAxisCrosses(elem); + setAxisCrosses(elem); + props.onHorAxisCrossType(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageHorAxisPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [axisPosition, setAxisPosition] = useState(props.axisPosition); + const horAxisPosition = props.horAxisPosition; + + return ( + + + + {horAxisPosition.map((elem, index) => { + return ( + { + props.setAxisPosition(elem); + setAxisPosition(elem); + props.onHorAxisPos(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageHorMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentMajorType, setMajorType] = useState(props.currentMajorType); + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + props.setMajorType(elem); + setMajorType(elem); + props.onHorAxisTickMajor(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageHorMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentMinorType, setMinorType] = useState(props.currentMinorType); + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + props.setMinorType(elem); + setMinorType(elem); + props.onHorAxisTickMinor(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const PageHorLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition); + const horAxisLabelsPosition = props.horAxisLabelsPosition; + + return ( + + + + {horAxisLabelsPosition.map((elem, index) => { + return ( + { + props.setLabelsPosition(elem); + setLabelsPosition(elem); + props.onHorAxisLabelPos(elem.value); + props.f7router.back(); + }}> + + ) + })} + + + ) +} + +const EditChart = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + const chartProperties = storeFocusObjects.chartObject.get_ChartProperties(); + const chartType = chartProperties.getType(); + + const disableSetting = ( + chartType == Asc.c_oAscChartTypeSettings.pie || + chartType == Asc.c_oAscChartTypeSettings.doughnut || + chartType == Asc.c_oAscChartTypeSettings.pie3d + ); + + return ( + + + + + + + + + + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + + + ) +}; + +const PageEditChart = inject("storeFocusObjects")(observer(EditChart)); +const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); +const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); +const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); +const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout)); +const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis)); +const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis)); + +export { + PageEditChart as EditChart, + PageChartStyle, + PageChartCustomFillColor, + PageChartBorderColor, + PageChartCustomBorderColor, + PageReorder as PageChartReorder, + PageChartLayout, + PageLegend, + PageChartTitle, + PageHorizontalAxisTitle, + PageVerticalAxisTitle, + PageHorizontalGridlines, + PageVerticalGridlines, + PageDataLabels, + PageChartVerticalAxis, + PageVertAxisCrosses, + PageDisplayUnits, + PageVertMajorType, + PageVertMinorType, + PageVertLabelPosition, + PageChartHorizontalAxis, + PageHorAxisCrosses, + PageHorAxisPosition, + PageHorMajorType, + PageHorMinorType, + PageHorLabelPosition +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx new file mode 100644 index 000000000..d0653dfe0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx @@ -0,0 +1,153 @@ +import React, {useState, useEffect, Fragment} from 'react'; +import {observer, inject} from "mobx-react"; +import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from "../../../../../common/mobile/utils/device"; + +const PageTypeLink = ({curType, changeType}) => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [typeLink, setTypeLink] = useState(curType); + + return ( + + + + {setTypeLink(1); changeType(1);}}> + {setTypeLink(2); changeType(2);}}> + + + ) +}; + +const PageSheet = ({curSheet, sheets, changeSheet}) => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [stateSheet, setSheet] = useState(curSheet.value); + + return ( + + + + {sheets.map(sheet => { + return( + { + setSheet(sheet.value); + changeSheet(sheet); + }} + /> + ) + })} + + + + ) +}; + +const EditLink = props => { + const isIos = Device.ios; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const linkInfo = props.linkInfo; + const isLock = props.isLock; + const sheets = props.sheets; + const activeSheet = props.activeSheet; + const currentSheet = props.currentSheet; + const valueLinkInfo = linkInfo.asc_getType(); + const linkSheet = (valueLinkInfo == Asc.c_oAscHyperlinkType.RangeLink) ? linkInfo.asc_getSheet() : currentSheet; + + const [typeLink, setTypeLink] = useState(valueLinkInfo); + const textType = typeLink != Asc.c_oAscHyperlinkType.RangeLink ? _t.textExternalLink : _t.textInternalDataRange; + const changeType = (newType) => { + setTypeLink(newType); + }; + + const [link, setLink] = useState(linkInfo.asc_getHyperlinkUrl() ? linkInfo.asc_getHyperlinkUrl().replace(new RegExp(" ", 'g'), "%20") : ''); + + const displayText = isLock ? _t.textDefault : linkInfo.asc_getText(); + const [stateDisplayText, setDisplayText] = useState(displayText); + + const [screenTip, setScreenTip] = useState(linkInfo.asc_getTooltip()); + + const [curSheet, setSheet] = useState(activeSheet); + const changeSheet = (sheet) => { + setSheet(sheet); + }; + + const valueRange = linkInfo.asc_getRange(); + const [range, setRange] = useState(valueRange || ''); + + return ( + + + + {typeLink != Asc.c_oAscHyperlinkType.RangeLink && + {setLink(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {typeLink == Asc.c_oAscHyperlinkType.RangeLink && + + } + {typeLink == Asc.c_oAscHyperlinkType.RangeLink && + {setRange(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {setDisplayText(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + {setScreenTip(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + + + {props.onEditLink(typeLink === 1 ? + {type: 1, url: link, text: stateDisplayText, tooltip: screenTip} : + {type: 2, url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}} + /> + props.onRemoveLink()} + /> + + + ) +}; + +export { + EditLink, + PageTypeLink, + PageSheet +}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx new file mode 100644 index 000000000..b056ac4bb --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx @@ -0,0 +1,235 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; + +const EditText = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + // const metricText = Common.Utils.Metric.getCurrentMetricName(); + const storeTextSettings = props.storeTextSettings; + const textIn = storeTextSettings.textIn; + + const fontName = storeTextSettings.fontName || _t.textFonts; + const fontSize = storeTextSettings.fontSize; + const fontColor = storeTextSettings.textColor; + // console.log(fontColor); + + const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; + const isBold = storeTextSettings.isBold; + const isItalic = storeTextSettings.isItalic; + const isUnderline = storeTextSettings.isUnderline; + const paragraphAlign = storeTextSettings.paragraphAlign; + const paragraphValign = storeTextSettings.paragraphValign; + + const fontColorPreview = fontColor !== 'auto' ? + : + ; + + return ( + + + + + + {props.toggleBold(!isBold)}}>B + {props.toggleItalic(!isItalic)}}>I + {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U + + + + {!isAndroid ? + {fontColorPreview} : + fontColorPreview + } + + + {textIn === 2 ? ( + + + + + {props.onParagraphAlign('left')}}> + + + {props.onParagraphAlign('center')}}> + + + {props.onParagraphAlign('right')}}> + + + {props.onParagraphAlign('justify')}}> + + + + + + + {props.onParagraphValign('top')}}> + + + {props.onParagraphValign('center')}}> + + + {props.onParagraphValign('bottom')}}> + + + + + + + ) : null} + + ); +}; + +const PageFonts = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const size = storeTextSettings.fontSize; + const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; + const curFontName = storeTextSettings.fontName; + const fonts = storeTextSettings.fontsArray; + + const [vlFonts, setVlFonts] = useState({ + vlData: { + items: [], + } + }); + + const renderExternal = (vl, vlData) => { + setVlFonts((prevState) => { + let fonts = [...prevState.vlData.items]; + fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items); + return {vlData: { + items: fonts, + }}; + }); + }; + + return ( + + + + + {!isAndroid &&
{displaySize}
} +
+ + + {isAndroid && } + + +
+
+
+ {_t.textFonts} + +
    + {vlFonts.vlData.items.map((item, index) => ( + {props.changeFontFamily(item.name)}} + > + ))} +
+
+
+ ); +}; + +const PageFontColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const storePalette = props.storePalette; + const textColor = storeTextSettings.textColor; + const customColors = storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onTextColor(newColor); + storeTextSettings.changeTextColor(newColor); + } else { + props.onTextColor(color); + storeTextSettings.changeTextColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-text-custom-font-color/'); + } + }; + + return ( + + + + + + + + ); +}; + +const PageCustomFontColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const storePalette = props.storePalette; + let textColor = storeTextSettings.textColor; + + if (typeof textColor === 'object') { + textColor = textColor.color; + } + + const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null; + + const onAddNewColor = (colors, color) => { + storePalette.changeCustomColors(colors); + storeTextSettings.changeTextColor(color); + props.onTextColor(color); + props.f7router.back(); + }; + return ( + + + + + ) +}; + +const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); +const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); +const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor)); +const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); + +export { + EditTextContainer as EditText, + PageTextFonts, + PageTextFontColor, + PageTextCustomFontColor +}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx new file mode 100644 index 000000000..4755b03b0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -0,0 +1,198 @@ +import React, {Fragment} from "react"; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageApplicationSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const unitMeasurement = storeApplicationSettings.unitMeasurement; + const formulaLang = storeApplicationSettings.formulaLang; + const regData = storeApplicationSettings.regData; + const regCode = storeApplicationSettings.regCode; + const regExample = storeApplicationSettings.regExample; + const dataLang = storeApplicationSettings.getFormulaLanguages(); + const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang); + const currentFormulaLang = defineFormulaLang(); + const defineRegSetting = () => regData.find(obj => regCode === obj.code); + const currentRegSetting = defineRegSetting(); + const isRefStyle = storeApplicationSettings.isRefStyle; + const isComments = storeApplicationSettings.isComments; + const isResolvedComments = storeApplicationSettings.isResolvedComments; + + const changeMeasureSettings = value => { + storeApplicationSettings.changeUnitMeasurement(value); + props.unitMeasurementChange(value); + }; + + // set mode + // const appOptions = props.storeAppOptions; + // const _isEdit = appOptions.isEdit; + // const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true; + + return ( + + + {/* {_isEdit && */} + + {_t.textUnitOfMeasurement} + + changeMeasureSettings(0)}> + changeMeasureSettings(1)}> + changeMeasureSettings(2)}> + + {_t.textFormulaLanguage} + + + + + {_t.textRegionalSettings} + + + + {_t.textCommentingDisplay} + + + {_t.textComments} + { + storeApplicationSettings.changeDisplayComments(!isComments); + props.onChangeDisplayComments(!isComments); + }} + /> + + + {_t.textResolvedComments} + { + storeApplicationSettings.changeDisplayResolved(!isResolvedComments); + props.onChangeDisplayResolved(!isResolvedComments); + }} + /> + + + + + {_t.textR1C1Style} + { + storeApplicationSettings.changeRefStyle(!isRefStyle); + props.clickR1C1Style(!isRefStyle); + }} + /> + + + + {/* } */} + {/* {_isShowMacros && */} + + + + {/* } */} + + ); +}; + +const PageRegionalSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const regData = storeApplicationSettings.regData; + const regCode = storeApplicationSettings.regCode; + + return ( + + + + {regData.length ? regData.map((elem, index) => { + return ( + { + storeApplicationSettings.changeRegCode(elem.code); + props.onRegSettings(elem.code); + }}> +
+ +
{elem.displayName}
+
+
+ ) + }) : null} +
+
+ ) +} + +const PageFormulaLanguage = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const formulaLang = storeApplicationSettings.formulaLang; + const dataLang = storeApplicationSettings.getFormulaLanguages(); + + return ( + + + + {dataLang.map((elem, index) => { + return ( + { + storeApplicationSettings.changeFormulaLang(elem.value); + props.onFormulaLangChange(elem.value); + }}> + + ) + })} + + + ) +} + +const PageMacrosSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const macrosMode = storeApplicationSettings.macrosMode; + + const changeMacros = value => { + storeApplicationSettings.changeMacrosSettings(value); + props.onChangeMacrosSettings(value); + }; + + return ( + + + + changeMacros(2)}> + changeMacros(0)}> + changeMacros(1)}> + + + ); +}; + +const ApplicationSettings = inject("storeApplicationSettings")(observer(PageApplicationSettings)); +const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings)); +const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings)); +const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage)); + +export { + ApplicationSettings, + MacrosSettings, + RegionalSettings, + FormulaLanguage +}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx new file mode 100644 index 000000000..19e114966 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const Download = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + + return ( + + + {_t.textDownloadAs} + + props.onSaveFormat(Asc.c_oAscFileType.XLSX)}> + + + props.onSaveFormat(Asc.c_oAscFileType.PDF)}> + + + props.onSaveFormat(Asc.c_oAscFileType.PDFA)}> + + + props.onSaveFormat(Asc.c_oAscFileType.ODS)}> + + + props.onSaveFormat(Asc.c_oAscFileType.CSV)}> + + + props.onSaveFormat(Asc.c_oAscFileType.XLTX)}> + + + props.onSaveFormat(Asc.c_oAscFileType.OTS)}> + + + + + ) +} + +export default Download; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 4a4ee90c4..938900eff 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -3,20 +3,63 @@ 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 ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx'; +import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo.jsx'; +import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; +import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; +import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx'; +import SpreadsheetAbout from './SpreadsheetAbout.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 + }, + { + path: '/download/', + component: DownloadWithTranslation + }, + { + path: '/application-settings/', + component: ApplicationSettingsController + }, + { + path: '/macros-settings/', + component: MacrosSettings + }, + { + path: '/regional-settings/', + component: RegionalSettings + }, + { + path: '/formula-languages/', + component: FormulaLanguage + }, + { + path: '/spreadsheet-info/', + component: SpreadsheetInfoController + }, + { + path: '/spreadsheet-about/', + component: SpreadsheetAbout + } ]; @@ -32,35 +75,69 @@ const SettingsList = withTranslation()(props => { props.onOptionClick(page) }; + const closeModal = () => { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + }; + + const onPrint = () => { + closeModal(); + const api = Common.EditorApi.get(); + api.asc_Print(); + }; + + const showHelp = () => { + // let url = '{{HELP_URL}}'; + let url = 'https://helpcenter.onlyoffice.com'; + + if (url.charAt(url.length-1) !== '/') { + url += '/'; + } + + if (Device.sailfish || Device.android) { + url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; + } + else { + url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; + } + + closeModal(); + window.open(url, "_blank"); + }; + + return ( {navbar} {!props.inPopover && - - - + + + } - - + + - + - + - + - + - + - + diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx new file mode 100644 index 000000000..532e0435a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx @@ -0,0 +1,98 @@ +import React, { Fragment } from 'react'; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, Link } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageSpreadsheetAbout = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeAppOptions = props.storeAppOptions; + const isCanBranding = storeAppOptions.canBranding; + const licInfo = isCanBranding ? storeAppOptions.customization : null; + const customer = licInfo ? licInfo.customer : null; + const nameCustomer = customer ? customer.name : null; + const mailCustomer = customer ? customer.mail : null; + const addressCustomer = customer ? customer.address : null; + const urlCustomer = customer ? customer.www : null; + const infoCustomer = customer ? customer.info : null; + const logoCustomer = customer ? customer.logo : null; + + // console.log(storeAppOptions); + // console.log(isCanBranding); + + return ( + + + {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? + +
+ {/* {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? null : ( + + )} */} + {logoCustomer && logoCustomer.length ? ( + + ) : null} +
+
+

SPREADSHEET EDITOR

+

{_t.textVersion} 6.1.1

+
+
+ {nameCustomer && nameCustomer.length ? ( +

{nameCustomer}

+ ) : null} + {addressCustomer && addressCustomer.length ? ( +

+ + {addressCustomer} +

+ ) : null} + {mailCustomer && mailCustomer.length ? ( +

+ + {mailCustomer} +

+ ) : null} +

+ + +371 633-99867 +

+ {urlCustomer && urlCustomer.length ? ( +

+ + {urlCustomer} + +

+ ) : null} + {infoCustomer && infoCustomer.length ? ( +

+ +

+ ) : null} +
+
+
+

+ +

+

Ascensio System SIA

+

+ www.onlyoffice.com +

+
+
: + +
+ +
+
} +
+ ); +}; + +const SpreadsheetAbout = inject("storeAppOptions")(observer(PageSpreadsheetAbout)); + +export default SpreadsheetAbout; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx new file mode 100644 index 000000000..294e5ac43 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx @@ -0,0 +1,125 @@ +import React, {Fragment} from "react"; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageSpreadsheetInfo = (props) => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeSpreadsheetInfo = props.storeSpreadsheetInfo; + const dataApp = props.getAppProps(); + const dataModified = props.getModified; + const dataModifiedBy = props.getModifiedBy; + const creators = props.getCreators; + const dataDoc = storeSpreadsheetInfo.dataDoc; + + return ( + + + {dataDoc.title ? ( + + {_t.textSpreadsheetTitle} + + + + + ) : null} + {dataDoc.info.author || dataDoc.info.owner ? ( + + {_t.textOwner} + + + + + ) : null} + {dataDoc.info.folder ? ( + + {_t.textLocation} + + + + + ) : null} + {dataDoc.info.uploaded || dataDoc.info.created ? ( + + {_t.textUploaded} + + + + + ) : null} + {props.title ? ( + + {_t.textTitle} + + + + + ) : null} + {props.subject ? ( + + {_t.textSubject} + + + + + ) : null} + {props.description ? ( + + {_t.textComment} + + + + + ) : null} + {dataModified ? ( + + {_t.textLastModified} + + + + + ) : null} + {dataModifiedBy ? ( + + {_t.textLastModifiedBy} + + + + + ) : null} + {props.getCreated ? ( + + {_t.textCreated} + + + + + ) : null} + {dataApp ? ( + + {_t.textApplication} + + + + + ) : null} + {creators ? ( + + {_t.textAuthor} + + { + creators.split(/\s*[,;]\s*/).map(item => { + return + }) + } + + + ) : null} + + ); +}; + +const SpreadsheetInfo = inject("storeSpreadsheetInfo")(observer(PageSpreadsheetInfo)); + +export default SpreadsheetInfo; \ No newline at end of file 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..a39e95f2b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx @@ -0,0 +1,269 @@ +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(); + + 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(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(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 +};