[PE mobile] Make layout settings
This commit is contained in:
parent
62e21edc83
commit
db867796e0
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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() {
|
||||||
|
|
|
@ -11,8 +11,7 @@ class EditSlideController extends Component {
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<EditSlide
|
<EditSlide />
|
||||||
/>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
11
apps/presentationeditor/mobile/src/store/layout.js
Normal file
11
apps/presentationeditor/mobile/src/store/layout.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import {action, observable} from 'mobx';
|
||||||
|
|
||||||
|
export class storeLayout {
|
||||||
|
|
||||||
|
@observable arrayLayouts;
|
||||||
|
|
||||||
|
@action addArrayLayouts(array) {
|
||||||
|
this.arrayLayouts = array;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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(),
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
34
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
Normal file
34
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
Normal 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;
|
Loading…
Reference in a new issue