[PE mobile] Make Table Settings

apps/presentationeditor/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", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -298,6 +298,14 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
             storeTextSettings.resetLineSpacing(vc);
         });
+
+        // Table settings
+
+        const storeTableSettings = this.props.storeTableSettings;
+        
+        this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
+            storeTableSettings.initTableTemplates(templates);
+        });
     }
 
     _onDocumentContentReady() {

apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx

@@ -0,0 +1,221 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditTable } from '../../view/edit/EditTable';
+
+class EditTableController extends Component {
+    constructor (props) {
+        super(props);
+        this.closeIfNeed = this.closeIfNeed.bind(this);
+        this.onRemoveTable = this.onRemoveTable.bind(this);
+        this.onAddColumnLeft = this.onAddColumnLeft.bind(this);
+        this.onAddColumnRight = this.onAddColumnRight.bind(this);
+        this.onAddRowAbove = this.onAddRowAbove.bind(this);
+        this.onAddRowBelow = this.onAddRowBelow.bind(this);
+        this.onRemoveColumn = this.onRemoveColumn.bind(this);
+        this.onRemoveRow = this.onRemoveRow.bind(this);
+    }
+
+    closeIfNeed () {
+        if (!this.props.storeFocusObjects.isTableInStack) {
+            if ( Device.phone ) {
+                f7.sheet.close('#edit-sheet', true);
+            } else {
+                f7.popover.close('#edit-popover');
+            }
+        }
+    }
+
+    onRemoveTable () {
+        const api = Common.EditorApi.get();
+        api.remTable();
+        this.closeIfNeed();
+    }
+
+    onAddColumnLeft () {
+        const api = Common.EditorApi.get();
+        api.addColumnLeft();
+        this.closeIfNeed();
+    }
+
+    onAddColumnRight () {
+        const api = Common.EditorApi.get();
+        api.addColumnRight();
+        this.closeIfNeed();
+    }
+
+    onAddRowAbove () {
+        const api = Common.EditorApi.get();
+        api.addRowAbove();
+        this.closeIfNeed();   
+    }
+
+    onAddRowBelow () {
+        const api = Common.EditorApi.get();
+        api.addRowBelow();
+        this.closeIfNeed();
+    }
+
+    onRemoveColumn () {
+        const api = Common.EditorApi.get();
+        api.remColumn();
+        this.closeIfNeed();
+    }
+
+    onRemoveRow () {
+        const api = Common.EditorApi.get();
+        api.remRow();
+        this.closeIfNeed(); 
+    }
+
+    onOptionMargin (value) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.CTableProp();
+        const margins = new Asc.CMargins();
+        const val = Common.Utils.Metric.fnRecalcToMM(value);
+        margins.put_Top(val);
+        margins.put_Right(val);
+        margins.put_Bottom(val);
+        margins.put_Left(val);
+        margins.put_Flag(2);
+        properties.put_CellMargins(margins);
+        api.tblApply(properties);
+    }
+
+    onStyleClick (type) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.CTableProp();
+        properties.put_TableStyle(type.toString());
+        api.tblApply(properties);
+    }
+
+    onCheckTemplateChange (tableLook, type, isChecked) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.CTableProp();
+
+        switch (type) {
+            case 0:
+                tableLook.put_FirstRow(isChecked);
+                break;
+            case 1:
+                tableLook.put_LastRow(isChecked);
+                break;
+            case 2:
+                tableLook.put_BandHor(isChecked);
+                break;
+            case 3:
+                tableLook.put_FirstCol(isChecked);
+                break;
+            case 4:
+                tableLook.put_LastCol(isChecked);
+                break;
+            case 5:
+                tableLook.put_BandVer(isChecked);
+                break;
+        }
+
+        properties.put_TableLook(tableLook);
+        api.tblApply(properties);
+    }
+
+    onFillColor (color) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.CTableProp();
+        const background = new Asc.CBackground();
+        properties.put_CellsBackground(background);
+
+        if ('transparent' == color) {
+            background.put_Value(1);
+        } else {
+            background.put_Value(0);
+            background.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
+        }
+
+        properties.put_CellSelect(true);
+        api.tblApply(properties);
+    }
+
+    onBorderTypeClick (cellBorders) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.CTableProp();
+        const _cellBorders = !cellBorders ? new Asc.CBorders() : cellBorders;
+        properties.put_CellBorders(_cellBorders);
+        properties.put_CellSelect(true);
+        api.tblApply(properties);
+    }
+
+    onReorder(type) {
+        const api = Common.EditorApi.get();
+
+        switch(type) {
+            case 'all-up':
+                api.shapes_bringToFront();
+                break;
+            case 'all-down':
+                api.shapes_bringToBack();
+                break;
+            case 'move-up':
+                api.shapes_bringForward();
+                break;
+            case 'move-down':
+                api.shapes_bringBackward();
+                break;
+            
+        }
+    }
+
+    onAlign(type) {
+        const api = Common.EditorApi.get();
+
+        switch(type) {
+            case 'align-left':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_LEFT);
+                break;
+            case 'align-center':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_CENTER);
+                break;
+            case 'align-right':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_RIGHT);
+                break;
+            case 'align-top':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_TOP);
+                break;
+            case 'align-middle':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_MIDDLE);
+                break;
+            case 'align-bottom':
+                api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_BOTTOM);
+                break;
+            case 'distrib-hor':
+                api.DistributeHorizontally();
+                break;
+            case 'distrib-vert':
+                api.DistributeVertically();
+                break;
+        }
+    }
+
+    render () {
+        return (
+            <EditTable onRemoveTable={this.onRemoveTable}
+                       onAddColumnLeft={this.onAddColumnLeft}
+                       onAddColumnRight={this.onAddColumnRight}
+                       onAddRowAbove={this.onAddRowAbove}
+                       onAddRowBelow={this.onAddRowBelow}
+                       onRemoveColumn={this.onRemoveColumn}
+                       onRemoveRow={this.onRemoveRow}
+                       onCellMargins={this.onCellMargins}
+                       onStyleClick={this.onStyleClick}
+                       onCheckTemplateChange={this.onCheckTemplateChange}
+                       onFillColor={this.onFillColor}
+                       onBorderTypeClick={this.onBorderTypeClick}
+                       onReorder={this.onReorder}
+                       onAlign={this.onAlign}
+            />
+        )
+    }
+}
+
+export default inject("storeFocusObjects")(observer(EditTableController));

apps/presentationeditor/mobile/src/store/focusObjects.js

@@ -112,4 +112,28 @@ export class storeFocusObjects {
             return undefined;
         }
     }
+
+    @computed get tableObject() {
+        const tables = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
+                tables.push(object);
+            }
+        }
+        if (tables.length > 0) {
+            const object = tables[tables.length - 1]; // get top table
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
+
+    @computed get isTableInStack() {
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
+                return true;
+            }
+        }
+        return false;
+    }
 }

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -10,11 +10,11 @@ import { storePalette } from './palette';
 import { storeSlideSettings } from './slideSettings';
 import { storeTextSettings } from './textSettings';
 import { storeShapeSettings } from './shapeSettings';
+import {storeTableSettings} from "./tableSettings";
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
 // import {storeImageSettings} from "./imageSettings";
-// import {storeTableSettings} from "./tableSettings";
 // import {storeChartSettings} from "./chartSettings";
 
 export const stores = {
@@ -28,11 +28,11 @@ export const stores = {
     storeSlideSettings: new storeSlideSettings(),
     storePalette: new storePalette(),
     storeTextSettings: new storeTextSettings(),
-    storeShapeSettings: new storeShapeSettings()
+    storeShapeSettings: new storeShapeSettings(),
+    storeTableSettings: new storeTableSettings()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),
     // storeChartSettings: new storeChartSettings(),
-    // storeTableSettings: new storeTableSettings()
 };
 

apps/presentationeditor/mobile/src/store/tableSettings.js

@@ -0,0 +1,145 @@
+import {action, observable, computed} from 'mobx';
+import {f7} from 'framework7-react';
+
+export class storeTableSettings {
+
+    @observable _templates = [];
+
+    @action initTableTemplates (templates) {
+        this._templates = templates;
+    }
+
+    @computed get styles () {
+        let styles = [];
+        for (let template of this._templates) {
+            styles.push({
+                imageUrl    : template.asc_getImage(),
+                templateId  : template.asc_getId()
+            });
+        }
+        return styles;
+    }
+
+    getTableLook (tableObject) {
+        return tableObject.get_TableLook()
+    }
+
+    getCellMargins (tableObject) {
+        const margins = tableObject.get_CellMargins();
+        return margins.get_Left();
+    }
+
+    // Fill color
+
+    getFillColor (tableObject) {
+        const background = tableObject.get_CellsBackground();
+        let fillColor = 'transparent';
+        if (background) {
+            if (background.get_Value() == 0) {
+                const color = background.get_Color();
+                if (color) {
+                    if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                        fillColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
+                    } else {
+                        fillColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                    }
+                }
+            }
+        }
+
+        return fillColor;
+    }
+
+    // Border style
+
+    @observable cellBorders;
+    @observable cellBorderWidth = 0.5;
+    @observable cellBorderColor = '000000';
+
+    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)];
+            }
+        }
+    }
+
+    updateCellBorderWidth (value) {
+        this.cellBorderWidth = value;
+    }
+
+    updateCellBorderColor (value) {
+        this.cellBorderColor = value;
+    }
+
+    updateBordersStyle (border) {
+        this.cellBorders = new Asc.CBorders();
+        const visible = (border != '');
+
+        if (border.indexOf('l') > -1 || !visible) {
+            if (this.cellBorders.get_Left()===null || this.cellBorders.get_Left()===undefined)
+                this.cellBorders.put_Left(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_Left(), visible);
+        }
+        if (border.indexOf('t') > -1 || !visible) {
+            if (this.cellBorders.get_Top()===null || this.cellBorders.get_Top()===undefined)
+                this.cellBorders.put_Top(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_Top(), visible);
+        }
+        if (border.indexOf('r') > -1 || !visible) {
+            if (this.cellBorders.get_Right()===null || this.cellBorders.get_Right()===undefined)
+                this.cellBorders.put_Right(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_Right(), visible);
+        }
+        if (border.indexOf('b') > -1 || !visible) {
+            if (this.cellBorders.get_Bottom()===null || this.cellBorders.get_Bottom()===undefined)
+                this.cellBorders.put_Bottom(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_Bottom(), visible);
+        }
+        if (border.indexOf('c') > -1 || !visible) {
+            if (this.cellBorders.get_InsideV()===null || this.cellBorders.get_InsideV()===undefined)
+                this.cellBorders.put_InsideV(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_InsideV(), visible);
+        }
+        if (border.indexOf('m') > -1 || !visible) {
+            if (this.cellBorders.get_InsideH()===null || this.cellBorders.get_InsideH()===undefined)
+                this.cellBorders.put_InsideH(new Asc.asc_CTextBorder());
+            this.updateBorderStyle (this.cellBorders.get_InsideH(), visible);
+        }
+    }
+
+    updateBorderStyle (border, visible) {
+        if (!border) {
+            border = new Asc.asc_CTextBorder();
+        }
+        if (visible && this.cellBorderWidth > 0){
+            const size = parseFloat(this.cellBorderWidth);
+            border.put_Value(1);
+            border.put_Size(size * 25.4 / 72.0);
+            const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
+            border.put_Color(color);
+        }
+        else {
+            border.put_Value(0);
+        }
+    }
+
+}

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -13,6 +13,7 @@ import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColo
 import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
+import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -135,8 +136,21 @@ const routes = [
     {
         path: '/edit-image-link/',
         component: PageLinkSettings
+    },
+
+    // Table
+
+    {
+        path: '/edit-table-reorder/',
+        component: PageTableReorder
+    },
+    {
+        path: '/edit-table-align',
+        component: PageTableAlign
     }
 
+
+
 ];
 
 const EmptyEditLayout = () => {
@@ -231,13 +245,14 @@ const EditTabs = props => {
                 component: <EditImageController />
             })
         }
-        /*if (settings.indexOf('table') > -1) {
+        if (settings.indexOf('table') > -1) {
             editors.push({
                 caption: _t.textTable,
                 id: 'edit-table',
                 component: <EditTableController />
             })
         }
+        /*
         if (settings.indexOf('chart') > -1) {
             editors.push({
                 caption: _t.textChart,

apps/presentationeditor/mobile/src/view/edit/EditTable.jsx

@@ -0,0 +1,474 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
+
+// Style
+
+const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => {
+    const styleId = storeFocusObjects.tableObject.get_TableStyle();
+    const [stateId, setId] = useState(styleId);
+
+    const widthContainer = document.querySelector(".page-content").clientWidth;
+    const columns = parseInt((widthContainer - 47) / 70); // magic
+    const styles = [];
+    let row = -1;
+    templates.forEach((style, index) => {
+        if (0 == index % columns) {
+            styles.push([]);
+            row++
+        }
+        styles[row].push(style);
+    });
+
+    return (
+        <div className="dataview table-styles">
+            {styles.map((row, rowIndex) => {
+                return (
+                    <div className="row" key={`row-${rowIndex}`}>
+                        {row.map((style, index)=>{
+                            return(
+                                <div key={`${rowIndex}-${index}`}
+                                     className={style.templateId === stateId ? 'active' : ''}
+                                     onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                    <img src={style.imageUrl} />
+                                </div>
+                            )
+                        })}
+                    </div>
+                )
+            })}
+        </div>
+    )
+}));
+
+const PageStyleOptions = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const tableLook = props.storeFocusObjects.tableObject.get_TableLook();
+    const isFirstRow = tableLook.get_FirstRow();
+    const isLastRow = tableLook.get_LastRow();
+    const isBandHor = tableLook.get_BandHor();
+    const isFirstCol = tableLook.get_FirstCol();
+    const isLastCol = tableLook.get_LastCol();
+    const isBandVer = tableLook.get_BandVer();
+
+    return (
+        <Page>
+            <Navbar title={_t.textOptions} backLink={_t.textBack}/>
+            <List>
+                <ListItem title={_t.textHeaderRow}>
+                    <Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
+                </ListItem>
+                <ListItem title={_t.textTotalRow}>
+                    <Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
+                </ListItem>
+                <ListItem title={_t.textBandedRow}>
+                    <Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={_t.textFirstColumn}>
+                    <Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
+                </ListItem>
+                <ListItem title={_t.textLastColumn}>
+                    <Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
+                </ListItem>
+                <ListItem title={_t.textBandedColumn}>
+                    <Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageCustomFillColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const tableObject = props.storeFocusObjects.tableObject;
+    let fillColor = props.storeTableSettings.getFillColor(tableObject);
+    if (typeof fillColor === 'object') {
+        fillColor = fillColor.color;
+    }
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onFillColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const TabFillColor = inject("storeFocusObjects", "storeTableSettings", "storePalette")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const tableObject = props.storeFocusObjects.tableObject;
+    const fillColor = props.storeTableSettings.getFillColor(tableObject);
+    const customColors = props.storePalette.customColors;
+
+    const changeColor = (color, effectId, effectValue) => {
+        if (color !== 'empty') {
+            if (effectId !==undefined ) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                props.onFillColor(newColor);
+            } else {
+                props.onFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-table-custom-fill-color/');
+        }
+    };
+
+    return (
+       <Fragment>
+           <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true}/>
+           <List>
+               <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-fill-color/'} routeProps={{
+                   onFillColor: props.onFillColor
+               }}></ListItem>
+           </List>
+       </Fragment>
+    )
+}));
+
+const PageCustomBorderColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    let borderColor = props.storeTableSettings.cellBorderColor;
+
+    if (typeof borderColor === 'object') {
+        borderColor = borderColor.color;
+    }
+
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.storeTableSettings.updateCellBorderColor(color);
+        props.f7router.back();
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const PageBorderColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTableSettings = props.storeTableSettings;
+    const borderColor = storeTableSettings.cellBorderColor;
+    const customColors = props.storePalette.customColors;
+
+    const changeColor = (color, effectId, effectValue) => {
+        if (color !== 'empty') {
+            if (effectId !==undefined ) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                storeTableSettings.updateCellBorderColor(newColor);
+            } else {
+                storeTableSettings.updateCellBorderColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-table-custom-border-color/');
+        }
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textColor} backLink={_t.textBack} />
+            <ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTableSettings = props.storeTableSettings;
+    const borderSizeTransform = storeTableSettings.borderSizeTransform();
+    const borderSize = storeTableSettings.cellBorderWidth;
+    const displayBorderSize = borderSizeTransform.indexSizeByValue(borderSize);
+    const displayTextBorderSize = borderSizeTransform.sizeByValue(borderSize);
+    const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
+    const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
+
+    const onBorderType = (type) => {
+        storeTableSettings.updateBordersStyle(type);
+        props.onBorderTypeClick(storeTableSettings.cellBorders);
+    };
+
+    const borderColor = storeTableSettings.cellBorderColor;
+    const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
+
+    return (
+        <List>
+            <ListItem>
+                <div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
+                <div slot='inner' style={{width: '100%'}}>
+                    <Range min="0" max="7" step="1" value={stateBorderSize}
+                           onRangeChange={(value) => {
+                               setBorderSize(value);
+                               setTextBorderSize(borderSizeTransform.sizeByIndex(value));
+                           }}
+                           onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}}
+                    ></Range>
+                </div>
+                <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                    {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
+                </div>
+            </ListItem>
+            <ListItem title={_t.textColor} link='/edit-table-border-color/'>
+                <span className="color-preview"
+                      slot="after"
+                      style={{ background: displayBorderColor}}
+                ></span>
+            </ListItem>
+            <ListItem className='buttons table-presets'>
+                <Row>
+                    <a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
+                        <Icon slot="media" icon="icon-table-borders-all"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("")}}>
+                        <Icon slot="media" icon="icon-table-borders-none"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("cm")}}>
+                        <Icon slot="media" icon="icon-table-borders-inner"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("lrtb")}}>
+                        <Icon slot="media" icon="icon-table-borders-outer"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("l")}}>
+                        <Icon slot="media" icon="icon icon-table-borders-left"></Icon>
+                    </a>
+                </Row>
+            </ListItem>
+            <ListItem className='buttons table-presets'>
+                <Row>
+                    <a className={'item-link button'} onClick={() => {onBorderType("c")}}>
+                        <Icon slot="media" icon="icon-table-borders-center"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("r")}}>
+                        <Icon slot="media" icon="icon-table-borders-right"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("t")}}>
+                        <Icon slot="media" icon="icon-table-borders-top"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("m")}}>
+                        <Icon slot="media" icon="icon-table-borders-middle"></Icon>
+                    </a>
+                    <a className={'item-link button'} onClick={() => {onBorderType("b")}}>
+                        <Icon slot="media" icon="icon-table-borders-bottom"></Icon>
+                    </a>
+                </Row>
+            </ListItem>
+        </List>
+    )
+}));
+
+const PageStyle = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const storeTableSettings = props.storeTableSettings;
+    const templates = storeTableSettings.styles;
+
+    return (
+        <Page>
+            <Navbar backLink={_t.textBack}>
+                <div className="tab-buttons tabbar">
+                    <Link key={"de-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
+                    <Link key={"de-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
+                    <Link key={"de-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                </div>
+            </Navbar>
+            <Tabs animated>
+                <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
+                    <List>
+                        <ListItem>
+                            <StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
+                        </ListItem>
+                    </List>
+                    <List>
+                        <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
+                            onCheckTemplateChange: props.onCheckTemplateChange
+                        }}/>
+                    </List>
+                </Tab>
+                <Tab key={"de-tab-table-fill"} id={"edit-table-fill"} className="page-content no-padding-top">
+                    <TabFillColor onFillColor={props.onFillColor}/>
+                </Tab>
+                <Tab key={"de-tab-table-border"} id={"edit-table-border"} className="page-content no-padding-top">
+                    <TabBorder onBorderTypeClick={props.onBorderTypeClick}/>
+                </Tab>
+            </Tabs>
+        </Page>
+    )
+};
+
+const PageReorder = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page>
+            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-background"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageAlign = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page>
+            <Navbar title={_t.textAlign} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-left"></Icon>
+                </ListItem>
+                <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-center"></Icon>
+                </ListItem>
+                <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-right"></Icon>
+                </ListItem>
+                <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-top"></Icon>
+                </ListItem>
+                <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-middle"></Icon>
+                </ListItem>
+                <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-bottom"></Icon>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-horizontal"></Icon>
+                </ListItem>
+                <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-align-vertical"></Icon>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const EditTable = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const metricText = Common.Utils.Metric.getCurrentMetricName();
+    const storeFocusObjects = props.storeFocusObjects;
+    const tableObject = storeFocusObjects.tableObject;
+    const storeTableSettings = props.storeTableSettings;
+    const distance = Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getCellMargins(tableObject));
+    const [stateDistance, setDistance] = useState(distance);
+
+    return (
+        <Fragment>
+            <List>
+                <ListItem className='buttons'>
+                    <Row>
+                        <a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
+                            <Icon slot="media" icon="icon-table-add-column-left"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddColumnRight()}}>
+                            <Icon slot="media" icon="icon-table-add-column-right"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddRowAbove()}}>
+                            <Icon slot="media" icon="icon-table-add-row-above"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
+                            <Icon slot="media" icon="icon-table-add-row-below"></Icon>
+                        </a>
+                    </Row>
+                </ListItem>
+                <ListItem className='buttons'>
+                    <Row>
+                        <a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
+                            <Icon slot="media" icon="icon-table-remove-column"></Icon>
+                        </a>
+                        <a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
+                            <Icon slot="media" icon="icon icon-table-remove-row"></Icon>
+                        </a>
+                    </Row>
+                </ListItem>
+                <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
+            </List>
+            <List>
+                <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
+                    onStyleClick: props.onStyleClick,
+                    onCheckTemplateChange: props.onCheckTemplateChange,
+                    onFillColor: props.onFillColor,
+                    onBorderTypeClick: props.onBorderTypeClick
+                }}></ListItem>
+                 <ListItem title={_t.textReorder} link="/edit-table-reorder/" routeProps={{
+                    onReorder: props.onReorder
+                }}></ListItem>
+                <ListItem title={_t.textAlign} link="/edit-table-align/" routeProps={{
+                    onAlign: props.onAlign
+                }}></ListItem>
+                <BlockTitle>{_t.textCellMargins}</BlockTitle>
+                <List>
+                    <ListItem>
+                        <div slot='inner' style={{width: '100%'}}>
+                            <Range min={0} max={200} step={1} value={stateDistance}
+                                onRangeChange={(value) => {setDistance(value)}}
+                                onRangeChanged={(value) => {props.onOptionMargin(value)}}
+                            ></Range>
+                        </div>
+                        <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            {stateDistance + ' ' + metricText}
+                        </div>
+                    </ListItem>
+                </List>
+            </List>
+        </Fragment>
+    )
+};
+
+const EditTableContainer = inject("storeFocusObjects")(observer(EditTable));
+const PageTableStyle = inject("storeFocusObjects","storeTableSettings")(observer(PageStyle));
+const PageTableStyleOptions = inject("storeFocusObjects","storeTableSettings")(observer(PageStyleOptions));
+const PageTableCustomFillColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomFillColor));
+const PageTableBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageBorderColor));
+const PageTableCustomBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomBorderColor));
+const PageTableReorder = inject("storeFocusObjects")(observer(PageReorder));
+const PageTableAlign = inject("storeFocusObjects")(observer(PageAlign));
+
+export {
+    EditTableContainer as EditTable,
+    PageTableStyle,
+    PageTableStyleOptions,
+    PageTableCustomFillColor,
+    PageTableBorderColor,
+    PageTableCustomBorderColor,
+    PageTableReorder,
+    PageTableAlign
+}