From 355d2535f42e39b2d02dc050014f46bebcad34ab Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 28 Dec 2020 23:02:43 +0300 Subject: [PATCH] [mobile common] Added custom color picker --- .../lib/component/ThemeColorPalette.jsx | 99 +++++++++++++------ apps/common/mobile/resources/less/common.less | 56 ++++++++++- 2 files changed, 120 insertions(+), 35 deletions(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index 7ae2efa6d..b9799ef1e 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; -import { ListItem, List } from 'framework7-react'; -import { f7 } from 'framework7-react'; +import React, { useState, useEffect } from 'react'; +import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; const ThemeColors = ({ themeColors, onColorClick, curColor }) => { @@ -8,12 +7,11 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{themeColors.map((row, rowIndex) => { return( -
+
{row.map((effect, index) => { return( {onColorClick(effect.color, effect.effectId)}} > @@ -47,11 +45,11 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) => ) }; -const DynamicColors = ({ options, onColorClick, curColor }) => { - const dynamicColors = [];//dynamiColors; +const CustomColors = ({ options, customColors, onColorClick, curColor }) => { + const colors = customColors.length > 0 ? customColors : [];//dynamiColors; const emptyItems = []; - if (dynamicColors.length < options.dynamiccolors) { - for (let i = dynamicColors.length; i < options.dynamiccolors; i++) { + if (colors.length < options.customcolors) { + for (let i = colors.length; i < options.customcolors; i++) { emptyItems.push( {onColorClick('empty')}} @@ -60,7 +58,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => { } return (
- {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => { + {colors && colors.length > 0 && colors.map((color, index) => { return( { const {t} = useTranslation(); const _t = t('Common.ThemeColorPalette', {returnObjects: true}); const options = { - dynamiccolors: props.dynamiccolors || 10, + customcolors: props.customcolors || 10, standardcolors: props.standardcolors || 10, themecolors: props.themecolors || 10, effects: props.effects || 5, - allowReselect: props.allowReselect !== false, + //allowReselect: props.allowReselect !== false, transparent: props.transparent || false, value: props.value || '000000', cls: props.cls || '' }; const curColor = props.curColor; - const changeCurColor = props.changeCurColor; + console.log(curColor); const themeColors = []; const effectColors = Common.Utils.ThemeColor.getEffectColors(); let row = -1; @@ -101,39 +99,76 @@ const ThemeColorPalette = props => { }); const standartColors = Common.Utils.ThemeColor.getStandartColors(); // custom color - //const dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); - //dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : []; - - const onColorClick = ( color, effectId ) => { - if (color !== 'empty') { - if (effectId !==undefined ) { - changeCurColor({color: color, effectId: effectId}); - } else { - changeCurColor(color); - } - } else { - // open custom color menu - } - }; + let customColors = props.customColors; + if (customColors.length < 1) { + customColors = localStorage.getItem('mobile-custom-colors'); + customColors = customColors ? customColors.toLowerCase().split(',') : []; + } return (
{ _t.textThemeColors }
- +
{ _t.textStandartColors }
- +
{ _t.textCustomColors }
- +
) }; -export default ThemeColorPalette; \ No newline at end of file +const CustomColorPicker = props => { + let currentColor = props.currentColor; + if (currentColor === 'auto') { + currentColor = '000000'; + } + const countDynamicColors = props.countdynamiccolors || 10; + const [stateColor, setColor] = useState('#' + currentColor); + useEffect(() => { + if (document.getElementsByClassName('color-picker-wheel').length < 1) { + const colorPicker = f7.colorPicker.create({ + containerEl: document.getElementsByClassName('color-picker-container')[0], + value: { + hex: '#' + currentColor + }, + on: { + change: function (value) { + setColor(value.getValue().hex); + } + } + }); + } + }); + const addNewColor = (color) => { + let colors = localStorage.getItem('mobile-custom-colors'); + colors = colors ? colors.split(',') : []; + const newColor = color.slice(1); + if (colors.push(newColor) > countDynamicColors) colors.shift(); // 10 - dynamiccolors + localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase()); + props.onAddNewColor && props.onAddNewColor(colors, newColor); + }; + return( + + ) +}; + +export { ThemeColorPalette, CustomColorPicker }; \ No newline at end of file diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 0409ea53b..a5e93e181 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -49,11 +49,11 @@ .color-auto { width:22px; height: 22px; - background-color: #000; + background-color: @black; } &.active { .color-auto { - box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; border-radius: 1px; } } @@ -74,7 +74,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; z-index: 1; border-radius: 1px; } @@ -92,3 +92,53 @@ } } } + +#color-picker { + display: flex; + justify-content: space-around; + align-items: center; + max-width: 300px; + margin: 0 auto; + margin-top: 4px; + .color-picker-container { + width: calc(100% - 94px); + position: relative; + max-width: 100%; + height: auto; + font-size: 0; + .color-picker-module-wheel { + margin: 0; + } + } + .right-block { + margin-left: 20px; + .color-hsb-preview { + width: 72px; + height: 72px; + border-radius: 100px; + overflow: hidden; + border: 1px solid @gray; + .new-color-hsb-preview, .current-color-hsb-preview { + width: 100%; + height: 36px; + } + } + .button-round { + height: 72px; + width: 72px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + background-color: @white; + box-shadow: 0 4px 4px rgba(0,0,0,.25); + border-color: transparent; + margin-top: 20px; + .icon { + height: 30px; + width: 30px; + } + } + } +}