Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
3dad63735f
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 |
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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('<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 {
|
||||
&__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('<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>');
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<EditSlide
|
||||
<EditSlide
|
||||
onThemeClick={this.onThemeClick}
|
||||
onLayoutClick={this.onLayoutClick}
|
||||
onApplyAll={this.onApplyAll}
|
||||
changeDuration={this.changeDuration}
|
||||
onStartClick={this.onStartClick}
|
||||
onDelayCheck={this.onDelayCheck}
|
||||
onDelay={this.onDelay}
|
||||
onEffectClick={this.onEffectClick}
|
||||
onEffectTypeClick={this.onEffectTypeClick}
|
||||
onFillColor={this.onFillColor}
|
||||
onDuplicateSlide={this.onDuplicateSlide}
|
||||
onRemoveSlide={this.onRemoveSlide}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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(),
|
||||
|
|
|
|||
9
apps/presentationeditor/mobile/src/store/palette.js
Normal file
9
apps/presentationeditor/mobile/src/store/palette.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import {action, observable} from 'mobx';
|
||||
|
||||
export class storePalette {
|
||||
@observable customColors = [];
|
||||
|
||||
@action changeCustomColors (colors) {
|
||||
this.customColors = colors;
|
||||
}
|
||||
}
|
||||
64
apps/presentationeditor/mobile/src/store/slideSettings.js
Normal file
64
apps/presentationeditor/mobile/src/store/slideSettings.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Fragment>
|
||||
|
||||
<List>
|
||||
<ListItem title={_t.textTheme} link="/theme/" routeProps={{
|
||||
onThemeClick: props.onThemeClick
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textLayout} link="/layout/" routeProps={{
|
||||
onLayoutClick: props.onLayoutClick
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textTransition} link="/transition/" routeProps={{
|
||||
onEffectClick: props.onEffectClick,
|
||||
onEffectTypeClick: props.onEffectTypeClick,
|
||||
changeDuration: props.changeDuration,
|
||||
onStartClick: props.onStartClick,
|
||||
onDelayCheck: props.onDelayCheck,
|
||||
onDelay: props.onDelay,
|
||||
onApplyAll: props.onApplyAll
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textStyle} link="/style/" routeProps={{
|
||||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
|
||||
<ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
export {EditSlide};
|
||||
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 (
|
||||
<Page className="slide-theme">
|
||||
<Navbar title={_t.textTheme} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{arrayThemes.length ? (
|
||||
<List className="slide-theme__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={() => {
|
||||
storeSlideSettings.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={() => {
|
||||
storeSlideSettings.changeSlideThemeIndex(elem.Index);
|
||||
props.onThemeClick(elem.Index);
|
||||
}}>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page className="slide-layout">
|
||||
<Navbar title={_t.textLayout} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{arrayLayouts.length ? (
|
||||
<List className="slide-layout__list">
|
||||
{arrayLayouts.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}
|
||||
onClick={() => {
|
||||
storeSlideSettings.changeSlideLayoutIndex(index);
|
||||
props.onLayoutClick(index);
|
||||
}}>
|
||||
<img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page className="slide-transition">
|
||||
<Navbar title={_t.textTransition} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
<List>
|
||||
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
|
||||
_arrEffect,
|
||||
onEffectClick: props.onEffectClick,
|
||||
fillEffectTypes
|
||||
}}></ListItem>
|
||||
<ListItem link="/type/" title={_t.textType}
|
||||
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
|
||||
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
|
||||
_arrCurrentEffectTypes,
|
||||
onEffectTypeClick: props.onEffectTypeClick
|
||||
}}>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
|
||||
<div slot="after" className="splitter">
|
||||
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
|
||||
<p className="buttons-row">
|
||||
<span className="button" onClick={() => {
|
||||
let duration = parseInt(_effectDuration / 1000);
|
||||
duration = Math.max(0, --duration);
|
||||
props.changeDuration(duration);
|
||||
}}>-</span>
|
||||
<span className="button" onClick={() => {
|
||||
let duration = parseInt(_effectDuration / 1000);
|
||||
duration = Math.min(300, ++duration);
|
||||
props.changeDuration(duration);
|
||||
}}>+</span>
|
||||
</p>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem>
|
||||
<span>{_t.textStartOnClick}</span>
|
||||
<Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<span>{_t.textDelay}</span>
|
||||
<Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<div slot='inner' style={{width: '100%'}}>
|
||||
<Range min={0} max={300} step={1}
|
||||
value={stateRange}
|
||||
disabled={!isDelay}
|
||||
onRangeChange={(value) => {changeRange(value)}}
|
||||
onRangeChanged={(value) => {props.onDelay(value)}}
|
||||
></Range>
|
||||
</div>
|
||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||
{stateRange + ' ' + _t.textSec}
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
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 (
|
||||
<Page className="style-effect">
|
||||
<Navbar title={_t.textEffect} backLink={_t.textBack} />
|
||||
{_arrEffect.length ? (
|
||||
<List mediaList>
|
||||
{_arrEffect.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
|
||||
checked={elem.value === _effect} onChange={() => {
|
||||
storeSlideSettings.changeEffect(elem.value);
|
||||
let valueEffectTypes = props.fillEffectTypes(elem.value);
|
||||
storeSlideSettings.changeType(valueEffectTypes);
|
||||
props.onEffectClick(elem.value, valueEffectTypes);
|
||||
}}></ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page className="style-type">
|
||||
<Navbar title={_t.textType} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{_arrCurrentEffectTypes.length ? (
|
||||
<List mediaList>
|
||||
{_arrCurrentEffectTypes.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
|
||||
checked={elem.value === type} onChange={() => {
|
||||
storeSlideSettings.changeType(elem.value);
|
||||
props.onEffectTypeClick(elem.value, _effect);
|
||||
}}>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page>
|
||||
<Navbar title={_t.textFill} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
|
||||
<List>
|
||||
<ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
|
||||
onFillColor: props.onFillColor
|
||||
}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
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
|
||||
};
|
||||
|
|
@ -7,7 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
const EditText = props => {
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue