[PE mobile] Maked Themes and Layout Settings
This commit is contained in:
parent
a9b9ec6c88
commit
dbd4ae73dd
BIN
apps/common/mobile/resources/img/themes/themes.png
Normal file
BIN
apps/common/mobile/resources/img/themes/themes.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 41 KiB |
|
@ -44,3 +44,113 @@
|
|||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
// Color Schemes
|
||||
|
||||
.color-schemes-menu {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-color: @white;
|
||||
.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
|
||||
|
||||
.slide-layout {
|
||||
.list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 12px;
|
||||
img {
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
.item-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.item-inner:before {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme
|
||||
|
||||
.slide-theme .item-theme {
|
||||
background-image: url(../img/themes/themes.png);
|
||||
}
|
||||
|
||||
.slide-theme {
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.item-theme {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
||||
width: 85px;
|
||||
height: 38px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.item-theme.active:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
z-index: 1;
|
||||
.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>');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -86,7 +86,13 @@
|
|||
"textStyle": "Style",
|
||||
"textLayout": "Layout",
|
||||
"textTransition": "Transition",
|
||||
"textBack": "Back"
|
||||
"textBack": "Back",
|
||||
"textEffect": "Effect",
|
||||
"textType": "Type",
|
||||
"textDuration": "Duration",
|
||||
"textStartOnClick": "Start On Click",
|
||||
"textDelay": "Delay",
|
||||
"textApplyAll": "Apply to All Slides"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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", "storeLayout")
|
||||
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme")
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
@ -195,7 +195,6 @@ class MainController extends Component {
|
|||
const storeLayout = this.props.storeLayout;
|
||||
|
||||
this.api.asc_registerCallback('asc_onFocusObject', objects => {
|
||||
|
||||
console.log(objects);
|
||||
storeFocusObjects.resetFocusObjects(objects);
|
||||
|
||||
|
@ -208,14 +207,23 @@ class MainController extends Component {
|
|||
}
|
||||
});
|
||||
|
||||
// this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
|
||||
// console.log(themeId);
|
||||
// });
|
||||
const storeTheme = this.props.storeTheme;
|
||||
|
||||
this.api.asc_registerCallback('asc_onUpdateLayout', (layouts) => {
|
||||
this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
|
||||
// console.log(themes);
|
||||
storeTheme.addArrayThemes(themes);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
|
||||
// console.log(themeId);
|
||||
storeTheme.changeSlideThemeIndex(themeId);
|
||||
});
|
||||
|
||||
this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
|
||||
// console.log(layouts);
|
||||
storeLayout.addArrayLayouts(layouts);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
_onDocumentContentReady() {
|
||||
|
|
|
@ -8,13 +8,7 @@ class LayoutController extends Component {
|
|||
|
||||
onLayoutClick(index) {
|
||||
const api = Common.EditorApi.get();
|
||||
let props = new Asc.CAscSlideProps();
|
||||
console.log(api);
|
||||
|
||||
props.LayoutIndex = index;
|
||||
api.SetSlideProps(props);
|
||||
|
||||
console.log(props);
|
||||
api.ChangeLayout(index);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
21
apps/presentationeditor/mobile/src/controller/edit/Theme.jsx
Normal file
21
apps/presentationeditor/mobile/src/controller/edit/Theme.jsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React, { Component } from "react";
|
||||
import Theme from "../../view/edit/Theme";
|
||||
|
||||
class ThemeController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
onThemeClick(index) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.ChangeTheme(index);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Theme onThemeClick={this.onThemeClick} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ThemeController;
|
|
@ -0,0 +1,16 @@
|
|||
import React, { Component } from "react";
|
||||
import Transition from "../../view/edit/Transition";
|
||||
|
||||
class TransitionController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Transition />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TransitionController;
|
|
@ -1,72 +1,6 @@
|
|||
|
||||
.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
|
||||
|
||||
.slide-layout {
|
||||
.list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 12px;
|
||||
img {
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
.item-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.item-inner:before {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -22,70 +22,4 @@
|
|||
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
|
||||
|
||||
.slide-layout {
|
||||
.list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 12px;
|
||||
img {
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
.item-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.item-inner:before {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,6 +7,8 @@ import {storeApplicationSettings} from './applicationSettings';
|
|||
import {storePresentationInfo} from './presentationInfo';
|
||||
import {storePresentationSettings} from './presentationSettings';
|
||||
import { storeLayout } from './layout';
|
||||
import { storeTransition } from './transition';
|
||||
import { storeTheme } from './theme';
|
||||
// import {storeTextSettings} from "./textSettings";
|
||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||
// import {storeShapeSettings} from "./shapeSettings";
|
||||
|
@ -22,7 +24,9 @@ export const stores = {
|
|||
storeApplicationSettings: new storeApplicationSettings(),
|
||||
storePresentationInfo: new storePresentationInfo(),
|
||||
storePresentationSettings: new storePresentationSettings(),
|
||||
storeLayout: new storeLayout()
|
||||
storeLayout: new storeLayout(),
|
||||
storeTransition: new storeTransition(),
|
||||
storeTheme: new storeTheme()
|
||||
// storeTextSettings: new storeTextSettings(),
|
||||
// storeParagraphSettings: new storeParagraphSettings(),
|
||||
// storeShapeSettings: new storeShapeSettings(),
|
||||
|
|
15
apps/presentationeditor/mobile/src/store/theme.js
Normal file
15
apps/presentationeditor/mobile/src/store/theme.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
import {action, observable} from 'mobx';
|
||||
|
||||
export class storeTheme {
|
||||
|
||||
@observable arrayThemes;
|
||||
@observable slideThemeIndex;
|
||||
|
||||
@action addArrayThemes(array) {
|
||||
this.arrayThemes = array;
|
||||
}
|
||||
|
||||
@action changeSlideThemeIndex(index) {
|
||||
this.slideThemeIndex = index;
|
||||
}
|
||||
}
|
16
apps/presentationeditor/mobile/src/store/transition.js
Normal file
16
apps/presentationeditor/mobile/src/store/transition.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
import {action, observable} from 'mobx';
|
||||
|
||||
export class storeTransition {
|
||||
|
||||
// @observable arrayLayouts;
|
||||
// @observable slideLayoutIndex = -1;
|
||||
|
||||
// @action addArrayLayouts(array) {
|
||||
// this.arrayLayouts = array;
|
||||
// }
|
||||
|
||||
// @action changeSlideLayoutIndex(index) {
|
||||
// this.slideLayoutIndex = index;
|
||||
// }
|
||||
|
||||
}
|
|
@ -8,6 +8,8 @@ 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 TransitionController from '../../controller/edit/Transition';
|
||||
import ThemeController from '../../controller/edit/Theme';
|
||||
//import EditShapeController from "../../controller/edit/EditShape";
|
||||
//import EditImageController from "../../controller/edit/EditImage";
|
||||
//import EditTableController from "../../controller/edit/EditTable";
|
||||
|
@ -18,6 +20,14 @@ const routes = [
|
|||
{
|
||||
path: '/layout/',
|
||||
component: LayoutController
|
||||
},
|
||||
{
|
||||
path: '/theme/',
|
||||
component: ThemeController
|
||||
},
|
||||
{
|
||||
path: '/transition/',
|
||||
component: TransitionController
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -12,9 +12,9 @@ const EditSlide = props => {
|
|||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textTheme} link="#"></ListItem>
|
||||
<ListItem title={_t.textTheme} link="/theme/"></ListItem>
|
||||
<ListItem title={_t.textLayout} link="/layout/"></ListItem>
|
||||
<ListItem title={_t.textTransition} link="#"></ListItem>
|
||||
<ListItem title={_t.textTransition} link="/transition/"></ListItem>
|
||||
<ListItem title={_t.textStyle} link="#"></ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
|
|
|
@ -12,10 +12,7 @@ const PageLayout = props => {
|
|||
|
||||
console.log(slideLayoutIndex);
|
||||
console.log(arrayLayouts);
|
||||
console.log(store);
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Page className="slide-layout">
|
||||
<Navbar title={_t.textLayout} backLink={_t.textBack}>
|
||||
|
|
57
apps/presentationeditor/mobile/src/view/edit/Theme.jsx
Normal file
57
apps/presentationeditor/mobile/src/view/edit/Theme.jsx
Normal file
|
@ -0,0 +1,57 @@
|
|||
import React from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const PageTheme = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Edit", { returnObjects: true });
|
||||
const store = props.storeTheme;
|
||||
const arrayThemes = JSON.parse(JSON.stringify(store.arrayThemes));
|
||||
const slideThemeIndex = store.slideThemeIndex;
|
||||
const defaultThemes = arrayThemes[0];
|
||||
const docThemes = arrayThemes[1];
|
||||
|
||||
console.log(slideThemeIndex);
|
||||
console.log(arrayThemes);
|
||||
|
||||
return (
|
||||
<Page className="slide-theme">
|
||||
<Navbar title={_t.textTheme} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{arrayThemes.length ? (
|
||||
<List>
|
||||
{defaultThemes.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
|
||||
style={{backgroundPosition: "0 " + index * -38 + "px"}}
|
||||
onClick={() => {
|
||||
store.changeSlideThemeIndex(elem.Index);
|
||||
props.onThemeClick(elem.Index);
|
||||
}}>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
{docThemes.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
|
||||
style={{backgroundPosition: "0 -0px", backgroundImage: "url(" + elem.ThemeInfo.Thumbnail + ")"}}
|
||||
onClick={() => {
|
||||
store.changeSlideThemeIndex(elem.Index);
|
||||
props.onThemeClick(elem.Index);
|
||||
}}>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const Theme = inject("storeTheme")(observer(PageTheme));
|
||||
|
||||
export default Theme;
|
35
apps/presentationeditor/mobile/src/view/edit/Transition.jsx
Normal file
35
apps/presentationeditor/mobile/src/view/edit/Transition.jsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
import React, {Fragment} from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { Page, Navbar, List, ListItem, BlockTitle, NavRight, Link } from "framework7-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const PageTransition = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Edit", { returnObjects: true });
|
||||
// const storeInfo = props.storePresentationInfo;
|
||||
// const dataApp = props.getAppProps();
|
||||
// const dataModified = props.getModified;
|
||||
// const dataModifiedBy = props.getModifiedBy;
|
||||
// const creators = props.getCreators;
|
||||
// const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textTransition} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem link="#" title={_t.textEffect} after="None"></ListItem>
|
||||
<ListItem link="#" title={_t.textType}></ListItem>
|
||||
<ListItem link="#" title={_t.textDuration}></ListItem>
|
||||
</List>
|
||||
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
const Transition = inject("storeTransition")(observer(PageTransition));
|
||||
|
||||
export default Transition;
|
Loading…
Reference in a new issue