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 0000000000..3e3503d69c Binary files /dev/null and b/apps/common/mobile/resources/img/themes/themes.png differ diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 687c4ec45c..c0d4012bf4 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -35,27 +35,32 @@ } .button { --f7-button-text-color: @themeColor; + border: 1px solid @themeColor; + color: @themeColor; text-align: center; display: block; - border-radius: 2px; - line-height: 36px; + // border-radius: 2px; + line-height: 27px; + border-radius: 5px; + // line-height: 36px; box-sizing: border-box; appearance: none; background: 0 0; margin: 0; - height: 36px; + // height: 36px; + height: 29px; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; text-transform: uppercase; font-family: inherit; cursor: pointer; - min-width: 64px; - padding: 0 8px; + // min-width: 64px; + // padding: 0 8px; + padding: 0 10px; position: relative; overflow: hidden; outline: 0; - border: none; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transform: translate3d(0,0,0); diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 6edf01951f..7142690708 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -3,6 +3,7 @@ @black: #000000; @gray: #c4c4c4; @green: #4cd964; +@brightred: #f00; @background-normal: @white; @autoColor: @black; @@ -56,9 +57,207 @@ 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 { + &__list { + margin: auto; + ul { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-left: 18px; + padding-right: 18px; + padding-bottom: 14px; + } + } + .item-inner:after { + display: none; + } + .item-theme { + position: relative; + margin: 0; + box-shadow: 0 0 0 1px rgba(0,0,0,.15); + width: 85px; + height: 38px; + margin-top: 14px; + background-image: url(../img/themes/themes.png); + } + .item-theme.active:before { + content: ''; + position: absolute; + width: 22px; + height: 22px; + right: -5px; + bottom: -5px; + z-index: 1; + .encoded-svg-background(''); + } +} + +// Transition + +.slide-transition { + .splitter { + display: flex; + align-items: center; + color: @black; + label { + margin: 0 5px; + } + } + .buttons-row { + display: flex; + margin: 0; + min-width: 90px; + margin-left: 10px; + .button { + width: 100%; + } + .button:first-child { + border-radius: 5px 0 0 5px; + border-left-width: 1px; + border-left-style: solid; + } + .button:last-child { + border-radius: 0 5px 5px 0; + } + } +} + +.style-effect, .style-type { + .list .item-title { + font-weight: normal; + } +} + +.range-slider-delay { + width: 100%; + margin: 4px 0 5px 0; + appearance: none; + background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%); + background-position: center; + background-size: 100% 2px; + background-repeat: no-repeat; + outline: 0; + border: none; + box-sizing: content-box; + &:disabled { + opacity: .55; + } + &::-webkit-slider-thumb { + appearance: none; + height: 28px; + width: 28px; + border-radius: 50%; + background: @white; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, .3); + } + &::-ms-thumb { + appearance: none; + height: 28px; + width: 28px; + border-radius: 50%; + background: @white; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, .3); + } +} + +.list { + .apply-all, .duplicate-slide, .delete-slide { + border: 0; + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: center; + padding-right: 0; + } + .item-link .item-inner::before { + display: none; + } + } + .apply-all, .duplicate-slide { + color: @themeColor; + } + .delete-slide { + color: @brightred; + } +} + .item-color-auto { .color-auto { - width:22px; + width: 22px; height: 22px; background-color: @autoColor; } diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index e532842d21..6fb0b78307 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -86,7 +86,60 @@ "textShape": "Shape", "textImage": "Image", "textChart": "Chart", - "textHyperlink": "Hyperlink" + "textHyperlink": "Hyperlink", + "textTheme": "Theme", + "textStyle": "Style", + "textLayout": "Layout", + "textTransition": "Transition", + "textBack": "Back", + "textEffect": "Effect", + "textType": "Type", + "textDuration": "Duration", + "textStartOnClick": "Start On Click", + "textDelay": "Delay", + "textApplyAll": "Apply to All Slides", + "textNone": "None", + "textFade": "Fade", + "textPush": "Push", + "textWipe": "Wipe", + "textSplit": "Split", + "textUnCover": "UnCover", + "textCover": "Cover", + "textClock": "Clock", + "textZoom": "Zoom", + "textSmoothly": "Smoothly", + "textBlack": "Through Black", + "textLeft": "Left", + "textTop": "Top", + "textRight": "Right", + "textBottom": "Bottom", + "textTopLeft": "Top-Left", + "textTopRight": "Top-Right", + "textBottomLeft": "Bottom-Left", + "textBottomRight": "Bottom-Right", + "textVerticalIn": "Vertical In", + "textVerticalOut": "Vertical Out", + "textHorizontalIn": "Horizontal In", + "textHorizontalOut": "Horizontal Out", + "textClockwise": "Clockwise", + "textCounterclockwise": "Counterclockwise", + "textWedge": "Wedge", + "textZoomIn": "Zoom In", + "textZoomOut": "Zoom Out", + "textZoomRotate": "Zoom and Rotate", + "textSec": "s", + "textAddCustomColor": "Add Custom Color", + "textFill": "Fill", + "textCustomColor": "Custom Color", + "textDuplicateSlide": "Duplicate Slide", + "textDeleteSlide": "Delete Slide" + } + }, + "Common": { + "ThemeColorPalette": { + "textThemeColors": "Theme Colors", + "textStandartColors": "Standard Colors", + "textCustomColors": "Custom Colors" } } } \ 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 f8ed8780ce..7279259095 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -1,10 +1,11 @@ import React, { Component } from 'react' import { inject } from "mobx-react"; +import { f7 } from "framework7-react"; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings") +@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings") class MainController extends Component { constructor(props) { super(props) @@ -193,9 +194,32 @@ class MainController extends Component { // me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me)); const storeFocusObjects = this.props.storeFocusObjects; + const storeSlideSettings = this.props.storeSlideSettings; + this.api.asc_registerCallback('asc_onFocusObject', objects => { + // console.log(objects); storeFocusObjects.resetFocusObjects(objects); }); + + this.api.asc_registerCallback('asc_onInitEditorStyles', themes => { + // console.log(themes); + storeSlideSettings.addArrayThemes(themes); + }); + + this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => { + // console.log(themeId); + storeSlideSettings.changeSlideThemeIndex(themeId); + }); + + this.api.asc_registerCallback('asc_onUpdateLayout', layouts => { + // console.log(layouts); + storeSlideSettings.addArrayLayouts(layouts); + }); + + this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => { + Common.Utils.ThemeColor.setColors(colors, standart_colors); + }); + } _onDocumentContentReady() { @@ -207,6 +231,7 @@ class MainController extends Component { // me.api.asc_GetDefaultTableStyles && _.defer(function () {me.api.asc_GetDefaultTableStyles()}); Common.Gateway.documentReady(); + f7.emit('resize'); } _onOpenDocumentProgress(progress) { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx index 67aae44337..db1ae774c0 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx @@ -1,17 +1,157 @@ import React, {Component} from 'react'; import { f7 } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; -import {observer, inject} from "mobx-react"; - import { EditSlide } from '../../view/edit/EditSlide'; class EditSlideController extends Component { constructor (props) { super(props); + this.onDuplicateSlide = this.onDuplicateSlide.bind(this); + this.onRemoveSlide = this.onRemoveSlide.bind(this); } + + onThemeClick(index) { + const api = Common.EditorApi.get(); + api.ChangeTheme(index); + } + + onLayoutClick(index) { + const api = Common.EditorApi.get(); + api.ChangeLayout(index); + } + + onApplyAll() { + const api = Common.EditorApi.get(); + api.SlideTransitionApplyToAll(); + }; + + changeDuration(duration) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(), + _effectDuration = duration * 1000; + + timing.put_TransitionDuration(_effectDuration); + props.put_transition(timing); + api.SetSlideProps(props); + }; + + onStartClick(value) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(); + + timing.put_SlideAdvanceOnMouseClick(value); + props.put_transition(timing); + api.SetSlideProps(props); + }; + + onDelayCheck(value, _effectDelay) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(); + + timing.put_SlideAdvanceAfter(value); + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_transition(timing); + api.SetSlideProps(props); + }; + + onDelay(value) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(), + _effectDelay = value * 1000; + + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_transition(timing); + api.SetSlideProps(props); + }; + + onEffectClick(value, effectType) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(); + // _effectType = this.fillEffectTypes(value); + + timing.put_TransitionType(value); + timing.put_TransitionOption(effectType); + props.put_transition(timing); + api.SetSlideProps(props); + }; + + onEffectTypeClick(value, effect) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTransition(); + + timing.put_TransitionType(effect); + timing.put_TransitionOption(value); + props.put_transition(timing); + api.SetSlideProps(props); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + + let props = new Asc.CAscSlideProps(), + fill = new Asc.asc_CShapeFill(); + + if (color == 'transparent') { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL); + fill.put_fill(null); + } else { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID); + fill.put_fill(new Asc.asc_CFillSolid()); + fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color)); + } + + props.put_background(fill); + api.SetSlideProps(props); + + }; + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onDuplicateSlide() { + const api = Common.EditorApi.get(); + api.DublicateSlide(); + this.closeModal(); + }; + + onRemoveSlide() { + const api = Common.EditorApi.get(); + api.DeleteSlide(); + this.closeModal(); + }; + render () { return ( - ) } diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less index 55a23a31ea..dda9498560 100644 --- a/apps/presentationeditor/mobile/src/less/app-ios.less +++ b/apps/presentationeditor/mobile/src/less/app-ios.less @@ -1,29 +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; - } -} diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index 2a0550a096..82d6f5c706 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -22,27 +22,3 @@ 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; - } -} diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index c3be75a17e..12ac4d5171 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -52,4 +52,19 @@ export class storeFocusObjects { } return resultArr; } + + @computed get slideObject() { + const slides = []; + for (let object of this._focusObjects) { + if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) { + slides.push(object); + } + } + if (slides.length > 0) { + const object = slides[slides.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 4db12d1fd4..c8eb32009b 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -6,6 +6,8 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeApplicationSettings} from './applicationSettings'; import {storePresentationInfo} from './presentationInfo'; import {storePresentationSettings} from './presentationSettings'; +import { storePalette } from './palette'; +import { storeSlideSettings } from './slideSettings'; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; @@ -20,7 +22,9 @@ export const stores = { users: new storeUsers(), storeApplicationSettings: new storeApplicationSettings(), storePresentationInfo: new storePresentationInfo(), - storePresentationSettings: new storePresentationSettings() + storePresentationSettings: new storePresentationSettings(), + storeSlideSettings: new storeSlideSettings(), + storePalette: new storePalette() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), diff --git a/apps/presentationeditor/mobile/src/store/palette.js b/apps/presentationeditor/mobile/src/store/palette.js new file mode 100644 index 0000000000..01ec9aa246 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/palette.js @@ -0,0 +1,9 @@ +import {action, observable} from 'mobx'; + +export class storePalette { + @observable customColors = []; + + @action changeCustomColors (colors) { + this.customColors = colors; + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/slideSettings.js b/apps/presentationeditor/mobile/src/store/slideSettings.js new file mode 100644 index 0000000000..0899b7bbcc --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/slideSettings.js @@ -0,0 +1,64 @@ +import {action, observable, computed} from 'mobx'; + +export class storeSlideSettings { + + @observable arrayLayouts; + @observable slideLayoutIndex = -1; + @observable fillColor = undefined; + @observable arrayThemes; + @observable slideThemeIndex; + @observable effect; + @observable type; + + @action getFillColor (slideObject) { + + let color = 'transparent'; + let fill = slideObject.get_background(), + fillType = fill.get_type(); + let sdkColor; + + if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { + fill = fill.get_fill(); + sdkColor = fill.get_color(); + + if (sdkColor) { + if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()}; + } else { + color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()); + } + } + } + + this.fillColor = color; + return color; + } + + @action changeFillColor (color) { + this.fillColor = color; + } + + @action addArrayLayouts(array) { + this.arrayLayouts = array; + } + + @action changeSlideLayoutIndex(index) { + this.slideLayoutIndex = index; + } + + @action addArrayThemes(array) { + this.arrayThemes = array; + } + + @action changeSlideThemeIndex(index) { + this.slideThemeIndex = index; + } + + @action changeEffect(value) { + this.effect = value; + } + + @action changeType(value) { + this.type = value; + } +} \ 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 8c9ccd45cc..795d2106c6 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -7,6 +7,8 @@ import {Device} from '../../../../../common/mobile/utils/device'; import EditSlideController from "../../controller/edit/EditSlide"; import EditTextController from "../../controller/edit/EditText"; +import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; + //import EditShapeController from "../../controller/edit/EditShape"; //import EditImageController from "../../controller/edit/EditImage"; //import EditTableController from "../../controller/edit/EditTable"; @@ -14,7 +16,34 @@ import EditTextController from "../../controller/edit/EditText"; //import EditLinkController from "../../controller/edit/EditLink"; const routes = [ - + { + path: '/layout/', + component: Layout + }, + { + path: '/theme/', + component: Theme + }, + { + path: '/transition/', + component: Transition + }, + { + path: '/effect/', + component: Effect + }, + { + path: '/type/', + component: Type + }, + { + path: '/style/', + component: StyleFillColor + }, + { + path: '/edit-custom-color/', + component: CustomFillColor + } ]; const EmptyEditLayout = () => { @@ -73,6 +102,7 @@ const EditTabs = props => { const _t = t('View.Edit', {returnObjects: true}); const settings = props.storeFocusObjects.settings; + let editors = []; if (settings.length < 1) { editors.push({ diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx index d9b7009b15..fdfd5ea0af 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -1,15 +1,455 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; +import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range} from 'framework7-react'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; +// import {Device} from '../../../../../common/mobile/utils/device'; const EditSlide = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + return ( - + + + + + + + + {_t.textDuplicateSlide} + {_t.textDeleteSlide} + ) }; -export {EditSlide}; \ No newline at end of file +const PageTheme = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storeSlideSettings = props.storeSlideSettings; + const arrayThemes = storeSlideSettings.arrayThemes; + const slideThemeIndex = storeSlideSettings.slideThemeIndex; + const defaultThemes = arrayThemes[0]; + const docThemes = arrayThemes[1]; + + // console.log(slideThemeIndex); + // console.log(arrayThemes); + + return ( + + + + + + + {arrayThemes.length ? ( + + {defaultThemes.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + {docThemes.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + + ) : null} + + ); +}; + +const PageLayout = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storeFocusObjects = props.storeFocusObjects; + const storeSlideSettings = props.storeSlideSettings; + storeSlideSettings.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex()); + const arrayLayouts = storeSlideSettings.arrayLayouts; + const slideLayoutIndex = storeSlideSettings.slideLayoutIndex; + + // console.log(slideLayoutIndex); + // console.log(arrayLayouts); + + return ( + + + + + + + {arrayLayouts.length ? ( + + {arrayLayouts.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideLayoutIndex(index); + props.onLayoutClick(index); + }}> + + + ) + })} + + ) : null} + + ); +}; + +const PageTransition = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const _arrEffect = [ + {displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None}, + {displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade}, + {displayValue: _t.textPush, value: Asc.c_oAscSlideTransitionTypes.Push}, + {displayValue: _t.textWipe, value: Asc.c_oAscSlideTransitionTypes.Wipe}, + {displayValue: _t.textSplit, value: Asc.c_oAscSlideTransitionTypes.Split}, + {displayValue: _t.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover}, + {displayValue: _t.textCover, value: Asc.c_oAscSlideTransitionTypes.Cover}, + {displayValue: _t.textClock, value: Asc.c_oAscSlideTransitionTypes.Clock}, + {displayValue: _t.textZoom, value: Asc.c_oAscSlideTransitionTypes.Zoom} + ]; + const _arrEffectType = [ + {displayValue: _t.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly}, + {displayValue: _t.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black}, + {displayValue: _t.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left}, + {displayValue: _t.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top}, + {displayValue: _t.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right}, + {displayValue: _t.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom}, + {displayValue: _t.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft}, + {displayValue: _t.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight}, + {displayValue: _t.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft}, + {displayValue: _t.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight}, + {displayValue: _t.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn}, + {displayValue: _t.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut}, + {displayValue: _t.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn}, + {displayValue: _t.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut}, + {displayValue: _t.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise}, + {displayValue: _t.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise}, + {displayValue: _t.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge}, + {displayValue: _t.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In}, + {displayValue: _t.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out}, + {displayValue: _t.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate} + ]; + + let _arrCurrentEffectTypes = []; + + const fillEffectTypes = type => { + _arrCurrentEffectTypes = []; + switch (type) { + case Asc.c_oAscSlideTransitionTypes.Fade: + _arrCurrentEffectTypes.push(_arrEffectType[0], _arrEffectType[1]); + break; + case Asc.c_oAscSlideTransitionTypes.Push: + _arrCurrentEffectTypes = _arrEffectType.slice(2, 6); + break; + case Asc.c_oAscSlideTransitionTypes.Wipe: + _arrCurrentEffectTypes = _arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Split: + _arrCurrentEffectTypes = _arrEffectType.slice(10, 14); + break; + case Asc.c_oAscSlideTransitionTypes.UnCover: + _arrCurrentEffectTypes = _arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Cover: + _arrCurrentEffectTypes = _arrEffectType.slice(2, 10); + break; + case Asc.c_oAscSlideTransitionTypes.Clock: + _arrCurrentEffectTypes = _arrEffectType.slice(14, 17); + break; + case Asc.c_oAscSlideTransitionTypes.Zoom: + _arrCurrentEffectTypes = _arrEffectType.slice(17); + break; + } + return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1; + }; + + const getEffectName = effect => { + for (var i=0; i < _arrEffect.length; i++) { + if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue; + } + return ''; + }; + + const getEffectTypeName = type => { + for (var i=0; i < _arrCurrentEffectTypes.length; i++) { + if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue; + } + return ''; + }; + + const storeFocusObjects = props.storeFocusObjects; + const storeSlideSettings = props.storeSlideSettings; + const transitionObj = storeFocusObjects.slideObject.get_transition(); + + if(!storeSlideSettings.effect) { + storeSlideSettings.changeEffect(transitionObj.get_TransitionType()); + } + + const _effect = storeSlideSettings.effect; + const valueEffectTypes = fillEffectTypes(_effect); + + if(!storeSlideSettings.type) { + storeSlideSettings.changeType(valueEffectTypes); + } + + let _effectDelay = transitionObj.get_SlideAdvanceDuration(); + + const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0); + const isDelay = transitionObj.get_SlideAdvanceAfter(); + const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick(); + const nameEffect = getEffectName(_effect); + + const _effectType = transitionObj.get_TransitionOption(); + const nameEffectType = getEffectTypeName(_effectType); + const _effectDuration = transitionObj.get_TransitionDuration(); + + return ( + + + + + + + + + + + +
+ +

+ { + let duration = parseInt(_effectDuration / 1000); + duration = Math.max(0, --duration); + props.changeDuration(duration); + }}>- + { + let duration = parseInt(_effectDuration / 1000); + duration = Math.min(300, ++duration); + props.changeDuration(duration); + }}>+ +

+
+ + + + + {_t.textStartOnClick} + {props.onStartClick(!isStartOnClick)}} /> + + + {_t.textDelay} + {props.onDelayCheck(!isDelay, _effectDelay)}} /> + + +
+ {changeRange(value)}} + onRangeChanged={(value) => {props.onDelay(value)}} + > +
+
+ {stateRange + ' ' + _t.textSec} +
+ + + + {_t.textApplyAll} + + + ); +}; + + +const PageEffect = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storeSlideSettings = props.storeSlideSettings; + const _effect = storeSlideSettings.effect; + const _arrEffect = props._arrEffect; + + return ( + + + {_arrEffect.length ? ( + + {_arrEffect.map((elem, index) => { + return ( + { + storeSlideSettings.changeEffect(elem.value); + let valueEffectTypes = props.fillEffectTypes(elem.value); + storeSlideSettings.changeType(valueEffectTypes); + props.onEffectClick(elem.value, valueEffectTypes); + }}> + ) + })} + + ) : null} + + ); +}; + +const PageType= props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const _arrCurrentEffectTypes = props._arrCurrentEffectTypes; + const storeSlideSettings = props.storeSlideSettings; + const _effect = storeSlideSettings.effect; + const type = storeSlideSettings.type; + + return ( + + + + + + + {_arrCurrentEffectTypes.length ? ( + + {_arrCurrentEffectTypes.map((elem, index) => { + return ( + { + storeSlideSettings.changeType(elem.value); + props.onEffectTypeClick(elem.value, _effect); + }}> + + ) + })} + + ) : null} + + ); +}; + +const PageFillColor = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storeFocusObjects = props.storeFocusObjects; + const slideObject = storeFocusObjects.slideObject; + const storePalette = props.storePalette; + const storeSlideSettings = props.storeSlideSettings; + const customColors = storePalette.customColors; + const fillColor = storeSlideSettings.fillColor ? storeSlideSettings.fillColor : storeSlideSettings.getFillColor(slideObject); + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeSlideSettings.changeFillColor(newColor); + } else { + props.onFillColor(color); + storeSlideSettings.changeFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-custom-color/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + let fillColor = props.storeSlideSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeSlideSettings.changeFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const Theme = inject("storeSlideSettings")(observer(PageTheme)); +const Layout = inject("storeSlideSettings", "storeFocusObjects")(observer(PageLayout)); +const Transition = inject("storeSlideSettings", "storeFocusObjects")(observer(PageTransition)); +const Type = inject("storeSlideSettings", "storeFocusObjects")(observer(PageType)); +const Effect = inject("storeSlideSettings", "storeFocusObjects")(observer(PageEffect)); +const StyleFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageFillColor)); +const CustomFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor)); + +export { + EditSlide, + Theme, + Layout, + Transition, + Type, + Effect, + StyleFillColor, + CustomFillColor +}; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index 76cd8df007..96a0fd91de 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -7,7 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device'; const EditText = props => { return ( - + ) };