Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
47f7ac9a83
|
|
@ -299,6 +299,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-fill {
|
||||
color: @themeColor;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.button-red {
|
||||
color: @red;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.buttons-list {
|
||||
li {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
height: 43px;
|
||||
min-height: 43px;
|
||||
font-size: 17px;
|
||||
text-transform: initial;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-red .list-button {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
.device-android {
|
||||
@tabLinkColor: rgba(255,255,255,.7);
|
||||
@red: #f44336;
|
||||
@white: #fff;
|
||||
--f7-navbar-shadow-image: none;
|
||||
--f7-radio-active-color: @themeColor;
|
||||
--f7-toggle-active-color: @themeColor;
|
||||
|
|
@ -35,29 +36,24 @@
|
|||
}
|
||||
.button {
|
||||
--f7-button-text-color: @themeColor;
|
||||
border: 1px solid @themeColor;
|
||||
color: @themeColor;
|
||||
text-align: center;
|
||||
display: block;
|
||||
// border-radius: 2px;
|
||||
line-height: 27px;
|
||||
border-radius: 5px;
|
||||
// line-height: 36px;
|
||||
border-radius: 2px;
|
||||
line-height: 36px;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
background: 0 0;
|
||||
margin: 0;
|
||||
// height: 36px;
|
||||
height: 29px;
|
||||
height: 36px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
// min-width: 64px;
|
||||
// padding: 0 8px;
|
||||
padding: 0 10px;
|
||||
min-width: 64px;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
|
|
@ -66,6 +62,33 @@
|
|||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.button-fill {
|
||||
color: @white;
|
||||
background-color: @themeColor;
|
||||
}
|
||||
|
||||
.button-raised {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
|
||||
}
|
||||
|
||||
.button-red {
|
||||
color: @white;
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
.buttons-list {
|
||||
li {
|
||||
margin: 20px 16px;
|
||||
color: @white;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-presets {
|
||||
.button {
|
||||
min-width: 0;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@black: #000000;
|
||||
@gray: #c4c4c4;
|
||||
@green: #4cd964;
|
||||
@brightred: #f00;
|
||||
@red: #f00;
|
||||
@background-normal: @white;
|
||||
@autoColor: @black;
|
||||
|
||||
|
|
@ -23,6 +23,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.disabled, [disabled] {
|
||||
opacity: .55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shapes {
|
||||
li {
|
||||
width: 70px;
|
||||
|
|
@ -256,25 +261,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.apply-all, .duplicate-slide, .delete-slide {
|
||||
border: 0;
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.item-inner {
|
||||
justify-content: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
.item-link .item-inner::before {
|
||||
.buttons-list {
|
||||
ul {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.apply-all, .duplicate-slide {
|
||||
color: @themeColor;
|
||||
}
|
||||
.delete-slide {
|
||||
color: @brightred;
|
||||
li {
|
||||
border: 0;
|
||||
font-weight: normal;
|
||||
.item-link {
|
||||
height: 100%;
|
||||
.item-content {
|
||||
min-height: initial;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.item-inner {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
min-height: initial;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -130,9 +130,51 @@
|
|||
"textSec": "s",
|
||||
"textAddCustomColor": "Add Custom Color",
|
||||
"textFill": "Fill",
|
||||
"textBorder": "Border",
|
||||
"textEffects": "Effects",
|
||||
"textCustomColor": "Custom Color",
|
||||
"textDuplicateSlide": "Duplicate Slide",
|
||||
"textDeleteSlide": "Delete Slide"
|
||||
"textDeleteSlide": "Delete Slide",
|
||||
"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",
|
||||
"textStrikethrough": "Strikethrough",
|
||||
"textDoubleStrikethrough": "Double Strikethrough",
|
||||
"textSuperscript": "Superscript",
|
||||
"textSubscript": "Subscript",
|
||||
"textSmallCaps": "Small Caps",
|
||||
"textAllCaps": "All Caps",
|
||||
"textLetterSpacing": "Letter Spacing",
|
||||
"textDistanceFromText": "Distance From Text",
|
||||
"textBefore": "Before",
|
||||
"textAfter": "After",
|
||||
"textFontColors": "Font Colors",
|
||||
"textReplace": "Replace",
|
||||
"textReorder": "Reorder",
|
||||
"textAlign": "Align",
|
||||
"textRemoveShape": "Remove Shape",
|
||||
"textColor": "Color",
|
||||
"textOpacity": "Opacity",
|
||||
"textBringToForeground": "Bring to Foreground",
|
||||
"textSendToBackground": "Send to Background",
|
||||
"textMoveForward": "Move Forward",
|
||||
"textMoveBackward": "Move Backward",
|
||||
"textAlignLeft": "Align Left",
|
||||
"textAlignCenter": "Align Center",
|
||||
"textAlignRight": "Align Right",
|
||||
"textAlignTop": "Align Top",
|
||||
"textAlignMiddle": "Align Middle",
|
||||
"textAlignBottom": "Align Bottom",
|
||||
"textDistributeHorizontally": "Distribute Horizontally",
|
||||
"textDistributeVertically": "Distribute Vertically"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { f7 } from "framework7-react";
|
|||
import { withTranslation } from 'react-i18next';
|
||||
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||
|
||||
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings")
|
||||
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings")
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -220,6 +220,84 @@ class MainController extends Component {
|
|||
Common.Utils.ThemeColor.setColors(colors, standart_colors);
|
||||
});
|
||||
|
||||
// Text settings
|
||||
|
||||
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;
|
||||
default:
|
||||
storeTextSettings.resetBullets(-1);
|
||||
storeTextSettings.resetNumbers(-1);
|
||||
}
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onPrAlign', (align) => {
|
||||
storeTextSettings.resetParagraphAlign(align);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onVerticalTextAlign', valign => {
|
||||
storeTextSettings.resetParagraphValign(valign);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_canIncreaseIndent', value => {
|
||||
storeTextSettings.resetIncreaseIndent(value);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_canDecreaseIndent', value => {
|
||||
storeTextSettings.resetDecreaseIndent(value);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onTextColor', (color) => {
|
||||
storeTextSettings.resetTextColor(color);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
|
||||
storeTextSettings.resetLineSpacing(vc);
|
||||
});
|
||||
}
|
||||
|
||||
_onDocumentContentReady() {
|
||||
|
|
|
|||
182
apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx
Normal file
182
apps/presentationeditor/mobile/src/controller/edit/EditShape.jsx
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
import { EditShape } from '../../view/edit/EditShape';
|
||||
|
||||
class EditShapeController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.onRemoveShape = this.onRemoveShape.bind(this);
|
||||
this.onBorderSize = this.onBorderSize.bind(this);
|
||||
this.onBorderColor = this.onBorderColor.bind(this);
|
||||
|
||||
this.props.storeShapeSettings.setFillColor(undefined);
|
||||
this.props.storeShapeSettings.setBorderColor(undefined);
|
||||
}
|
||||
|
||||
onReplace(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.ChangeShapeType(type);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if (Device.phone) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
}
|
||||
};
|
||||
|
||||
onRemoveShape() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_Remove();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onFillColor(color) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let shape = new Asc.asc_CShapeProperty(),
|
||||
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 _shapeObject = this.props.storeFocusObjects.shapeObject;
|
||||
|
||||
if (_shapeObject && _shapeObject.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
||||
let shape = new Asc.asc_CShapeProperty(),
|
||||
stroke = new Asc.asc_CStroke();
|
||||
|
||||
if (_shapeObject.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(_shapeObject.get_stroke().get_width());
|
||||
stroke.asc_putPrstDash(_shapeObject.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.storeShapeSettings.borderColorView;
|
||||
|
||||
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.storeShapeSettings.initBorderColorView(this.props.storeFocusObjects.shapeObject);
|
||||
}
|
||||
|
||||
onOpacity(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let fill = new Asc.asc_CShapeFill(),
|
||||
shape = new Asc.asc_CShapeProperty();
|
||||
|
||||
fill.put_transparent(parseInt(value * 2.55));
|
||||
shape.put_fill(fill);
|
||||
api.ShapeApply(shape);
|
||||
}
|
||||
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditShape
|
||||
onReplace={this.onReplace}
|
||||
onReorder={this.onReorder}
|
||||
onAlign={this.onAlign}
|
||||
onRemoveShape={this.onRemoveShape}
|
||||
onFillColor={this.onFillColor}
|
||||
onBorderColor={this.onBorderColor}
|
||||
onBorderSize={this.onBorderSize}
|
||||
onOpacity={this.onOpacity}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));
|
||||
|
|
@ -9,9 +9,243 @@ class EditTextController extends Component {
|
|||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
toggleBold(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_TextPrBold(value);
|
||||
};
|
||||
|
||||
toggleItalic(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_TextPrItalic(value);
|
||||
};
|
||||
|
||||
toggleUnderline(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_TextPrUnderline(value);
|
||||
};
|
||||
|
||||
toggleStrikethrough(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.put_TextPrStrikeout(value);
|
||||
};
|
||||
|
||||
onParagraphAlign(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
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);
|
||||
};
|
||||
|
||||
onParagraphValign(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
let value;
|
||||
|
||||
switch(type) {
|
||||
case 'top':
|
||||
value = Asc.c_oAscVAlign.Top;
|
||||
break;
|
||||
case 'center':
|
||||
value = Asc.c_oAscVAlign.Center;
|
||||
break;
|
||||
case 'bottom':
|
||||
value = Asc.c_oAscVAlign.Bottom;
|
||||
break;
|
||||
}
|
||||
|
||||
api.setVerticalAlign(value);
|
||||
};
|
||||
|
||||
onParagraphMove(type) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if(type === 'left') {
|
||||
api.DecreaseIndent();
|
||||
} else {
|
||||
api.IncreaseIndent();
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
toggleBold={this.toggleBold}
|
||||
toggleItalic={this.toggleItalic}
|
||||
toggleUnderline={this.toggleUnderline}
|
||||
toggleStrikethrough={this.toggleStrikethrough}
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import '../../../../common/mobile/resources/less/common.less';
|
||||
@import '../../../../common/mobile/resources/less/common-ios.less';
|
||||
@import '../../../../common/mobile/resources/less/common-material.less';
|
||||
@import '../../../../common/mobile/resources/less/dataview.less';
|
||||
@import '../../../../common/mobile/resources/less/about.less';
|
||||
@import './app-material.less';
|
||||
@import './app-ios.less';
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
|
||||
&.icon-text-align-jast {
|
||||
&.icon-text-align-just {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
}
|
||||
|
||||
&.icon-text-align-jast {
|
||||
&.icon-text-align-just {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import {action, observable} from 'mobx';
|
|||
|
||||
export class storeApplicationSettings {
|
||||
|
||||
@observable unitMeasurement = 0;
|
||||
@observable unitMeasurement = 1;
|
||||
@observable isSpellChecking = true;
|
||||
@observable macrosMode = 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -67,4 +67,34 @@ export class storeFocusObjects {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@computed get paragraphObject() {
|
||||
const paragraphs = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
|
||||
paragraphs.push(object);
|
||||
}
|
||||
}
|
||||
if (paragraphs.length > 0) {
|
||||
const object = paragraphs[paragraphs.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@computed get shapeObject() {
|
||||
const shapes = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
|
||||
shapes.push(object);
|
||||
}
|
||||
}
|
||||
if (shapes.length > 0) {
|
||||
const object = shapes[shapes.length - 1]; // get top
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ import {storePresentationInfo} from './presentationInfo';
|
|||
import {storePresentationSettings} from './presentationSettings';
|
||||
import { storePalette } from './palette';
|
||||
import { storeSlideSettings } from './slideSettings';
|
||||
import { storeTextSettings } from './textSettings';
|
||||
import { storeShapeSettings } from './shapeSettings';
|
||||
// import {storeTextSettings} from "./textSettings";
|
||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||
// import {storeShapeSettings} from "./shapeSettings";
|
||||
|
|
@ -24,7 +26,9 @@ export const stores = {
|
|||
storePresentationInfo: new storePresentationInfo(),
|
||||
storePresentationSettings: new storePresentationSettings(),
|
||||
storeSlideSettings: new storeSlideSettings(),
|
||||
storePalette: new storePalette()
|
||||
storePalette: new storePalette(),
|
||||
storeTextSettings: new storeTextSettings(),
|
||||
storeShapeSettings: new storeShapeSettings()
|
||||
// storeTextSettings: new storeTextSettings(),
|
||||
// storeParagraphSettings: new storeParagraphSettings(),
|
||||
// storeShapeSettings: new storeShapeSettings(),
|
||||
|
|
|
|||
224
apps/presentationeditor/mobile/src/store/shapeSettings.js
Normal file
224
apps/presentationeditor/mobile/src/store/shapeSettings.js
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
|
||||
export class storeShapeSettings {
|
||||
|
||||
getStyleGroups () {
|
||||
const styles = [
|
||||
{
|
||||
title: 'Text',
|
||||
thumb: 'shape-01.svg',
|
||||
type: 'textRect'
|
||||
},
|
||||
{
|
||||
title: 'Line',
|
||||
thumb: 'shape-02.svg',
|
||||
type: 'line'
|
||||
},
|
||||
{
|
||||
title: 'Line with arrow',
|
||||
thumb: 'shape-03.svg',
|
||||
type: 'lineWithArrow'
|
||||
},
|
||||
{
|
||||
title: 'Line with two arrows',
|
||||
thumb: 'shape-04.svg',
|
||||
type: 'lineWithTwoArrows'
|
||||
},
|
||||
{
|
||||
title: 'Rect',
|
||||
thumb: 'shape-05.svg',
|
||||
type: 'rect'
|
||||
},
|
||||
{
|
||||
title: 'Hexagon',
|
||||
thumb: 'shape-06.svg',
|
||||
type: 'hexagon'
|
||||
},
|
||||
{
|
||||
title: 'Round rect',
|
||||
thumb: 'shape-07.svg',
|
||||
type: 'roundRect'
|
||||
},
|
||||
{
|
||||
title: 'Ellipse',
|
||||
thumb: 'shape-08.svg',
|
||||
type: 'ellipse'
|
||||
},
|
||||
{
|
||||
title: 'Triangle',
|
||||
thumb: 'shape-09.svg',
|
||||
type: 'triangle'
|
||||
},
|
||||
{
|
||||
title: 'Triangle',
|
||||
thumb: 'shape-10.svg',
|
||||
type: 'rtTriangle'
|
||||
},
|
||||
{
|
||||
title: 'Trapezoid',
|
||||
thumb: 'shape-11.svg',
|
||||
type: 'trapezoid'
|
||||
},
|
||||
{
|
||||
title: 'Diamond',
|
||||
thumb: 'shape-12.svg',
|
||||
type: 'diamond'
|
||||
},
|
||||
{
|
||||
title: 'Right arrow',
|
||||
thumb: 'shape-13.svg',
|
||||
type: 'rightArrow'
|
||||
},
|
||||
{
|
||||
title: 'Left-right arrow',
|
||||
thumb: 'shape-14.svg',
|
||||
type: 'leftRightArrow'
|
||||
},
|
||||
{
|
||||
title: 'Left arrow callout',
|
||||
thumb: 'shape-15.svg',
|
||||
type: 'leftArrow'
|
||||
},
|
||||
{
|
||||
title: 'Right arrow callout',
|
||||
thumb: 'shape-16.svg',
|
||||
type: 'bentUpArrow'
|
||||
},
|
||||
{
|
||||
title: 'Flow chart off page connector',
|
||||
thumb: 'shape-17.svg',
|
||||
type: 'flowChartOffpageConnector'
|
||||
},
|
||||
{
|
||||
title: 'Heart',
|
||||
thumb: 'shape-18.svg',
|
||||
type: 'heart'
|
||||
},
|
||||
{
|
||||
title: 'Math minus',
|
||||
thumb: 'shape-19.svg',
|
||||
type: 'mathMinus'
|
||||
},
|
||||
{
|
||||
title: 'Math plus',
|
||||
thumb: 'shape-20.svg',
|
||||
type: 'mathPlus'
|
||||
},
|
||||
{
|
||||
title: 'Parallelogram',
|
||||
thumb: 'shape-21.svg',
|
||||
type: 'parallelogram'
|
||||
},
|
||||
{
|
||||
title: 'Wedge rect callout',
|
||||
thumb: 'shape-22.svg',
|
||||
type: 'wedgeRectCallout'
|
||||
},
|
||||
{
|
||||
title: 'Wedge ellipse callout',
|
||||
thumb: 'shape-23.svg',
|
||||
type: 'wedgeEllipseCallout'
|
||||
},
|
||||
{
|
||||
title: 'Cloud callout',
|
||||
thumb: 'shape-24.svg',
|
||||
type: 'cloudCallout'
|
||||
}
|
||||
];
|
||||
const groups = [];
|
||||
let i = 0;
|
||||
for (let row=0; row<Math.floor(styles.length/4); row++) {
|
||||
const group = [];
|
||||
for (let cell=0; cell<4; cell++) {
|
||||
group.push(styles[i]);
|
||||
i++;
|
||||
}
|
||||
groups.push(group);
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
// Fill Color
|
||||
|
||||
@observable fillColor = undefined;
|
||||
|
||||
setFillColor (color) {
|
||||
this.fillColor = color;
|
||||
}
|
||||
|
||||
getFillColor (shapeObject) {
|
||||
let fill = shapeObject.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 color
|
||||
|
||||
@observable borderColorView;
|
||||
|
||||
setBorderColor (color) {
|
||||
this.borderColorView = color;
|
||||
}
|
||||
|
||||
initBorderColorView (shapeObject) {
|
||||
const stroke = shapeObject.get_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.borderColorView = 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)];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
153
apps/presentationeditor/mobile/src/store/textSettings.js
Normal file
153
apps/presentationeditor/mobile/src/store/textSettings.js
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
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 paragraphValign = undefined;
|
||||
@observable canIncreaseIndent = undefined;
|
||||
@observable canDecreaseIndent = undefined;
|
||||
@observable textColor = undefined;
|
||||
@observable customTextColors = [];
|
||||
@observable lineSpacing = 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;
|
||||
}
|
||||
|
||||
// Indent
|
||||
|
||||
@action resetIncreaseIndent(value) {
|
||||
this.canIncreaseIndent = value;
|
||||
}
|
||||
|
||||
@action resetDecreaseIndent(value) {
|
||||
this.canDecreaseIndent = value;
|
||||
}
|
||||
|
||||
// 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 resetParagraphValign (align) {
|
||||
let value;
|
||||
switch (align) {
|
||||
case 0:
|
||||
value = 'bottom';
|
||||
break;
|
||||
case 4:
|
||||
value = 'top';
|
||||
break;
|
||||
case 1:
|
||||
value = 'center';
|
||||
break;
|
||||
}
|
||||
this.paragraphValign = value;
|
||||
}
|
||||
|
||||
@action resetTextColor (color) {
|
||||
let value;
|
||||
if (color) {
|
||||
if (color.get_auto()) {
|
||||
value = 'auto';
|
||||
} 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 changeCustomTextColors (colors) {
|
||||
this.customTextColors = colors;
|
||||
}
|
||||
|
||||
@action resetLineSpacing (vc) {
|
||||
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
|
||||
this.lineSpacing = line;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,8 +7,10 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
|
||||
import EditSlideController from "../../controller/edit/EditSlide";
|
||||
import EditTextController from "../../controller/edit/EditText";
|
||||
import EditShapeController from "../../controller/edit/EditShape";
|
||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||
|
||||
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
|
||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||
//import EditShapeController from "../../controller/edit/EditShape";
|
||||
//import EditImageController from "../../controller/edit/EditImage";
|
||||
//import EditTableController from "../../controller/edit/EditTable";
|
||||
|
|
@ -43,7 +45,68 @@ 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
|
||||
},
|
||||
{
|
||||
path: '/edit-style-shape/',
|
||||
component: PageShapeStyle
|
||||
},
|
||||
{
|
||||
path: '/edit-style-shape-no-fill/',
|
||||
component: PageShapeStyleNoFill
|
||||
},
|
||||
{
|
||||
path: '/edit-replace-shape/',
|
||||
component: PageReplaceContainer
|
||||
},
|
||||
{
|
||||
path: '/edit-reorder-shape',
|
||||
component: PageReorderContainer
|
||||
},
|
||||
{
|
||||
path: '/edit-align-shape/',
|
||||
component: PageAlignContainer
|
||||
},
|
||||
{
|
||||
path: '/edit-shape-border-color/',
|
||||
component: PageShapeBorderColor
|
||||
},
|
||||
{
|
||||
path: '/edit-shape-custom-border-color/',
|
||||
component: PageShapeCustomBorderColor
|
||||
},
|
||||
{
|
||||
path: '/edit-shape-custom-fill-color/',
|
||||
component: PageShapeCustomFillColor
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
const EmptyEditLayout = () => {
|
||||
|
|
@ -124,6 +187,13 @@ const EditTabs = props => {
|
|||
component: <EditTextController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textTable,
|
||||
|
|
@ -131,13 +201,6 @@ const EditTabs = props => {
|
|||
component: <EditTableController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
|
|
|
|||
411
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
Normal file
411
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react';
|
||||
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
const EditShape = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const canFill = props.storeFocusObjects.shapeObject.get_CanFill();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
{canFill ?
|
||||
<ListItem title={_t.textStyle} link="/edit-style-shape/" routeProps={{
|
||||
onFillColor: props.onFillColor,
|
||||
onBorderSize: props.onBorderSize,
|
||||
onBorderColor: props.onBorderColor,
|
||||
onOpacity: props.onOpacity
|
||||
}}></ListItem>
|
||||
:
|
||||
<ListItem title={_t.textStyle} link="/edit-style-shape-no-fill/" routeProps={{
|
||||
onBorderSize: props.onBorderSize,
|
||||
onBorderColor: props.onBorderColor
|
||||
}}></ListItem>
|
||||
}
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-shape/" routeProps={{
|
||||
onReplace: props.onReplace
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link="/edit-reorder-shape/" routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textAlign} link="/edit-align-shape/" routeProps={{
|
||||
onAlign: props.onAlign
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
|
||||
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);
|
||||
storeShapeSettings.setFillColor(newColor);
|
||||
} else {
|
||||
props.onFillColor(color);
|
||||
storeShapeSettings.setFillColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-shape-custom-fill-color/');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
|
||||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
}));
|
||||
|
||||
const PageStyle = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const stroke = shapeObject.get_stroke();
|
||||
|
||||
// Init border size
|
||||
|
||||
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||
const borderType = stroke.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 = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||
|
||||
// Init opacity
|
||||
|
||||
const transparent = shapeObject.get_fill().asc_getTransparent();
|
||||
const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
|
||||
const [stateOpacity, setOpacity] = useState(Math.round(opacity));
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={_t.textBack}>
|
||||
<div className='tab-buttons tabbar'>
|
||||
<Link key={"pe-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
|
||||
<Link key={"pe-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
|
||||
<Link key={"pe-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
|
||||
</div>
|
||||
</Navbar>
|
||||
<Tabs animated>
|
||||
<Tab key={"pe-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
|
||||
<PaletteFill onFillColor={props.onFillColor}/>
|
||||
</Tab>
|
||||
<Tab key={"pe-tab-shape-border"} id={"edit-shape-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-shape-border-color/' routeProps={{
|
||||
onBorderColor: props.onBorderColor
|
||||
}}>
|
||||
<span className="color-preview"
|
||||
slot="after"
|
||||
style={{ background: displayBorderColor}}
|
||||
></span>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Tab>
|
||||
<Tab key={"pe-tab-shape-effects"} id={"edit-shape-effects"} className="page-content no-padding-top">
|
||||
<List>
|
||||
<ListItem>
|
||||
<div slot="root-start" className='inner-range-title'>{_t.textOpacity}</div>
|
||||
<div slot='inner' style={{width: '100%'}}>
|
||||
<Range min={0} max={100} step={1} value={stateOpacity}
|
||||
onRangeChange={(value) => {setOpacity(value)}}
|
||||
onRangeChanged={(value) => {props.onOpacity(value)}}
|
||||
></Range>
|
||||
</div>
|
||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||
{stateOpacity + ' %'}
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageCustomFillColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
let fillColor = props.storeShapeSettings.fillColor;
|
||||
|
||||
if (typeof fillColor === 'object') {
|
||||
fillColor = fillColor.color;
|
||||
}
|
||||
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onFillColor(color);
|
||||
props.storeShapeSettings.setFillColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
|
||||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageStyleNoFill = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
const shapeObject = props.storeFocusObjects.shapeObject;
|
||||
const stroke = shapeObject.get_stroke();
|
||||
|
||||
// Init border size
|
||||
|
||||
const borderSizeTransform = storeShapeSettings.borderSizeTransform();
|
||||
const borderSize = stroke.get_width() * 72.0 / 25.4;
|
||||
const borderType = stroke.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 = !storeShapeSettings.borderColorView ? storeShapeSettings.initBorderColorView(shapeObject) : storeShapeSettings.borderColorView;
|
||||
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={_t.textBack} title={_t.textBorder}></Navbar>
|
||||
<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-shape-border-color/' routeProps={{
|
||||
onBorderColor: props.onBorderColor
|
||||
}}>
|
||||
<span className="color-preview"
|
||||
slot="after"
|
||||
style={{ background: displayBorderColor}}
|
||||
></span>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageReplace = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeShapeSettings = props.storeShapeSettings;
|
||||
let shapes = storeShapeSettings.getStyleGroups();
|
||||
shapes.splice(0, 1); // Remove line shapes
|
||||
|
||||
return (
|
||||
<Page className="shapes dataview">
|
||||
<Navbar title={_t.textReplace} backLink={_t.textBack} />
|
||||
{shapes.map((row, indexRow) => {
|
||||
return (
|
||||
<ul className="row" key={'shape-row-' + indexRow}>
|
||||
{row.map((shape, index) => {
|
||||
return (
|
||||
<li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onReplace(shape.type)}}>
|
||||
<div className="thumb"
|
||||
style={{WebkitMaskImage: `url('resources/img/shapes/${shape.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</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 PageBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const borderColor = props.storeShapeSettings.borderColorView;
|
||||
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.storeShapeSettings.setBorderColor(newColor);
|
||||
} else {
|
||||
props.onBorderColor(color);
|
||||
props.storeShapeSettings.setBorderColor(color);
|
||||
}
|
||||
} else {
|
||||
// open custom color menu
|
||||
props.f7router.navigate('/edit-shape-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-shape-custom-border-color/'} routeProps={{
|
||||
onBorderColor: props.onBorderColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageCustomBorderColor = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
let borderColor = props.storeShapeSettings.borderColorView;
|
||||
if (typeof borderColor === 'object') {
|
||||
borderColor = borderColor.color;
|
||||
}
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storePalette.changeCustomColors(colors);
|
||||
props.onBorderColor(color);
|
||||
props.storeShapeSettings.setBorderColor(color);
|
||||
props.f7router.back();
|
||||
};
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const EditShapeContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(EditShape));
|
||||
const PageShapeStyle = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyle));
|
||||
const PageShapeStyleNoFill = inject("storeFocusObjects", "storeShapeSettings")(observer(PageStyleNoFill));
|
||||
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
|
||||
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
|
||||
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
|
||||
const PageAlignContainer = inject("storeFocusObjects")(observer(PageAlign));
|
||||
const PageShapeBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageBorderColor));
|
||||
const PageShapeCustomBorderColor = inject("storeShapeSettings", "storePalette")(observer(PageCustomBorderColor));
|
||||
|
||||
export {
|
||||
EditShapeContainer as EditShape,
|
||||
PageShapeStyle,
|
||||
PageShapeStyleNoFill,
|
||||
PageReplaceContainer,
|
||||
PageReorderContainer,
|
||||
PageAlignContainer,
|
||||
PageShapeBorderColor,
|
||||
PageShapeCustomBorderColor,
|
||||
PageShapeCustomFillColor
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range} from 'framework7-react';
|
||||
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented} from 'framework7-react';
|
||||
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
// import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
|
||||
const EditSlide = props => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -31,9 +31,9 @@ const EditSlide = props => {
|
|||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
|
||||
<ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
@ -129,6 +129,7 @@ const PageLayout = props => {
|
|||
const PageTransition = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Edit", { returnObjects: true });
|
||||
const isAndroid = Device.android;
|
||||
const _arrEffect = [
|
||||
{displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None},
|
||||
{displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade},
|
||||
|
|
@ -257,20 +258,27 @@ const PageTransition = props => {
|
|||
}}>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
|
||||
<div slot="after" className="splitter">
|
||||
{!isAndroid && <div slot='after-start'>
|
||||
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
|
||||
<p className="buttons-row">
|
||||
<span className="button" onClick={() => {
|
||||
</div>}
|
||||
<div slot="after" className="splitter">
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {
|
||||
let duration = parseInt(_effectDuration / 1000);
|
||||
duration = Math.max(0, --duration);
|
||||
props.changeDuration(duration);
|
||||
}}>-</span>
|
||||
<span className="button" onClick={() => {
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {
|
||||
let duration = parseInt(_effectDuration / 1000);
|
||||
duration = Math.min(300, ++duration);
|
||||
props.changeDuration(duration);
|
||||
}}>+</span>
|
||||
</p>
|
||||
}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
|
@ -297,8 +305,8 @@ const PageTransition = props => {
|
|||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,470 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
|
||||
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} 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';
|
||||
|
||||
const EditText = props => {
|
||||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const metricText = Common.Utils.Metric.getCurrentMetricName();
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const fontName = storeTextSettings.fontName || _t.textFonts;
|
||||
const fontSize = storeTextSettings.fontSize;
|
||||
const fontColor = storeTextSettings.textColor;
|
||||
const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt;
|
||||
const isBold = storeTextSettings.isBold;
|
||||
const isItalic = storeTextSettings.isItalic;
|
||||
const isUnderline = storeTextSettings.isUnderline;
|
||||
const isStrikethrough = storeTextSettings.isStrikethrough;
|
||||
const paragraphAlign = storeTextSettings.paragraphAlign;
|
||||
const paragraphValign = storeTextSettings.paragraphValign;
|
||||
const canIncreaseIndent = storeTextSettings.canIncreaseIndent;
|
||||
const canDecreaseIndent = storeTextSettings.canDecreaseIndent;
|
||||
const paragraphObj = storeFocusObjects.paragraphObject;
|
||||
let spaceBefore;
|
||||
let spaceAfter;
|
||||
|
||||
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 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> :
|
||||
<span className="color-preview auto"></span>;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
<List>
|
||||
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
|
||||
changeFontSize: props.changeFontSize,
|
||||
changeFontFamily: props.changeFontFamily
|
||||
}}/>
|
||||
<ListItem className='buttons'>
|
||||
<Row>
|
||||
<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={_t.textFontColor} link="/edit-text-font-color/" routeProps={{
|
||||
onTextColor: props.onTextColor
|
||||
}}>
|
||||
{!isAndroid ?
|
||||
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
|
||||
fontColorPreview
|
||||
}
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
|
||||
onAdditionalStrikethrough: props.onAdditionalStrikethrough,
|
||||
onAdditionalCaps: props.onAdditionalCaps,
|
||||
onAdditionalScript: props.onAdditionalScript,
|
||||
changeLetterSpacing: props.changeLetterSpacing
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
|
||||
</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>
|
||||
)
|
||||
};
|
||||
|
||||
export {EditText};
|
||||
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 dataview'>
|
||||
<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 dataview'>
|
||||
<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,
|
||||
PageTextFonts,
|
||||
PageTextFontColor,
|
||||
PageTextCustomFontColor,
|
||||
PageTextAddFormatting,
|
||||
PageTextBullets,
|
||||
PageTextNumbers,
|
||||
PageTextLineSpacing
|
||||
};
|
||||
Loading…
Reference in a new issue