Merge pull request #1290 from ONLYOFFICE/feature/Bug_53463
[DE PE SSE] Fix Bug 53463
This commit is contained in:
commit
2a25dd1ddd
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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) {
|
||||||
|
@ -152,10 +154,17 @@ class EditCellController extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
onBorderStyle(type, borderInfo) {
|
onBorderStyle(type, borderInfo) {
|
||||||
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));
|
|
@ -18,7 +18,8 @@ export class storeCellSettings {
|
||||||
hAlignStr: observable,
|
hAlignStr: observable,
|
||||||
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();
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
@ -586,7 +596,8 @@ const PageBorderStyleCell = props => {
|
||||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||||
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>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue