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

Merge pull request #1290 from ONLYOFFICE/feature/Bug_53463

Browse source 
[DE PE SSE] Fix Bug 53463
This commit is contained in:
maxkadushkin 2021-11-09 23:19:27 +03:00 committed by GitHub
parent 4b0ed91feb f293244d2c
commit 2a25dd1ddd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const ThemeColors = ({ themeColors, onColorClick, curColor }) => { const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }) => {
return ( return (
<div className='palette'> <div className='palette'>
{themeColors.map((row, rowIndex) => { {themeColors.map((row, rowIndex) => {
@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => { {row.map((effect, index) => {
return( return(
<a key={`tc-${rowIndex}-${index}`} <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}`}} style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}} onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a> ></a>
@ -108,12 +108,14 @@ const ThemeColorPalette = props => {
customColors = customColors ? customColors.toLowerCase().split(',') : []; customColors = customColors ? customColors.toLowerCase().split(',') : [];
} }
let isTypeCustomColors = customColors.some( value => value === curColor );
return ( return (
<div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}> <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
<List> <List>
<ListItem className='theme-colors'> <ListItem className='theme-colors'>
<div>{ _t.textThemeColors }</div> <div>{ _t.textThemeColors }</div>
<ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/> <ThemeColors isTypeCustomColors={isTypeCustomColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem> </ListItem>
<ListItem className='standart-colors'> <ListItem className='standart-colors'>
<div>{ _t.textStandartColors }</div> <div>{ _t.textStandartColors }</div>

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

@ -12,10 +12,17 @@ export class storeTableSettings {
setStyles: action, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
setAutoColor: action,
colorAuto: observable,
}); });
} }
arrayStyles = []; arrayStyles = [];
colorAuto = 'auto';
setAutoColor(value) {
this.colorAuto = value;
}
initTableTemplates () { initTableTemplates () {
this.arrayStyles = []; this.arrayStyles = [];
@ -164,7 +171,13 @@ export class storeTableSettings {
const size = parseFloat(this.cellBorderWidth); const size = parseFloat(this.cellBorderWidth);
border.put_Value(1); border.put_Value(1);
border.put_Size(size * 25.4 / 72.0); 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); border.put_Color(color);
} }
else { else {

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

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

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

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

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

@ -12,10 +12,17 @@ export class storeTableSettings {
setStyles: action, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
setAutoColor: action,
colorAuto: observable,
}); });
} }
arrayStyles = []; arrayStyles = [];
colorAuto = 'auto';
setAutoColor(value) {
this.colorAuto = value;
}
initTableTemplates () { initTableTemplates () {
this.arrayStyles = []; this.arrayStyles = [];
@ -146,7 +153,13 @@ export class storeTableSettings {
const size = parseFloat(this.cellBorderWidth); const size = parseFloat(this.cellBorderWidth);
border.put_Value(1); border.put_Value(1);
border.put_Size(size * 25.4 / 72.0); 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); border.put_Color(color);
} }
else { else {

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

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

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

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

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

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

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

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

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

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