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