From cc7fc88fe3db33920e4830a99bc98ad2d60143c5 Mon Sep 17 00:00:00 2001 From: Robson Tenorio Henriques Date: Thu, 31 Oct 2024 23:42:40 -0300 Subject: [PATCH] =?UTF-8?q?Revers=C3=A3o=20da=20altera=C3=A7=C3=A3o=20no?= =?UTF-8?q?=20color=20da=20TagModal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TagModal/index.js | 71 +++++++++++++---------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/TagModal/index.js b/frontend/src/components/TagModal/index.js index e60cfd94..407a7485 100644 --- a/frontend/src/components/TagModal/index.js +++ b/frontend/src/components/TagModal/index.js @@ -22,8 +22,8 @@ import { } from "@material-ui/core"; import { green } from "@material-ui/core/colors"; -import ColorLensIcon from '@material-ui/icons/ColorLens'; -import { SketchPicker } from 'react-color'; +import { Colorize } from "@material-ui/icons"; +import { ColorBox } from 'material-ui-color'; import { i18n } from "../../translate/i18n"; @@ -57,15 +57,10 @@ const useStyles = makeStyles(theme => ({ margin: theme.spacing(1), minWidth: 120, }, - colorPreview: { + colorAdorment: { width: 20, height: 20, - border: '1px solid rgba(0, 0, 0, 0.23)', }, - colorPicker: { - position: 'absolute', - zIndex: 2, - } })); const TagSchema = Yup.object().shape({ @@ -77,18 +72,13 @@ const TagSchema = Yup.object().shape({ const TagModal = ({ open, onClose, tagId, reload }) => { const classes = useStyles(); const { user } = useContext(AuthContext); - const [showColorPicker, setShowColorPicker] = useState(false); - const [color, setColor] = useState("#5C59A0"); + const [colorPickerModalOpen, setColorPickerModalOpen] = useState(false); const initialState = { name: "", color: "" }; const [tag, setTag] = useState(initialState); - const handleColorChange = (color) => { - setColor(color.hex); - }; - useEffect(() => { try { (async () => { @@ -106,6 +96,7 @@ const TagModal = ({ open, onClose, tagId, reload }) => { const handleClose = () => { setTag(initialState); + setColorPickerModalOpen(false); onClose(); }; @@ -168,34 +159,50 @@ const TagModal = ({ open, onClose, tagId, reload }) => {
- setShowColorPicker(show => !show)} - value={color} - variant="outlined" - margin="dense" - className={classes.textField} + -
+
), endAdornment: ( - - - - - + setColorPickerModalOpen(!colorPickerModalOpen)} + > + + ), }} + variant="outlined" + margin="dense" /> - {showColorPicker && ( -
- -
- )}
+ {colorPickerModalOpen && ( +
+ { + setTag(prev => ({ ...prev, color: `#${val.hex}` })); + }} + /> +
+ )}