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

[DE mobile] Add text settings

Browse source
This commit is contained in:
JuliaSvinareva 2020-10-14 14:51:15 +03:00
parent 299b997aa1
commit f181c6c5e0
9 changed files with 716 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/documenteditor/mobile/locale/en.json
View file

@ -16,6 +16,7 @@
},
"Edit": {
"textClose": "Close",
"textBack": "Back",
"textText": "Text",
"textParagraph": "Paragraph",
"textTable": "Table",
@ -26,6 +27,26 @@
"textChart": "Chart",
"textHyperlink": "Hyperlink",
"textSelectObjectToEdit": "Select object to edit",
"textSettings": "Settings"
"textSettings": "Settings",
"textFontColor": "Font Color",
"textHighlightColor": "Highlight Color",
"textAdditionalFormatting": "Additional Formatting",
"textAdditional": "Additional",
"textBullets": "Bullets",
"textNumbers": "Numbers",
"textLineSpacing": "Line Spacing",
"textFonts": "Fonts",
"textAuto": "Auto",
"textPt": "pt",
"textSize": "Size",
"textAuto": "Auto",
"textStrikethrough": "Strikethrough",
"textDoubleStrikethrough": "Double Strikethrough",
"textSuperscript": "Superscript",
"textSubscript": "Subscript",
"textSmallCaps": "Small Caps",
"textAllCaps": "All Caps",
"textLetterSpacing": "Letter Spacing",
"textNone": "None"
}
}

4
apps/documenteditor/mobile/src/components/edit/Edit.jsx
View file

@ -3,7 +3,7 @@ import {observer, inject} from "mobx-react";
import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import EditText from "./EditText";
import EditTextController from "./controller/EditText";
import EditParagraph from "./EditParagraph";
const EmptyEditLayout = () => {
@ -73,7 +73,7 @@ const EditSheet = props => {
editors.push({
caption: t("Edit.textText"),
id: 'edit-text',
component: <EditText />
component: <EditTextController />
})
}
if (settings.indexOf('paragraph') > -1) {

333
apps/documenteditor/mobile/src/components/edit/EditText.jsx
View file

@ -1,96 +1,301 @@
import React, {Component, Fragment} from 'react';
import {
List,
ListItem,
Icon,
Row,
Col,
Button
} from 'framework7-react';
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
export default class EditText extends Component {
constructor(props) {
super(props);
}
render() {
const textFontColor = "Font Color";
const textHighlightColor = "Highlight Color";
const textAdditionalFormatting = "Additional Formatting";
const textBullets = "Bullets";
const textNumbers = "Numbers";
const textLineSpacing = "Line Spacing";
const fontName = 'Arial';
const fontSize = '11pt';
return (
<Fragment>
const PageFonts = props => {
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const size = storeTextSettings.fontSize;
const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray;
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
return {vlData: {
items: fonts,
}}
});
};
return (
<Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')} />
<List>
<ListItem title={fontName} link="#" after={fontSize}></ListItem>
<ListItem title={t('Edit.textSize')}>
<div slot='after-start'>{displaySize}</div>
<div slot='after'>
<Segmented>
<Button outline className='decrement' onClick={() => {props.changeFontSize(size, true)}}> - </Button>
<Button outline className='increment' onClick={() => {props.changeFontSize(size, false)}}> + </Button>
</Segmented>
</div>
</ListItem>
</List>
<BlockTitle>{t('Edit.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.changeFontFamily(item.name)}}
></ListItem>
))}
</ul>
</List>
</Page>
)
};
const PageAdditionalFormatting = props => {
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const storeFocusObjects = props.storeFocusObjects;
const paragraph = storeFocusObjects.paragraphObject;
const isStrikeout = paragraph.get_Strikeout();
const isDStrikeout = paragraph.get_DStrikeout();
const isSuperscript = storeTextSettings.isSuperscript;
const isSubscript = storeTextSettings.isSubscript;
const isSmallCaps = paragraph.get_SmallCaps();
const isAllCaps = paragraph.get_AllCaps();
const letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing());
return(
<Page>
<Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')} />
<List>
<ListItem title={t('Edit.textStrikethrough')} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikeout', !isStrikeout)}}/>
<ListItem title={t('Edit.textDoubleStrikethrough')} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikeout', !isDStrikeout)}}/>
<ListItem title={t('Edit.textSuperscript')} radio checked={isSuperscript} onClick={() => {props.onAdditionalScript('superscript', !isSuperscript)}}/>
<ListItem title={t('Edit.textSubscript')} radio checked={isSubscript} onClick={() => {props.onAdditionalScript('subscript', !isSubscript)}}/>
<ListItem title={t('Edit.textSmallCaps')} radio checked={isSmallCaps} onClick={() => {props.onAdditionalCaps('small', !isSmallCaps)}}/>
<ListItem title={t('Edit.textAllCaps')} radio checked={isAllCaps} onClick={() => {props.onAdditionalCaps('all', !isAllCaps)}}/>
</List>
<List>
<ListItem title={t('Edit.textLetterSpacing')}>
<div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div>
<div slot='after'>
<Segmented>
<Button outline className='decrement' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}> - </Button>
<Button outline className='increment' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}> + </Button>
</Segmented>
</div>
</ListItem>
</List>
</Page>
)
};
import bulletImg1 from '../../../resources/img/bullets/bullet-01.png';
import bulletImg2 from '../../../resources/img/bullets/bullet-02.png';
import bulletImg3 from '../../../resources/img/bullets/bullet-03.png';
import bulletImg4 from '../../../resources/img/bullets/bullet-04.png';
import bulletImg5 from '../../../resources/img/bullets/bullet-05.png';
import bulletImg6 from '../../../resources/img/bullets/bullet-06.png';
import bulletImg7 from '../../../resources/img/bullets/bullet-07.png';
const PageBullets = props => {
const { t } = useTranslation();
const bulletArrays = [
[
{type: -1, thumb: ''},
{type: 1, thumb: bulletImg1},
{type: 2, thumb: bulletImg2},
{type: 3, thumb: bulletImg3}
],
[
{type: 4, thumb: bulletImg4},
{type: 5, thumb: bulletImg5},
{type: 6, thumb: bulletImg6},
{type: 7, thumb: bulletImg7}
]
];
const storeTextSettings = props.storeTextSettings;
const typeBullets = storeTextSettings.typeBullets;
return(
<Page>
<Navbar title={t('Edit.textBullets')} backLink={t('Edit.textBack')} />
{bulletArrays.map((bullets, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
{bullets.map((bullet) => (
<li key={'bullet-' + bullet.type} data-type={bullet.type} className={bullet.type === typeBullets ? 'active' : ''} onClick={() => {props.onBullet(bullet.type)}}>
{bullet.thumb.length < 1 ?
<div className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label>
</div> :
<div className="thumb" style={{height: '70px', width: '70px', backgroundImage: `url("${bullet.thumb}")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center'}}></div>
}
</li>
))}
</ul>
))}
</Page>
)
};
import numberImg1 from '../../../resources/img/numbers/number-01.png';
import numberImg2 from '../../../resources/img/numbers/number-02.png';
import numberImg3 from '../../../resources/img/numbers/number-03.png';
import numberImg4 from '../../../resources/img/numbers/number-04.png';
import numberImg5 from '../../../resources/img/numbers/number-05.png';
import numberImg6 from '../../../resources/img/numbers/number-06.png';
import numberImg7 from '../../../resources/img/numbers/number-07.png';
const PageNumbers = props => {
const { t } = useTranslation();
const numberArrays = [
[
{type: -1, thumb: ''},
{type: 4, thumb: numberImg1},
{type: 5, thumb: numberImg2},
{type: 6, thumb: numberImg3}
],
[
{type: 1, thumb: numberImg4},
{type: 2, thumb: numberImg5},
{type: 3, thumb: numberImg6},
{type: 7, thumb: numberImg7}
]
];
const storeTextSettings = props.storeTextSettings;
const typeNumbers = storeTextSettings.typeNumbers;
return(
<Page>
<Navbar title={t('Edit.textNumbers')} backLink={t('Edit.textBack')} />
{numberArrays.map((numbers, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => (
<li key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''} onClick={() => {props.onNumber(number.type)}}>
{number.thumb.length < 1 ?
<div className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label>
</div> :
<div className="thumb" style={{height: '70px', width: '70px', backgroundImage: `url("${number.thumb}")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center'}}></div>
}
</li>
))}
</ul>
))}
</Page>
)
};
const PageLineSpacing = props => {
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const lineSpacing = storeTextSettings.lineSpacing;
return(
<Page>
<Navbar title={t('Edit.textLineSpacing')} backLink={t('Edit.textBack')} />
<List>
<ListItem radio checked={lineSpacing === 1.0} title={1.0} onClick={() => {props.onLineSpacing(1.0)}}></ListItem>
<ListItem radio checked={lineSpacing === 1.15} title={1.15} onClick={() => {props.onLineSpacing(1.15)}}></ListItem>
<ListItem radio checked={lineSpacing === 1.5} title={1.5} onClick={() => {props.onLineSpacing(1.5)}}></ListItem>
<ListItem radio checked={lineSpacing === 2.0} title={2.0} onClick={() => {props.onLineSpacing(2.0)}}></ListItem>
<ListItem radio checked={lineSpacing === 2.5} title={2.5} onClick={() => {props.onLineSpacing(2.5)}}></ListItem>
<ListItem radio checked={lineSpacing === 3.0} title={3.0} onClick={() => {props.onLineSpacing(3.0)}}></ListItem>
</List>
</Page>
)
};
const EditText = props => {
const { t } = useTranslation();
const storeTextSettings = props.storeTextSettings;
const fontName = storeTextSettings.fontName || t('Edit.textFonts');
const fontSize = storeTextSettings.fontSize;
const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic;
const isUnderline = storeTextSettings.isUnderline;
const isStrikethrough = storeTextSettings.Strikethrough;
const paragraphAlign = storeTextSettings.paragraphAlign;
return (
<Fragment>
<List>
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
changeFontFamily: props.changeFontFamily
}}/>
<ListItem>
<Row>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
<a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
</Row>
</ListItem>
<ListItem title={textFontColor} link="#">
<ListItem title={t("Edit.textFontColor")} link="#">
<Icon slot="media" icon="icon-text-color"></Icon>
<span className="color-preview"></span>
</ListItem>
<ListItem title={textHighlightColor} link="#">
<ListItem title={t("Edit.textHighlightColor")} link="#">
<Icon slot="media" icon="icon-text-selection"></Icon>
</ListItem>
<ListItem title={textAdditionalFormatting} link="#">
<ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
onAdditionalStrikethrough: props.onAdditionalStrikethrough,
onAdditionalCaps: props.onAdditionalCaps,
onAdditionalScript: props.onAdditionalScript,
changeLetterSpacing: props.changeLetterSpacing
}}>
<Icon slot="media" icon="icon-text-additional"></Icon>
</ListItem>
</List>
<List>
<ListItem>
<Row>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>left</a>
<a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>center</a>
<a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>right</a>
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>just</a>
</Row>
</ListItem>
<ListItem>
<Row>
<Col>
<Button>Button</Button>
</Col>
<Col>
<Button>Button</Button>
</Col>
<a className='button' onClick={() => {props.onParagraphMove(true)}}>moveleft</a>
<a className='button' onClick={() => {props.onParagraphMove(false)}}>moveright</a>
</Row>
</ListItem>
<ListItem title={textBullets} link="#">
<ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{
onBullet: props.onBullet
}}>
<Icon slot="media" icon="icon-bullets"></Icon>
</ListItem>
<ListItem title={textNumbers} link="#">
<ListItem title={t("Edit.textNumbers")} link='/edit-text-numbers/' routeProps={{
onNumber: props.onNumber
}}>
<Icon slot="media" icon="icon-numbers"></Icon>
</ListItem>
<ListItem title={textLineSpacing} link="#">
<ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{
onLineSpacing: props.onLineSpacing
}}>
<Icon slot="media" icon="icon-linespacing"></Icon>
</ListItem>
</List>
</Fragment>
)
}
};
};
const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
export {EditTextContainer as EditText,
PageFontsContainer as PageFonts,
PageAddFormattingContainer as PageAdditionalFormatting,
PageBulletsContainer as PageBullets,
PageNumbersContainer as PageNumbers,
PageLineSpacingContainer as PageLineSpacing};

195
apps/documenteditor/mobile/src/components/edit/controller/EditText.jsx Normal file
View file

@ -0,0 +1,195 @@
import React, {Component} from 'react';
import { EditText } from '../EditText'
class EditTextController extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const api = Common.EditorApi.get();
api && api.UpdateInterfaceState();
}
changeFontSize(curSize, isDecrement) {
const api = Common.EditorApi.get();
if (api) {
let size = curSize;
if (isDecrement) {
typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size);
} else {
typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(100, ++size);
}
if (typeof size !== 'undefined') {
api.put_TextPrFontSize(size);
}
}
}
changeFontFamily(name) {
const api = Common.EditorApi.get();
if (api && name) {
api.put_TextPrFontName(name);
}
}
toggleBold(value) {
const api = Common.EditorApi.get();
if (api) {
api.put_TextPrBold(value);
}
}
toggleItalic(value) {
const api = Common.EditorApi.get();
if (api) {
api.put_TextPrItalic(value);
}
}
toggleUnderline(value) {
const api = Common.EditorApi.get();
if (api) {
api.put_TextPrUnderline(value);
}
}
toggleStrikethrough(value) {
const api = Common.EditorApi.get();
if (api) {
api.put_TextPrStrikeout(value);
}
}
// Additional
onAdditionalStrikethrough(type, value) {
const api = Common.EditorApi.get();
if (api) {
if ('strikeout' === type) {
api.put_TextPrStrikeout(value);
} else {
api.put_TextPrDStrikeout(value);
}
}
}
onAdditionalCaps(type, value) {
const api = Common.EditorApi.get();
if (api) {
const paragraphProps = new Asc.asc_CParagraphProperty();
if ('small' === type) {
paragraphProps.put_AllCaps(false);
paragraphProps.put_SmallCaps(value);
} else {
paragraphProps.put_AllCaps(value);
paragraphProps.put_SmallCaps(false);
}
api.paraApply(paragraphProps);
}
}
onAdditionalScript(type, value) {
const api = Common.EditorApi.get();
if (api) {
if ('superscript' === type) {
api.put_TextPrBaseline(value ? 1 : 0);
} else {
api.put_TextPrBaseline(value ? 2 : 0);
}
}
}
changeLetterSpacing(curSpacing, isDecrement) {
const api = Common.EditorApi.get();
if (api) {
let spacing = curSpacing;
if (isDecrement) {
spacing = Math.max(-100, --spacing);
} else {
spacing = Math.min(100, ++spacing);
}
const properties = new Asc.asc_CParagraphProperty();
properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing));
api.paraApply(properties);
}
}
onParagraphAlign(type) {
const api = Common.EditorApi.get();
if (api) {
let value;
switch (type) {
case 'just':
value = 3;
break;
case 'right':
value = 0;
break;
case 'center':
value = 2;
break;
default:
value = 1;
break;
}
api.put_PrAlign(value);
}
}
onParagraphMove(isLeft) {
const api = Common.EditorApi.get();
if (api) {
if (isLeft) {
api.DecreaseIndent();
} else {
api.IncreaseIndent();
}
}
}
onBullet(type) {
const api = Common.EditorApi.get();
if (api) {
api.put_ListType(0, parseInt(type));
}
}
onNumber(type) {
const api = Common.EditorApi.get();
if (api) {
api.put_ListType(1, parseInt(type));
}
}
onLineSpacing(value) {
const api = Common.EditorApi.get();
if (api) {
const LINERULE_AUTO = 1;
api.put_PrLineSpacing(LINERULE_AUTO, value);
}
}
render() {
return (
<EditText changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
toggleStrikethrough={this.toggleStrikethrough}
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
onAdditionalCaps={this.onAdditionalCaps}
onAdditionalScript={this.onAdditionalScript}
changeLetterSpacing={this.changeLetterSpacing}
onParagraphAlign={this.onParagraphAlign}
onParagraphMove={this.onParagraphMove}
onBullet={this.onBullet}
onNumber={this.onNumber}
onLineSpacing={this.onLineSpacing}
/>
)
}
}
export default EditTextController;

54
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -3,7 +3,7 @@ import React, {Component} from 'react'
import {inject} from "mobx-react";
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storeDocumentSettings", "storeFocusObjects")
@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings")
class MainController extends Component {
constructor(props) {
super(props)
@ -166,6 +166,58 @@ class MainController extends Component {
this.api.asc_registerCallback('asc_onFocusObject', objects => {
storeFocusObjects.resetFocusObjects(objects);
});
const storeTextSettings = this.props.storeTextSettings;
this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
storeTextSettings.initEditorFonts(fonts, select);
});
this.api.asc_registerCallback('asc_onFontFamily', (font) => {
storeTextSettings.resetFontName(font);
});
this.api.asc_registerCallback('asc_onFontSize', (size) => {
storeTextSettings.resetFontSize(size);
});
this.api.asc_registerCallback('asc_onBold', (isBold) => {
storeTextSettings.resetIsBold(isBold);
});
this.api.asc_registerCallback('asc_onItalic', (isItalic) => {
storeTextSettings.resetIsItalic(isItalic);
});
this.api.asc_registerCallback('asc_onUnderline', (isUnderline) => {
storeTextSettings.resetIsUnderline(isUnderline);
});
this.api.asc_registerCallback('asc_onStrikeout', (isStrikeout) => {
storeTextSettings.resetIsStrikeout(isStrikeout);
});
this.api.asc_registerCallback('asc_onVerticalAlign', (typeBaseline) => {
storeTextSettings.resetTypeBaseline(typeBaseline);
});
this.api.asc_registerCallback('asc_onListType', (data) => {
let type = data.get_ListType();
let subtype = data.get_ListSubType();
storeTextSettings.resetListType(type);
switch (type) {
case 0:
storeTextSettings.resetBullets(subtype);
break;
case 1:
storeTextSettings.resetNumbers(subtype);
break;
}
});
this.api.asc_registerCallback('asc_onPrAlign', (align) => {
storeTextSettings.resetParagraphAlign(align);
});
this.api.asc_registerCallback('asc_onTextColor', (color) => {
storeTextSettings.resetTextColor(color);
});
this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
storeTextSettings.resetLineSpacing(vc);
});
this.api.asc_registerCallback('asc_onTextShd', (shd) => {
let color = shd.get_Color();
storeTextSettings.resetBackgroundColor(color);
});
}
render() {

24
apps/documenteditor/mobile/src/js/routes.js
View file

@ -12,10 +12,34 @@ import RequestAndLoad from '../pages/request-and-load.jsx';
import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
// Edit text
import { PageFonts, PageAdditionalFormatting, PageBullets, PageNumbers, PageLineSpacing } from "../components/edit/EditText";
var routes = [
{
path: '/',
component: HomePage,
},
//Edit text
{
path: '/edit-text-fonts/',
component: PageFonts,
},
{
path: '/edit-text-add-formatting/',
component: PageAdditionalFormatting,
},
{
path: '/edit-text-bullets/',
component: PageBullets,
},
{
path: '/edit-text-numbers/',
component: PageNumbers,
},
{
path: '/edit-text-line-spacing/',
component: PageLineSpacing,
},
{
path: '/document-settings/',

14
apps/documenteditor/mobile/src/store/focusObjects.js
View file

@ -43,4 +43,18 @@ export class storeFocusObjects {
}
return this._headerType;
}
@computed get paragraphObject() {
let paragraphs = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
paragraphs.push(object);
}
}
if (paragraphs.length > 0) {
let object = paragraphs[paragraphs.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
}

8
apps/documenteditor/mobile/src/store/mainStore.js
View file

@ -1,11 +1,13 @@
import {storeDocumentSettings} from './documentSettings'
import {storeDocumentSettings} from './documentSettings';
import {storeFocusObjects} from "./focusObjects";
import {storeUsers} from '../../../../common/mobile/lib/store/users'
import {storeUsers} from '../../../../common/mobile/lib/store/users';
import {storeTextSettings} from "./textSettings";
export const stores = {
storeFocusObjects: new storeFocusObjects(),
storeDocumentSettings: new storeDocumentSettings(),
users: new storeUsers()
users: new storeUsers(),
storeTextSettings: new storeTextSettings()
};

132
apps/documenteditor/mobile/src/store/textSettings.js Normal file
View file

@ -0,0 +1,132 @@
import {action, observable, computed} from 'mobx';
export class storeTextSettings {
@observable fontsArray = [];
@observable fontName = '';
@observable fontSize = undefined;
@observable isBold = false;
@observable isItalic = false;
@observable isUnderline = false;
@observable isStrikethrough = false;
@observable typeBaseline = undefined;
@observable listType = undefined;
@observable typeBullets = undefined;
@observable typeNumbers = undefined;
@observable paragraphAlign = undefined;
@observable textColor = undefined;
@observable lineSpacing = undefined;
@observable backgroundColor = undefined;
@action initEditorFonts (fonts, select) {
let array = [];
for (let font of fonts) {
let fontId = font.asc_getFontId();
array.push({
id : fontId,
name : font.asc_getFontName(),
//displayValue: font.asc_getFontName(),
imgidx : font.asc_getFontThumbnail(),
type : font.asc_getFontType()
});
}
this.fontsArray = array;
}
@action resetFontName (font) {
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
this.fontName = name;
}
@action resetFontSize (size) {
this.fontSize = size;
}
@action resetIsBold (isBold) {
this.isBold = isBold;
}
@action resetIsItalic (isItalic) {
this.isItalic = isItalic;
}
@action resetIsUnderline (isUnderline) {
this.isUnderline = isUnderline;
}
@action resetIsStrikeout (isStrikethrough) {
this.isStrikethrough = isStrikethrough;
}
// vertical align
@action resetTypeBaseline (typeBaseline) {
this.typeBaseline = typeBaseline;
}
@computed get isSuperscript() {
return (this.typeBaseline === 1);
}
@computed get isSubscript() {
return (this.typeBaseline === 2);
}
// bullets
@action resetListType (type) {
this.listType = type;
}
@action resetBullets (type) {
this.typeBullets = type;
}
@action resetNumbers (type) {
this.typeNumbers = type;
}
@action resetParagraphAlign (align) {
let value;
switch (align) {
case 0:
value = 'right';
break;
case 1:
value = 'left';
break;
case 2:
value = 'center';
break;
case 3:
value = 'just';
break;
}
this.paragraphAlign = value;
}
@action resetTextColor (color) {
let value;
if (color) {
if (color.get_auto()) {
value = '000000';
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
}
this.textColor = value;
}
@action resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;
}
@action resetBackgroundColor (color) {
let value;
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
this.backgroundColor = value;
}
}