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

Merge branch 'feature/mobile-apps-on-reactjs'

Browse source
This commit is contained in:
Maxim Kadushkin 2020-12-28 23:52:56 +03:00
parent 83cb7be8eb 25150e6f36
commit 1ad2e2a634
7 changed files with 201 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { ListItem, List } from 'framework7-react';
import { f7 } from 'framework7-react';
import React, { useState, useEffect } from 'react';
import { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next';
const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
@ -12,8 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => {
return(
<a key={`tc-${rowIndex}-${index}`}
className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''}
data-effectvalue={effect.effectValue}
className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId)}}
></a>
@ -47,11 +45,11 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
)
};
const DynamicColors = ({ options, onColorClick, curColor }) => {
const dynamicColors = [];//dynamiColors;
const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
const colors = customColors.length > 0 ? customColors : [];
const emptyItems = [];
if (dynamicColors.length < options.dynamiccolors) {
for (let i = dynamicColors.length; i < options.dynamiccolors; i++) {
if (colors.length < options.customcolors) {
for (let i = colors.length; i < options.customcolors; i++) {
emptyItems.push(<a className='empty-color'
key={`dc-empty${i}`}
onClick={() => {onColorClick('empty')}}
@ -60,7 +58,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
}
return (
<div className='palette'>
{dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => {
{colors && colors.length > 0 && colors.map((color, index) => {
return(
<a key={`dc-${index}`}
className={curColor && curColor === color ? 'active' : ''}
@ -78,17 +76,17 @@ const ThemeColorPalette = props => {
const {t} = useTranslation();
const _t = t('Common.ThemeColorPalette', {returnObjects: true});
const options = {
dynamiccolors: props.dynamiccolors || 10,
customcolors: props.customcolors || 10,
standardcolors: props.standardcolors || 10,
themecolors: props.themecolors || 10,
effects: props.effects || 5,
allowReselect: props.allowReselect !== false,
//allowReselect: props.allowReselect !== false,
transparent: props.transparent || false,
value: props.value || '000000',
cls: props.cls || ''
};
const curColor = props.curColor;
const changeCurColor = props.changeCurColor;
console.log(curColor);
const themeColors = [];
const effectColors = Common.Utils.ThemeColor.getEffectColors();
let row = -1;
@ -101,39 +99,76 @@ const ThemeColorPalette = props => {
});
const standartColors = Common.Utils.ThemeColor.getStandartColors();
// custom color
//const dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
//dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : [];
const onColorClick = ( color, effectId ) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
changeCurColor({color: color, effectId: effectId});
} else {
changeCurColor(color);
}
} else {
// open custom color menu
}
};
let customColors = props.customColors;
if (customColors.length < 1) {
customColors = localStorage.getItem('mobile-custom-colors');
customColors = customColors ? customColors.toLowerCase().split(',') : [];
}
return (
<div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
<List>
<ListItem className='theme-colors'>
<div>{ _t.textThemeColors }</div>
<ThemeColors themeColors={themeColors} onColorClick={onColorClick} curColor={curColor}/>
<ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem>
<ListItem className='standart-colors'>
<div>{ _t.textStandartColors }</div>
<StandartColors options={options} standartColors={standartColors} onColorClick={onColorClick} curColor={curColor}/>
<StandartColors options={options} standartColors={standartColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem>
<ListItem className='dynamic-colors'>
<div>{ _t.textCustomColors }</div>
<DynamicColors options={options} onColorClick={onColorClick} curColor={curColor}/>
<CustomColors options={options} customColors={customColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem>
</List>
</div>
)
};
export default ThemeColorPalette;
const CustomColorPicker = props => {
let currentColor = props.currentColor;
if (currentColor === 'auto') {
currentColor = '000000';
}
const countDynamicColors = props.countdynamiccolors || 10;
const [stateColor, setColor] = useState('#' + currentColor);
useEffect(() => {
if (document.getElementsByClassName('color-picker-wheel').length < 1) {
const colorPicker = f7.colorPicker.create({
containerEl: document.getElementsByClassName('color-picker-container')[0],
value: {
hex: '#' + currentColor
},
on: {
change: function (value) {
setColor(value.getValue().hex);
}
}
});
}
});
const addNewColor = (color) => {
let colors = localStorage.getItem('mobile-custom-colors');
colors = colors ? colors.split(',') : [];
const newColor = color.slice(1);
if (colors.push(newColor) > countDynamicColors) colors.shift(); // 10 - dynamiccolors
localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase());
props.onAddNewColor && props.onAddNewColor(colors, newColor);
};
return(
<div id='color-picker'>
<div className='color-picker-container'></div>
<div className='right-block'>
<div className='color-hsb-preview'>
<div className='new-color-hsb-preview' style={{backgroundColor: stateColor}}></div>
<div className='current-color-hsb-preview' style={{backgroundColor: '#' + currentColor}}></div>
</div>
<a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
<Icon icon={'icon-plus'} slot="media" />
</a>
</div>
</div>
)
};
export { ThemeColorPalette, CustomColorPicker };

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

@ -49,7 +49,7 @@
.color-auto {
width:22px;
height: 22px;
background-color: #000;
background-color: @black;
}
&.active {
.color-auto {
@ -98,3 +98,53 @@
}
}
}
#color-picker {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 300px;
margin: 0 auto;
margin-top: 4px;
.color-picker-container {
width: calc(100% - 94px);
position: relative;
max-width: 100%;
height: auto;
font-size: 0;
.color-picker-module-wheel {
margin: 0;
}
}
.right-block {
margin-left: 20px;
.color-hsb-preview {
width: 72px;
height: 72px;
border-radius: 100px;
overflow: hidden;
border: 1px solid @gray;
.new-color-hsb-preview, .current-color-hsb-preview {
width: 100%;
height: 36px;
}
}
.button-round {
height: 72px;
width: 72px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: @white;
box-shadow: 0 4px 4px rgba(0,0,0,.25);
border-color: transparent;
margin-top: 20px;
.icon {
height: 30px;
width: 30px;
}
}
}
}

3
apps/documenteditor/mobile/locale/en.json
View file

@ -174,7 +174,8 @@
"textStartAt": "Start at",
"textFontColors": "Font Colors",
"textAutomatic": "Automatic",
"textAddCustomColor": "Add Custom Color"
"textAddCustomColor": "Add Custom Color",
"textCustomColor": "Custom Color"
},
"Add": {
"textTable": "Table",

6
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

@ -40,6 +40,11 @@ class EditTextController extends Component {
api.put_TextColor(color);
}
onTextColor(color) {
const api = Common.EditorApi.get();
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
}
toggleBold(value) {
const api = Common.EditorApi.get();
if (api) {
@ -182,6 +187,7 @@ class EditTextController extends Component {
<EditText changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}

7
apps/documenteditor/mobile/src/store/textSettings.js
View file

@ -14,6 +14,7 @@ export class storeTextSettings {
@observable typeNumbers = undefined;
@observable paragraphAlign = undefined;
@observable textColor = undefined;
@observable customTextColors = [];
@observable lineSpacing = undefined;
@observable backgroundColor = undefined;
@ -97,7 +98,7 @@ export class storeTextSettings {
let value;
if (color) {
if (color.get_auto()) {
value = '000000';
value = 'auto';
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
@ -112,6 +113,10 @@ export class storeTextSettings {
this.textColor = value;
}
@action changeCustomTextColors (colors) {
this.customTextColors = colors;
}
@action resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;

18
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader";
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers, PageFontColor} from "./EditText";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@ -25,27 +25,31 @@ const routes = [
//Edit text
{
path: '/edit-text-fonts/',
component: PageFonts,
component: PageTextFonts,
},
{
path: '/edit-text-add-formatting/',
component: PageAdditionalFormatting,
component: PageTextAddFormatting,
},
{
path: '/edit-text-bullets/',
component: PageBullets,
component: PageTextBullets,
},
{
path: '/edit-text-numbers/',
component: PageNumbers,
component: PageTextNumbers,
},
{
path: '/edit-text-line-spacing/',
component: PageLineSpacing,
component: PageTextLineSpacing,
},
{
path: '/edit-text-font-color/',
component: PageFontColor,
component: PageTextFontColor,
},
{
path: '/edit-text-custom-font-color/',
component: PageTextCustomFontColor,
},
//Edit paragraph
{

84
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -1,10 +1,10 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState } from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import ThemeColorPalette from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
const PageFonts = props => {
const isAndroid = Device.android;
@ -210,32 +210,62 @@ const PageLineSpacing = props => {
)
};
const PageCustomFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const store = props.storeTextSettings;
let textColor = store.textColor;
if (typeof textColor === 'object') {
textColor = textColor.color;
}
const onAddNewColor = (colors, color) => {
props.storeTextSettings.changeCustomTextColors(colors);
props.onTextColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const [stateColor, setColor] = useState();
const changeCurColor = (color) => {
setColor(color);
};
const onAddCustomColor = () => {
console.log('add custom color');
const store = props.storeTextSettings;
const textColor = store.textColor;
const customColors = store.customTextColors;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
props.onTextColor({color: color, effectId: effectId});
} else {
props.onTextColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-text-custom-font-color/');
}
};
return(
<Page>
<Navbar title={_t.textFontColors} backLink={_t.textBack} />
<List>
<ListItem className={'font-color-auto' + (stateColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
<ListItem className={'font-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
props.onTextColorAuto();
setColor('auto');
}}>
<div slot="media">
<div className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeCurColor={changeCurColor} curColor={stateColor}/>
<ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
<List>
<ListItem title={_t.textAddCustomColor} onClick={() => {onAddCustomColor()}}></ListItem>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
onTextColor: props.onTextColor
}}></ListItem>
</List>
</Page>
)
@ -269,7 +299,8 @@ const EditText = props => {
</Row>
</ListItem>
<ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
onTextColorAuto: props.onTextColorAuto
onTextColorAuto: props.onTextColorAuto,
onTextColor: props.onTextColor
}}>
{!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
<span className="color-preview"></span>
@ -334,18 +365,21 @@ const EditText = props => {
};
const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFontColor = inject("storeTextSettings")(observer(PageFontColor));
const PageTextCustomFontColor = inject("storeTextSettings")(observer(PageCustomFontColor));
export {
EditTextContainer as EditText,
PageFontsContainer as PageFonts,
PageAddFormattingContainer as PageAdditionalFormatting,
PageBulletsContainer as PageBullets,
PageNumbersContainer as PageNumbers,
PageLineSpacingContainer as PageLineSpacing,
PageFontColor
PageTextFonts,
PageTextAddFormatting,
PageTextBullets,
PageTextNumbers,
PageTextLineSpacing,
PageTextFontColor,
PageTextCustomFontColor
};