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

[PE mobile] Almost maked layout settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-23 18:39:32 +03:00
parent db867796e0
commit a9b9ec6c88
6 changed files with 88 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -192,18 +192,28 @@ class MainController extends Component {
// me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me));
const storeFocusObjects = this.props.storeFocusObjects;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
storeFocusObjects.resetFocusObjects(objects);
});
this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
console.log(themeId);
});
const storeLayout = this.props.storeLayout;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
console.log(objects);
storeFocusObjects.resetFocusObjects(objects);
const settings = storeFocusObjects.settings;
console.log(settings);
if(settings[0] === "slide") {
const slideObject = objects[0].get_ObjectValue();
storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
}
});
// this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
// console.log(themeId);
// });
this.api.asc_registerCallback('asc_onUpdateLayout', (layouts) => {
console.log(layouts);
// console.log(layouts);
storeLayout.addArrayLayouts(layouts);
});
}

13
apps/presentationeditor/mobile/src/controller/edit/Layout.jsx
View file

@ -6,9 +6,20 @@ class LayoutController extends Component {
super(props);
}
onLayoutClick(index) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps();
console.log(api);
props.LayoutIndex = index;
api.SetSlideProps(props);
console.log(props);
}
render() {
return (
<Layout />
<Layout onLayoutClick={this.onLayoutClick} />
);
}
}

23
apps/presentationeditor/mobile/src/less/app-ios.less
View file

@ -28,8 +28,10 @@
// Layout
.list-layouts {
margin: auto;
.slide-layout {
.list {
margin: auto;
}
ul {
display: flex;
flex-wrap: wrap;
@ -38,25 +40,32 @@
li {
position: relative;
z-index: 1;
margin: 0;
margin-top: 12px;
img {
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
}
li .item-inner:after {
.item-inner {
padding-top: 0;
}
.item-inner:after {
display: none;
}
li.active .item-inner:after {
.item-inner:before {
opacity: 0;
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
right: 11px;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
}
.active .item-inner:before {
opacity: 1;
}
}
}

23
apps/presentationeditor/mobile/src/less/app-material.less
View file

@ -49,8 +49,10 @@
// Layout
.list-layouts {
margin: auto;
.slide-layout {
.list {
margin: auto;
}
ul {
display: flex;
flex-wrap: wrap;
@ -59,24 +61,31 @@
li {
position: relative;
z-index: 1;
margin: 0;
margin-top: 12px;
img {
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
}
li .item-inner:after {
.item-inner {
padding-top: 0;
}
.item-inner:after {
display: none;
}
li.active .item-inner:after {
.item-inner:before {
opacity: 0;
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
right: 11px;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
}
.active .item-inner:before {
opacity: 1;
}
}
}

5
apps/presentationeditor/mobile/src/store/layout.js
View file

@ -3,9 +3,14 @@ import {action, observable} from 'mobx';
export class storeLayout {
@observable arrayLayouts;
@observable slideLayoutIndex = -1;
@action addArrayLayouts(array) {
this.arrayLayouts = array;
}
@action changeSlideLayoutIndex(index) {
this.slideLayoutIndex = index;
}
}

27
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment} from "react";
import React from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageLayout = props => {
@ -8,18 +8,31 @@ const PageLayout = props => {
const _t = t("View.Edit", { returnObjects: true });
const store = props.storeLayout;
const arrayLayouts = JSON.parse(JSON.stringify(store.arrayLayouts));
const slideLayoutIndex = store.slideLayoutIndex;
console.log(slideLayoutIndex);
console.log(arrayLayouts);
console.log(store);
return (
<Page>
<Navbar title={_t.textLayout} backLink={_t.textBack} />
<Page className="slide-layout">
<Navbar title={_t.textLayout} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{arrayLayouts.length ? (
<List className="list-layouts">
<List>
{arrayLayouts.map((elem, index) => {
return (
<ListItem key={index}>
<img src={elem.Image} style={{width: elem.Width, height: elem.height}} alt=""/>
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}
onClick={() => {
store.changeSlideLayoutIndex(index);
props.onLayoutClick(index);
}}>
<img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
</ListItem>
)
})}