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

Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
SergeyEzhin 2021-03-16 20:52:12 +03:00
parent a069d8c43b fd561f3687
commit b2c98bb817
51 changed files with 6588 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/main/lib/util/LanguageInfo.js
View file

@ -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() {

2
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => {
return(
<a key={`tc-${rowIndex}-${index}`}
className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
className={((curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor && curColor === effect.color)) ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a>

2
apps/common/mobile/lib/controller/Search.jsx
View file

@ -6,7 +6,7 @@ const SearchController = props => {
console.log('on search: ' + params);
};
return <SearchView onSearchQuery={onSearchQuery} />
return <SearchView onSearchQuery={onSearchQuery} />
};
export {SearchController, SearchView, SearchSettingsView};

21
apps/common/mobile/lib/view/Search.jsx
View file

@ -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 =
<View style={show_popover ? popoverStyle : null}>
{/* <Page> */}
{/* {navbar} */}
{extra}
{/* <Page>
{navbar} */}
{extra}
{/* </Page> */}
</View>;
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) {

4
apps/common/mobile/resources/less/_mixins.less
View file

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

30
apps/common/mobile/resources/less/common-ios.less
View file

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

25
apps/common/mobile/resources/less/common-material.less
View file

@ -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 {

253
apps/common/mobile/resources/less/common.less
View file

@ -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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
}
}
// 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;
}

1
apps/common/mobile/resources/less/ios/icons.less
View file

@ -1,4 +1,3 @@
.device-ios {
i.icon {
&.icon_mask {

1
apps/common/mobile/resources/less/material/icons.less
View file

@ -1,4 +1,3 @@
.device-android {
i.icon {
&.icon_mask {

6
apps/common/mobile/resources/less/variables.less
View file

@ -1,3 +1,9 @@
.md {
--background-normal: #f1f1f1;
}
@background-normal: var(--background-normal, #fff);
@border-regular-control: #cbcbcb;
@text-normal: #000;

225
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -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.<br>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": {

73
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

@ -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) {

209
apps/spreadsheeteditor/mobile/src/controller/Search.jsx Normal file
View file

@ -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 = (
<Page>
<Navbar title={_t.textFindAndReplace}>
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List>
<BlockTitle>{_t.textSearchIn}</BlockTitle>
<List>
<ListItem radio title={_t.textWorkbook} name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({
searchIn: 0
})} />
<ListItem radio title={_t.textSheet} name="search-in-checkbox" value="1" checked={this.state.searchIn === 1} onClick={( )=> this.setState({
searchIn: 1
})} />
</List>
<BlockTitle>{_t.textSearchBy}</BlockTitle>
<List>
<ListItem radio title={_t.textByRows} name="search-by-checkbox" value="0" checked={this.state.searchBy === 0} onClick={() => this.setState({
searchBy: 0
})} />
<ListItem radio title={_t.textByColumns} name="search-by-checkbox" value="1" checked={this.state.searchBy === 1} onClick={() => this.setState({
searchBy: 1
})} />
</List>
<BlockTitle>{_t.textLookIn}</BlockTitle>
<List>
<ListItem radio title={_t.textFormulas} name="look-in-checkbox" value="0" checked={this.state.lookIn === 0} onClick={() => this.setState({
lookIn: 0
})} />
<ListItem radio title={_t.textValues} name="look-in-checkbox" value="1" checked={this.state.lookIn === 1} onClick={() => this.setState({
lookIn: 1
})} />
</List>
<List>
<ListItem title={_t.textMatchCase}>
<Toggle slot="after" className="toggle-match-case" checked={this.state.isMatchCase} onToggleChange={() => this.setState({
isMatchCase: !this.state.isMatchCase
})} />
</ListItem>
<ListItem title={_t.textMatchCell}>
<Toggle slot="after" className="toggle-match-cell" checked={this.state.isMatchCell} onToggleChange={() => this.setState({
isMatchCell: !this.state.isMatchCell
})} />
</ListItem>
<ListItem title={_t.textHighlightRes}>
<Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
</ListItem>
</List>
</Page>
)
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 <SESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
});
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
export {Search, SearchSettingsWithTranslation as SearchSettings}

160
apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
View file

@ -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 (
<EditCell
<EditCell
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
onStyleClick={this.onStyleClick}
onTextColor={this.onTextColor}
onFillColor={this.onFillColor}
onFontSize={this.onFontSize}
onFontClick={this.onFontClick}
onHAlignChange={this.onHAlignChange}
onVAlignChange={this.onVAlignChange}
onWrapTextChange={this.onWrapTextChange}
onCellFormat={this.onCellFormat}
onTextOrientationChange={this.onTextOrientationChange}
onBorderStyle={this.onBorderStyle}
/>
)
}

395
apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx Normal file
View file

@ -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 (
<EditChart
onReorder={this.onReorder}
onBorderSize={this.onBorderSize}
onBorderColor={this.onBorderColor}
onFillColor={this.onFillColor}
onType={this.onType}
onStyle={this.onStyle}
onRemoveChart={this.onRemoveChart}
setLayoutProperty={this.setLayoutProperty}
onVerAxisMinValue={this.onVerAxisMinValue}
onVerAxisMaxValue={this.onVerAxisMaxValue}
onVerAxisCrossType={this.onVerAxisCrossType}
onVerAxisCrossValue={this.onVerAxisCrossValue}
onVerAxisDisplayUnits={this.onVerAxisDisplayUnits}
onVerAxisReverse={this.onVerAxisReverse}
onVerAxisTickMajor={this.onVerAxisTickMajor}
onVerAxisTickMinor={this.onVerAxisTickMinor}
onVerAxisLabelPos={this.onVerAxisLabelPos}
getHorizontalAxisProp={this.getHorizontalAxisProp}
setHorizontalAxisProp={this.setHorizontalAxisProp}
onHorAxisCrossType={this.onHorAxisCrossType}
onHorAxisCrossValue={this.onHorAxisCrossValue}
onHorAxisPos={this.onHorAxisPos}
onHorAxisReverse={this.onHorAxisReverse}
onHorAxisTickMajor={this.onHorAxisTickMajor}
onHorAxisTickMinor={this.onHorAxisTickMinor}
onHorAxisLabelPos={this.onHorAxisLabelPos}
/>
)
}
}
export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController));

145
apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx Normal file
View file

@ -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 (
<EditLink
linkInfo={this.linkInfo}
isLock={this.isLock}
sheets={this.sheets}
activeSheet={this.activeSheet}
currentSheet={this.currentSheet}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
/>
)
}
}
const EditLinkWithTranslation = withTranslation()(EditLinkController);
export {EditLinkWithTranslation as EditLinkController};

108
apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx Normal file
View file

@ -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 (
<EditText
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
onParagraphAlign={this.onParagraphAlign}
onParagraphValign={this.onParagraphValign}
changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
onTextColor={this.onTextColor}
/>
)
}
}
export default EditTextController;

105
apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx Normal file
View file

@ -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 (
<ApplicationSettings
initRegSettings={this.initRegSettings}
unitMeasurementChange={this.unitMeasurementChange}
textRegSettingsExample={this.textRegSettingsExample}
onChangeDisplayComments={this.onChangeDisplayComments}
onChangeDisplayResolved={this.onChangeDisplayResolved}
clickR1C1Style={this.clickR1C1Style}
onChangeMacrosSettings={this.onChangeMacrosSettings}
onFormulaLangChange={this.onFormulaLangChange}
onRegSettings={this.onRegSettings}
/>
)
}
}
export default inject("storeApplicationSettings")(observer(ApplicationSettingsController));

168
apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx Normal file
View file

@ -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 (
<Download onSaveFormat={this.onSaveFormat} />
);
}
}
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:
'<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
'<div class="row">' +
'<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
'<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
'</div>' +
'<div id="txt-encoding" class="small"></div>' +
'</div>',
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:
'<div class="input-field"><input type="password" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>',
buttons: buttons
}).open();
}
};
export {
DownloadWithTranslation,
onAdvancedOptions
}

103
apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx Normal file
View file

@ -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 (
<SpreadsheetInfo
getAppProps={this.getAppProps}
getModified={this.getModified}
getModifiedBy={this.getModifiedBy}
getCreators={this.getCreators}
getCreated={this.getCreated}
title={this.title}
subject={this.subject}
description={this.description}
/>
);
}
}
export default inject("storeAppOptions")(observer(SpreadsheetInfoController));

115
apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx Normal file
View file

@ -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 (
<SpreadsheetSettings
isPortrait={this.isPortrait}
isHideHeadings={this.isHideHeadings}
isHideGridlines={this.isHideGridlines}
onOrientationChange={this.onOrientationChange}
clickCheckboxHideHeadings={this.clickCheckboxHideHeadings}
clickCheckboxHideGridlines={this.clickCheckboxHideGridlines}
initPageColorSchemes={this.initPageColorSchemes}
onColorSchemeChange={this.onColorSchemeChange}
onFormatChange={this.onFormatChange}
initSpreadsheetMargins={this.initSpreadsheetMargins}
onPageMarginsChange={this.onPageMarginsChange}
/>
)
}
}
export default inject("storeSpreadsheetSettings")(observer(SpreadsheetSettingsController));

2
apps/spreadsheeteditor/mobile/src/less/app.less
View file

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

13
apps/spreadsheeteditor/mobile/src/less/celleditor.less
View file

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

6
apps/spreadsheeteditor/mobile/src/less/statusbar.less
View file

@ -51,8 +51,12 @@
}
i.icon {
width: 22px;
height: 22px;
&.icon-plus {
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{fontColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
@source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
.encoded-svg-mask(@source, @fontColor);
background-image: none;
}
}
}

9
apps/spreadsheeteditor/mobile/src/page/app.jsx
View file

@ -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() {

77
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -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 (
<Page name="home">
<Page name="home">
{/* Top Navbar */}
<Navbar id='editor-navbar'>
{/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
<NavLeft>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
</NavLeft>
<NavRight>
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
<Statusbar />
<Navbar id='editor-navbar'>
{/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
<NavLeft>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
</NavLeft>
<NavRight>
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
<Search useSuspense={false} />
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
<Statusbar />
<FunctionGroups /> {/* hidden component*/}
</Page>
<FunctionGroups /> {/* hidden component*/}
</Page>
)
}
};

67
apps/spreadsheeteditor/mobile/src/store/appOptions.js Normal file
View file

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

118
apps/spreadsheeteditor/mobile/src/store/applicationSettings.js Normal file
View file

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

196
apps/spreadsheeteditor/mobile/src/store/cellSettings.js Normal file
View file

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

124
apps/spreadsheeteditor/mobile/src/store/chartSettings.js
View file

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

54
apps/spreadsheeteditor/mobile/src/store/focusObjects.js
View file

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

14
apps/spreadsheeteditor/mobile/src/store/functions.js
View file

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

18
apps/spreadsheeteditor/mobile/src/store/mainStore.js
View file

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

13
apps/spreadsheeteditor/mobile/src/store/palette.js
View file

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

20
apps/spreadsheeteditor/mobile/src/store/shapeSettings.js
View file

@ -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<Math.floor(styles.length/4); row++) {
const group = [];
for (let cell=0; cell<4; cell++) {
@ -135,12 +147,13 @@ export class storeShapeSettings {
}
groups.push(group);
}
return groups;
}
// Fill Color
@observable fillColor = undefined;
fillColor = undefined;
setFillColor (color) {
this.fillColor = color;
@ -169,7 +182,7 @@ export class storeShapeSettings {
// Border size and color
@observable borderColorView;
borderColorView;
setBorderColor (color) {
this.borderColorView = color;
@ -220,5 +233,4 @@ export class storeShapeSettings {
}
}
}
}

18
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

@ -1,8 +1,8 @@
import {observable, action} from 'mobx';
import {observable, action, makeObservable} from 'mobx';
class Worksheet {
@observable sheet = {
sheet = {
index : -1,
active : false,
name : '',
@ -12,22 +12,30 @@ class Worksheet {
};
constructor(data = {}) {
makeObservable(this, {
sheet: observable
});
this.sheet.merge(data);
}
}
export class storeWorksheets {
@observable sheets;
sheets;
constructor() {
makeObservable(this, {
sheets: observable,
reset: action,
setActiveWorksheet: action
});
this.sheets = [];
}
@action reset(sheets) {
reset(sheets) {
this.sheets = Object.values(sheets)
}
@action setActiveWorksheet(i) {
setActiveWorksheet(i) {
if ( !this.sheets[i].active ) {
this.sheets.forEach(model => {
if ( model.active )

16
apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js Normal file
View file

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

96
apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js Normal file
View file

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

112
apps/spreadsheeteditor/mobile/src/store/textSettings.js Normal file
View file

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

232
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -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: <EditImageController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
if (settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (settings.indexOf('hyperlink') > -1) {
editors.push({
caption: _t.textHyperlink,
id: 'edit-link',
component: <EditLinkController />
})
}
}
return (

847
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -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' ?
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview"></span>;
const fillColorPreview = fillColor !== 'transparent' ?
<span className="color-preview" style={{ background: `#${(typeof fillColor === "object" ? fillColor.color : fillColor)}`}}></span> :
<span className="color-preview"></span>;
return (
<Fragment>
<List>
<ListItem title={fontName} link="/edit-cell-text-fonts/" after={displaySize} routeProps={{
onFontSize: props.onFontSize,
onFontClick: props.onFontClick
}}/>
<ListItem className='buttons'>
<Row>
<a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
</Row>
</ListItem>
<ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
onTextColor: props.onTextColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
fontColorPreview
}
</ListItem>
<ListItem title={_t.textFillColor} link="/edit-cell-fill-color/" routeProps={{
onFillColor: props.onFillColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-fill-color">{fillColorPreview}</Icon> :
fillColorPreview
}
</ListItem>
<ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{
onHAlignChange: props.onHAlignChange,
onVAlignChange: props.onVAlignChange,
onWrapTextChange: props.onWrapTextChange
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-left"></Icon> : null
}
</ListItem>
<ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
onTextOrientationChange: props.onTextOrientationChange
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
}
</ListItem>
<ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
onBorderStyle: props.onBorderStyle
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-table-borders-all"></Icon> : null
}
</ListItem>
</List>
<List>
<ListItem title={_t.textFormat} link="/edit-format-cell/" routeProps={{
onCellFormat: props.onCellFormat
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-format-general"></Icon> : null
}
</ListItem>
</List>
<BlockTitle>{_t.textCellStyles}</BlockTitle>
{cellStyles.length ? (
<List className="cell-styles-list">
{cellStyles.map((elem, index) => {
return (
<ListItem key={index} style={{backgroundImage: `url(${elem.image})`}}
className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
</ListItem>
)
})}
</List>
) : null}
</Fragment>
)
};
export default EditCell;
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 (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} />
<List>
<ListItem title={_t.textSize}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onFontSize(size, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displaySize}</label>}
<Button outline className='increment item-link' onClick={() => {props.onFontSize(size, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
}}>
<ul>
{vlFonts.vlData.items.map((item, index) => (
<ListItem
key={index}
radio
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.onFontClick(item.name)}}
></ListItem>
))}
</ul>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-cell-text-custom-color/'} routeProps={{
onTextColor: props.onTextColor
}}></ListItem>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textFillColor} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-cell-fill-custom-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fontColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textTextFormat} backLink={_t.textBack} />
<List>
<ListItem title={_t.textAlignLeft} radio checked={hAlignStr === 'left'} onChange={() => {
props.onHAlignChange('left');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-left"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAlignCenter} radio checked={hAlignStr === 'center'} onChange={() => {
props.onHAlignChange('center');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-center"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAlignRight} radio checked={hAlignStr === 'right'} onChange={() => {
props.onHAlignChange('right');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-right"></Icon> : null
}
</ListItem>
<ListItem title={_t.textJustified} radio checked={hAlignStr === 'justify'} onChange={() => {
props.onHAlignChange('justify');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-jast"></Icon> : null
}
</ListItem>
</List>
<List>
<ListItem title={_t.textAlignTop} radio checked={vAlignStr === 'top'} onChange={() => {
props.onVAlignChange('top');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-top"></Icon> : null}
</ListItem>
<ListItem title={_t.textAlignMiddle} radio checked={vAlignStr === 'center'} onChange={() => {
props.onVAlignChange('center');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-middle"></Icon> : null}
</ListItem>
<ListItem title={_t.textAlignBottom} radio checked={vAlignStr === 'bottom'} onChange={() => {
props.onVAlignChange('bottom');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-bottom"></Icon> : null}
</ListItem>
</List>
<List>
<ListItem title={_t.textWrapText}>
{!isAndroid ? <Icon slot="media" icon="icon-cell-wrap"></Icon> : null}
<Toggle checked={isWrapText} onChange={() => {props.onWrapTextChange(!isWrapText)}} />
</ListItem>
</List>
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textTextOrientation} backLink={_t.textBack} />
<List>
<ListItem title={_t.textHorizontalText} radio checked={orientationStr === 'horizontal'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null} onChange={() => {
props.onTextOrientationChange('horizontal');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAngleCounterclockwise} radio checked={orientationStr === 'anglecount'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-anglecount"></Icon> : null} onChange={() => {
props.onTextOrientationChange('anglecount');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-anglecount"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAngleClockwise} radio checked={orientationStr === 'angleclock'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-angleclock"></Icon> : null} onChange={() => {
props.onTextOrientationChange('angleclock');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-angleclock"></Icon> : null
}
</ListItem>
<ListItem title={_t.textVerticalText} radio checked={orientationStr === 'vertical'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-vertical"></Icon> : null} onChange={() => {
props.onTextOrientationChange('vertical');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-vertical"></Icon> : null
}
</ListItem>
<ListItem title={_t.textRotateTextUp} radio checked={orientationStr === 'rotateup'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-rotateup"></Icon> : null} onChange={() => {
props.onTextOrientationChange('rotateup');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-rotateup"></Icon> : null
}
</ListItem>
<ListItem title={_t.textRotateTextDown} radio checked={orientationStr === 'rotatedown'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon> : null} onChange={() => {
props.onTextOrientationChange('rotatedown');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon> : null
}
</ListItem>
</List>
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textBorderStyle} backLink={_t.textBack} />
<List>
<ListItem title={_t.textNoBorder} onClick={() => {
storeCellSettings.changeBorderStyle('none');
props.onBorderStyle('none', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-none"></Icon>
</ListItem>
<ListItem title={_t.textAllBorders} onClick={() => {
storeCellSettings.changeBorderStyle('all');
props.onBorderStyle('all', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
</ListItem>
<ListItem title={_t.textBottomBorder} onClick={() => {
storeCellSettings.changeBorderStyle('2');
props.onBorderStyle('2', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
</ListItem>
<ListItem title={_t.textTopBorder} onClick={() => {
storeCellSettings.changeBorderStyle('0');
props.onBorderStyle('0', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-top"></Icon>
</ListItem>
<ListItem title={_t.textLeftBorder} onClick={() => {
storeCellSettings.changeBorderStyle('3');
props.onBorderStyle('3', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-left"></Icon>
</ListItem>
<ListItem title={_t.textRightBorder} onClick={() => {
storeCellSettings.changeBorderStyle('1');
props.onBorderStyle('1', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-right"></Icon>
</ListItem>
<ListItem title={_t.textInsideBorders} onClick={() => {
storeCellSettings.changeBorderStyle('inner');
props.onBorderStyle('inner', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-inner"></Icon>
</ListItem>
<ListItem title={_t.textInsideVerticalBorder} onClick={() => {
storeCellSettings.changeBorderStyle('6');
props.onBorderStyle('6', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-center"></Icon>
</ListItem>
<ListItem title={_t.textInsideHorizontalBorder} onClick={() => {
storeCellSettings.changeBorderStyle('7');
props.onBorderStyle('7', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-middle"></Icon>
</ListItem>
<ListItem title={_t.textDiagonalUpBorder} onClick={() => {
storeCellSettings.changeBorderStyle('5');
props.onBorderStyle('5', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-dup"></Icon>
</ListItem>
<ListItem title={_t.textDiagonalDownBorder} onClick={() => {
storeCellSettings.changeBorderStyle('4');
props.onBorderStyle('4', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-ddown"></Icon>
</ListItem>
</List>
<List>
<ListItem title={_t.textColor} link='/edit-border-color-cell/' routeProps={{
onBorderStyle: props.onBorderStyle
}}>
<span className="color-preview"
slot="after"
style={{background:`#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`}}
></span>
</ListItem>
<ListItem title={_t.textSize} link='/edit-border-size-cell/' after={borderSizes[borderInfo.width]} routeProps={{
onBorderStyle: props.onBorderStyle
}}>
</ListItem>
</List>
</Page>
)
};
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 (
<Page>
<Navbar backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-border-custom-color-cell/'} routeProps={{
onBorderStyle: props.onBorderStyle
}}></ListItem>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textSize} backLink={_t.textBack} />
<List>
{Object.keys(borderSizes).map(key => {
return (
<ListItem key={key} title={borderSizes[key]} radio checked={+key === borderInfo.width} onChange={() => {
storeCellSettings.changeBorderSize(+key);
props.onBorderStyle(borderStyle, borderInfo);
}}></ListItem>
)
})}
</List>
</Page>
)
}
const PageFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textFormat} backLink={_t.textBack} />
<List>
<ListItem title={_t.textGeneral} onClick={() => props.onCellFormat('R2VuZXJhbA==')}>
<Icon slot="media" icon="icon-format-general"></Icon>
</ListItem>
<ListItem title={_t.textNumber} onClick={() => props.onCellFormat('MC4wMA==')}>
<Icon slot="media" icon="icon-format-number"></Icon>
</ListItem>
<ListItem title={_t.textInteger} onClick={() => props.onCellFormat('JTIzMA==')}>
<Icon slot="media" icon="icon-format-integer"></Icon>
</ListItem>
<ListItem title={_t.textScientific} onClick={() => props.onCellFormat('MC4wMEUlMkIwMA==')}>
<Icon slot="media" icon="icon-format-scientific"></Icon>
</ListItem>
<ListItem title={_t.textAccounting} link="/edit-accounting-format-cell/" routeProps={{
onCellFormat: props.onCellFormat
}}>
<Icon slot="media" icon="icon-format-accounting"></Icon>
</ListItem>
<ListItem title={_t.textCurrency} link="/edit-currency-format-cell/" routeProps={{
onCellFormat: props.onCellFormat
}}>
<Icon slot="media" icon="icon-format-currency"></Icon>
</ListItem>
<ListItem title={_t.textDate} link='/edit-date-format-cell/' routeProps={{
onCellFormat: props.onCellFormat
}}>
<Icon slot="media" icon="icon-format-date"></Icon>
</ListItem>
<ListItem title={_t.textTime} link='/edit-time-format-cell/' routeProps={{
onCellFormat: props.onCellFormat
}}>
<Icon slot="media" icon="icon-format-time"></Icon>
</ListItem>
<ListItem title={_t.textPercentage} onClick={() => props.onCellFormat('MC4wMCUyNQ==')}>
<Icon slot="media" icon="icon-format-percentage"></Icon>
</ListItem>
<ListItem title={_t.textText} onClick={() => props.onCellFormat('JTQw')}>
<Icon slot="media" icon="icon-format-text"></Icon>
</ListItem>
</List>
</Page>
)
}
const PageAccountingFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textAccounting} backLink={_t.textBack} />
<List>
<ListItem title={_t.textDollar} after='$'
onClick={() => props.onCellFormat('XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}>
</ListItem>
<ListItem title={_t.textEuro} after='€'
onClick={() => props.onCellFormat('XyglRTIlODIlQUMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglRTIlODIlQUMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglRTIlODIlQUMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}>
</ListItem>
<ListItem title={_t.textPound} after='£'
onClick={() => props.onCellFormat('XyglQzIlQTMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}>
</ListItem>
<ListItem title={_t.textRouble} after='₽'
onClick={() => props.onCellFormat('Xy0qJTIwJTIzJTJDJTIzJTIzMC4wMCU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0ItKiUyMCUyMyUyQyUyMyUyMzAuMDAlNUIlMjQlRDElODAuLTQxOSU1RF8tJTNCXy0qJTIwJTIyLSUyMiUzRiUzRiU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0JfLSU0MF8t')}>
</ListItem>
<ListItem title={_t.textYen} after='¥'
onClick={() => props.onCellFormat('XyglQzIlQTUqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTUqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTUqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}>
</ListItem>
</List>
</Page>
)
}
const PageCurrencyFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textAccounting} backLink={_t.textBack} />
<List>
<ListItem title={_t.textDollar} after='$'
onClick={() => props.onCellFormat('JTI0JTIzJTJDJTIzJTIzMC4wMA==')}>
</ListItem>
<ListItem title={_t.textEuro} after='€'
onClick={() => props.onCellFormat('JUUyJTgyJUFDJTIzJTJDJTIzJTIzMC4wMA==')}>
</ListItem>
<ListItem title={_t.textPound} after='£'
onClick={() => props.onCellFormat('JUMyJUEzJTIzJTJDJTIzJTIzMC4wMA==')}>
</ListItem>
<ListItem title={_t.textRouble} after='₽'
onClick={() => props.onCellFormat('JTIzJTJDJTIzJTIzMC4wMCUyMiVEMSU4MC4lMjI=')}>
</ListItem>
<ListItem title={_t.textYen} after='¥'
onClick={() => props.onCellFormat('JUMyJUE1JTIzJTJDJTIzJTIzMC4wMA==')}>
</ListItem>
</List>
</Page>
)
}
const PageDateFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textDate} backLink={_t.textBack} />
<List>
<ListItem title='07-24-88' after='MM-dd-yy'
onClick={() => props.onCellFormat('TU0tZGQteXk=')}></ListItem>
<ListItem title='07-24-1988' after='MM-dd-yyyy'
onClick={() => props.onCellFormat('TU0tZGQteXl5eQ==')}>
</ListItem>
<ListItem title='24-07-88' after='dd-MM-yy'
onClick={() => props.onCellFormat('ZGQtTU0teXk=')}>
</ListItem>
<ListItem title='24-07-1988' after='dd-MM-yyyy'
onClick={() => props.onCellFormat('ZGQtTU0teXl5eQ==')}>
</ListItem>
<ListItem title='24-Jul-1988' after='dd-MMM-yyyy'
onClick={() => props.onCellFormat('ZGQtTU1NLXl5eXk=')}>
</ListItem>
<ListItem title='24-Jul' after='dd-MMM'
onClick={() => props.onCellFormat('ZGQtTU1N')}>
</ListItem>
<ListItem title='Jul-88' after='MMM-yy'
onClick={() => props.onCellFormat('TU1NLXl5')}>
</ListItem>
</List>
</Page>
)
}
const PageTimeFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textTime} backLink={_t.textBack} />
<List>
<ListItem title='10:56' after='HH:mm'
onClick={() => props.onCellFormat('aCUzQW1tJTNCJTQw')}>
</ListItem>
<ListItem title='21:56:00' after='HH:MM:ss'
onClick={() => props.onCellFormat('aCUzQW1tJTNBc3MlM0IlNDA=')}>
</ListItem>
<ListItem title='05:56 AM' after='hh:mm tt'
onClick={() => props.onCellFormat('aCUzQW1tJTIwQU0lMkZQTSUzQiU0MA==')}>
</ListItem>
<ListItem title='05:56:00 AM' after='hh:mm:ss tt'
onClick={() => props.onCellFormat('aCUzQW1tJTNBc3MlMjBBTSUyRlBNJTNCJTQw')}>
</ListItem>
<ListItem title='38:56:00' after='[h]:mm:ss'
onClick={() => props.onCellFormat('JTVCaCU1RCUzQW1tJTNBc3MlM0IlNDA=')}>
</ListItem>
</List>
</Page>
)
}
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
};

1275
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx Normal file
View file

File diff suppressed because it is too large Load diff

153
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx Normal file
View file

@ -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 (
<Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
<List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); changeType(1);}}></ListItem>
<ListItem title={_t.textInternalDataRange} radio checked={typeLink === 2} onClick={() => {setTypeLink(2); changeType(2);}}></ListItem>
</List>
</Page>
)
};
const PageSheet = ({curSheet, sheets, changeSheet}) => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const [stateSheet, setSheet] = useState(curSheet.value);
return (
<Page>
<Navbar title={_t.textSheet} backLink={_t.textBack}/>
<List>
{sheets.map(sheet => {
return(
<ListItem
key={`sheet-${sheet.value}`}
title={sheet.caption}
radio
checked={stateSheet === sheet.value}
onClick={() => {
setSheet(sheet.value);
changeSheet(sheet);
}}
/>
)
})}
</List>
</Page>
)
};
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 (
<Fragment>
<List inlineLabels className='inputs-list'>
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
changeType: changeType,
curType: typeLink
}}/>
{typeLink != Asc.c_oAscHyperlinkType.RangeLink &&
<ListInput label={_t.textLink}
type="text"
placeholder={_t.textLink}
value={link}
onChange={(event) => {setLink(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
}
{typeLink == Asc.c_oAscHyperlinkType.RangeLink &&
<ListItem link={'/edit-link-sheet/'} title={_t.textSheet} after={linkSheet} routeProps={{
changeSheet: changeSheet,
sheets,
curSheet
}}/>
}
{typeLink == Asc.c_oAscHyperlinkType.RangeLink &&
<ListInput label={_t.textRange}
type="text"
placeholder={_t.textRequired}
value={range}
onChange={(event) => {setRange(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
}
<ListInput label={_t.textDisplay}
type="text"
placeholder={_t.textDisplay}
value={stateDisplayText}
disabled={isLock}
onChange={(event) => {setDisplayText(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
<ListInput label={_t.textScreenTip}
type="text"
placeholder={_t.textScreenTip}
value={screenTip}
onChange={(event) => {setScreenTip(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
</List>
<List>
<ListButton title={_t.textEditLink}
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
onClick={() => {props.onEditLink(typeLink === 1 ?
{type: 1, url: link, text: stateDisplayText, tooltip: screenTip} :
{type: 2, url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}}
/>
<ListButton title={_t.textRemoveLink}
className={`button-fill button-red`}
onClick={() => props.onRemoveLink()}
/>
</List>
</Fragment>
)
};
export {
EditLink,
PageTypeLink,
PageSheet
};

235
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx Normal file
View file

@ -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' ?
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview auto"></span>;
return (
<Fragment>
<List>
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
changeFontFamily: props.changeFontFamily
}}/>
<ListItem className='buttons'>
<Row>
<a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
</Row>
</ListItem>
<ListItem title={_t.textTextColor} link="/edit-text-font-color/" routeProps={{
onTextColor: props.onTextColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
fontColorPreview
}
</ListItem>
</List>
{textIn === 2 ? (
<Fragment>
<List>
<ListItem className='buttons'>
<Row>
<a className={'button' + (paragraphAlign === AscCommon.align_Left ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
</a>
<a className={'button' + (paragraphAlign === AscCommon.align_Center ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
<Icon slot="media" icon="icon-text-align-center"></Icon>
</a>
<a className={'button' + (paragraphAlign === AscCommon.align_Right ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
</a>
<a className={'button' + (paragraphAlign === AscCommon.align_Justify ? ' active' : '')} onClick={() => {props.onParagraphAlign('justify')}}>
<Icon slot="media" icon="icon-text-align-jast"></Icon>
</a>
</Row>
</ListItem>
<ListItem className='buttons'>
<Row>
<a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Top ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
<Icon slot="media" icon="icon-text-valign-top"></Icon>
</a>
<a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Center ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
<Icon slot="media" icon="icon-text-valign-middle"></Icon>
</a>
<a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Bottom ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
<Icon slot="media" icon="icon-text-valign-bottom"></Icon>
</a>
</Row>
</ListItem>
</List>
</Fragment>
) : null}
</Fragment>
);
};
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 (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} />
<List>
<ListItem title={_t.textSize}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displaySize}</label>}
<Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
}}>
<ul>
{vlFonts.vlData.items.map((item, index) => (
<ListItem
key={index}
radio
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.changeFontFamily(item.name)}}
></ListItem>
))}
</ul>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack} />
<ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
onTextColor: props.onTextColor
}}></ListItem>
</List>
</Page>
);
};
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 (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
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
};

198
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx Normal file
View file

@ -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 (
<Page>
<Navbar title={_t.textApplicationSettings} backLink={_t.textBack} />
{/* {_isEdit && */}
<Fragment>
<BlockTitle>{_t.textUnitOfMeasurement}</BlockTitle>
<List>
<ListItem radio radioIcon="end" title={_t.textCentimeter} name="unit-of-measurement" checked={unitMeasurement === 0}
onChange={() => changeMeasureSettings(0)}></ListItem>
<ListItem radio radioIcon="end" title={_t.textPoint} name="unit-of-measurement" checked={unitMeasurement === 1}
onChange={() => changeMeasureSettings(1)}></ListItem>
<ListItem radio radioIcon="end" title={_t.textInch} name="unit-of-measurement" checked={unitMeasurement === 2}
onChange={() => changeMeasureSettings(2)}></ListItem>
</List>
<BlockTitle>{_t.textFormulaLanguage}</BlockTitle>
<List mediaList>
<ListItem title={currentFormulaLang.displayValue} subtitle={`Example: ${currentFormulaLang.exampleValue}`} link="/formula-languages/"
routeProps={{
onFormulaLangChange: props.onFormulaLangChange
}}>
</ListItem>
</List>
<BlockTitle>{_t.textRegionalSettings}</BlockTitle>
<List mediaList>
<ListItem title={currentRegSetting.displayName} subtitle={`Example: ${regExample}`} link="/regional-settings/" routeProps={{
onRegSettings: props.onRegSettings
}}></ListItem>
</List>
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
<List>
<ListItem>
<span>{_t.textComments}</span>
<Toggle checked={isComments}
onChange={() => {
storeApplicationSettings.changeDisplayComments(!isComments);
props.onChangeDisplayComments(!isComments);
}}
/>
</ListItem>
<ListItem>
<span>{_t.textResolvedComments}</span>
<Toggle checked={isResolvedComments} disabled={!isComments}
onChange={() => {
storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
props.onChangeDisplayResolved(!isResolvedComments);
}}
/>
</ListItem>
</List>
<List>
<ListItem>
<span>{_t.textR1C1Style}</span>
<Toggle checked={isRefStyle}
onChange={() => {
storeApplicationSettings.changeRefStyle(!isRefStyle);
props.clickR1C1Style(!isRefStyle);
}}
/>
</ListItem>
</List>
</Fragment>
{/* } */}
{/* {_isShowMacros && */}
<List>
<ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
onChangeMacrosSettings: props.onChangeMacrosSettings
}}></ListItem>
</List>
{/* } */}
</Page>
);
};
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 (
<Page className="regional-settings">
<Navbar title={_t.textRegionalSettings} backLink={_t.textBack} />
<List>
{regData.length ? regData.map((elem, index) => {
return (
<ListItem key={index} radio checked={elem.code === regCode} onChange={() => {
storeApplicationSettings.changeRegCode(elem.code);
props.onRegSettings(elem.code);
}}>
<div className="item-title-row">
<Icon slot="media" icon={`lang-flag ${elem.langName}`}></Icon>
<div className="item-title">{elem.displayName}</div>
</div>
</ListItem>
)
}) : null}
</List>
</Page>
)
}
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 (
<Page>
<Navbar title={_t.textFormulaLanguage} backLink={_t.textBack} />
<List mediaList>
{dataLang.map((elem, index) => {
return (
<ListItem radio key={index} title={elem.displayValue} subtitle={`Example: ${elem.exampleValue}`} checked={elem.value === formulaLang}
onChange={() => {
storeApplicationSettings.changeFormulaLang(elem.value);
props.onFormulaLangChange(elem.value);
}}>
</ListItem>
)
})}
</List>
</Page>
)
}
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 (
<Page>
<Navbar title={_t.textMacrosSettings} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="macros-settings" title={_t.textDisableAll} text={_t.textDisableAllMacrosWithoutNotification}
checked={macrosMode === 2} onChange={() => changeMacros(2)}></ListItem>
<ListItem radio name="macros-settings" title={_t.textShowNotification} text={_t.textDisableAllMacrosWithNotification}
checked={macrosMode === 0} onChange={() => changeMacros(0)}></ListItem>
<ListItem radio name="macros-settings" title={_t.textEnableAll} text={_t.textEnableAllMacrosWithoutNotification}
checked={macrosMode === 1} onChange={() => changeMacros(1)}></ListItem>
</List>
</Page>
);
};
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
};

40
apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx Normal file
View file

@ -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 (
<Page>
<Navbar title={_t.textDownload} backLink={_t.textBack} />
<BlockTitle>{_t.textDownloadAs}</BlockTitle>
<List>
<ListItem title="XLSX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLSX)}>
<Icon slot="media" icon="icon-format-xlsx"></Icon>
</ListItem>
<ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
<Icon slot="media" icon="icon-format-pdf"></Icon>
</ListItem>
<ListItem title="PDF/A" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDFA)}>
<Icon slot="media" icon="icon-format-pdfa"></Icon>
</ListItem>
<ListItem title="ODS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.ODS)}>
<Icon slot="media" icon="icon-format-ods"></Icon>
</ListItem>
<ListItem title="CSV" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.CSV)}>
<Icon slot="media" icon="icon-format-csv"></Icon>
</ListItem>
<ListItem title="XLTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLTX)}>
<Icon slot="media" icon="icon-format-xltx"></Icon>
</ListItem>
<ListItem title="OTS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.OTS)}>
<Icon slot="media" icon="icon-format-ots"></Icon>
</ListItem>
</List>
</Page>
)
}
export default Download;

111
apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
View file

@ -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 (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem title={_t.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
<ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
<Icon slot="media" icon="icon-setup"></Icon>
<ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
<Icon slot="media" icon="icon-table-settings"></Icon>
</ListItem>
<ListItem title={_t.textApplicationSettings} link="#">
<ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
<ListItem title={_t.textDownload} link="#">
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, "/download/")}>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
<ListItem title={_t.textPrint}>
<ListItem title={_t.textPrint} onClick={onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
<ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={_t.textHelp} link="#">
<ListItem title={_t.textHelp} link="#" onClick={showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
<ListItem title={_t.textAbout} link="#">
<ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-about/")}>
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
</List>

98
apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx Normal file
View file

@ -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 (
<Page className="about">
<Navbar title={_t.textAbout} backLink={_t.textBack} />
{licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ?
<Fragment>
<div className="content-block">
{/* {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? null : (
<i className="logo"></i>
)} */}
{logoCustomer && logoCustomer.length ? (
<div id="settings-about-logo" className="settings-about-logo">
<img src={logoCustomer} />
</div>
) : null}
</div>
<div className="content-block">
<h3>SPREADSHEET EDITOR</h3>
<h3>{_t.textVersion} 6.1.1</h3>
</div>
<div className="content-block">
{nameCustomer && nameCustomer.length ? (
<h3 id="settings-about-name" className="vendor">{nameCustomer}</h3>
) : null}
{addressCustomer && addressCustomer.length ? (
<p>
<label>{_t.textAddress}</label>
<Link id="settings-about-address" className="external">{addressCustomer}</Link>
</p>
) : null}
{mailCustomer && mailCustomer.length ? (
<p>
<label>{_t.textEmail}</label>
<Link id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</Link>
</p>
) : null}
<p>
<label>{_t.textTel}</label>
<Link id="settings-about-tel" className="external" target="_blank" href="tel:+37163399867">+371 633-99867</Link>
</p>
{urlCustomer && urlCustomer.length ? (
<p>
<Link id="settings-about-url" className="external" target="_blank"
href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
{urlCustomer}
</Link>
</p>
) : null}
{infoCustomer && infoCustomer.length ? (
<p>
<label id="settings-about-info">{infoCustomer}</label>
</p>
) : null}
</div>
<div className="content-block" id="settings-about-licensor">
<div className="content-block-inner"></div>
<p>
<label>{_t.textPoweredBy}</label>
</p>
<h3 className="vendor">Ascensio System SIA</h3>
<p>
<Link className="external" target="_blank" href="www.onlyoffice.com">www.onlyoffice.com</Link>
</p>
</div>
</Fragment> :
<Fragment>
<div className="content-block">
<i className="logo"></i>
</div>
</Fragment>}
</Page>
);
};
const SpreadsheetAbout = inject("storeAppOptions")(observer(PageSpreadsheetAbout));
export default SpreadsheetAbout;

125
apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx Normal file
View file

@ -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 (
<Page>
<Navbar title={_t.textSpreadsheetInfo} backLink={_t.textBack} />
{dataDoc.title ? (
<Fragment>
<BlockTitle>{_t.textSpreadsheetTitle}</BlockTitle>
<List>
<ListItem title={dataDoc.title}></ListItem>
</List>
</Fragment>
) : null}
{dataDoc.info.author || dataDoc.info.owner ? (
<Fragment>
<BlockTitle>{_t.textOwner}</BlockTitle>
<List>
<ListItem title={dataDoc.info.author || dataDoc.info.owner}></ListItem>
</List>
</Fragment>
) : null}
{dataDoc.info.folder ? (
<Fragment>
<BlockTitle>{_t.textLocation}</BlockTitle>
<List>
<ListItem title={dataDoc.info.folder}></ListItem>
</List>
</Fragment>
) : null}
{dataDoc.info.uploaded || dataDoc.info.created ? (
<Fragment>
<BlockTitle>{_t.textUploaded}</BlockTitle>
<List>
<ListItem title={dataDoc.info.uploaded || dataDoc.info.created}></ListItem>
</List>
</Fragment>
) : null}
{props.title ? (
<Fragment>
<BlockTitle>{_t.textTitle}</BlockTitle>
<List>
<ListItem title={props.title}></ListItem>
</List>
</Fragment>
) : null}
{props.subject ? (
<Fragment>
<BlockTitle>{_t.textSubject}</BlockTitle>
<List>
<ListItem title={props.subject}></ListItem>
</List>
</Fragment>
) : null}
{props.description ? (
<Fragment>
<BlockTitle>{_t.textComment}</BlockTitle>
<List>
<ListItem title={props.description}></ListItem>
</List>
</Fragment>
) : null}
{dataModified ? (
<Fragment>
<BlockTitle>{_t.textLastModified}</BlockTitle>
<List>
<ListItem title={dataModified}></ListItem>
</List>
</Fragment>
) : null}
{dataModifiedBy ? (
<Fragment>
<BlockTitle>{_t.textLastModifiedBy}</BlockTitle>
<List>
<ListItem title={dataModifiedBy}></ListItem>
</List>
</Fragment>
) : null}
{props.getCreated ? (
<Fragment>
<BlockTitle>{_t.textCreated}</BlockTitle>
<List>
<ListItem title={props.getCreated}></ListItem>
</List>
</Fragment>
) : null}
{dataApp ? (
<Fragment>
<BlockTitle>{_t.textApplication}</BlockTitle>
<List>
<ListItem title={dataApp}></ListItem>
</List>
</Fragment>
) : null}
{creators ? (
<Fragment>
<BlockTitle>{_t.textAuthor}</BlockTitle>
<List>
{
creators.split(/\s*[,;]\s*/).map(item => {
return <ListItem title={item}></ListItem>
})
}
</List>
</Fragment>
) : null}
</Page>
);
};
const SpreadsheetInfo = inject("storeSpreadsheetInfo")(observer(PageSpreadsheetInfo));
export default SpreadsheetInfo;

269
apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx Normal file
View file

@ -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 (
<Page>
<Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
<List>
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);
props.onColorSchemeChange(index);
};
}}>
<div slot="before-title">
<span className="color-schema-block">
{
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 (
<span className="color" key={index} style={clr}></span>
)
}
})
}
</span>
</div>
</ListItem>
)
}) : null
}
</List>
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textSpreadsheetFormats} backLink={_t.textBack} />
<List mediaList>
{pageSizes.map((item, index) => (
<ListItem
key={index}
radio
title={item.caption}
subtitle={parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) + ' ' + textMetric + ' x ' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) + ' ' + textMetric}
name="format-size-checkbox"
checked={pageSizesIndex === index}
onClick={e => {props.onFormatChange(item.value)}}>
</ListItem>
))}
</List>
</Page>
)
};
const 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 (
<Page>
<Navbar title={_t.textMargins} backLink={_t.textBack} />
<List>
<ListItem title={_t.textTop}>
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textBottom}>
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textLeft}>
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textRight}>
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
</Page>
)
};
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 (
<Page>
<Navbar title={_t.textSpreadsheetSettings} backLink={_t.textBack} />
<BlockTitle>{_t.textOrientation}</BlockTitle>
<List>
<ListItem radio title={_t.textPortrait} name="orientation-checkbox" checked={isPortrait} onClick={() => {
storeSpreadsheetSettings.resetPortrait(true);
props.onOrientationChange(0)}}>
</ListItem>
<ListItem radio title={_t.textLandscape} name="orientation-checkbox" checked={!isPortrait} onClick={() => {
storeSpreadsheetSettings.resetPortrait(false);
props.onOrientationChange(1)}}>
</ListItem>
</List>
<BlockTitle>{_t.textFormat}</BlockTitle>
<List mediaList>
<ListItem title={textFormat} subtitle={pageSizeTxt} link="/spreadsheet-formats/" routeProps={{
onFormatChange: props.onFormatChange
}}></ListItem>
<ListItem title={_t.textMargins} link="/margins/" routeProps={{
initSpreadsheetMargins: props.initSpreadsheetMargins,
onPageMarginsChange: props.onPageMarginsChange
}}></ListItem>
</List>
<List simpleList>
<ListItem>
<span>{_t.textHideHeadings}</span>
<Toggle checked={isHideHeadings} onChange={() => {
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
props.clickCheckboxHideHeadings(!isHideHeadings)
}} />
</ListItem>
<ListItem>
<span>{_t.textHideGridlines}</span>
<Toggle checked={isHideGridlines} onChange={() => {
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
props.clickCheckboxHideGridlines(!isHideGridlines)
}} />
</ListItem>
</List>
<List>
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
onColorSchemeChange: props.onColorSchemeChange,
initPageColorSchemes: props.initPageColorSchemes
}}></ListItem>
</List>
</Page>
)
};
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
};