[SSE mobile] Make Cell Settings

2021-02-04 21:00:21 +03:00 · 2021-02-04 21:00:21 +03:00 · 507ce63a98
parent 4bf9c5c6cd
commit 507ce63a98
8 changed files with 494 additions and 8 deletions
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@ -420,3 +420,38 @@
        }
    }
 }
+
+// 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>');
+    }
+}
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@ -49,7 +49,17 @@
            "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"
        }
    },
    "Common": {
--- 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")
+@inject("storeFocusObjects", "storeCellSettings")
 class MainController extends Component {
    constructor(props) {
        super(props)
@ -205,12 +205,34 @@ class MainController extends Component {
        me.api.asc_registerCallback('asc_onEndAction',                  me._onLongActionEnd.bind(me));

        const storeFocusObjects = this.props.storeFocusObjects;
+        const storeCellSettings = this.props.storeCellSettings;
+        const styleSize = storeCellSettings.styleSize;
       
        this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
-            // console.log(cellInfo);
+            console.log(cellInfo);
            storeFocusObjects.resetCellInfo(cellInfo);
+            storeCellSettings.initCellSettings(cellInfo);
            let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
-            storeFocusObjects.resetFocusObjects(selectedObjects);
+
+            if(selectedObjects.length) {
+                storeFocusObjects.resetFocusObjects(selectedObjects);
+            }
+
+        });
+
+        this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height);
+
+        this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
+            storeCellSettings.initEditorFonts(fonts, select);
+        });
+
+        this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => {
+            console.log(fontObj)
+            storeCellSettings.initFontInfo(fontObj);
+        });
+
+        this.api.asc_registerCallback('asc_onInitEditorStyles', styles => {
+            storeCellSettings.initCellStyles(styles);
        });

        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
--- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
@ -2,16 +2,53 @@ 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));
+    }
+
    render () {
        return (
-            <EditCell
+            <EditCell 
+                toggleBold={this.toggleBold}
+                toggleItalic={this.toggleItalic}
+                toggleUnderline={this.toggleUnderline}
+                onStyleClick={this.onStyleClick}
+                onTextColor={this.onTextColor}
+                onFillColor={this.onFillColor}
            />
        )
    }
--- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js
+++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js
@ -0,0 +1,103 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeCellSettings {
+
+    @observable styleSize = {
+       width: 100,
+       height: 50
+    }
+
+    @observable cellStyles = [];
+    @observable fontsArray = [];
+    @observable fontInfo = {};
+
+    @observable fillColor = undefined;
+    @observable fontColor = undefined;
+    @observable styleName = undefined;
+
+    @observable isBold = false;
+    @observable isItalic = false;
+    @observable isUnderline = false;
+
+
+    @action initCellSettings(cellInfo) {
+
+        let xfs = cellInfo.asc_getXfs();
+
+        this.initFontSettings(xfs);
+
+        let color = xfs.asc_getFillColor();
+        console.log(color);
+        let clr = this.resetColor(color);
+        
+        this.fillColor = clr;
+        this.styleName = cellInfo.asc_getStyleName();
+    }
+
+    @action initFontSettings(fontObj) {
+
+        this.fontInfo.name = fontObj.asc_getFontName();
+        this.fontInfo.size = fontObj.asc_getFontSize();
+
+        this.fontInfo.color = fontObj.asc_getFontColor();
+        let clr = this.resetColor(this.fontInfo.color);
+        this.fontColor = clr;
+
+        this.isBold = fontObj.asc_getFontBold();
+        this.isItalic = fontObj.asc_getFontItalic();
+        this.isUnderline = fontObj.asc_getFontUnderline();
+    }
+
+    @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 initCellStyles(styles) {
+        this.cellStyles = styles;
+    }
+
+    @action initFontInfo(fontObj) {
+        this.fontInfo = fontObj;
+    }
+
+    @action changeFontColor(color) {
+        // this.fontInfo.color = fontObj.asc_getFontColor();
+        // let clr = this.resetColor(this.fontInfo.color);
+        this.fontColor = color;
+    }
+
+    @action changeFillColor(color) {
+        this.fillColor = color;
+    }
+
+    resetColor(color) {
+        let clr = 'transparent';
+
+        if (color) {
+            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;
+    }
+
+}
--- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js
+++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js
@ -7,6 +7,7 @@ import {storePalette} from "./palette";
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 import {storeShapeSettings} from "./shapeSettings";
+import {storeCellSettings} from "./cellSettings";
 // import {storeImageSettings} from "./imageSettings";
 // import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
@ -20,7 +21,8 @@ export const stores = {
    // storeParagraphSettings: new storeParagraphSettings(),
    storeShapeSettings: new storeShapeSettings(),
    storeChartSettings: new storeChartSettings(),
-    storePalette: new storePalette()
+    storePalette: new storePalette(),
+    storeCellSettings: new storeCellSettings()
    // storeImageSettings: new storeImageSettings(),
    // storeTableSettings: new storeTableSettings()
 };
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@ -11,6 +11,7 @@ import EditImageController from "../../controller/edit/EditImage";

 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
+import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell } from './EditCell';

 const routes = [

@ -58,6 +59,25 @@ 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
    }

 ];
@ -122,6 +142,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,
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@ -1,12 +1,268 @@
 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} 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(styleName);
+    console.log(cellStyles);
+    console.log(storeCellSettings);
+
+    const fontInfo = storeCellSettings.fontInfo;
+    console.log(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 auto"></span>;
+    
+    const fillColorPreview = fillColor !== 'auto' ?
+        <span className="color-preview" style={{ background: `#${(typeof fillColor === "object" ? fillColor.color : fillColor)}`}}></span> :
+        <span className="color-preview auto"></span>;
+
    return (
        <Fragment>
+            <List>
+                <ListItem title={fontName} link="/edit-cell-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-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={{
+                    onTextColor: props.onTextColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-text-align-left"></Icon> : null
+                    }
+                </ListItem>
+                <ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
+                    onTextColor: props.onTextColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
+                    }
+                </ListItem>
+                <ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
+                    onTextColor: props.onTextColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-table-borders-all"></Icon> : null
+                    }
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={_t.textFormat} link="/edit-cell-format/" routeProps={{
+                    onTextColor: props.onTextColor
+                }}>
+                    {!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 PageTextColorCell = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    // const storeFocusObjects = props.storeFocusObjects;
+    // const slideObject = storeFocusObjects.slideObject;
+    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};
+                props.onTextColor(newColor);
+                storeCellSettings.changeFontColor(newColor);
+            } else {
+                props.onTextColor(color);
+                storeCellSettings.changeFontColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-cell-text-custom-color/');
+        }
+    };
+  
+    return (
+        <Page>
+            <Navbar title={_t.textFill} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} transparent={true} />
+            <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 storeFocusObjects = props.storeFocusObjects;
+    // const slideObject = storeFocusObjects.slideObject;
+    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};
+                props.onFillColor(newColor);
+                storeCellSettings.changeFillColor(newColor);
+            } else {
+                props.onFillColor(color);
+                storeCellSettings.changeFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-cell-fill-custom-color/');
+        }
+    };
+  
+    return (
+        <Page>
+            <Navbar title={_t.textFill} 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 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));
+
+export {
+    PageEditCell as EditCell,
+    TextColorCell,
+    FillColorCell,
+    CustomFillColorCell,
+    CustomTextColorCell
+};