[PE mobile] Make layout settings

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

View file

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

View file

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

View file

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

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;

View file

@ -1,29 +1,63 @@
.device-ios { .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;
}
}

View file

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

View file

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

View file

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

View file

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

View file

@ -1,13 +1,22 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
const EditSlide = props => { const EditSlide = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return ( return (
<Fragment> <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> </Fragment>
) )
}; };

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;