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

[PE mobile] Maked Themes and Layout Settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-24 20:23:09 +03:00
parent a9b9ec6c88
commit dbd4ae73dd
17 changed files with 311 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apps/common/mobile/resources/img/themes/themes.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

110
apps/common/mobile/resources/less/common.less
View file

@ -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>');
}
}

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

@ -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"
}
}
}

20
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", "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
apps/presentationeditor/mobile/src/controller/edit/Layout.jsx
View file

@ -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
View 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;

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

@ -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;

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

@ -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;
}
}
}

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

@ -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;
}
}
}

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

@ -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
View 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
View 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;
// }
}

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

@ -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
}
];

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

@ -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>

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

@ -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
View 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
View 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;