Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs
This commit is contained in:
SergeyEzhin
commit
b2c98bb817
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const SearchController = props => {
|
|||
console.log('on search: ' + params);
|
||||
};
|
||||
|
||||
return <SearchView onSearchQuery={onSearchQuery} />
|
||||
return <SearchView onSearchQuery={onSearchQuery} />
|
||||
};
|
||||
|
||||
export {SearchController, SearchView, SearchSettingsView};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
@ -109,12 +110,12 @@ 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) {
|
||||
|
|
|
|||
|
|
@ -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}");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,4 +1,3 @@
|
|||
|
||||
.device-ios {
|
||||
i.icon {
|
||||
&.icon_mask {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.device-android {
|
||||
i.icon {
|
||||
&.icon_mask {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
|
||||
.md {
|
||||
--background-normal: #f1f1f1;
|
||||
}
|
||||
|
||||
@background-normal: var(--background-normal, #fff);
|
||||
|
||||
@border-regular-control: #cbcbcb;
|
||||
@text-normal: #000;
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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
209
apps/spreadsheeteditor/mobile/src/controller/Search.jsx
Normal 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}
|
||||
|
|
@ -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
|
||||
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
395
apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx
Normal 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
145
apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
Normal 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
108
apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx
Normal 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;
|
||||
|
|
@ -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));
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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));
|
||||
|
|
@ -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));
|
||||
|
|
@ -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,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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
@ -25,6 +27,7 @@ export default class extends React.Component {
|
|||
super();
|
||||
|
||||
Common.Notifications = new Notifications();
|
||||
Common.localStorage = LocalStorage;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -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
67
apps/spreadsheeteditor/mobile/src/store/appOptions.js
Normal 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
118
apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
Normal 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
196
apps/spreadsheeteditor/mobile/src/store/cellSettings.js
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 = {};
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@action changeCustomColors (colors) {
|
||||
customColors = [];
|
||||
|
||||
changeCustomColors (colors) {
|
||||
this.customColors = colors;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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
16
apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
112
apps/spreadsheeteditor/mobile/src/store/textSettings.js
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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
1275
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
Normal file
File diff suppressed because it is too large
Load diff
153
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
Normal file
153
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
Normal 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
235
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
Normal 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
|
||||
};
|
||||
|
|
@ -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
40
apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx
Normal 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;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
};
|
||||
Loading…
Reference in a new issue