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);
+ }}>
+
+
+ )
+ }) : 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
+};