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

[PE mobile] Make layout settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-22 20:52:29 +03:00
parent 62e21edc83
commit db867796e0
12 changed files with 216 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/presentationeditor/mobile/locale/en.json
View file

@ -81,7 +81,12 @@
"textShape": "Shape",
"textImage": "Image",
"textChart": "Chart",
"textHyperlink": "Hyperlink"
"textHyperlink": "Hyperlink",
"textTheme": "Theme",
"textStyle": "Style",
"textLayout": "Layout",
"textTransition": "Transition",
"textBack": "Back"
}
}
}

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

@ -4,7 +4,7 @@ import { inject } from "mobx-react";
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings")
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout")
class MainController extends Component {
constructor(props) {
super(props)
@ -195,6 +195,17 @@ class MainController extends Component {
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_onUpdateLayout', (layouts) => {
console.log(layouts);
storeLayout.addArrayLayouts(layouts);
});
}
_onDocumentContentReady() {

3
apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx
View file

@ -11,8 +11,7 @@ class EditSlideController extends Component {
}
render () {
return (
<EditSlide
/>
<EditSlide />
)
}
}

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

@ -0,0 +1,16 @@
import React, { Component } from "react";
import Layout from "../../view/edit/Layout";
class LayoutController extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Layout />
);
}
}
export default LayoutController;

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

@ -1,29 +1,63 @@
.device-ios {
// Color Schemes
.color-schemes-menu {
cursor: pointer;
display: block;
background-color: #fff;
.item-inner {
justify-content: flex-start;
}
.color-schema-block {
display: flex;
}
.color {
min-width: 26px;
min-height: 26px;
margin: 0 2px 0 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.item-title {
margin-left: 20px;
color: #212121;
}
}
// Layout
.list-layouts {
margin: auto;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
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 {
display: none;
}
li.active .item-inner:after {
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
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>');
}
}
}
// Color Schemes
.color-schemes-menu {
cursor: pointer;
display: block;
background-color: #fff;
.item-inner {
justify-content: flex-start;
}
.color-schema-block {
display: flex;
}
.color {
min-width: 26px;
min-height: 26px;
margin: 0 2px 0 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.item-title {
margin-left: 20px;
color: #212121;
}
}

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

@ -21,28 +21,62 @@
align-items: center;
width: auto;
}
// Color Schemes
.color-schemes-menu {
cursor: pointer;
display: block;
background-color: #fff;
.item-inner {
justify-content: flex-start;
}
.color-schema-block {
display: flex;
}
.color {
min-width: 26px;
min-height: 26px;
margin: 0 2px 0 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.item-title {
margin-left: 20px;
color: #212121;
}
}
// Layout
.list-layouts {
margin: auto;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
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 {
display: none;
}
li.active .item-inner:after {
content: '';
position: absolute;
width: 22px;
height: 22px;
right: -5px;
bottom: -5px;
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>');
}
}
}
// Color Schemes
.color-schemes-menu {
cursor: pointer;
display: block;
background-color: #fff;
.item-inner {
justify-content: flex-start;
}
.color-schema-block {
display: flex;
}
.color {
min-width: 26px;
min-height: 26px;
margin: 0 2px 0 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.item-title {
margin-left: 20px;
color: #212121;
}
}

11
apps/presentationeditor/mobile/src/store/layout.js Normal file
View file

@ -0,0 +1,11 @@
import {action, observable} from 'mobx';
export class storeLayout {
@observable arrayLayouts;
@action addArrayLayouts(array) {
this.arrayLayouts = array;
}
}

4
apps/presentationeditor/mobile/src/store/mainStore.js
View file

@ -6,6 +6,7 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users';
import {storeApplicationSettings} from './applicationSettings';
import {storePresentationInfo} from './presentationInfo';
import {storePresentationSettings} from './presentationSettings';
import { storeLayout } from './layout';
// import {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
// import {storeShapeSettings} from "./shapeSettings";
@ -20,7 +21,8 @@ export const stores = {
users: new storeUsers(),
storeApplicationSettings: new storeApplicationSettings(),
storePresentationInfo: new storePresentationInfo(),
storePresentationSettings: new storePresentationSettings()
storePresentationSettings: new storePresentationSettings(),
storeLayout: new storeLayout()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),

7
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -7,6 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
import EditSlideController from "../../controller/edit/EditSlide";
import EditTextController from "../../controller/edit/EditText";
import LayoutController from "../../controller/edit/Layout";
//import EditShapeController from "../../controller/edit/EditShape";
//import EditImageController from "../../controller/edit/EditImage";
//import EditTableController from "../../controller/edit/EditTable";
@ -14,7 +15,10 @@ import EditTextController from "../../controller/edit/EditText";
//import EditLinkController from "../../controller/edit/EditLink";
const routes = [
{
path: '/layout/',
component: LayoutController
}
];
const EmptyEditLayout = () => {
@ -73,6 +77,7 @@ const EditTabs = props => {
const _t = t('View.Edit', {returnObjects: true});
const settings = props.storeFocusObjects.settings;
let editors = [];
if (settings.length < 1) {
editors.push({

13
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -1,13 +1,22 @@
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 {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, View} from 'framework7-react';
import {f7} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const EditSlide = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Fragment>
<List>
<ListItem title={_t.textTheme} link="#"></ListItem>
<ListItem title={_t.textLayout} link="/layout/"></ListItem>
<ListItem title={_t.textTransition} link="#"></ListItem>
<ListItem title={_t.textStyle} link="#"></ListItem>
</List>
</Fragment>
)
};

2
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

@ -7,7 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
const EditText = props => {
return (
<Fragment>
</Fragment>
)
};

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

@ -0,0 +1,34 @@
import React, {Fragment} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageLayout = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const store = props.storeLayout;
const arrayLayouts = JSON.parse(JSON.stringify(store.arrayLayouts));
console.log(arrayLayouts);
console.log(store);
return (
<Page>
<Navbar title={_t.textLayout} backLink={_t.textBack} />
{arrayLayouts.length ? (
<List className="list-layouts">
{arrayLayouts.map((elem, index) => {
return (
<ListItem key={index}>
<img src={elem.Image} style={{width: elem.Width, height: elem.height}} alt=""/>
</ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const Layout = inject("storeLayout")(observer(PageLayout));
export default Layout;