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

[SSE mobile] Fix Bug 59094

Browse source
This commit is contained in:
SergeyEzhin 2022-09-19 17:53:43 +03:00 committed by catbasilio
parent 661825ace9
commit 026c81ff9e
1 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isTypeCustomColors }) => {
return (
<div className='palette'>
{themeColors.map((row, rowIndex) => {
{themeColors?.length && themeColors.map((row, rowIndex) => {
return(
<div key={`tc-row-${rowIndex}`} className='row'>
{row.map((effect, index) => {
@ -27,7 +27,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isType
const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
return (
<div className='palette'>
{standartColors.map((color, index) => {
{standartColors?.length && standartColors.map((color, index) => {
return(
index === 0 && options.transparent ?
<a key={`sc-${index}`}
@ -48,6 +48,7 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
const CustomColors = ({ options, customColors, isTypeColors, onColorClick, curColor }) => {
const colors = customColors.length > 0 ? customColors : [];
const emptyItems = [];
if (colors.length < options.customcolors) {
for (let i = colors.length; i < options.customcolors; i++) {
emptyItems.push(<a className='empty-color'
@ -61,7 +62,7 @@ const CustomColors = ({ options, customColors, isTypeColors, onColorClick, curCo
return (
<div className='palette'>
{colors && colors.length > 0 && colors.map((color, index) => {
{colors?.length && colors.map((color, index) => {
return(
<a key={`dc-${index}`}
className={curColor && curColor === color && index === indexCurColor && !isTypeColors ? 'active' : ''}
@ -92,17 +93,22 @@ const ThemeColorPalette = props => {
const themeColors = [];
const effectColors = Common.Utils.ThemeColor.getEffectColors();
let row = -1;
effectColors.forEach((effect, index) => {
if (0 == index % options.themecolors) {
themeColors.push([]);
row++;
}
themeColors[row].push(effect);
});
if(effectColors?.length) {
effectColors.forEach((effect, index) => {
if (0 == index % options.themecolors) {
themeColors.push([]);
row++;
}
themeColors[row].push(effect);
});
}
const standartColors = Common.Utils.ThemeColor.getStandartColors();
let isTypeColors = standartColors.some( value => value === curColor );
let isTypeColors = standartColors?.length && standartColors.some( value => value === curColor );
// custom color
let customColors = props.customColors;
if (customColors.length < 1) {
customColors = localStorage.getItem('mobile-custom-colors');
customColors = customColors ? customColors.toLowerCase().split(',') : [];
@ -142,14 +148,18 @@ const CustomColorPicker = props => {
};
let currentColor = props.currentColor;
if (props.autoColor) {
currentColor = rgb2hex(props.autoColor);
}
if (currentColor === 'transparent' || !currentColor) {
currentColor = 'ffffff';
}
const countDynamicColors = props.countdynamiccolors || 10;
const [stateColor, setColor] = useState(`#${currentColor}`);
useEffect(() => {
if (document.getElementsByClassName('color-picker-wheel').length < 1) {
const colorPicker = f7.colorPicker.create({
@ -165,6 +175,7 @@ const CustomColorPicker = props => {
});
}
});
const addNewColor = (color) => {
let colors = localStorage.getItem('mobile-custom-colors');
colors = colors ? colors.split(',') : [];
@ -173,7 +184,8 @@ const CustomColorPicker = props => {
localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase());
props.onAddNewColor && props.onAddNewColor(colors, newColor);
};
return(
return (
<div id='color-picker'>
<div className='color-picker-container'></div>
<div className='right-block'>