diff --git a/apps/common/mobile/resources/img/themes/themes.png b/apps/common/mobile/resources/img/themes/themes.png new file mode 100644 index 000000000..3e3503d69 Binary files /dev/null and b/apps/common/mobile/resources/img/themes/themes.png differ diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index d2ca0f40b..fbd950316 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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(''); + } + .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(''); + } +} + diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 2b0bdb7b8..5c4503d75 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -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" } } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index d864e977e..0d0693568 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -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() { diff --git a/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx b/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx index 572b47a70..acc725bc6 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx @@ -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() { diff --git a/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx b/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx new file mode 100644 index 000000000..5f3d23392 --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx @@ -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 ( + + ); + } +} + +export default ThemeController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx new file mode 100644 index 000000000..61722f0da --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx @@ -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 ( + + ); + } +} + +export default TransitionController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less index 62aa74165..dda949856 100644 --- a/apps/presentationeditor/mobile/src/less/app-ios.less +++ b/apps/presentationeditor/mobile/src/less/app-ios.less @@ -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(''); - } - .active .item-inner:before { - opacity: 1; - } - } - + } diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index 8367a79ab..b52ae72f9 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -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(''); - } - .active .item-inner:before { - opacity: 1; - } - } } diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index ceb746a37..a022c8999 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -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(), diff --git a/apps/presentationeditor/mobile/src/store/theme.js b/apps/presentationeditor/mobile/src/store/theme.js new file mode 100644 index 000000000..226efc562 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/theme.js @@ -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; + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/transition.js b/apps/presentationeditor/mobile/src/store/transition.js new file mode 100644 index 000000000..44d3308b9 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/transition.js @@ -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; + // } + +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 1ff57fb59..96c486499 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -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 } ]; diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx index d342e3e9f..39897381f 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -12,9 +12,9 @@ const EditSlide = props => { return ( - + - + diff --git a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx b/apps/presentationeditor/mobile/src/view/edit/Layout.jsx index 0f05a8cde..bb2ed0d5a 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Layout.jsx @@ -12,10 +12,7 @@ const PageLayout = props => { console.log(slideLayoutIndex); console.log(arrayLayouts); - console.log(store); - - - + return ( diff --git a/apps/presentationeditor/mobile/src/view/edit/Theme.jsx b/apps/presentationeditor/mobile/src/view/edit/Theme.jsx new file mode 100644 index 000000000..1e80f8d0b --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/Theme.jsx @@ -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 ( + + + + + + + {arrayThemes.length ? ( + + {defaultThemes.map((elem, index) => { + return ( + { + store.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + {docThemes.map((elem, index) => { + return ( + { + store.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + + ) : null} + + ); +}; + +const Theme = inject("storeTheme")(observer(PageTheme)); + +export default Theme; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Transition.jsx b/apps/presentationeditor/mobile/src/view/edit/Transition.jsx new file mode 100644 index 000000000..9f4630bd0 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/Transition.jsx @@ -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 ( + + + + + + + + + + + + + + ); +}; + +const Transition = inject("storeTransition")(observer(PageTransition)); + +export default Transition; \ No newline at end of file