diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
index e16403d72..c4f838112 100644
--- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
@@ -3,6 +3,7 @@ import { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next';
const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
+ console.log(curColor);
return (
{themeColors.map((row, rowIndex) => {
@@ -11,7 +12,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => {
return(
{onColorClick(effect.color, effect.effectId, effect.effectValue)}}
>
diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx
index 18df8fa53..ed4e4ccc0 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx
@@ -5,7 +5,7 @@ import { f7 } from 'framework7-react';
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
-@inject("storeFocusObjects", "storeCellSettings")
+@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings")
class MainController extends Component {
constructor(props) {
super(props)
@@ -206,12 +206,15 @@ class MainController extends Component {
const storeFocusObjects = this.props.storeFocusObjects;
const storeCellSettings = this.props.storeCellSettings;
+ const storeTextSettings = this.props.storeTextSettings;
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();
if(selectedObjects.length) {
@@ -224,11 +227,13 @@ class MainController extends Component {
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)
+ console.log(fontObj)
storeCellSettings.initFontInfo(fontObj);
+ storeTextSettings.initFontInfo(fontObj);
});
this.api.asc_registerCallback('asc_onInitEditorStyles', styles => {
diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx
new file mode 100644
index 000000000..5be6e60dd
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx
@@ -0,0 +1,108 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import { EditText } from '../../view/edit/EditText';
+
+class EditTextController extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ toggleBold(value) {
+ const api = Common.EditorApi.get();
+ api.asc_setCellBold(value);
+ };
+
+ toggleItalic(value) {
+ const api = Common.EditorApi.get();
+ api.asc_setCellItalic(value);
+ };
+
+ toggleUnderline(value) {
+ const api = Common.EditorApi.get();
+ api.asc_setCellUnderline(value);
+ };
+
+ onParagraphAlign(type) {
+ const api = Common.EditorApi.get();
+ let value = AscCommon.align_Left;
+
+ switch (type) {
+ case 'justify':
+ value = AscCommon.align_Justify;
+ break;
+ case 'right':
+ value = AscCommon.align_Right;
+ break;
+ case 'center':
+ value = AscCommon.align_Center;
+ break;
+ }
+
+ api.asc_setCellAlign(value);
+ };
+
+ onParagraphValign(type) {
+ const api = Common.EditorApi.get();
+ let value;
+
+ switch(type) {
+ case 'top':
+ value = Asc.c_oAscVAlign.Top;
+ break;
+ case 'center':
+ value = Asc.c_oAscVAlign.Center;
+ break;
+ case 'bottom':
+ value = Asc.c_oAscVAlign.Bottom;
+ break;
+ }
+
+ api.asc_setCellVertAlign(value);
+ };
+
+ changeFontSize(curSize, isDecrement) {
+ const api = Common.EditorApi.get();
+ let size = curSize;
+
+ if (isDecrement) {
+ typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size);
+ } else {
+ typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size);
+ }
+
+ if (typeof size !== 'undefined') {
+ api.asc_setCellFontSize(size);
+ }
+ };
+
+ changeFontFamily(name) {
+ const api = Common.EditorApi.get();
+ if (name) {
+ api.asc_setCellFontName(name);
+ }
+ }
+
+ onTextColor(color) {
+ const api = Common.EditorApi.get();
+ api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+export default EditTextController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
index 8058e49c3..c78707a54 100644
--- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
+++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
@@ -92,7 +92,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++) {
diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js
index 43ede8b18..eb5e244fe 100644
--- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js
+++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js
@@ -5,7 +5,7 @@ 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 {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
import {storeShapeSettings} from "./shapeSettings";
import {storeCellSettings} from "./cellSettings";
@@ -19,7 +19,7 @@ export const stores = {
users: new storeUsers(),
sheets: new storeWorksheets(),
storeFunctions: new storeFunctions(),
- // storeTextSettings: new storeTextSettings(),
+ storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
storeShapeSettings: new storeShapeSettings(),
storeChartSettings: new storeChartSettings(),
diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js
new file mode 100644
index 000000000..1772a60db
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js
@@ -0,0 +1,91 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeTextSettings {
+
+ @observable fontsArray = [];
+ @observable fontInfo = {};
+ @observable fontName = '';
+ @observable fontSize = undefined;
+ @observable isBold = false;
+ @observable isItalic = false;
+ @observable isUnderline = false;
+ @observable textColor = undefined;
+ @observable customTextColors = [];
+ @observable paragraphAlign = undefined;
+ @observable paragraphValign = undefined;
+ @observable textIn = undefined;
+
+ @action 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();
+ }
+
+ @action 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;
+ }
+
+ @action initFontInfo(fontObj) {
+ this.fontInfo = fontObj;
+ }
+
+ @action 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;
+ }
+
+ @action changeCustomTextColors (colors) {
+ this.customTextColors = colors;
+ }
+}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
index 135e6459e..f37640cfd 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@@ -8,10 +8,12 @@ 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 { 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';
const routes = [
@@ -126,6 +128,21 @@ const routes = [
{
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
}
];
@@ -218,6 +235,13 @@ const EditTabs = props => {
component:
})
}
+ if (settings.indexOf('text') > -1) {
+ editors.push({
+ caption: _t.textText,
+ id: 'edit-text',
+ component:
+ })
+ }
}
return (
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
new file mode 100644
index 000000000..03e54f413
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
@@ -0,0 +1,237 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+
+const EditText = props => {
+ const isAndroid = Device.android;
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+ // const metricText = Common.Utils.Metric.getCurrentMetricName();
+ const storeTextSettings = props.storeTextSettings;
+ const textIn = storeTextSettings.textIn;
+
+ const fontName = storeTextSettings.fontName || _t.textFonts;
+ const fontSize = storeTextSettings.fontSize;
+ const fontColor = storeTextSettings.textColor;
+ console.log(fontColor);
+
+ const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt;
+ const isBold = storeTextSettings.isBold;
+ const isItalic = storeTextSettings.isItalic;
+ const isUnderline = storeTextSettings.isUnderline;
+ const paragraphAlign = storeTextSettings.paragraphAlign;
+ const paragraphValign = storeTextSettings.paragraphValign;
+
+ const fontColorPreview = fontColor !== 'auto' ?
+
:
+
;
+
+ return (
+
+
+
+
+
+ {props.toggleBold(!isBold)}}>B
+ {props.toggleItalic(!isItalic)}}>I
+ {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U
+
+
+
+ {!isAndroid ?
+ {fontColorPreview} :
+ fontColorPreview
+ }
+
+
+ {textIn === 2 ? (
+
+
+
+
+ {props.onParagraphAlign('left')}}>
+
+
+ {props.onParagraphAlign('center')}}>
+
+
+ {props.onParagraphAlign('right')}}>
+
+
+ {props.onParagraphAlign('justify')}}>
+
+
+
+
+
+
+ {props.onParagraphValign('top')}}>
+
+
+ {props.onParagraphValign('center')}}>
+
+
+ {props.onParagraphValign('bottom')}}>
+
+
+
+
+
+
+ ) : null}
+
+ );
+};
+
+const PageFonts = props => {
+ const isAndroid = Device.android;
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+ const storeTextSettings = props.storeTextSettings;
+ const size = storeTextSettings.fontSize;
+ const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
+ const curFontName = storeTextSettings.fontName;
+ const fonts = storeTextSettings.fontsArray;
+
+ const [vlFonts, setVlFonts] = useState({
+ vlData: {
+ items: [],
+ }
+ });
+
+ const renderExternal = (vl, vlData) => {
+ setVlFonts((prevState) => {
+ let fonts = [...prevState.vlData.items];
+ fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
+ return {vlData: {
+ items: fonts,
+ }};
+ });
+ };
+
+ return (
+
+
+
+
+ {!isAndroid && {displaySize}
}
+
+
+
+ {isAndroid && }
+
+
+
+
+
+ {_t.textFonts}
+
+
+ {vlFonts.vlData.items.map((item, index) => (
+ {props.changeFontFamily(item.name)}}
+ >
+ ))}
+
+
+
+ );
+};
+
+const PageFontColor = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+ const storeTextSettings = props.storeTextSettings;
+ const storePalette = props.storePalette;
+ const textColor = storeTextSettings.textColor;
+ const customColors = storePalette.customColors;
+
+ console.log(textColor);
+
+ const changeColor = (color, effectId, effectValue) => {
+ if (color !== 'empty') {
+ if (effectId !== undefined) {
+ const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+ storeTextSettings.changeTextColor(newColor);
+ props.onTextColor(newColor);
+ } else {
+ storeTextSettings.changeTextColor(color);
+ props.onTextColor(color);
+ }
+ } else {
+ // open custom color menu
+ props.f7router.navigate('/edit-text-custom-font-color/');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+const PageCustomFontColor = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+ const storeTextSettings = props.storeTextSettings;
+ const storePalette = props.storePalette;
+ let textColor = storeTextSettings.textColor;
+
+ if (typeof textColor === 'object') {
+ textColor = textColor.color;
+ }
+
+ const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
+
+ const onAddNewColor = (colors, color) => {
+ storePalette.changeCustomColors(colors);
+ storeTextSettings.changeTextColor(color);
+ props.onTextColor(color);
+ props.f7router.back();
+ };
+ return (
+
+
+
+
+ )
+};
+
+const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
+const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
+const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
+const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
+
+export {
+ EditTextContainer as EditText,
+ PageTextFonts,
+ PageTextFontColor,
+ PageTextCustomFontColor
+};
\ No newline at end of file