Merge branch 'feature/mobile-apps-on-reactjs-pe' into feature/mobile-apps-on-reactjs

This commit is contained in:
JuliaSvinareva 2021-03-16 20:20:54 +03:00
commit 6f5f84a7aa
15 changed files with 295 additions and 146 deletions

View file

@ -67,7 +67,7 @@ class EditLinkController extends Component {
let mask = "ppaction://hlinksldjumpslide",
indSlide = url.indexOf(mask);
if (0 == indSlide) {
slideNum = parseInt(url.substring(mask.length));
this.slideNum = parseInt(url.substring(mask.length));
if (slideNum < 0) this.slideNum = 0;
if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
} else this.slideNum = 0;
@ -121,7 +121,7 @@ class EditLinkController extends Component {
break;
case 1:
url = url + "showjump?jump=previousslide";
slidetip = _t.textPrevSlide;
slidetip = _t.textPreviousSlide;
break;
case 2:
url = url + "showjump?jump=firstslide";
@ -137,12 +137,12 @@ class EditLinkController extends Component {
break;
}
props.put_Value(url);
props.put_ToolTip(!tip ? slidetip : tip);
props.put_ToolTip(tip === '' ? slidetip : tip);
def_display = slidetip;
}
if (!linkInfo.displayDisabled) {
props.put_Text(!display ? def_display : display);
props.put_Text(display === '' ? def_display : display);
} else
props.put_Text(null);

View file

@ -1,4 +1,4 @@
import {makeObservable, action, observable} from 'mobx';
import {action, observable, makeObservable} from 'mobx';
export class storeAppOptions {
constructor() {
@ -11,6 +11,7 @@ export class storeAppOptions {
isEdit = false;
config = {};
setConfigOptions (config) {
this.config = config;
this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
@ -33,6 +34,7 @@ export class storeAppOptions {
this.canBack = this.canBackToFolder === true;
this.canPlugins = false;
}
setPermissionOptions (document, licType, params, permissions) {
this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review;
this.canAnalytics = params.asc_getIsAnalyticsEnable();

View file

@ -1,20 +1,30 @@
import {action, observable} from 'mobx';
import {action, observable, makeObservable} from 'mobx';
export class storeApplicationSettings {
@observable unitMeasurement = 1;
@observable isSpellChecking = true;
@observable macrosMode = 0;
constructor() {
makeObservable(this, {
unitMeasurement: observable,
isSpellChecking: observable,
macrosMode: observable,
changeUnitMeasurement: action,
changeSpellCheck: action,
changeMacrosSettings: action
});
}
unitMeasurement = 1;
isSpellChecking = true;
macrosMode = 0;
@action changeUnitMeasurement(value) {
changeUnitMeasurement(value) {
this.unitMeasurement = +value;
}
@action changeSpellCheck(value) {
changeSpellCheck(value) {
this.isSpellChecking = value;
}
@action changeMacrosSettings(value) {
changeMacrosSettings(value) {
this.macrosMode = +value;
}
}

View file

@ -1,20 +1,35 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
export class storeChartSettings {
constructor() {
makeObservable(this, {
chartStyles: observable,
fillColor: observable,
borderColor: observable,
clearChartStyles: action,
updateChartStyles: action,
styles: computed,
types: computed,
setFillColor: action,
getFillColor: action,
setBorderColor: action,
initBorderColor: action
});
}
// Style
@observable chartStyles = null;
chartStyles = null;
@action clearChartStyles () {
clearChartStyles () {
this.chartStyles = null;
}
@action updateChartStyles (styles) {
updateChartStyles (styles) {
this.chartStyles = styles;
}
@computed get styles () {
get styles () {
if (!this.chartStyles) return null;
const widthContainer = document.querySelector(".page-content").clientWidth;
const columns = parseInt(widthContainer / 70); // magic
@ -32,7 +47,7 @@ export class storeChartSettings {
return styles;
}
@computed get types () {
get types () {
const types = [
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'},
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'},
@ -75,7 +90,7 @@ export class storeChartSettings {
// Fill Color
@observable fillColor = undefined;
fillColor = undefined;
setFillColor (color) {
this.fillColor = color;
@ -104,7 +119,7 @@ export class storeChartSettings {
// Border size and border color
@observable borderColor;
borderColor;
setBorderColor (color) {
this.borderColor = color;

View file

@ -1,13 +1,30 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
export class storeFocusObjects {
@observable _focusObjects = [];
constructor() {
makeObservable(this, {
_focusObjects: observable,
resetFocusObjects: action,
settings: computed,
slideObject: computed,
paragraphObject: computed,
paragraphLocked: computed,
shapeObject: computed,
imageObject: computed,
tableObject: computed,
isTableInStack: computed,
chartObject: computed,
linkObject: computed
});
}
@action resetFocusObjects(objects) {
_focusObjects = [];
resetFocusObjects(objects) {
this._focusObjects = objects;
}
@computed get settings() {
get settings() {
const _settings = [];
let no_text = true;
for (let object of this._focusObjects) {
@ -53,7 +70,7 @@ export class storeFocusObjects {
return resultArr;
}
@computed get slideObject() {
get slideObject() {
const slides = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
@ -68,7 +85,7 @@ export class storeFocusObjects {
}
}
@computed get paragraphObject() {
get paragraphObject() {
const paragraphs = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
@ -83,7 +100,7 @@ export class storeFocusObjects {
}
}
@computed get paragraphLocked() {
get paragraphLocked() {
let _paragraphLocked = false;
for (let object of this._focusObjects) {
if (Asc.c_oAscTypeSelectElement.Paragraph == object.get_ObjectType()) {
@ -93,7 +110,7 @@ export class storeFocusObjects {
return _paragraphLocked;
}
@computed get shapeObject() {
get shapeObject() {
const shapes = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
@ -108,7 +125,7 @@ export class storeFocusObjects {
}
}
@computed get imageObject() {
get imageObject() {
const images = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image && object.get_ObjectValue()) {
@ -123,7 +140,7 @@ export class storeFocusObjects {
}
}
@computed get tableObject() {
get tableObject() {
const tables = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
@ -138,7 +155,7 @@ export class storeFocusObjects {
}
}
@computed get isTableInStack() {
get isTableInStack() {
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
return true;
@ -147,7 +164,7 @@ export class storeFocusObjects {
return false;
}
@computed get chartObject() {
get chartObject() {
const charts = [];
for (let object of this._focusObjects) {
@ -164,7 +181,7 @@ export class storeFocusObjects {
}
}
@computed get linkObject() {
get linkObject() {
const links = [];
for (let object of this._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {

View file

@ -1,8 +1,16 @@
import {action, observable, computed} from 'mobx';
import {action, observable, makeObservable} from 'mobx';
export class storeLinkSettings {
@observable canAddLink;
@action canAddHyperlink (value) {
constructor() {
makeObservable(this, {
canAddLink: observable,
canAddHyperlink: action
});
}
canAddLink;
canAddHyperlink (value) {
this.canAddLink = value;
}
}

View file

@ -1,9 +1,16 @@
import {action, observable} from 'mobx';
import {action, observable, makeObservable} from 'mobx';
export class storePalette {
@observable customColors = [];
constructor() {
makeObservable(this, {
customColors: observable,
changeCustomColors: action
});
}
@action changeCustomColors (colors) {
customColors = [];
changeCustomColors (colors) {
this.customColors = colors;
}
}

View file

@ -1,10 +1,16 @@
import { action, observable } from "mobx";
import { action, observable, makeObservable } from "mobx";
export class storePresentationInfo {
constructor() {
makeObservable(this, {
dataDoc: observable,
setDataDoc: action
});
}
@observable dataDoc;
dataDoc;
@action setDataDoc(obj) {
this.dataDoc = obj;
}
setDataDoc(obj) {
this.dataDoc = obj;
}
}

View file

@ -1,6 +1,16 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
export class storeShapeSettings {
constructor() {
makeObservable(this, {
fillColor: observable,
borderColorView: observable,
setFillColor: action,
getFillColor: action,
setBorderColor: action,
initBorderColorView: action
});
}
getStyleGroups () {
const styles = [
@ -140,7 +150,7 @@ export class storeShapeSettings {
// Fill Color
@observable fillColor = undefined;
fillColor = undefined;
setFillColor (color) {
this.fillColor = color;
@ -169,7 +179,7 @@ export class storeShapeSettings {
// Border size and color
@observable borderColorView;
borderColorView;
setBorderColor (color) {
this.borderColorView = color;

View file

@ -1,17 +1,30 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
export class storeSlideSettings {
constructor() {
makeObservable(this, {
arrayLayouts: observable,
slideLayoutIndex: observable,
fillColor: observable,
arrayThemes: observable,
slideThemeIndex: observable,
getFillColor: action,
changeFillColor: action,
addArrayLayouts: action,
slideLayouts: computed,
changeSlideLayoutIndex: action,
addArrayThemes: action,
changeSlideThemeIndex: action,
});
}
arrayLayouts;
slideLayoutIndex = -1;
fillColor = undefined;
arrayThemes;
slideThemeIndex;
@observable arrayLayouts;
@observable slideLayoutIndex = -1;
@observable fillColor = undefined;
@observable arrayThemes;
@observable slideThemeIndex;
@observable effect;
@observable type;
@action getFillColor (slideObject) {
getFillColor (slideObject) {
let color = 'transparent';
let fill = slideObject.get_background(),
fillType = fill.get_type();
@ -34,14 +47,15 @@ export class storeSlideSettings {
return color;
}
@action changeFillColor (color) {
changeFillColor (color) {
this.fillColor = color;
}
@action addArrayLayouts(array) {
addArrayLayouts(array) {
this.arrayLayouts = array;
}
@computed get slideLayouts () {
get slideLayouts () {
const layouts = [];
const columns = 2;
let row = -1;
@ -60,23 +74,15 @@ export class storeSlideSettings {
return layouts;
}
@action changeSlideLayoutIndex(index) {
changeSlideLayoutIndex(index) {
this.slideLayoutIndex = index;
}
@action addArrayThemes(array) {
addArrayThemes(array) {
this.arrayThemes = array;
}
@action changeSlideThemeIndex(index) {
changeSlideThemeIndex(index) {
this.slideThemeIndex = index;
}
@action changeEffect(value) {
this.effect = value;
}
@action changeType(value) {
this.type = value;
}
}

View file

@ -1,15 +1,27 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
import {f7} from 'framework7-react';
export class storeTableSettings {
constructor() {
makeObservable(this, {
_templates: observable,
cellBorders: observable,
cellBorderWidth: observable,
cellBorderColor: observable,
initTableTemplates: action,
styles: computed,
updateCellBorderWidth: action,
updateCellBorderColor: action,
});
}
@observable _templates = [];
_templates = [];
@action initTableTemplates (templates) {
initTableTemplates (templates) {
this._templates = templates;
}
@computed get styles () {
get styles () {
let styles = [];
for (let template of this._templates) {
styles.push({
@ -52,9 +64,9 @@ export class storeTableSettings {
// Border style
@observable cellBorders;
@observable cellBorderWidth = 0.5;
@observable cellBorderColor = '000000';
cellBorders;
cellBorderWidth = 0.5;
cellBorderColor = '000000';
borderSizeTransform () {
const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];

View file

@ -1,27 +1,69 @@
import {action, observable, computed} from 'mobx';
import {action, observable, computed, makeObservable} from 'mobx';
export class storeTextSettings {
constructor() {
makeObservable(this, {
fontsArray: observable,
fontName: observable,
fontSize: observable,
isBold: observable,
isItalic: observable,
isUnderline: observable,
isStrikethrough: observable,
typeBaseline: observable,
listType: observable,
typeBullets: observable,
typeNumbers: observable,
paragraphAlign: observable,
paragraphValign: observable,
canIncreaseIndent: observable,
canDecreaseIndent: observable,
textColor: observable,
customTextColors: observable,
lineSpacing: observable,
initEditorFonts: action,
resetFontName: action,
resetFontSize: action,
resetIsBold: action,
resetIsItalic: action,
resetIsUnderline: action,
resetIsStrikeout: action,
resetIncreaseIndent: action,
resetDecreaseIndent: action,
resetTypeBaseline: action,
isSuperscript: computed,
isSubscript: computed,
resetListType: action,
resetBullets: action,
resetNumbers: action,
resetParagraphAlign: action,
resetParagraphValign: action,
resetTextColor: action,
changeCustomTextColors: action,
resetLineSpacing: action
});
}
@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;
fontsArray = [];
fontName = '';
fontSize = undefined;
isBold = false;
isItalic = false;
isUnderline = false;
isStrikethrough = false;
typeBaseline = undefined;
listType = undefined;
typeBullets = undefined;
typeNumbers = undefined;
paragraphAlign = undefined;
paragraphValign = undefined;
canIncreaseIndent = undefined;
canDecreaseIndent = undefined;
textColor = undefined;
customTextColors = [];
lineSpacing = undefined;
@action initEditorFonts (fonts, select) {
initEditorFonts (fonts, select) {
let array = [];
for (let font of fonts) {
let fontId = font.asc_getFontId();
@ -35,59 +77,71 @@ export class storeTextSettings {
}
this.fontsArray = array;
}
@action resetFontName (font) {
resetFontName (font) {
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
this.fontName = name;
}
@action resetFontSize (size) {
resetFontSize (size) {
this.fontSize = size;
}
@action resetIsBold (isBold) {
resetIsBold (isBold) {
this.isBold = isBold;
}
@action resetIsItalic (isItalic) {
resetIsItalic (isItalic) {
this.isItalic = isItalic;
}
@action resetIsUnderline (isUnderline) {
resetIsUnderline (isUnderline) {
this.isUnderline = isUnderline;
}
@action resetIsStrikeout (isStrikethrough) {
resetIsStrikeout (isStrikethrough) {
this.isStrikethrough = isStrikethrough;
}
// Indent
@action resetIncreaseIndent(value) {
resetIncreaseIndent(value) {
this.canIncreaseIndent = value;
}
@action resetDecreaseIndent(value) {
resetDecreaseIndent(value) {
this.canDecreaseIndent = value;
}
// vertical align
@action resetTypeBaseline (typeBaseline) {
resetTypeBaseline (typeBaseline) {
this.typeBaseline = typeBaseline;
}
@computed get isSuperscript() {
get isSuperscript() {
return (this.typeBaseline === 1);
}
@computed get isSubscript() {
get isSubscript() {
return (this.typeBaseline === 2);
}
// bullets
@action resetListType (type) {
resetListType (type) {
this.listType = type;
}
@action resetBullets (type) {
resetBullets (type) {
this.typeBullets = type;
}
@action resetNumbers (type) {
resetNumbers (type) {
this.typeNumbers = type;
}
@action resetParagraphAlign (align) {
resetParagraphAlign (align) {
let value;
switch (align) {
case 0:
@ -106,7 +160,7 @@ export class storeTextSettings {
this.paragraphAlign = value;
}
@action resetParagraphValign (align) {
resetParagraphValign (align) {
let value;
switch (align) {
case 0:
@ -122,7 +176,7 @@ export class storeTextSettings {
this.paragraphValign = value;
}
@action resetTextColor (color) {
resetTextColor (color) {
let value;
if (color) {
if (color.get_auto()) {
@ -141,11 +195,11 @@ export class storeTextSettings {
this.textColor = value;
}
@action changeCustomTextColors (colors) {
changeCustomTextColors (colors) {
this.customTextColors = colors;
}
@action resetLineSpacing (vc) {
resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;
}

View file

@ -13,8 +13,8 @@ const PageTypeLink = props => {
<Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
<List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1); props.initLink();}}></ListItem>
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0); props.initLink();}}></ListItem>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem>
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem>
</List>
</Page>
)
@ -32,7 +32,7 @@ const PageLinkTo = props => {
props.changeTo(type);
};
const [stateNumberTo, setNumberTo] = useState(0);
const [stateNumberTo, setNumberTo] = useState(props.numberTo);
const changeNumber = (curNumber, isDecrement) => {
setTypeTo(4);
@ -139,6 +139,7 @@ const PageLink = props => {
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={displayTo} routeProps={{
changeTo: changeTo,
curTo: linkTo,
numberTo: numberTo,
initLink: props.initLink,
slidesCount: props.slidesCount
}}/>

View file

@ -212,20 +212,12 @@ const PageTransition = props => {
};
const storeFocusObjects = props.storeFocusObjects;
const storeSlideSettings = props.storeSlideSettings;
const transitionObj = storeFocusObjects.slideObject.get_transition();
if(!storeSlideSettings.effect) {
storeSlideSettings.changeEffect(transitionObj.get_TransitionType());
}
const _effect = storeSlideSettings.effect;
const [_effect, setEffect] = useState(transitionObj.get_TransitionType());
const valueEffectTypes = fillEffectTypes(_effect);
const [type, setType] = useState(valueEffectTypes);
if(!storeSlideSettings.type) {
storeSlideSettings.changeType(valueEffectTypes);
}
let _effectDelay = transitionObj.get_SlideAdvanceDuration();
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
@ -248,13 +240,19 @@ const PageTransition = props => {
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
_arrEffect,
onEffectClick: props.onEffectClick,
fillEffectTypes
fillEffectTypes,
_effect,
setEffect,
setType
}}></ListItem>
<ListItem link="/type/" title={_t.textType}
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
_arrCurrentEffectTypes,
onEffectTypeClick: props.onEffectTypeClick
onEffectTypeClick: props.onEffectTypeClick,
_effect,
type,
setType
}}>
</ListItem>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
@ -285,11 +283,11 @@ const PageTransition = props => {
<List>
<ListItem>
<span>{_t.textStartOnClick}</span>
<Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
<Toggle checked={isStartOnClick} onChange={() => {props.onStartClick(!isStartOnClick)}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
<Toggle checked={isDelay} onChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
</ListItem>
<ListItem>
<div slot='inner' style={{width: '100%'}}>
@ -316,8 +314,8 @@ const PageTransition = props => {
const PageEffect = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeSlideSettings = props.storeSlideSettings;
const _effect = storeSlideSettings.effect;
const _effect = props._effect;
const [currentEffect, setEffect] = useState(_effect);
const _arrEffect = props._arrEffect;
return (
@ -328,10 +326,11 @@ const PageEffect = props => {
{_arrEffect.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
checked={elem.value === _effect} onChange={() => {
storeSlideSettings.changeEffect(elem.value);
checked={elem.value === currentEffect} onChange={() => {
setEffect(elem.value);
props.setEffect(elem.value);
let valueEffectTypes = props.fillEffectTypes(elem.value);
storeSlideSettings.changeType(valueEffectTypes);
props.setType(valueEffectTypes);
props.onEffectClick(elem.value, valueEffectTypes);
}}></ListItem>
)
@ -346,9 +345,9 @@ const PageType= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
const storeSlideSettings = props.storeSlideSettings;
const _effect = storeSlideSettings.effect;
const type = storeSlideSettings.type;
const _effect = props._effect;
const type = props.type;
const [currentType, setType] = useState(type);
return (
<Page className="style-type">
@ -362,8 +361,9 @@ const PageType= props => {
{_arrCurrentEffectTypes.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
checked={elem.value === type} onChange={() => {
storeSlideSettings.changeType(elem.value);
checked={elem.value === currentType} onChange={() => {
setType(elem.value);
props.setType(elem.value);
props.onEffectTypeClick(elem.value, _effect);
}}>
</ListItem>

View file

@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
const PagePresentationSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
// props.initSlideSize();
const storePresentationSettings = props.storePresentationSettings;
const slideSizeArr = storePresentationSettings.slideSizes;
const slideSizeIndex = storePresentationSettings.slideSizeIndex;