[PE mobile] Maked Text Settings
This commit is contained in:
SergeyEzhin
parent
79da854961
commit
4b0b0478ad
|
|
@ -387,3 +387,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bullets, .numbers {
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
li.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,7 +153,8 @@
|
|||
"textLetterSpacing": "Letter Spacing",
|
||||
"textDistanceFromText": "Distance From Text",
|
||||
"textBefore": "Before",
|
||||
"textAfter": "After"
|
||||
"textAfter": "After",
|
||||
"textFontColors": "Font Colors"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -257,9 +257,11 @@ class MainController extends Component {
|
|||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onListType', (data) => {
|
||||
let type = data.get_ListType();
|
||||
let type = data.get_ListType();
|
||||
let subtype = data.get_ListSubType();
|
||||
|
||||
storeTextSettings.resetListType(type);
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
storeTextSettings.resetBullets(subtype);
|
||||
|
|
@ -267,6 +269,9 @@ class MainController extends Component {
|
|||
case 1:
|
||||
storeTextSettings.resetNumbers(subtype);
|
||||
break;
|
||||
default:
|
||||
storeTextSettings.resetBullets(-1);
|
||||
storeTextSettings.resetNumbers(-1);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -81,6 +81,149 @@ class EditTextController extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
onDistanceBefore(distance, isDecrement) {
|
||||
const api = Common.EditorApi.get();
|
||||
let step;
|
||||
let newDistance;
|
||||
|
||||
if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
|
||||
step = 1;
|
||||
} else {
|
||||
step = 0.01;
|
||||
}
|
||||
|
||||
const maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
|
||||
|
||||
if(isDecrement) {
|
||||
newDistance = Math.max(-1, distance - step);
|
||||
} else {
|
||||
newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
|
||||
}
|
||||
|
||||
api.put_LineSpacingBeforeAfter(0, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
|
||||
};
|
||||
|
||||
onDistanceAfter(distance, isDecrement) {
|
||||
const api = Common.EditorApi.get();
|
||||
let step;
|
||||
let newDistance;
|
||||
|
||||
if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
|
||||
step = 1;
|
||||
} else {
|
||||
step = 0.01;
|
||||
}
|
||||
|
||||
const maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
|
||||
|
||||
if(isDecrement) {
|
||||
newDistance = Math.max(-1, distance - step);
|
||||
} else {
|
||||
newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
|
||||
}
|
||||
|
||||
api.put_LineSpacingBeforeAfter(1, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
|
||||
};
|
||||
|
||||
changeFontSize(curSize, isDecrement) {
|
||||
const api = Common.EditorApi.get();
|
||||
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 (name) {
|
||||
api.put_TextPrFontName(name);
|
||||
}
|
||||
}
|
||||
|
||||
onTextColor(color) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
|
||||
}
|
||||
|
||||
// Additional
|
||||
|
||||
onAdditionalStrikethrough(type, value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const paragraphProps = new Asc.asc_CParagraphProperty();
|
||||
|
||||
if ('strikethrough' === type) {
|
||||
paragraphProps.put_DStrikeout(false);
|
||||
paragraphProps.put_Strikeout(value);
|
||||
} else {
|
||||
paragraphProps.put_DStrikeout(value);
|
||||
paragraphProps.put_Strikeout(false);
|
||||
}
|
||||
|
||||
api.paraApply(paragraphProps);
|
||||
}
|
||||
|
||||
onAdditionalCaps(type, value) {
|
||||
const api = Common.EditorApi.get();
|
||||
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 ('superscript' === type) {
|
||||
api.put_TextPrBaseline(value ? 1 : 0);
|
||||
} else {
|
||||
api.put_TextPrBaseline(value ? 2 : 0);
|
||||
}
|
||||
}
|
||||
|
||||
changeLetterSpacing(curSpacing, isDecrement) {
|
||||
const api = Common.EditorApi.get();
|
||||
let spacing = curSpacing;
|
||||
|
||||
if (isDecrement) {
|
||||
spacing = (spacing === null || spacing === undefined) ? 0 : Math.max(-100, --spacing);
|
||||
} else {
|
||||
spacing = (spacing === null || spacing === undefined) ? 0 : Math.min(100, ++spacing);
|
||||
}
|
||||
|
||||
const properties = new Asc.asc_CParagraphProperty();
|
||||
properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing));
|
||||
api.paraApply(properties);
|
||||
}
|
||||
|
||||
onBullet(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_ListType(0, parseInt(type));
|
||||
}
|
||||
|
||||
onNumber(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_ListType(1, parseInt(type));
|
||||
}
|
||||
|
||||
onLineSpacing(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const LINERULE_AUTO = 1;
|
||||
api.put_PrLineSpacing(LINERULE_AUTO, value);
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditText
|
||||
|
|
@ -91,6 +234,18 @@ class EditTextController extends Component {
|
|||
onParagraphAlign={this.onParagraphAlign}
|
||||
onParagraphValign={this.onParagraphValign}
|
||||
onParagraphMove={this.onParagraphMove}
|
||||
onDistanceBefore={this.onDistanceBefore}
|
||||
onDistanceAfter={this.onDistanceAfter}
|
||||
changeFontSize={this.changeFontSize}
|
||||
changeFontFamily={this.changeFontFamily}
|
||||
onTextColor={this.onTextColor}
|
||||
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
|
||||
onAdditionalCaps={this.onAdditionalCaps}
|
||||
onAdditionalScript={this.onAdditionalScript}
|
||||
changeLetterSpacing={this.changeLetterSpacing}
|
||||
onBullet={this.onBullet}
|
||||
onNumber={this.onNumber}
|
||||
onLineSpacing={this.onLineSpacing}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import {action, observable} from 'mobx';
|
|||
|
||||
export class storeApplicationSettings {
|
||||
|
||||
@observable unitMeasurement = 0;
|
||||
@observable unitMeasurement = 1;
|
||||
@observable isSpellChecking = true;
|
||||
@observable macrosMode = 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,9 +21,6 @@ export class storeTextSettings {
|
|||
@observable customTextColors = [];
|
||||
@observable lineSpacing = undefined;
|
||||
|
||||
// @observable backgroundColor = undefined;
|
||||
|
||||
|
||||
@action initEditorFonts (fonts, select) {
|
||||
let array = [];
|
||||
for (let font of fonts) {
|
||||
|
|
@ -153,16 +150,4 @@ export class storeTextSettings {
|
|||
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;
|
||||
// }
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
import EditSlideController from "../../controller/edit/EditSlide";
|
||||
import EditTextController from "../../controller/edit/EditText";
|
||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||
|
||||
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
|
||||
//import EditShapeController from "../../controller/edit/EditShape";
|
||||
//import EditImageController from "../../controller/edit/EditImage";
|
||||
//import EditTableController from "../../controller/edit/EditTable";
|
||||
|
|
@ -43,6 +43,34 @@ const routes = [
|
|||
{
|
||||
path: '/edit-custom-color/',
|
||||
component: CustomFillColor
|
||||
},
|
||||
{
|
||||
path: '/edit-text-fonts/',
|
||||
component: PageTextFonts
|
||||
},
|
||||
{
|
||||
path: '/edit-text-font-color/',
|
||||
component: PageTextFontColor
|
||||
},
|
||||
{
|
||||
path: '/edit-text-custom-font-color/',
|
||||
component: PageTextCustomFontColor
|
||||
},
|
||||
{
|
||||
path: '/edit-text-add-formatting/',
|
||||
component: PageTextAddFormatting
|
||||
},
|
||||
{
|
||||
path: '/edit-text-bullets/',
|
||||
component: PageTextBullets
|
||||
},
|
||||
{
|
||||
path: '/edit-text-numbers/',
|
||||
component: PageTextNumbers
|
||||
},
|
||||
{
|
||||
path: '/edit-text-line-spacing/',
|
||||
component: PageTextLineSpacing
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -24,23 +24,17 @@ const EditText = props => {
|
|||
const paragraphValign = storeTextSettings.paragraphValign;
|
||||
const canIncreaseIndent = storeTextSettings.canIncreaseIndent;
|
||||
const canDecreaseIndent = storeTextSettings.canDecreaseIndent;
|
||||
|
||||
const paragraphObj = storeFocusObjects.paragraphObject;
|
||||
let spaceBefore;
|
||||
let spaceAfter;
|
||||
|
||||
// if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
|
||||
// paragraphObj.get_Ind().put_FirstLine(0);
|
||||
// }
|
||||
if(paragraphObj) {
|
||||
spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
|
||||
spaceAfter = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
|
||||
}
|
||||
|
||||
// const firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
|
||||
|
||||
const spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
|
||||
const spaceAfter = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
|
||||
|
||||
const spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
|
||||
const spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
|
||||
|
||||
const displayBefore = spaceBefore < 0 ? _t.textAuto : spaceBeforeFix + ' ' + metricText;
|
||||
const displayAfter = spaceAfter < 0 ? _t.textAuto : spaceAfterFix + ' ' + metricText;
|
||||
const displayBefore = spaceBefore && spaceBefore < 0 ? _t.textAuto : spaceBefore + ' ' + metricText;
|
||||
const displayAfter = spaceAfter && spaceAfter < 0 ? _t.textAuto : spaceAfter + ' ' + metricText;
|
||||
|
||||
const fontColorPreview = fontColor !== 'auto' ?
|
||||
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
|
||||
|
|
@ -62,7 +56,6 @@ const EditText = props => {
|
|||
</Row>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textFontColor} link="/edit-text-font-color/" routeProps={{
|
||||
onTextColorAuto: props.onTextColorAuto,
|
||||
onTextColor: props.onTextColor
|
||||
}}>
|
||||
{!isAndroid ?
|
||||
|
|
@ -79,99 +72,399 @@ const EditText = props => {
|
|||
{!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
|
||||
<Icon slot="media" icon="icon-text-align-left"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
|
||||
<Icon slot="media" icon="icon-text-align-center"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
|
||||
<Icon slot="media" icon="icon-text-align-right"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
|
||||
<Icon slot="media" icon="icon-text-align-just"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-top"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphValign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-middle"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-bottom"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
|
||||
<Icon slot="media" icon="icon-de-indent"></Icon>
|
||||
</a>
|
||||
<a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
|
||||
<Icon slot="media" icon="icon-in-indent"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBullets} link='/edit-text-bullets/' routeProps={{
|
||||
onBullet: props.onBullet
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
|
||||
</ListItem>
|
||||
<ListItem title={_t.textNumbers} link='/edit-text-numbers/' routeProps={{
|
||||
onNumber: props.onNumber
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
|
||||
onLineSpacing: props.onLineSpacing
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
|
||||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textDistanceFromText}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title={_t.textBefore}>
|
||||
{!isAndroid && <div slot='after-start'>{displayBefore}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{displayBefore}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAfter}>
|
||||
{!isAndroid && <div slot='after-start'>{displayAfter}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{displayAfter}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
{paragraphObj ? (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
|
||||
<Icon slot="media" icon="icon-text-align-left"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
|
||||
<Icon slot="media" icon="icon-text-align-center"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
|
||||
<Icon slot="media" icon="icon-text-align-right"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
|
||||
<Icon slot="media" icon="icon-text-align-just"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-top"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphValign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-middle"></Icon>
|
||||
</a>
|
||||
<a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
|
||||
<Icon slot="media" icon="icon-text-valign-bottom"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
|
||||
<Icon slot="media" icon="icon-de-indent"></Icon>
|
||||
</a>
|
||||
<a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
|
||||
<Icon slot="media" icon="icon-in-indent"></Icon>
|
||||
</a>
|
||||
</Row>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBullets} link='/edit-text-bullets/' routeProps={{
|
||||
onBullet: props.onBullet
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
|
||||
</ListItem>
|
||||
<ListItem title={_t.textNumbers} link='/edit-text-numbers/' routeProps={{
|
||||
onNumber: props.onNumber
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
|
||||
onLineSpacing: props.onLineSpacing
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
|
||||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textDistanceFromText}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title={_t.textBefore}>
|
||||
{!isAndroid && <div slot='after-start'>{displayBefore}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{displayBefore}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAfter}>
|
||||
{!isAndroid && <div slot='after-start'>{displayAfter}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{displayAfter}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const PageFonts = props => {
|
||||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const size = storeTextSettings.fontSize;
|
||||
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.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.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.changeFontSize(size, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{displaySize}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.changeFontSize(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.changeFontFamily(item.name)}}
|
||||
></ListItem>
|
||||
))}
|
||||
</ul>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const PageFontColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const textColor = props.storeTextSettings.textColor;
|
||||
const customColors = props.storePalette.customColors;
|
||||
|
||||
const changeColor = (color, effectId) => {
|
||||
if (color !== 'empty') {
|
||||
if (effectId !== undefined ) {
|
||||
props.onTextColor({color: color, effectId: effectId});
|
||||
} else {
|
||||
props.onTextColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-text-custom-font-color/');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textFontColors} backLink={_t.textBack} />
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
|
||||
onTextColor: props.onTextColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const PageCustomFontColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const store = props.storeTextSettings;
|
||||
let textColor = store.textColor;
|
||||
|
||||
if (typeof textColor === 'object') {
|
||||
textColor = textColor.color;
|
||||
}
|
||||
|
||||
const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
|
||||
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onTextColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageAdditionalFormatting = props => {
|
||||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const paragraphObj = storeFocusObjects.paragraphObject;
|
||||
const isSuperscript = storeTextSettings.isSuperscript;
|
||||
const isSubscript = storeTextSettings.isSubscript;
|
||||
let isStrikeout = false;
|
||||
let isDStrikeout = false;
|
||||
let isSmallCaps = false;
|
||||
let isAllCaps = false;
|
||||
let letterSpacing = 0;
|
||||
|
||||
if(paragraphObj) {
|
||||
isStrikeout = paragraphObj.get_Strikeout();
|
||||
isDStrikeout = paragraphObj.get_DStrikeout();
|
||||
isSmallCaps = paragraphObj.get_SmallCaps();
|
||||
isAllCaps = paragraphObj.get_AllCaps();
|
||||
letterSpacing = (paragraphObj.get_TextSpacing() === null || paragraphObj.get_TextSpacing() === undefined) ? paragraphObj.get_TextSpacing() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_TextSpacing());
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textAdditional} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/>
|
||||
<ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/>
|
||||
<ListItem title={_t.textSuperscript} radio checked={isSuperscript} onClick={() => {props.onAdditionalScript('superscript', !isSuperscript)}}/>
|
||||
<ListItem title={_t.textSubscript} radio checked={isSubscript} onClick={() => {props.onAdditionalScript('subscript', !isSubscript)}}/>
|
||||
<ListItem title={_t.textSmallCaps} radio checked={isSmallCaps} onClick={() => {props.onAdditionalCaps('small', !isSmallCaps)}}/>
|
||||
<ListItem title={_t.textAllCaps} radio checked={isAllCaps} onClick={() => {props.onAdditionalCaps('all', !isAllCaps)}}/>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textLetterSpacing}>
|
||||
{!isAndroid && <div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageBullets = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const bulletArrays = [
|
||||
[
|
||||
{type: -1, thumb: ''},
|
||||
{type: 1, thumb: 'bullet-01.png'},
|
||||
{type: 2, thumb: 'bullet-02.png'},
|
||||
{type: 3, thumb: 'bullet-03.png'}
|
||||
],
|
||||
[
|
||||
{type: 4, thumb: 'bullet-04.png'},
|
||||
{type: 5, thumb: 'bullet-05.png'},
|
||||
{type: 6, thumb: 'bullet-06.png'},
|
||||
{type: 7, thumb: 'bullet-07.png'}
|
||||
]
|
||||
];
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeBullets = storeTextSettings.typeBullets;
|
||||
|
||||
return (
|
||||
<Page className='bullets'>
|
||||
<Navbar title={_t.textBullets} backLink={_t.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.textNone}</label>
|
||||
</div> :
|
||||
<div className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></div>
|
||||
}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageNumbers = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const numberArrays = [
|
||||
[
|
||||
{type: -1, thumb: ''},
|
||||
{type: 4, thumb: 'number-01.png'},
|
||||
{type: 5, thumb: 'number-02.png'},
|
||||
{type: 6, thumb: 'number-03.png'}
|
||||
],
|
||||
[
|
||||
{type: 1, thumb: 'number-04.png'},
|
||||
{type: 2, thumb: 'number-05.png'},
|
||||
{type: 3, thumb: 'number-06.png'},
|
||||
{type: 7, thumb: 'number-07.png'}
|
||||
]
|
||||
];
|
||||
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeNumbers = storeTextSettings.typeNumbers;
|
||||
|
||||
return (
|
||||
<Page className='numbers'>
|
||||
<Navbar title={_t.textNumbers} backLink={_t.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.textNone}</label>
|
||||
</div> :
|
||||
<div className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></div>
|
||||
}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageLineSpacing = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const lineSpacing = storeTextSettings.lineSpacing;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLineSpacing} backLink={_t.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 EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
|
||||
const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
|
||||
const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
|
||||
const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
|
||||
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
|
||||
const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
|
||||
const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
|
||||
const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
|
||||
|
||||
export {
|
||||
EditTextContainer as EditText
|
||||
EditTextContainer as EditText,
|
||||
PageTextFonts,
|
||||
PageTextFontColor,
|
||||
PageTextCustomFontColor,
|
||||
PageTextAddFormatting,
|
||||
PageTextBullets,
|
||||
PageTextNumbers,
|
||||
PageTextLineSpacing
|
||||
};
|
||||
Loading…
Reference in a new issue