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

[DE PE SSE] Fix Bug 53463

Browse source
This commit is contained in:
ShimaginAndrey 2021-11-02 16:56:03 +03:00
parent 6fa0b98d30
commit f293244d2c
10 changed files with 130 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next';
const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }) => {
return (
<div className='palette'>
{themeColors.map((row, rowIndex) => {
@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => {
return(
<a key={`tc-${rowIndex}-${index}`}
className={(curColor && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color))) ? 'active' : ''}
className={(curColor && !isTypeCustomColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color))) ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a>
@ -108,12 +108,14 @@ const ThemeColorPalette = props => {
customColors = customColors ? customColors.toLowerCase().split(',') : [];
}
let isTypeCustomColors = customColors.some( value => value === curColor );
return (
<div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
<List>
<ListItem className='theme-colors'>
<div>{ _t.textThemeColors }</div>
<ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
<ThemeColors isTypeCustomColors={isTypeCustomColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem>
<ListItem className='standart-colors'>
<div>{ _t.textStandartColors }</div>

15
apps/documenteditor/mobile/src/store/tableSettings.js
View file

@ -12,10 +12,17 @@ export class storeTableSettings {
setStyles: action,
updateCellBorderWidth: action,
updateCellBorderColor: action,
setAutoColor: action,
colorAuto: observable,
});
}
arrayStyles = [];
colorAuto = 'auto';
setAutoColor(value) {
this.colorAuto = value;
}
initTableTemplates () {
this.arrayStyles = [];
@ -164,7 +171,13 @@ export class storeTableSettings {
const size = parseFloat(this.cellBorderWidth);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
let color;
if(this.colorAuto === 'auto') {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
}
border.put_Color(color);
}
else {

23
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -340,6 +340,7 @@ const PageCustomBorderColor = props => {
props.storeTableSettings.updateCellBorderColor(color);
props.f7router.back();
};
const autoColor = props.storeTableSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@ -351,19 +352,19 @@ const PageCustomBorderColor = props => {
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
<CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageBorderColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeTableSettings = props.storeTableSettings;
const borderColor = storeTableSettings.cellBorderColor;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
storeTableSettings.setAutoColor(null);
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
storeTableSettings.updateCellBorderColor(newColor);
@ -377,7 +378,7 @@ const PageBorderColor = props => {
};
return(
<Page>
<Navbar title={_t.textColor} backLink={_t.textBack}>
<Navbar title={t('Edit.textColor')} backLink={t('Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -386,9 +387,18 @@ const PageBorderColor = props => {
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
<ListItem className={'item-color-auto' + (storeTableSettings.colorAuto === 'auto' ? ' active' : '')} title={t('Edit.textAutomatic')} onClick={() => {
storeTableSettings.setAutoColor('auto');
}}>
<div slot="media">
<div id='font-color-auto' className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeColor={changeColor} curColor={storeTableSettings.colorAuto || borderColor} customColors={customColors}/>
<List>
<ListItem title={t('Edit.textAddCustomColor')} link={'/edit-table-custom-border-color/'}></ListItem>
</List>
</Page>
)
@ -410,7 +420,6 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
storeTableSettings.updateBordersStyle(type);
props.onBorderTypeClick(storeTableSettings.cellBorders);
};
const borderColor = storeTableSettings.cellBorderColor;
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
@ -434,7 +443,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<ListItem title={_t.textColor} link='/edit-table-border-color/'>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
style={{ background: storeTableSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
></span>
</ListItem>
<ListItem className='buttons table-presets'>

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

@ -257,6 +257,7 @@
"textAllCaps": "All Caps",
"textApplyAll": "Apply to All Slides",
"textAuto": "Auto",
"textAutomatic": "Automatic",
"textBack": "Back",
"textBandedColumn": "Banded Column",
"textBandedRow": "Banded Row",

15
apps/presentationeditor/mobile/src/store/tableSettings.js
View file

@ -12,10 +12,17 @@ export class storeTableSettings {
setStyles: action,
updateCellBorderWidth: action,
updateCellBorderColor: action,
setAutoColor: action,
colorAuto: observable,
});
}
arrayStyles = [];
colorAuto = 'auto';
setAutoColor(value) {
this.colorAuto = value;
}
initTableTemplates () {
this.arrayStyles = [];
@ -146,7 +153,13 @@ export class storeTableSettings {
const size = parseFloat(this.cellBorderWidth);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
let color;
if(this.colorAuto === 'auto') {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor);
}
border.put_Color(color);
}
else {

23
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View file

@ -184,7 +184,7 @@ const PageCustomBorderColor = props => {
props.storeTableSettings.updateCellBorderColor(color);
props.f7router.back();
};
const autoColor = props.storeTableSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@ -196,20 +196,20 @@ const PageCustomBorderColor = props => {
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
<CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageBorderColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeTableSettings = props.storeTableSettings;
const borderColor = storeTableSettings.cellBorderColor;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
storeTableSettings.setAutoColor(null);
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
storeTableSettings.updateCellBorderColor(newColor);
@ -224,7 +224,7 @@ const PageBorderColor = props => {
return (
<Page>
<Navbar title={_t.textColor} backLink={_t.textBack}>
<Navbar title={t('View.Edit.textColor')} backLink={t('View.Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
@ -233,9 +233,18 @@ const PageBorderColor = props => {
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-table-custom-border-color/'}></ListItem>
<ListItem className={'item-color-auto' + (storeTableSettings.colorAuto === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
storeTableSettings.setAutoColor('auto');
}}>
<div slot="media">
<div id='font-color-auto' className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeColor={changeColor} curColor={storeTableSettings.colorAuto || borderColor} customColors={customColors}/>
<List>
<ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-table-custom-border-color/'}></ListItem>
</List>
</Page>
)
@ -280,7 +289,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<ListItem title={_t.textColor} link='/edit-table-border-color/'>
<span className="color-preview"
slot="after"
style={{ background: displayBorderColor}}
style={{ background: storeTableSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
></span>
</ListItem>
<ListItem className='buttons table-presets'>

1
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -361,6 +361,7 @@
"textAngleClockwise": "Angle Clockwise",
"textAngleCounterclockwise": "Angle Counterclockwise",
"textAuto": "Auto",
"textAutomatic": "Automatic",
"textAxisCrosses": "Axis Crosses",
"textAxisOptions": "Axis Options",
"textAxisPosition": "Axis Position",

21
apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
View file

@ -1,11 +1,13 @@
import React, {Component} from 'react';
import { EditCell } from '../../view/edit/EditCell';
import {observer, inject} from "mobx-react";
class EditCellController extends Component {
constructor (props) {
super(props);
this.dateFormats = this.initFormats(Asc.c_oAscNumFormatType.Date, 38822);
this.timeFormats = this.initFormats(Asc.c_oAscNumFormatType.Time, 1.534);
this.onBorderStyle = this.onBorderStyle.bind(this);
}
initFormats(type, exampleVal) {
@ -152,10 +154,17 @@ class EditCellController extends Component {
}
onBorderStyle(type, borderInfo) {
const api = Common.EditorApi.get();
const api = Common.EditorApi.get();
let newBorders = [],
bordersWidth = borderInfo.width,
bordersColor;
if (this.props.storeCellSettings.colorAuto === 'auto') {
bordersColor = new Asc.asc_CColor();
bordersColor.put_auto(true);
} else {
bordersColor = Common.Utils.ThemeColor.getRgbColor(borderInfo.color);
}
if (type == 'inner') {
newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
@ -180,6 +189,13 @@ class EditCellController extends Component {
api.asc_setCellBorders(newBorders);
}
onTextColorAuto() {
const api = Common.EditorApi.get();
const color = new Asc.asc_CColor();
color.put_auto(true);
api.asc_setCellTextColor(color);
}
render () {
return (
<EditCell
@ -200,9 +216,10 @@ class EditCellController extends Component {
onAccountingCellFormat={this.onAccountingCellFormat}
dateFormats={this.dateFormats}
timeFormats={this.timeFormats}
onTextColorAuto={this.onTextColorAuto}
/>
)
}
}
export default EditCellController;
export default inject("storeCellSettings")(observer(EditCellController));

12
apps/spreadsheeteditor/mobile/src/store/cellSettings.js
View file

@ -18,7 +18,8 @@ export class storeCellSettings {
hAlignStr: observable,
vAlignStr: observable,
isWrapText: observable,
orientationStr: observable,
orientationStr: observable,
colorAuto: observable,
initCellSettings: action,
initTextFormat: action,
initTextOrientation: action,
@ -30,7 +31,8 @@ export class storeCellSettings {
changeFillColor: action,
changeBorderColor: action,
changeBorderSize: action,
changeBorderStyle: action
changeBorderStyle: action,
setAutoColor: action,
});
}
@ -64,6 +66,12 @@ export class storeCellSettings {
orientationStr = 'horizontal';
colorAuto = 'auto';
setAutoColor(value) {
this.colorAuto = value;
}
initCellSettings(cellInfo) {
let xfs = cellInfo.asc_getXfs();

49
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -29,7 +29,7 @@ const EditCell = props => {
const fontColorPreview = fontColor !== 'auto' ?
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview"></span>;
<span className="color-preview auto"></span>;
const fillColorPreview = fillColor !== 'transparent' ?
<span className="color-preview" style={{ background: `#${(typeof fillColor === "object" ? fillColor.color : fillColor)}`}}></span> :
@ -53,7 +53,8 @@ const EditCell = props => {
</Row>
</ListItem>
<ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
onTextColor: props.onTextColor
onTextColor: props.onTextColor,
onTextColorAuto: props.onTextColorAuto,
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
@ -284,16 +285,25 @@ const PageTextColorCell = props => {
return (
<Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack}>
<Navbar title={t('View.Edit.textTextColor')} backLink={t('View.Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List>
<ListItem className={'item-color-auto' + (fontColor === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
props.onTextColorAuto();
}}>
<div slot="media">
<div id='font-color-auto' className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeColor={changeColor} curColor={fontColor} customColors={customColors} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-cell-text-custom-color/'} routeProps={{
<ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-cell-text-custom-color/'} routeProps={{
onTextColor: props.onTextColor
}}></ListItem>
</List>
@ -360,13 +370,13 @@ const PageCustomTextColorCell = props => {
fontColor = fontColor.color;
}
const autoColor = fontColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onTextColor(color);
props.storeCellSettings.changeFontColor(color);
props.f7router.back();
};
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
@ -376,7 +386,7 @@ const PageCustomTextColorCell = props => {
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={fontColor} onAddNewColor={onAddNewColor} />
<CustomColorPicker autoColor={autoColor} currentColor={fontColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
@ -586,7 +596,8 @@ const PageBorderStyleCell = props => {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
const displayBorderColor = `#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`;
return (
<Page>
<Navbar title={_t.textBorderStyle} backLink={_t.textBack}>
@ -676,7 +687,7 @@ const PageBorderStyleCell = props => {
}}>
<span className="color-preview"
slot="after"
style={{background:`#${(typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color)}`}}
style={{background: storeCellSettings.colorAuto === 'auto' ? '#000' : displayBorderColor}}
></span>
</ListItem>
<ListItem title={_t.textSize} link='/edit-border-size-cell/' after={borderSizes[borderInfo.width]} routeProps={{
@ -690,16 +701,15 @@ const PageBorderStyleCell = props => {
const PageBorderColorCell = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storePalette = props.storePalette;
const storeCellSettings = props.storeCellSettings;
const borderInfo = storeCellSettings.borderInfo;
const borderColor = borderInfo.color;
const borderStyle = storeCellSettings.borderStyle;
const customColors = storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
storeCellSettings.setAutoColor(null);
if (effectId !== undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
storeCellSettings.changeBorderColor(newColor);
@ -716,16 +726,25 @@ const PageBorderColorCell = props => {
return (
<Page>
<Navbar backLink={_t.textBack}>
<Navbar backLink={t('View.Edit.textBack')}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-border-custom-color-cell/'} routeProps={{
<ListItem className={'item-color-auto' + (storeCellSettings.colorAuto === 'auto' ? ' active' : '')} title={t('View.Edit.textAutomatic')} onClick={() => {
storeCellSettings.setAutoColor('auto');
}}>
<div slot="media">
<div id='font-color-auto' className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeColor={changeColor} curColor={storeCellSettings.colorAuto || borderColor} customColors={customColors} />
<List>
<ListItem title={t('View.Edit.textAddCustomColor')} link={'/edit-border-custom-color-cell/'} routeProps={{
onBorderStyle: props.onBorderStyle
}}></ListItem>
</List>
@ -746,7 +765,7 @@ const PageCustomBorderColorCell = props => {
}
const borderStyle = storeCellSettings.borderStyle;
const autoColor = storeCellSettings.colorAuto === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
const onAddNewColor = (colors, color) => {
storePalette.changeCustomColors(colors);
storeCellSettings.changeBorderColor(color);
@ -763,7 +782,7 @@ const PageCustomBorderColorCell = props => {
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor} />
<CustomColorPicker autoColor={autoColor} currentColor={borderColor} onAddNewColor={onAddNewColor} />
</Page>
)
};