Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Maked Fonts, Text Format, Text Orientation, Border Style in Cell Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-02-05 23:28:55 +03:00
parent 507ce63a98
commit 0fea919d9c
5 changed files with 676 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -59,7 +59,35 @@
"textAuto": "Auto",
"textPt": "pt",
"textFormat": "Format",
"textCellStyles": "Cell Styles"
"textCellStyles": "Cell Styles",
"textAlignLeft": "Align Left",
"textAlignCenter": "Align Center",
"textAlignRight": "Align Right",
"textJustified": "Justified",
"textAlignTop": "Align Top",
"textAlignMiddle": "Align Middle",
"textAlignBottom": "Align Bottom",
"textWrapText": "Wrap Text",
"textHorizontalText": "Horizontal Text",
"textAngleCounterclockwise": "Angle Counterclockwise",
"textAngleClockwise": "Angle Clockwise",
"textVerticalText": "Vertical Text",
"textRotateTextUp": "Rotate Text Up",
"textRotateTextDown": "Rotate Text Down",
"textNoBorder": "No Border",
"textAllBorders": "All Borders",
"textBottomBorder": "Bottom Border",
"textTopBorder": "Top Border",
"textLeftBorder": "Left Border",
"textRightBorder": "Right Border",
"textInsideBorders": "Inside Borders",
"textInsideVerticalBorder": "Inside Vertical Border",
"textInsideHorizontalBorder": "Inside Horizontal Border",
"textDiagonalUpBorder": "Diagonal Up Border",
"textDiagonalDownBorder": "Diagonal Down Border",
"textThin": "Thin",
"textMedium": "Medium",
"textThick": "Thick"
}
},
"Common": {

119
apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
View file

@ -40,6 +40,117 @@ class EditCellController extends Component {
api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
}
onFontSize(curSize, isDecrement) {
const api = Common.EditorApi.get();
let size = curSize;
if (isDecrement) {
typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size);
} else {
typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size);
}
if (typeof size !== 'undefined') {
api.asc_setCellFontSize(size);
}
}
onFontClick(name) {
const api = Common.EditorApi.get();
if (name) {
api.asc_setCellFontName(name);
}
}
onHAlignChange(value) {
const api = Common.EditorApi.get();
let type;
if (value == 'center') {
type = AscCommon.align_Center;
} else if (value == 'right') {
type = AscCommon.align_Right;
} else if (value == 'justify') {
type = AscCommon.align_Justify;
} else if (value == 'left') {
type = AscCommon.align_Left;
}
api.asc_setCellAlign(type);
}
onVAlignChange(value) {
const api = Common.EditorApi.get();
let type;
if (value == 'top') {
type = Asc.c_oAscVAlign.Top;
} else if (value == 'center') {
type = Asc.c_oAscVAlign.Center;
} else if (value == 'bottom') {
type = Asc.c_oAscVAlign.Bottom;
}
api.asc_setCellVertAlign(type);
}
onWrapTextChange(checked) {
const api = Common.EditorApi.get();
console.log(checked);
api.asc_setCellTextWrap(checked);
}
onTextOrientationChange(value) {
const api = Common.EditorApi.get();
let angle = 0;
switch (value) {
case 'anglecount': angle = 45; break;
case 'angleclock': angle = -45; break;
case 'vertical': angle = 255; break;
case 'rotateup': angle = 90; break;
case 'rotatedown': angle = -90; break;
}
api.asc_setCellAngle(angle);
}
onCellFormat(value) {
const api = Common.EditorApi.get();
let type = decodeURIComponent(atob(value));
api.asc_setCellFormat(type);
}
onBorderStyle(type, borderInfo) {
const api = Common.EditorApi.get();
let newBorders = [],
bordersWidth = borderInfo.width,
bordersColor = Common.Utils.ThemeColor.getRgbColor(borderInfo.color);
if (type == 'inner') {
newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type == 'all') {
newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type == 'outer') {
newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor);
newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor);
} else if (type != 'none') {
var borderId = parseInt(type);
newBorders[borderId] = new Asc.asc_CBorder(bordersWidth, bordersColor);
}
api.asc_setCellBorders(newBorders);
}
render () {
return (
<EditCell
@ -49,6 +160,14 @@ class EditCellController extends Component {
onStyleClick={this.onStyleClick}
onTextColor={this.onTextColor}
onFillColor={this.onFillColor}
onFontSize={this.onFontSize}
onFontClick={this.onFontClick}
onHAlignChange={this.onHAlignChange}
onVAlignChange={this.onVAlignChange}
onWrapTextChange={this.onWrapTextChange}
onCellFormat={this.onCellFormat}
onTextOrientationChange={this.onTextOrientationChange}
onBorderStyle={this.onBorderStyle}
/>
)
}

81
apps/spreadsheeteditor/mobile/src/store/cellSettings.js
View file

@ -5,7 +5,14 @@ export class storeCellSettings {
@observable styleSize = {
width: 100,
height: 50
}
};
@observable borderInfo = {
color: '000000',
width: Asc.c_oAscBorderStyles.Medium
};
@observable borderStyle = 'none';
@observable cellStyles = [];
@observable fontsArray = [];
@ -19,6 +26,11 @@ export class storeCellSettings {
@observable isItalic = false;
@observable isUnderline = false;
@observable hAlignStr = 'left';
@observable vAlignStr = 'bottom';
@observable isWrapText;
@observable orientationStr = 'horizontal';
@action initCellSettings(cellInfo) {
@ -32,20 +44,59 @@ export class storeCellSettings {
this.fillColor = clr;
this.styleName = cellInfo.asc_getStyleName();
this.initTextOrientation(xfs);
this.initTextFormat(xfs);
}
@action initFontSettings(fontObj) {
@action initTextFormat(xfs) {
let hAlign = xfs.asc_getHorAlign();
let vAlign = xfs.asc_getVertAlign();
let isWrapText = xfs.asc_getWrapText();
this.fontInfo.name = fontObj.asc_getFontName();
this.fontInfo.size = fontObj.asc_getFontSize();
if (vAlign == Asc.c_oAscVAlign.Top)
this.vAlignStr = 'top';
else if (vAlign == Asc.c_oAscVAlign.Center)
this.vAlignStr = 'center';
else if (vAlign == Asc.c_oAscVAlign.Bottom)
this.vAlignStr = 'bottom';
this.fontInfo.color = fontObj.asc_getFontColor();
switch (hAlign) {
case AscCommon.align_Left: this.hAlignStr = 'left'; break;
case AscCommon.align_Center: this.hAlignStr = 'center'; break;
case AscCommon.align_Right: this.hAlignStr = 'right'; break;
case AscCommon.align_Justify: this.hAlignStr = 'justify'; break;
}
this.isWrapText = isWrapText;
}
@action initTextOrientation(xfs) {
let textAngle = xfs.asc_getAngle();
switch(textAngle) {
case 45: this.orientationStr = 'anglecount'; break;
case -45: this.orientationStr = 'angleclock'; break;
case 255: this.orientationStr = 'vertical'; break;
case 90: this.orientationStr = 'rotateup'; break;
case -90: this.orientationStr = 'rotatedown'; break;
case 0: this.orientationStr = 'horizontal'; break;
}
}
@action initFontSettings(xfs) {
this.fontInfo.name = xfs.asc_getFontName();
this.fontInfo.size = xfs.asc_getFontSize();
this.fontInfo.color = xfs.asc_getFontColor();
let clr = this.resetColor(this.fontInfo.color);
this.fontColor = clr;
this.isBold = fontObj.asc_getFontBold();
this.isItalic = fontObj.asc_getFontItalic();
this.isUnderline = fontObj.asc_getFontUnderline();
this.isBold = xfs.asc_getFontBold();
this.isItalic = xfs.asc_getFontItalic();
this.isUnderline = xfs.asc_getFontUnderline();
}
@action initEditorFonts(fonts, select) {
@ -74,8 +125,6 @@ export class storeCellSettings {
}
@action changeFontColor(color) {
// this.fontInfo.color = fontObj.asc_getFontColor();
// let clr = this.resetColor(this.fontInfo.color);
this.fontColor = color;
}
@ -83,6 +132,18 @@ export class storeCellSettings {
this.fillColor = color;
}
@action changeBorderColor(color) {
this.borderInfo.color = color;
}
@action changeBorderSize(size) {
this.borderInfo.width = size;
}
@action changeBorderStyle(type) {
this.borderStyle = type;
}
resetColor(color) {
let clr = 'transparent';

30
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -11,7 +11,7 @@ import EditImageController from "../../controller/edit/EditImage";
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell } from './EditCell';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell } from './EditCell';
const routes = [
@ -78,6 +78,34 @@ const routes = [
{
path: '/edit-cell-fill-custom-color/',
component: CustomFillColorCell
},
{
path: '/edit-cell-text-fonts/',
component: FontsCell
},
{
path: '/edit-cell-text-format/',
component: TextFormatCell
},
{
path: '/edit-cell-text-orientation/',
component: TextOrientationCell
},
{
path: '/edit-cell-border-style/',
component: BorderStyleCell
},
{
path: '/edit-border-color-cell/',
component: BorderColorCell
},
{
path: '/edit-border-custom-color-cell/',
component: CustomBorderColorCell
},
{
path: '/edit-border-size-cell/',
component: BorderSizeCell
}
];

437
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@ -43,8 +43,8 @@ const EditCell = props => {
<Fragment>
<List>
<ListItem title={fontName} link="/edit-cell-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
changeFontFamily: props.changeFontFamily
onFontSize: props.onFontSize,
onFontClick: props.onFontClick
}}/>
<ListItem className='buttons'>
<Row>
@ -70,21 +70,23 @@ const EditCell = props => {
}
</ListItem>
<ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{
onTextColor: props.onTextColor
onHAlignChange: props.onHAlignChange,
onVAlignChange: props.onVAlignChange,
onWrapTextChange: props.onWrapTextChange
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-left"></Icon> : null
}
</ListItem>
<ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
onTextColor: props.onTextColor
onTextOrientationChange: props.onTextOrientationChange
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
}
</ListItem>
<ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
onTextColor: props.onTextColor
onBorderStyle: props.onBorderStyle
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-table-borders-all"></Icon> : null
@ -117,6 +119,74 @@ const EditCell = props => {
)
};
const PageFontsCell = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const fontInfo = storeCellSettings.fontInfo;
const size = fontInfo.size;
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = fontInfo.name;
const fonts = storeCellSettings.fontsArray;
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
return {vlData: {
items: fonts,
}};
});
};
return (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} />
<List>
<ListItem title={_t.textSize}>
{!isAndroid && <div slot='after-start'>{displaySize}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onFontSize(size, true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{displaySize}</label>}
<Button outline className='increment item-link' onClick={() => {props.onFontSize(size, false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
}}>
<ul>
{vlFonts.vlData.items.map((item, index) => (
<ListItem
key={index}
radio
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.onFontClick(item.name)}}
></ListItem>
))}
</ul>
</List>
</Page>
);
};
const PageTextColorCell = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
@ -145,7 +215,7 @@ const PageTextColorCell = props => {
return (
<Page>
<Navbar title={_t.textFill} backLink={_t.textBack}>
<Navbar title={_t.textTextColor} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
@ -188,7 +258,7 @@ const PageFillColorCell = props => {
return (
<Page>
<Navbar title={_t.textFill} backLink={_t.textBack}>
<Navbar title={_t.textFillColor} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
@ -253,16 +323,365 @@ const PageCustomFillColorCell = props => {
)
};
const PageTextFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const isAndroid = Device.android;
const storeCellSettings = props.storeCellSettings;
const hAlignStr = storeCellSettings.hAlignStr;
const vAlignStr = storeCellSettings.vAlignStr;
const isWrapText = storeCellSettings.isWrapText;
return (
<Page>
<Navbar title={_t.textTextFormat} backLink={_t.textBack} />
<List>
<ListItem title={_t.textAlignLeft} radio checked={hAlignStr === 'left'} onChange={() => {
props.onHAlignChange('left');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-left"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAlignCenter} radio checked={hAlignStr === 'center'} onChange={() => {
props.onHAlignChange('center');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-center"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAlignRight} radio checked={hAlignStr === 'right'} onChange={() => {
props.onHAlignChange('right');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-right"></Icon> : null
}
</ListItem>
<ListItem title={_t.textJustified} radio checked={hAlignStr === 'justify'} onChange={() => {
props.onHAlignChange('justify');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-align-jast"></Icon> : null
}
</ListItem>
</List>
<List>
<ListItem title={_t.textAlignTop} radio checked={vAlignStr === 'top'} onChange={() => {
props.onVAlignChange('top');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-top"></Icon> : null}
</ListItem>
<ListItem title={_t.textAlignMiddle} radio checked={vAlignStr === 'center'} onChange={() => {
props.onVAlignChange('center');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-middle"></Icon> : null}
</ListItem>
<ListItem title={_t.textAlignBottom} radio checked={vAlignStr === 'bottom'} onChange={() => {
props.onVAlignChange('bottom');
}}>
{!isAndroid ? <Icon slot="media" icon="icon-text-valign-bottom"></Icon> : null}
</ListItem>
</List>
<List>
<ListItem title={_t.textWrapText}>
{!isAndroid ? <Icon slot="media" icon="icon-cell-wrap"></Icon> : null}
<Toggle checked={isWrapText} onChange={() => {props.onWrapTextChange(!isWrapText)}} />
</ListItem>
</List>
</Page>
)
};
const PageTextOrientationCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const isAndroid = Device.android;
const storeCellSettings = props.storeCellSettings;
const orientationStr = storeCellSettings.orientationStr;
return (
<Page>
<Navbar title={_t.textTextOrientation} backLink={_t.textBack} />
<List>
<ListItem title={_t.textHorizontalText} radio checked={orientationStr === 'horizontal'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null} onChange={() => {
props.onTextOrientationChange('horizontal');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAngleCounterclockwise} radio checked={orientationStr === 'anglecount'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-anglecount"></Icon> : null} onChange={() => {
props.onTextOrientationChange('anglecount');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-anglecount"></Icon> : null
}
</ListItem>
<ListItem title={_t.textAngleClockwise} radio checked={orientationStr === 'angleclock'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-angleclock"></Icon> : null} onChange={() => {
props.onTextOrientationChange('angleclock');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-angleclock"></Icon> : null
}
</ListItem>
<ListItem title={_t.textVerticalText} radio checked={orientationStr === 'vertical'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-vertical"></Icon> : null} onChange={() => {
props.onTextOrientationChange('vertical');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-vertical"></Icon> : null
}
</ListItem>
<ListItem title={_t.textRotateTextUp} radio checked={orientationStr === 'rotateup'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-rotateup"></Icon> : null} onChange={() => {
props.onTextOrientationChange('rotateup');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-rotateup"></Icon> : null
}
</ListItem>
<ListItem title={_t.textRotateTextDown} radio checked={orientationStr === 'rotatedown'}
after={isAndroid ? <Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon> : null} onChange={() => {
props.onTextOrientationChange('rotatedown');
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon> : null
}
</ListItem>
</List>
</Page>
)
};
const PageBorderStyleCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const borderInfo = storeCellSettings.borderInfo;
const borderSizes = {
7: `${_t.textThin}`,
12: `${_t.textMedium}`,
13: `${_t.textThick}`
};
// const borderSizes = storeCellSettings.borderSizes;
return (
<Page>
<Navbar title={_t.textBorderStyle} backLink={_t.textBack} />
<List>
<ListItem title={_t.textNoBorder} onClick={() => {
storeCellSettings.changeBorderStyle('none');
props.onBorderStyle('none', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-none"></Icon>
</ListItem>
<ListItem title={_t.textAllBorders} onClick={() => {
storeCellSettings.changeBorderStyle('all');
props.onBorderStyle('all', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
</ListItem>
<ListItem title={_t.textBottomBorder} onClick={() => {
storeCellSettings.changeBorderStyle('2');
props.onBorderStyle('2', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
</ListItem>
<ListItem title={_t.textTopBorder} onClick={() => {
storeCellSettings.changeBorderStyle('0');
props.onBorderStyle('0', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-top"></Icon>
</ListItem>
<ListItem title={_t.textLeftBorder} onClick={() => {
storeCellSettings.changeBorderStyle('3');
props.onBorderStyle('3', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-left"></Icon>
</ListItem>
<ListItem title={_t.textRightBorder} onClick={() => {
storeCellSettings.changeBorderStyle('1');
props.onBorderStyle('1', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-right"></Icon>
</ListItem>
<ListItem title={_t.textInsideBorders} onClick={() => {
storeCellSettings.changeBorderStyle('inner');
props.onBorderStyle('inner', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-inner"></Icon>
</ListItem>
<ListItem title={_t.textInsideVerticalBorder} onClick={() => {
storeCellSettings.changeBorderStyle('6');
props.onBorderStyle('6', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-center"></Icon>
</ListItem>
<ListItem title={_t.textInsideHorizontalBorder} onClick={() => {
storeCellSettings.changeBorderStyle('7');
props.onBorderStyle('7', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-middle"></Icon>
</ListItem>
<ListItem title={_t.textDiagonalUpBorder} onClick={() => {
storeCellSettings.changeBorderStyle('5');
props.onBorderStyle('5', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-dup"></Icon>
</ListItem>
<ListItem title={_t.textDiagonalDownBorder} onClick={() => {
storeCellSettings.changeBorderStyle('4');
props.onBorderStyle('4', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-ddown"></Icon>
</ListItem>
</List>
<List>
<ListItem title={_t.textColor} link='/edit-border-color-cell/' routeProps={{
onBorderStyle: props.onBorderStyle
}}>
<span className="color-preview"
slot="after"
style={{background:`#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`}}
></span>
</ListItem>
<ListItem title={_t.textSize} link='/edit-border-size-cell/' after={borderSizes[borderInfo.width]} routeProps={{
onBorderStyle: props.onBorderStyle
}}>
</ListItem>
</List>
</Page>
)
};
const PageBorderColorCell = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storePalette = props.storePalette;
const storeCellSettings = props.storeCellSettings;
const borderInfo = storeCellSettings.borderInfo;
const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color;
const borderStyle = storeCellSettings.borderStyle;
const customColors = storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !== undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
storeCellSettings.changeBorderColor(newColor);
props.onBorderStyle(borderStyle, borderInfo);
} else {
storeCellSettings.changeBorderColor(color);
props.onBorderStyle(borderStyle, borderInfo);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-border-custom-color-cell/');
}
};
return (
<Page>
<Navbar backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-border-custom-color-cell/'} routeProps={{
onBorderStyle: props.onBorderStyle
}}></ListItem>
</List>
</Page>
);
};
const PageCustomBorderColorCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const storePalette = props.storePalette;
const borderInfo = storeCellSettings.borderInfo;
const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color;
const borderStyle = storeCellSettings.borderStyle;
const onAddNewColor = (colors, color) => {
storePalette.changeCustomColors(colors);
storeCellSettings.changeBorderColor(color);
props.onBorderStyle(borderStyle, borderInfo);
props.f7router.back();
};
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
const PageBorderSizeCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const borderInfo = storeCellSettings.borderInfo;
const borderStyle = storeCellSettings.borderStyle;
// const borderSizes = storeCellSettings.borderSizes;
const borderSizes = {
7: `${_t.textThin}`,
12: `${_t.textMedium}`,
13: `${_t.textThick}`
}
return (
<Page>
<Navbar title={_t.textSize} backLink={_t.textBack} />
<List>
{Object.keys(borderSizes).map(key => {
return (
<ListItem key={key} title={borderSizes[key]} radio checked={+key === borderInfo.width} onChange={() => {
storeCellSettings.changeBorderSize(+key);
props.onBorderStyle(borderStyle, borderInfo);
}}></ListItem>
)
})}
</List>
</Page>
)
}
const PageEditCell = inject("storeCellSettings")(observer(EditCell));
const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell));
const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));
const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell));
const FontsCell = inject("storeCellSettings")(observer(PageFontsCell));
const TextFormatCell = inject("storeCellSettings")(observer(PageTextFormatCell));
const TextOrientationCell = inject("storeCellSettings")(observer(PageTextOrientationCell));
const BorderStyleCell = inject("storeCellSettings")(observer(PageBorderStyleCell));
const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell));
const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));
export {
PageEditCell as EditCell,
TextColorCell,
FillColorCell,
CustomFillColorCell,
CustomTextColorCell
CustomTextColorCell,
FontsCell,
TextFormatCell,
TextOrientationCell,
BorderStyleCell,
BorderColorCell,
CustomBorderColorCell,
BorderSizeCell
};