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