Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
4aabcdf8bb
|
|
@ -217,7 +217,18 @@
|
||||||
"textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
"textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||||
"notcriticalErrorTitle": "Warning",
|
"notcriticalErrorTitle": "Warning",
|
||||||
"textPictureFromLibrary": "Picture from Library",
|
"textPictureFromLibrary": "Picture from Library",
|
||||||
"textPictureFromURL": "Picture from URL"
|
"textPictureFromURL": "Picture from URL",
|
||||||
|
"textOptions": "Options",
|
||||||
|
"textHeaderRow": "Header Row",
|
||||||
|
"textTotalRow": "Total Row",
|
||||||
|
"textBandedRow": "Banded Row",
|
||||||
|
"textFirstColumn": "First Column",
|
||||||
|
"textLastColumn": "Last Column",
|
||||||
|
"textBandedColumn": "Banded Column",
|
||||||
|
"textStyleOptions": "Style Options",
|
||||||
|
"textRemoveTable": "Remove Table",
|
||||||
|
"textCellMargins": "Cell Margins",
|
||||||
|
"textRemoveChart": "Remove Chart"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"Common": {
|
"Common": {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { f7 } from "framework7-react";
|
||||||
import { withTranslation } from 'react-i18next';
|
import { withTranslation } from 'react-i18next';
|
||||||
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||||
|
|
||||||
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeLinkSettings")
|
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeChartSettings")
|
||||||
class MainController extends Component {
|
class MainController extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
|
|
@ -299,16 +299,22 @@ class MainController extends Component {
|
||||||
storeTextSettings.resetLineSpacing(vc);
|
storeTextSettings.resetLineSpacing(vc);
|
||||||
});
|
});
|
||||||
|
|
||||||
//table settings
|
// Table settings
|
||||||
|
|
||||||
const storeTableSettings = this.props.storeTableSettings;
|
const storeTableSettings = this.props.storeTableSettings;
|
||||||
|
|
||||||
this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
|
this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
|
||||||
storeTableSettings.initTableTemplates(templates);
|
storeTableSettings.initTableTemplates(templates);
|
||||||
});
|
});
|
||||||
|
|
||||||
//link settings
|
// Chart settings
|
||||||
const storeLinkSettings = this.props.storeLinkSettings;
|
|
||||||
this.api.asc_registerCallback('asc_onCanAddHyperlink', (value) => {
|
const storeChartSettings = this.props.storeChartSettings;
|
||||||
storeLinkSettings.canAddHyperlink(value);
|
|
||||||
|
this.api.asc_registerCallback('asc_onUpdateChartStyles', () => {
|
||||||
|
if (storeFocusObjects.chartObject) {
|
||||||
|
storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.getType()));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
171
apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx
Normal file
171
apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import { f7 } from 'framework7-react';
|
||||||
|
import {Device} from '../../../../../common/mobile/utils/device';
|
||||||
|
import {observer, inject} from "mobx-react";
|
||||||
|
|
||||||
|
import { EditChart } from '../../view/edit/EditChart'
|
||||||
|
|
||||||
|
class EditChartController extends Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.onType = this.onType.bind(this);
|
||||||
|
this.onBorderColor = this.onBorderColor.bind(this);
|
||||||
|
this.onBorderSize = this.onBorderSize.bind(this);
|
||||||
|
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.getType()));
|
||||||
|
}
|
||||||
|
|
||||||
|
onRemoveChart () {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
api.asc_Remove();
|
||||||
|
|
||||||
|
if ( Device.phone ) {
|
||||||
|
f7.sheet.close('#edit-sheet', true);
|
||||||
|
} else {
|
||||||
|
f7.popover.close('#edit-popover');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onStyle (style) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
let chart = new Asc.CAscChartProp();
|
||||||
|
chart.putStyle(style);
|
||||||
|
api.ChartApply(chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
onType (type) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
let chart = new Asc.CAscChartProp();
|
||||||
|
chart.changeType(type);
|
||||||
|
api.ChartApply(chart);
|
||||||
|
// Force update styles
|
||||||
|
this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType()));
|
||||||
|
}
|
||||||
|
|
||||||
|
onFillColor (color) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
const shape = new Asc.asc_CShapeProperty();
|
||||||
|
const fill = new Asc.asc_CShapeFill();
|
||||||
|
|
||||||
|
if (color == 'transparent') {
|
||||||
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
||||||
|
fill.put_fill(null);
|
||||||
|
} else {
|
||||||
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
||||||
|
fill.put_fill(new Asc.asc_CFillSolid());
|
||||||
|
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.put_fill(fill);
|
||||||
|
api.ShapeApply(shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBorderColor (color) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
const currentShape = this.props.storeFocusObjects.shapeObject;
|
||||||
|
const shape = new Asc.asc_CShapeProperty();
|
||||||
|
const stroke = new Asc.asc_CStroke();
|
||||||
|
|
||||||
|
if (currentShape.get_stroke().get_width() < 0.01) {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||||
|
} else {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
|
||||||
|
stroke.put_width(currentShape.get_stroke().get_width());
|
||||||
|
stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.put_stroke(stroke);
|
||||||
|
api.ShapeApply(shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBorderSize (value) {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
const shape = new Asc.asc_CShapeProperty();
|
||||||
|
const stroke = new Asc.asc_CStroke();
|
||||||
|
|
||||||
|
const _borderColor = this.props.storeChartSettings.borderColor;
|
||||||
|
|
||||||
|
if (value < 0.01) {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
|
||||||
|
} else {
|
||||||
|
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
|
||||||
|
if (_borderColor == 'transparent')
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
|
||||||
|
else
|
||||||
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
|
||||||
|
stroke.put_width(value * 25.4 / 72.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
shape.put_stroke(stroke);
|
||||||
|
api.ShapeApply(shape);
|
||||||
|
this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_stroke()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<EditChart onRemoveChart={this.onRemoveChart}
|
||||||
|
onAlign={this.onAlign}
|
||||||
|
onReorder={this.onReorder}
|
||||||
|
onStyle={this.onStyle}
|
||||||
|
onType={this.onType}
|
||||||
|
onFillColor={this.onFillColor}
|
||||||
|
onBorderColor={this.onBorderColor}
|
||||||
|
onBorderSize={this.onBorderSize}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController));
|
||||||
|
|
@ -29,7 +29,6 @@ class EditImageController extends Component {
|
||||||
case 'move-down':
|
case 'move-down':
|
||||||
api.shapes_bringBackward();
|
api.shapes_bringBackward();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
221
apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
Normal file
221
apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
Normal file
|
|
@ -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}
|
||||||
|
onOptionMargin={this.onOptionMargin}
|
||||||
|
onStyleClick={this.onStyleClick}
|
||||||
|
onCheckTemplateChange={this.onCheckTemplateChange}
|
||||||
|
onFillColor={this.onFillColor}
|
||||||
|
onBorderTypeClick={this.onBorderTypeClick}
|
||||||
|
onReorder={this.onReorder}
|
||||||
|
onAlign={this.onAlign}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default inject("storeFocusObjects")(observer(EditTableController));
|
||||||
152
apps/presentationeditor/mobile/src/store/chartSettings.js
Normal file
152
apps/presentationeditor/mobile/src/store/chartSettings.js
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
import {action, observable, computed} from 'mobx';
|
||||||
|
|
||||||
|
export class storeChartSettings {
|
||||||
|
|
||||||
|
// Style
|
||||||
|
|
||||||
|
@observable chartStyles;
|
||||||
|
|
||||||
|
@action updateChartStyles (styles) {
|
||||||
|
this.chartStyles = styles;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get styles () {
|
||||||
|
const widthContainer = document.querySelector(".page-content").clientWidth;
|
||||||
|
const columns = parseInt(widthContainer / 70); // magic
|
||||||
|
let row = -1;
|
||||||
|
const styles = [];
|
||||||
|
|
||||||
|
this.chartStyles.forEach((style, index) => {
|
||||||
|
if (0 == index % columns) {
|
||||||
|
styles.push([]);
|
||||||
|
row++
|
||||||
|
}
|
||||||
|
styles[row].push(style);
|
||||||
|
});
|
||||||
|
|
||||||
|
return styles;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get types () {
|
||||||
|
const types = [
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barStackedPer, thumb: 'chart-01.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.lineNormal, thumb: 'chart-06.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.lineStacked, thumb: 'chart-05.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.lineStackedPer, thumb: 'chart-04.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarNormal, thumb: 'chart-09.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarStacked, thumb: 'chart-08.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer, thumb: 'chart-07.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.areaNormal, thumb: 'chart-12.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.areaStacked, thumb: 'chart-11.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.areaStackedPer, thumb: 'chart-10.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.pie, thumb: 'chart-13.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.doughnut, thumb: 'chart-14.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.pie3d, thumb: 'chart-22.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.scatter, thumb: 'chart-15.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.stock, thumb: 'chart-16.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.line3d, thumb: 'chart-21.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barNormal3d, thumb: 'chart-17.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barStacked3d, thumb: 'chart-18.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barStackedPer3d, thumb: 'chart-19.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarNormal3d, thumb: 'chart-25.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarStacked3d, thumb: 'chart-24.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'chart-23.png'},
|
||||||
|
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'}
|
||||||
|
];
|
||||||
|
const columns = 3;
|
||||||
|
const arr = [];
|
||||||
|
let row = -1;
|
||||||
|
types.forEach((type, index) => {
|
||||||
|
if (0 == index % columns) {
|
||||||
|
arr.push([]);
|
||||||
|
row++
|
||||||
|
}
|
||||||
|
arr[row].push(type);
|
||||||
|
});
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fill Color
|
||||||
|
|
||||||
|
@observable fillColor = undefined;
|
||||||
|
|
||||||
|
setFillColor (color) {
|
||||||
|
this.fillColor = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
getFillColor (shapeProperties) {
|
||||||
|
let fill = shapeProperties.get_fill();
|
||||||
|
const fillType = fill.get_type();
|
||||||
|
let color = 'transparent';
|
||||||
|
|
||||||
|
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
||||||
|
fill = fill.get_fill();
|
||||||
|
const sdkColor = fill.get_color();
|
||||||
|
if (sdkColor) {
|
||||||
|
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||||
|
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
|
||||||
|
} else {
|
||||||
|
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fillColor = color;
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Border size and border color
|
||||||
|
|
||||||
|
@observable borderColor;
|
||||||
|
|
||||||
|
setBorderColor (color) {
|
||||||
|
this.borderColor = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
initBorderColor (stroke) {
|
||||||
|
let color = 'transparent';
|
||||||
|
|
||||||
|
if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||||
|
const sdkColor = stroke.get_color();
|
||||||
|
if (sdkColor) {
|
||||||
|
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
||||||
|
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.borderColor = color;
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
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)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -47,7 +47,7 @@ export class storeFocusObjects {
|
||||||
resultArr.splice(resultArr.indexOf('hyperlink'), 1);
|
resultArr.splice(resultArr.indexOf('hyperlink'), 1);
|
||||||
}
|
}
|
||||||
// Exclude shapes if chart exist
|
// Exclude shapes if chart exist
|
||||||
if (resultArr.indexOf('chart') > -1) {
|
if (resultArr.indexOf('chart') > -1 && resultArr.indexOf('shape') > -1) {
|
||||||
resultArr.splice(resultArr.indexOf('shape'), 1);
|
resultArr.splice(resultArr.indexOf('shape'), 1);
|
||||||
}
|
}
|
||||||
return resultArr;
|
return resultArr;
|
||||||
|
|
@ -122,4 +122,45 @@ export class storeFocusObjects {
|
||||||
return undefined;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get chartObject() {
|
||||||
|
const charts = [];
|
||||||
|
|
||||||
|
for (let object of this._focusObjects) {
|
||||||
|
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart) {
|
||||||
|
charts.push(object);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (charts.length > 0) {
|
||||||
|
const object = charts[charts.length - 1]; // get top
|
||||||
|
return object.get_ObjectValue();
|
||||||
|
} else {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -10,13 +10,12 @@ import { storePalette } from './palette';
|
||||||
import { storeSlideSettings } from './slideSettings';
|
import { storeSlideSettings } from './slideSettings';
|
||||||
import { storeTextSettings } from './textSettings';
|
import { storeTextSettings } from './textSettings';
|
||||||
import { storeShapeSettings } from './shapeSettings';
|
import { storeShapeSettings } from './shapeSettings';
|
||||||
// import {storeTextSettings} from "./textSettings";
|
import { storeTableSettings } from "./tableSettings";
|
||||||
|
import { storeChartSettings } from "./chartSettings";
|
||||||
|
import { storeLinkSettings } from "./linkSettings";
|
||||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||||
// import {storeShapeSettings} from "./shapeSettings";
|
// import {storeShapeSettings} from "./shapeSettings";
|
||||||
// import {storeImageSettings} from "./imageSettings";
|
// import {storeImageSettings} from "./imageSettings";
|
||||||
import {storeTableSettings} from "./tableSettings";
|
|
||||||
// import {storeChartSettings} from "./chartSettings";
|
|
||||||
import {storeLinkSettings} from "./linkSettings";
|
|
||||||
|
|
||||||
export const stores = {
|
export const stores = {
|
||||||
storeAppOptions: new storeAppOptions(),
|
storeAppOptions: new storeAppOptions(),
|
||||||
|
|
@ -30,11 +29,12 @@ export const stores = {
|
||||||
storePalette: new storePalette(),
|
storePalette: new storePalette(),
|
||||||
storeTextSettings: new storeTextSettings(),
|
storeTextSettings: new storeTextSettings(),
|
||||||
storeShapeSettings: new storeShapeSettings(),
|
storeShapeSettings: new storeShapeSettings(),
|
||||||
|
storeTableSettings: new storeTableSettings(),
|
||||||
|
storeChartSettings: new storeChartSettings(),
|
||||||
|
storeLinkSettings: new storeLinkSettings()
|
||||||
// storeTextSettings: new storeTextSettings(),
|
// storeTextSettings: new storeTextSettings(),
|
||||||
// storeParagraphSettings: new storeParagraphSettings(),
|
// storeParagraphSettings: new storeParagraphSettings(),
|
||||||
// storeShapeSettings: new storeShapeSettings(),
|
// storeShapeSettings: new storeShapeSettings(),
|
||||||
// storeChartSettings: new storeChartSettings(),
|
// storeChartSettings: new storeChartSettings(),
|
||||||
storeTableSettings: new storeTableSettings(),
|
|
||||||
storeLinkSettings: new storeLinkSettings()
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,144 @@
|
||||||
import {action, observable, computed} from 'mobx';
|
import {action, observable, computed} from 'mobx';
|
||||||
import {f7} from 'framework7-react';
|
import {f7} from 'framework7-react';
|
||||||
|
|
||||||
export class storeTableSettings {
|
export class storeTableSettings {
|
||||||
@observable _templates = [];
|
|
||||||
|
@observable _templates = [];
|
||||||
@action initTableTemplates(templates) {
|
|
||||||
this._templates = templates;
|
@action initTableTemplates (templates) {
|
||||||
}
|
this._templates = templates;
|
||||||
|
}
|
||||||
@computed get styles() {
|
|
||||||
let styles = [];
|
@computed get styles () {
|
||||||
for (let template of this._templates) {
|
let styles = [];
|
||||||
styles.push({
|
for (let template of this._templates) {
|
||||||
imageUrl: template.asc_getImage(),
|
styles.push({
|
||||||
templateId: template.asc_getId()
|
imageUrl : template.asc_getImage(),
|
||||||
});
|
templateId : template.asc_getId()
|
||||||
}
|
});
|
||||||
return styles;
|
}
|
||||||
}
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -9,14 +9,15 @@ import EditSlideController from "../../controller/edit/EditSlide";
|
||||||
import EditTextController from "../../controller/edit/EditText";
|
import EditTextController from "../../controller/edit/EditText";
|
||||||
import EditShapeController from "../../controller/edit/EditShape";
|
import EditShapeController from "../../controller/edit/EditShape";
|
||||||
import EditImageController from "../../controller/edit/EditImage";
|
import EditImageController from "../../controller/edit/EditImage";
|
||||||
|
import EditTableController from "../../controller/edit/EditTable";
|
||||||
|
import EditChartController from "../../controller/edit/EditChart";
|
||||||
|
|
||||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||||
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
|
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
|
||||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||||
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
|
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
|
||||||
//import EditShapeController from "../../controller/edit/EditShape";
|
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
|
||||||
//import EditImageController from "../../controller/edit/EditImage";
|
import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
|
||||||
//import EditTableController from "../../controller/edit/EditTable";
|
|
||||||
//import EditChartController from "../../controller/edit/EditChart";
|
|
||||||
//import EditLinkController from "../../controller/edit/EditLink";
|
//import EditLinkController from "../../controller/edit/EditLink";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
|
@ -135,8 +136,65 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: '/edit-image-link/',
|
path: '/edit-image-link/',
|
||||||
component: PageLinkSettings
|
component: PageLinkSettings
|
||||||
}
|
},
|
||||||
|
|
||||||
|
// Table
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/edit-table-reorder/',
|
||||||
|
component: PageTableReorder
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-align/',
|
||||||
|
component: PageTableAlign
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-style/',
|
||||||
|
component: PageTableStyle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-style-options/',
|
||||||
|
component: PageTableStyleOptions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-border-color/',
|
||||||
|
component: PageTableBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-custom-border-color/',
|
||||||
|
component: PageTableCustomBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-table-custom-fill-color/',
|
||||||
|
component: PageTableCustomFillColor
|
||||||
|
},
|
||||||
|
|
||||||
|
// Chart
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/edit-chart-style/',
|
||||||
|
component: PageChartStyle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-chart-reorder/',
|
||||||
|
component: PageChartReorder
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-chart-align/',
|
||||||
|
component: PageChartAlign
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-chart-border-color/',
|
||||||
|
component: PageChartBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-chart-custom-border-color/',
|
||||||
|
component: PageChartCustomBorderColor
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/edit-chart-custom-fill-color/',
|
||||||
|
component: PageChartCustomFillColor
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const EmptyEditLayout = () => {
|
const EmptyEditLayout = () => {
|
||||||
|
|
@ -231,7 +289,7 @@ const EditTabs = props => {
|
||||||
component: <EditImageController />
|
component: <EditImageController />
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/*if (settings.indexOf('table') > -1) {
|
if (settings.indexOf('table') > -1) {
|
||||||
editors.push({
|
editors.push({
|
||||||
caption: _t.textTable,
|
caption: _t.textTable,
|
||||||
id: 'edit-table',
|
id: 'edit-table',
|
||||||
|
|
@ -245,6 +303,7 @@ const EditTabs = props => {
|
||||||
component: <EditChartController />
|
component: <EditChartController />
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
if (settings.indexOf('hyperlink') > -1) {
|
if (settings.indexOf('hyperlink') > -1) {
|
||||||
editors.push({
|
editors.push({
|
||||||
caption: _t.textHyperlink,
|
caption: _t.textHyperlink,
|
||||||
|
|
|
||||||
341
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
Normal file
341
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
Normal file
|
|
@ -0,0 +1,341 @@
|
||||||
|
import React, {Fragment, useState} from 'react';
|
||||||
|
import {observer, inject} from "mobx-react";
|
||||||
|
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, 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";
|
||||||
|
|
||||||
|
const PageCustomFillColor = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
let fillColor = props.storeChartSettings.fillColor;
|
||||||
|
|
||||||
|
if (typeof fillColor === 'object') {
|
||||||
|
fillColor = fillColor.color;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAddNewColor = (colors, color) => {
|
||||||
|
props.storePalette.changeCustomColors(colors);
|
||||||
|
props.onFillColor(color);
|
||||||
|
props.storeChartSettings.setFillColor(color);
|
||||||
|
props.f7router.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||||
|
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeChartSettings = props.storeChartSettings;
|
||||||
|
const shapeProperties = props.storeFocusObjects.shapeObject;
|
||||||
|
const curFillColor = storeChartSettings.fillColor ? storeChartSettings.fillColor : storeChartSettings.getFillColor(shapeProperties);
|
||||||
|
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);
|
||||||
|
storeChartSettings.setFillColor(newColor);
|
||||||
|
} else {
|
||||||
|
props.onFillColor(color);
|
||||||
|
storeChartSettings.setFillColor(color);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// open custom color menu
|
||||||
|
props.f7router.navigate('/edit-chart-custom-fill-color/');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textAddCustomColor} link={'/edit-chart-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.storeChartSettings.borderColor;
|
||||||
|
|
||||||
|
if (typeof borderColor === 'object') {
|
||||||
|
borderColor = borderColor.color;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAddNewColor = (colors, color) => {
|
||||||
|
props.storePalette.changeCustomColors(colors);
|
||||||
|
props.onBorderColor(color);
|
||||||
|
props.storeChartSettings.setBorderColor(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 borderColor = props.storeChartSettings.borderColor;
|
||||||
|
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.onBorderColor(newColor);
|
||||||
|
props.storeChartSettings.setBorderColor(newColor);
|
||||||
|
} else {
|
||||||
|
props.onBorderColor(color);
|
||||||
|
props.storeChartSettings.setBorderColor(color);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// open custom color menu
|
||||||
|
props.f7router.navigate('/edit-chart-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-chart-custom-border-color/'} routeProps={{
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}></ListItem>
|
||||||
|
</List>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageStyle = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
const storeChartSettings = props.storeChartSettings;
|
||||||
|
const chartProperties = props.storeFocusObjects.chartObject;
|
||||||
|
|
||||||
|
const types = storeChartSettings.types;
|
||||||
|
const curType = chartProperties.getType();
|
||||||
|
|
||||||
|
const styles = storeChartSettings.styles;
|
||||||
|
|
||||||
|
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||||
|
const shapeStroke = shapeObject.get_stroke();
|
||||||
|
|
||||||
|
// Init border size
|
||||||
|
|
||||||
|
const borderSizeTransform = storeChartSettings.borderSizeTransform();
|
||||||
|
const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
|
||||||
|
const borderType = shapeStroke.get_type();
|
||||||
|
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
|
||||||
|
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
||||||
|
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
||||||
|
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
||||||
|
|
||||||
|
// Init border color
|
||||||
|
|
||||||
|
const borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
|
||||||
|
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar backLink={_t.textBack}>
|
||||||
|
<div className="tab-buttons tabbar">
|
||||||
|
<Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
|
||||||
|
<Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link>
|
||||||
|
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
|
||||||
|
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
|
||||||
|
</div>
|
||||||
|
</Navbar>
|
||||||
|
<Tabs animated>
|
||||||
|
<Tab key={"pe-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
|
||||||
|
<div className="chart-types">
|
||||||
|
{types.map((row, rowIndex) => {
|
||||||
|
return (
|
||||||
|
<ul className="row" key={`row-${rowIndex}`}>
|
||||||
|
{row.map((type, index)=>{
|
||||||
|
return(
|
||||||
|
<li key={`${rowIndex}-${index}`}
|
||||||
|
className={curType === type.type ? ' active' : ''}
|
||||||
|
onClick={()=>{props.onType(type.type)}}>
|
||||||
|
<div className={'thumb'}
|
||||||
|
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
|
||||||
|
<div className={'chart-styles'}>
|
||||||
|
{styles.map((row, rowIndex) => {
|
||||||
|
return (
|
||||||
|
<ul className="row" key={`row-${rowIndex}`}>
|
||||||
|
{row.map((style, index)=>{
|
||||||
|
return(
|
||||||
|
<li key={`${rowIndex}-${index}`}
|
||||||
|
onClick={()=>{props.onStyle(style.asc_getName())}}>
|
||||||
|
<img src={`${style.asc_getImage()}`}/>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
|
||||||
|
<PaletteFill onFillColor={props.onFillColor}/>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"pe-tab-chart-border"} id={"edit-chart-border"} className="page-content no-padding-top">
|
||||||
|
<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) => {props.onBorderSize(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-chart-border-color/' routeProps={{
|
||||||
|
onBorderColor: props.onBorderColor
|
||||||
|
}}>
|
||||||
|
<span className="color-preview"
|
||||||
|
slot="after"
|
||||||
|
style={{ background: displayBorderColor}}
|
||||||
|
></span>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</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} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-background"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'>
|
||||||
|
<Icon slot="media" icon="icon-move-forward"></Icon>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' 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 EditChart = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Edit', {returnObjects: true});
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<List>
|
||||||
|
<ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps={{
|
||||||
|
onType: props.onType,
|
||||||
|
onStyle: props.onStyle,
|
||||||
|
onFillColor: props.onFillColor,
|
||||||
|
onBorderColor: props.onBorderColor,
|
||||||
|
onBorderSize: props.onBorderSize
|
||||||
|
}}></ListItem>
|
||||||
|
<ListItem title={_t.textReorder} link='/edit-chart-reorder/' routeProps={{
|
||||||
|
onReorder: props.onReorder
|
||||||
|
}}></ListItem>
|
||||||
|
<ListItem title={_t.textAlign} link="/edit-chart-align/" routeProps={{
|
||||||
|
onAlign: props.onAlign
|
||||||
|
}}></ListItem>
|
||||||
|
</List>
|
||||||
|
<List>
|
||||||
|
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
|
||||||
|
</List>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
|
||||||
|
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
|
||||||
|
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
|
||||||
|
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
|
||||||
|
|
||||||
|
export {
|
||||||
|
EditChart,
|
||||||
|
PageChartStyle,
|
||||||
|
PageChartCustomFillColor,
|
||||||
|
PageChartBorderColor,
|
||||||
|
PageChartCustomBorderColor,
|
||||||
|
PageReorder as PageChartReorder,
|
||||||
|
PageAlign as PageChartAlign
|
||||||
|
}
|
||||||
477
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
Normal file
477
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
Normal file
|
|
@ -0,0 +1,477 @@
|
||||||
|
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('View.Edit', {returnObjects: true});
|
||||||
|
const storeTableSettings = props.storeTableSettings;
|
||||||
|
const templates = storeTableSettings.styles;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<Navbar backLink={_t.textBack}>
|
||||||
|
<div className="tab-buttons tabbar">
|
||||||
|
<Link key={"pe-link-table-style"} tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
|
||||||
|
<Link key={"pe-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
|
||||||
|
<Link key={"pe-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
|
||||||
|
</div>
|
||||||
|
</Navbar>
|
||||||
|
<Tabs animated>
|
||||||
|
<Tab key={"pe-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={"pe-tab-table-fill"} id={"edit-table-fill"} className="page-content no-padding-top">
|
||||||
|
<TabFillColor onFillColor={props.onFillColor}/>
|
||||||
|
</Tab>
|
||||||
|
<Tab key={"pe-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", "storeTableSettings")(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
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue