From 7e1758fd0a72b6ec385b46136b315ac693e29980 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 01:19:40 +0500 Subject: [PATCH 01/14] fix(color-picker-modal): color picker popover part 2 --- package.json | 2 + .../ColorPicker/ColorUtils.ts | 76 +++++++ .../ColorPicker/SaturationPicker.tsx | 61 ++++++ .../ColorPicker/index.tsx | 205 +++++++++++++++++- .../Body/Editor/ColorPickerPopover/index.tsx | 4 +- .../BlueprintModal/Body/Editor/index.tsx | 10 +- src/stores/useAppStore/index.ts | 4 + 7 files changed, 348 insertions(+), 14 deletions(-) create mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/ColorUtils.ts create mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx diff --git a/package.json b/package.json index 4124f9b8a..62a320b53 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "r3f-perf": "6.7.0", "react": "^18.2.0", "react-audio-player": "^0.17.0", + "react-color": "^2.19.3", "react-dom": "^18.2.0", "react-dropdown-select": "^4.9.3", "react-hook-form": "^7.39.5", @@ -185,6 +186,7 @@ "@types/lodash": "^4.14.182", "@types/node": "^16.7.13", "@types/react": "^18.2.15", + "@types/react-color": "^3.0.12", "@types/react-dom": "^18.2.7", "@types/react-input-mask": "3.0.2", "@types/react-lottie": "^1.2.10", diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/ColorUtils.ts b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/ColorUtils.ts new file mode 100644 index 000000000..6c49e25d1 --- /dev/null +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/ColorUtils.ts @@ -0,0 +1,76 @@ +export const hexToHsl = (hex: string) => { + let r = 0 + let g = 0 + let b = 0 + + if (hex.length === 4) { + r = parseInt(hex[1] + hex[1], 16) + g = parseInt(hex[2] + hex[2], 16) + b = parseInt(hex[3] + hex[3], 16) + } else if (hex.length === 7) { + r = parseInt(hex[1] + hex[2], 16) + g = parseInt(hex[3] + hex[4], 16) + b = parseInt(hex[5] + hex[6], 16) + } + + r /= 255 + g /= 255 + b /= 255 + + const max = Math.max(r, g, b) + const min = Math.min(r, g, b) + + let h = 0 + let s = 0 + const l = (max + min) / 2 + + if (max !== min) { + const d = max - min + + s = l > 0.5 ? d / (2 - max - min) : d / (max + min) + + // eslint-disable-next-line default-case + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0) + break + case g: + h = (b - r) / d + 2 + break + case b: + h = (r - g) / d + 4 + break + } + + h /= 6 + } + + return { + h: Math.round(h * 360), + s: Math.round(s * 100), + l: Math.round(l * 100), + } +} + +export const hslToHex = (h: number, s: number, l: number) => { + const saturation = s / 100 + + const lightness = l / 100 + + const k = (n: number) => (n + h / 30) % 12 + const a = saturation * Math.min(lightness, 1 - lightness) + + const f = (n: number) => Math.round(255 * (lightness - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1)))) + + const r = f(0) + const g = f(8) + const b = f(4) + + // Construct the hex value without bitwise operations + const hex = `#${[r, g, b] + .map((val) => val.toString(16).padStart(2, '0')) + .join('') + .toUpperCase()}` + + return hex +} diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx new file mode 100644 index 000000000..12a694e2d --- /dev/null +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx @@ -0,0 +1,61 @@ +import React, { useRef, useEffect } from 'react' +import { hslToHex } from './ColorUtils' + +interface SaturationPickerProps { + hue: number + onChange: (color: string) => void +} + +const SaturationPicker: React.FC = ({ hue, onChange }) => { + const canvasRef = useRef(null) + + useEffect(() => { + const canvas = canvasRef.current + + if (canvas) { + const ctx = canvas.getContext('2d') + + if (ctx) { + const { width, height } = canvas + + // eslint-disable-next-line no-plusplus + for (let x = 0; x < width; x++) { + // eslint-disable-next-line no-plusplus + for (let y = 0; y < height; y++) { + const saturation = x / width + const brightness = 1 - y / height + const color = `hsl(${hue}, ${saturation * 100}%, ${brightness * 100}%)` + + ctx.fillStyle = color + ctx.fillRect(x, y, 1, 1) + } + } + } + } + }, [hue]) + + const handleCanvasClick = (e: React.MouseEvent) => { + const canvas = canvasRef.current + + if (canvas) { + const rect = canvas.getBoundingClientRect() + const x = e.clientX - rect.left + const y = e.clientY - rect.top + + const saturation = x / canvas.width + const brightness = 1 - y / canvas.height + + const hexColor = hslToHex(hue, saturation * 100, brightness * 100) + + onChange(hexColor) + } + } + + return ( +
+ +
+ ) +} + +export default SaturationPicker diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx index a7dcafb90..4684bb993 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx @@ -1,16 +1,127 @@ /* eslint-disable no-nested-ternary */ import styled from 'styled-components' import { Flex } from '~/components/common/Flex' - +import { HuePicker } from 'react-color' import { colors } from '~/utils/colors' +import { useState } from 'react' +import SaturationPicker from './SaturationPicker' +import { hslToHex, hexToHsl } from './ColorUtils' + +export const ColorPicker = () => { + const [selectedColor, setSelectedColor] = useState('#C990C0') // Initial color + const [hexValue, setHexValue] = useState('#C990C0') // HEX value input + const [hueValue, setHueValue] = useState(200) // Default hue + const [saturation, setSaturation] = useState(50) // Default saturation + const [brightness, setBrightness] = useState(50) // Default brightness + + const handleColorChange = (hexColor: string) => { + setSelectedColor(hexColor) + setHexValue(hexColor) + + const { h, s, l } = hexToHsl(hexColor) + + setHueValue(h) + setSaturation(s) + setBrightness(l) + } + + const handleHueChange = (color: { hsl: { h: number }; hex: string }) => { + setHueValue(color.hsl.h) + + const newHex = hslToHex(color.hsl.h, saturation, brightness) + + handleColorChange(newHex) + } + + const handleSaturationChange = (hexColor: string) => { + setSelectedColor(hexColor) + setHexValue(hexColor) + + const { h, s, l } = hexToHsl(hexColor) + + setHueValue(h) + setSaturation(s) + setBrightness(l) + } + + const handleHexInputChange = (e: React.ChangeEvent) => { + const newHex = e.target.value + + setHexValue(newHex) + + const { h, s, l } = hexToHsl(newHex) + + setHueValue(h) + setSaturation(s) + setBrightness(l) + setSelectedColor(newHex) + } + + const circleColors = [ + '#C62828', + '#D32F2F', + '#F57C00', + '#FF9800', + '#FFB74D', + '#FFEB3B', + '#CDDC39', + '#8BC34A', + '#388E3C', + '#4CAF50', + '#009688', + '#00796B', + '#00BCD4', + '#0097A7', + '#3F51B5', + '#283593', + '#5C6BC0', + '#7E57C2', + '#512DA8', + '#9C27B0', + '#E91E63', + '#F06292', + '#F48FB1', + '#795548', + '#6D4C41', + '#9E9E9E', + '#757575', + '#607D8B', + '#455A64', + '#2196F3', + '#1976D2', + '#64B5F6', + ] + + return ( + + + + + + {circleColors.map((circleColor) => ( + handleColorChange(circleColor)} /> + ))} + + + + + + + + + + -export const ColorPicker = () => ( - - -

this is color wrapper

- - -) + + HEX + + + + + + + ) +} const Wrapper = styled(Flex)` flex: 1; @@ -50,3 +161,81 @@ const TableWrapper = styled(Flex)` flex: 1; width: 100%; ` + +const PickerContainer = styled.div` + padding: 0 20px; + width: 315px; +` + +const ColorPalette = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-bottom: 16px; +` + +const ColorPaletteWrapper = styled.div` + margin-left: 10px; + margin-bottom: 6px; +` + +const ColorCircle = styled.div<{ color: string }>` + width: 20px; + height: 20px; + border-radius: 50%; + margin: 4px; + background-color: ${(props) => props.color}; + cursor: pointer; + + &:hover { + box-shadow: 0 0 7px ${(props) => props.color}; + } +` + +const SaturationPickerWrapper = styled.div` + margin-bottom: 8px; + margin-left: 4px; + display: flex; + justify-content: center; + align-items: center; +` + +const HuePickerWrapper = styled.div` + margin-bottom: 15px; + width: 224px; + margin-left: 10px; + display: flex; + justify-content: center; + align-items: center; +` + +const StyledInput = styled.input` + font-family: 'Barlow'; + padding: 2px 5px 2px 10px; + font-size: 13px; + background-color: ${colors.black}; + color: ${colors.primaryText1}; + border-radius: 6px; + width: 84px; + height: 28px; + border: none; + + &:focus { + outline: none; + } +` + +const LabelText = styled.p` + font-family: 'Barlow'; + font-size: 13px; + font-weight: 400; + color: ${colors.primaryText1}; + letter-spacing: 1px; + margin: 0 10px; +` + +const HexaInputWrapper = styled.div` + display: flex; + align-items: center; + gap: 8px; +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx index 29adc7c6c..0dd8da3d5 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx @@ -24,12 +24,12 @@ const ModalBackground = styled.div<{ isOpen: boolean }>` const ModalContent = styled.div` position: fixed; - top: 38%; + top: 40%; left: 34%; transform: translate(-50%, -50%); background: ${colors.BG1}; width: 300px; - height: 443px; + height: 460px; z-index: 1001; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 2b07fdf64..52c2c2436 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -21,6 +21,7 @@ import MediaOptions from './MediaOptions' import { convertAttributes, parsedObjProps, parseJson } from './utils' import ColorPickerIcon from '~/components/Icons/ColorPickerIcon' import { ColorPickerPopover } from './ColorPickerPopover' +import { useAppStore } from '~/stores/useAppStore' const defaultValues = { type: '', @@ -211,6 +212,7 @@ export const Editor = ({ sourceLink: false, }) + const { selectedColor } = useAppStore((s) => s) const [isPopoverOpen, setPopoverOpen] = useState(!!selectedSchema) const handleColorPickerPopover = () => setPopoverOpen(!isPopoverOpen) @@ -512,7 +514,7 @@ export const Editor = ({ value={parent} /> - + @@ -541,7 +543,7 @@ export const Editor = ({ value={parent} /> - + @@ -710,13 +712,13 @@ const HeaderText = styled(Text)` color: ${colors.white}; ` -const ColorPickerIconWrapper = styled.span` +const ColorPickerIconWrapper = styled.span<{ selectedColor?: string }>` width: 36px; height: 36px; border-radius: 6px; margin-left: 12px; color: ${colors.colorPickerThing}; - background: ${colors.THING}; + background: ${(props) => props.selectedColor ?? colors.THING}; display: flex; justify-content: center; align-items: center; diff --git a/src/stores/useAppStore/index.ts b/src/stores/useAppStore/index.ts index 132a7395a..447581088 100644 --- a/src/stores/useAppStore/index.ts +++ b/src/stores/useAppStore/index.ts @@ -29,6 +29,8 @@ export type AppStore = { setUniverseQuestionIsOpen: () => void setCurrentPlayingAudio: (_: React.MutableRefObject | null) => void setShowCollapseButton: (_: boolean) => void + selectedColor: string + setSelectedColor: (color: string) => void } const defaultData = { @@ -45,6 +47,7 @@ const defaultData = { appMetaData: null, currentPlayingAudio: null, showCollapseButton: true, + selectedColor: '#962777', } export const useAppStore = create((set, get) => ({ @@ -68,4 +71,5 @@ export const useAppStore = create((set, get) => ({ setUniverseQuestionIsOpen: () => set({ universeQuestionIsOpen: !get().universeQuestionIsOpen }), setAppMetaData: (appMetaData) => set({ appMetaData }), setShowCollapseButton: (showCollapseButton) => set({ showCollapseButton }), + setSelectedColor: (selectedColor) => set({ selectedColor }), })) From bb020abf672be6694436fce626425d9d2492d27b Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 01:44:01 +0500 Subject: [PATCH 02/14] fix(color-picker-modal): change button color --- .../ColorPickerPopoverView/ColorPicker/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx index 4684bb993..827dffec9 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx @@ -6,9 +6,10 @@ import { colors } from '~/utils/colors' import { useState } from 'react' import SaturationPicker from './SaturationPicker' import { hslToHex, hexToHsl } from './ColorUtils' +import { useAppStore } from '~/stores/useAppStore' export const ColorPicker = () => { - const [selectedColor, setSelectedColor] = useState('#C990C0') // Initial color + const { selectedColor, setSelectedColor } = useAppStore((s) => s) const [hexValue, setHexValue] = useState('#C990C0') // HEX value input const [hueValue, setHueValue] = useState(200) // Default hue const [saturation, setSaturation] = useState(50) // Default saturation From 71c513619d71ac0f2bee0a9276d92b0772f5a805 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 01:53:49 +0500 Subject: [PATCH 03/14] fix(color-picker-modal): yarn file react color --- yarn.lock | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index e8cdc4d5e..8ac08e9e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2376,6 +2376,15 @@ __metadata: languageName: node linkType: hard +"@icons/material@npm:^0.2.4": + version: 0.2.4 + resolution: "@icons/material@npm:0.2.4" + peerDependencies: + react: "*" + checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -4591,6 +4600,16 @@ __metadata: languageName: node linkType: hard +"@types/react-color@npm:^3.0.12": + version: 3.0.12 + resolution: "@types/react-color@npm:3.0.12" + dependencies: + "@types/react": "*" + "@types/reactcss": "*" + checksum: 2b3baffa6d293ee98a66ccb8c47d47700a7139c42589f8acc7713c7b5ae1dd61e7b4ceeebdb4f2d1b3c54466a1d3f351c3126929ebb9c6e1fe460b7400a857c2 + languageName: node + linkType: hard + "@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.7": version: 18.2.18 resolution: "@types/react-dom@npm:18.2.18" @@ -4665,6 +4684,15 @@ __metadata: languageName: node linkType: hard +"@types/reactcss@npm:*": + version: 1.2.12 + resolution: "@types/reactcss@npm:1.2.12" + dependencies: + "@types/react": "*" + checksum: d04c087376daa503e187b390e416530904152046a7ac79a1c94e43cb4855fc8078ba8947792b88f3aff953defd9cae331c44fba717ebd650f40556e8f4bbb2a2 + languageName: node + linkType: hard + "@types/scheduler@npm:*": version: 0.16.8 resolution: "@types/scheduler@npm:0.16.8" @@ -11155,7 +11183,7 @@ __metadata: languageName: node linkType: hard -"lodash-es@npm:4": +"lodash-es@npm:4, lodash-es@npm:^4.17.15": version: 4.17.21 resolution: "lodash-es@npm:4.17.21" checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 @@ -11274,7 +11302,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21": +"lodash@npm:^4.0.1, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -11521,6 +11549,13 @@ __metadata: languageName: node linkType: hard +"material-colors@npm:^1.2.1": + version: 1.2.6 + resolution: "material-colors@npm:1.2.6" + checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f + languageName: node + linkType: hard + "md5.js@npm:^1.3.4": version: 1.3.5 resolution: "md5.js@npm:1.3.5" @@ -13095,7 +13130,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.5.10, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -13290,6 +13325,23 @@ __metadata: languageName: node linkType: hard +"react-color@npm:^2.19.3": + version: 2.19.3 + resolution: "react-color@npm:2.19.3" + dependencies: + "@icons/material": ^0.2.4 + lodash: ^4.17.15 + lodash-es: ^4.17.15 + material-colors: ^1.2.1 + prop-types: ^15.5.10 + reactcss: ^1.2.0 + tinycolor2: ^1.4.1 + peerDependencies: + react: "*" + checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b + languageName: node + linkType: hard + "react-colorful@npm:^5.5.1": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -13617,6 +13669,15 @@ __metadata: languageName: node linkType: hard +"reactcss@npm:^1.2.0": + version: 1.2.3 + resolution: "reactcss@npm:1.2.3" + dependencies: + lodash: ^4.0.1 + checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45 + languageName: node + linkType: hard + "reactflow@npm:^11.9.2": version: 11.10.1 resolution: "reactflow@npm:11.10.1" @@ -14650,6 +14711,7 @@ __metadata: "@types/lodash": ^4.14.182 "@types/node": ^16.7.13 "@types/react": ^18.2.15 + "@types/react-color": ^3.0.12 "@types/react-dom": ^18.2.7 "@types/react-input-mask": 3.0.2 "@types/react-lottie": ^1.2.10 @@ -14702,6 +14764,7 @@ __metadata: r3f-perf: 6.7.0 react: ^18.2.0 react-audio-player: ^0.17.0 + react-color: ^2.19.3 react-dom: ^18.2.0 react-dropdown-select: ^4.9.3 react-hook-form: ^7.39.5 @@ -15308,7 +15371,7 @@ __metadata: languageName: node linkType: hard -"tinycolor2@npm:1": +"tinycolor2@npm:1, tinycolor2@npm:^1.4.1": version: 1.6.0 resolution: "tinycolor2@npm:1.6.0" checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230 From 01b677311eae455f16637df291d036773d1ba3ee Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 02:30:15 +0500 Subject: [PATCH 04/14] fix(color-picker-modal): color picker modal functionality completed --- .../ModalsContainer/BlueprintModal/Body/Editor/index.tsx | 8 ++++++++ src/network/fetchSourcesData/index.ts | 1 + 2 files changed, 9 insertions(+) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 52c2c2436..e719b323a 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -71,6 +71,7 @@ const handleSubmitForm = async ( data: FieldValues, isUpdate = false, deletedAttributes: string[], + selectedColor: string, mediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean }, initialMediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean }, ): Promise => { @@ -87,6 +88,7 @@ const handleSubmitForm = async ( attributes: { [key: string]: string } index?: string media_url?: string + color?: string image_url?: string source_link?: string } = { @@ -95,6 +97,10 @@ const handleSubmitForm = async ( index: selectedIndex, } + if (selectedColor) { + requestData.color = selectedColor + } + if (mediaOptions.videoAudio) { requestData.media_url = '' } else if (initialMediaOptions.videoAudio) { @@ -356,6 +362,7 @@ export const Editor = ({ await editNodeSchemaUpdate(selectedSchema?.ref_id as string, { type: data.type, parent: newParent as string, + color: selectedColor, attributes: { index: selectedIndex as string, }, @@ -368,6 +375,7 @@ export const Editor = ({ { ...data, ...(selectedSchema ? { ref_id: selectedSchema?.ref_id } : {}) }, !!selectedSchema, deletedAttributes, + selectedColor, mediaOptions, { videoAudio: !!selectedSchema?.media_url, diff --git a/src/network/fetchSourcesData/index.ts b/src/network/fetchSourcesData/index.ts index 78ad26076..1e6e5cf57 100644 --- a/src/network/fetchSourcesData/index.ts +++ b/src/network/fetchSourcesData/index.ts @@ -181,6 +181,7 @@ interface UpdateEdgeData { export interface UpdateSchemaParams { type: string parent: string + color: string attributes: { index: string } From 0178ae310d4d3619ed6f55850b786dbd99d5effd Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 02:35:27 +0500 Subject: [PATCH 05/14] fix(color-picker-modal): colors in constant file --- .../ColorPicker/index.tsx | 36 +------------------ .../ColorPickerPopover/Constants/index.ts | 34 ++++++++++++++++++ 2 files changed, 35 insertions(+), 35 deletions(-) create mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/Constants/index.ts diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx index 827dffec9..20b4697e9 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx @@ -7,6 +7,7 @@ import { useState } from 'react' import SaturationPicker from './SaturationPicker' import { hslToHex, hexToHsl } from './ColorUtils' import { useAppStore } from '~/stores/useAppStore' +import { circleColors } from '../../Constants' export const ColorPicker = () => { const { selectedColor, setSelectedColor } = useAppStore((s) => s) @@ -58,41 +59,6 @@ export const ColorPicker = () => { setSelectedColor(newHex) } - const circleColors = [ - '#C62828', - '#D32F2F', - '#F57C00', - '#FF9800', - '#FFB74D', - '#FFEB3B', - '#CDDC39', - '#8BC34A', - '#388E3C', - '#4CAF50', - '#009688', - '#00796B', - '#00BCD4', - '#0097A7', - '#3F51B5', - '#283593', - '#5C6BC0', - '#7E57C2', - '#512DA8', - '#9C27B0', - '#E91E63', - '#F06292', - '#F48FB1', - '#795548', - '#6D4C41', - '#9E9E9E', - '#757575', - '#607D8B', - '#455A64', - '#2196F3', - '#1976D2', - '#64B5F6', - ] - return ( diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/Constants/index.ts b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/Constants/index.ts new file mode 100644 index 000000000..61b834809 --- /dev/null +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/Constants/index.ts @@ -0,0 +1,34 @@ +export const circleColors = [ + '#C62828', + '#D32F2F', + '#F57C00', + '#FF9800', + '#FFB74D', + '#FFEB3B', + '#CDDC39', + '#8BC34A', + '#388E3C', + '#4CAF50', + '#009688', + '#00796B', + '#00BCD4', + '#0097A7', + '#3F51B5', + '#283593', + '#5C6BC0', + '#7E57C2', + '#512DA8', + '#9C27B0', + '#E91E63', + '#F06292', + '#F48FB1', + '#795548', + '#6D4C41', + '#9E9E9E', + '#757575', + '#607D8B', + '#455A64', + '#2196F3', + '#1976D2', + '#64B5F6', +] From 33383a1bc14099e049a90b12f5e06fa943b1b53f Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 16:47:06 +0500 Subject: [PATCH 06/14] fix(color-picker-modal): add pointer to saturation --- .../ColorPicker/SaturationPicker.tsx | 30 +++++++++++++++++-- .../ColorPicker/index.tsx | 8 ++--- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx index 12a694e2d..62d2c8f5c 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx @@ -1,4 +1,5 @@ -import React, { useRef, useEffect } from 'react' +import React, { useRef, useEffect, useState } from 'react' +import styled from 'styled-components' import { hslToHex } from './ColorUtils' interface SaturationPickerProps { @@ -6,8 +7,26 @@ interface SaturationPickerProps { onChange: (color: string) => void } +const Container = styled.div` + position: relative; +` + +const Pointer = styled.div<{ x: number; y: number }>` + position: absolute; + top: ${(props) => props.y - 7}px; + left: ${(props) => props.x - 7}px; + width: 8px; + height: 8px; + border-radius: 50%; + border: 2px solid black; + background-color: white; + box-shadow: inset 0 0 0 3px transparent; + pointer-events: none; +` + const SaturationPicker: React.FC = ({ hue, onChange }) => { const canvasRef = useRef(null) + const [pointerPos, setPointerPos] = useState<{ x: number; y: number } | null>(null) useEffect(() => { const canvas = canvasRef.current @@ -28,8 +47,11 @@ const SaturationPicker: React.FC = ({ hue, onChange }) => ctx.fillStyle = color ctx.fillRect(x, y, 1, 1) + setPointerPos({ x, y }) } } + + setPointerPos({ x: 80, y: 50 }) } } }, [hue]) @@ -47,14 +69,16 @@ const SaturationPicker: React.FC = ({ hue, onChange }) => const hexColor = hslToHex(hue, saturation * 100, brightness * 100) + setPointerPos({ x, y }) onChange(hexColor) } } return ( -
+ -
+ {pointerPos && } + ) } diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx index 20b4697e9..9b2d24db8 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx @@ -11,10 +11,10 @@ import { circleColors } from '../../Constants' export const ColorPicker = () => { const { selectedColor, setSelectedColor } = useAppStore((s) => s) - const [hexValue, setHexValue] = useState('#C990C0') // HEX value input - const [hueValue, setHueValue] = useState(200) // Default hue - const [saturation, setSaturation] = useState(50) // Default saturation - const [brightness, setBrightness] = useState(50) // Default brightness + const [hexValue, setHexValue] = useState(selectedColor) + const [hueValue, setHueValue] = useState(315) + const [saturation, setSaturation] = useState(74) + const [brightness, setBrightness] = useState(59) const handleColorChange = (hexColor: string) => { setSelectedColor(hexColor) From 5d56d27d5403c623c382a8cca485adb275a83f3e Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 4 Oct 2024 17:20:58 +0500 Subject: [PATCH 07/14] fix(color-picker-modal): add pointer to saturation updated --- .../ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx index 62d2c8f5c..e01dd2760 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx @@ -18,8 +18,8 @@ const Pointer = styled.div<{ x: number; y: number }>` width: 8px; height: 8px; border-radius: 50%; - border: 2px solid black; - background-color: white; + border: 2px solid white; + background-color: transparent; box-shadow: inset 0 0 0 3px transparent; pointer-events: none; ` From 5132dca48a637c000f85070867597432185b90f8 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Sat, 5 Oct 2024 12:25:46 +0500 Subject: [PATCH 08/14] fix(color-picker-modal): drag and drop pointer --- .../ColorPicker/SaturationPicker.tsx | 71 ++++++++++++++----- 1 file changed, 52 insertions(+), 19 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx index e01dd2760..394683ecb 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/SaturationPicker.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, useState } from 'react' +import React, { useRef, useEffect, useState, useCallback } from 'react' import styled from 'styled-components' import { hslToHex } from './ColorUtils' @@ -20,13 +20,15 @@ const Pointer = styled.div<{ x: number; y: number }>` border-radius: 50%; border: 2px solid white; background-color: transparent; - box-shadow: inset 0 0 0 3px transparent; + box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3); pointer-events: none; + transition: top 0.1s ease, left 0.1s ease; ` const SaturationPicker: React.FC = ({ hue, onChange }) => { const canvasRef = useRef(null) - const [pointerPos, setPointerPos] = useState<{ x: number; y: number } | null>(null) + const [pointerPos, setPointerPos] = useState<{ x: number; y: number }>({ x: 80, y: 50 }) + const [isDragging, setIsDragging] = useState(false) useEffect(() => { const canvas = canvasRef.current @@ -47,37 +49,68 @@ const SaturationPicker: React.FC = ({ hue, onChange }) => ctx.fillStyle = color ctx.fillRect(x, y, 1, 1) - setPointerPos({ x, y }) } } - - setPointerPos({ x: 80, y: 50 }) } } }, [hue]) - const handleCanvasClick = (e: React.MouseEvent) => { - const canvas = canvasRef.current + const handleCanvasInteraction = useCallback( + (e: React.MouseEvent | MouseEvent) => { + const canvas = canvasRef.current - if (canvas) { - const rect = canvas.getBoundingClientRect() - const x = e.clientX - rect.left - const y = e.clientY - rect.top + if (canvas) { + const rect = canvas.getBoundingClientRect() + const x = e.clientX - rect.left + const y = e.clientY - rect.top + + const saturation = x / canvas.width + const brightness = 1 - y / canvas.height - const saturation = x / canvas.width - const brightness = 1 - y / canvas.height + const hexColor = hslToHex(hue, saturation * 100, brightness * 100) - const hexColor = hslToHex(hue, saturation * 100, brightness * 100) + setPointerPos({ x, y }) + onChange(hexColor) + } + }, + [hue, onChange], + ) + + const handleMouseDown = (e: React.MouseEvent) => { + setIsDragging(true) + handleCanvasInteraction(e) + } - setPointerPos({ x, y }) - onChange(hexColor) + // eslint-disable-next-line react-hooks/exhaustive-deps + const handleMouseMove = (e: MouseEvent) => { + if (isDragging) { + handleCanvasInteraction(e) } } + const handleMouseUp = () => { + setIsDragging(false) + } + + useEffect(() => { + if (isDragging) { + window.addEventListener('mousemove', handleMouseMove) + window.addEventListener('mouseup', handleMouseUp) + } else { + window.removeEventListener('mousemove', handleMouseMove) + window.removeEventListener('mouseup', handleMouseUp) + } + + return () => { + window.removeEventListener('mousemove', handleMouseMove) + window.removeEventListener('mouseup', handleMouseUp) + } + }, [isDragging, handleMouseMove]) + return ( - - {pointerPos && } + + ) } From 1421984b070a995806465ffcd103fe0c62bd284e Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Sat, 5 Oct 2024 18:56:28 +0500 Subject: [PATCH 09/14] fix(icon-picker-modal): new tab for icons and display svg icon --- .../IconPicker/icons.ts | 114 ++++++++++++++++ .../IconPicker/index.tsx | 124 ++++++++++++++++++ .../ColorPickerPopoverView/index.tsx | 6 +- 3 files changed, 243 insertions(+), 1 deletion(-) create mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts create mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts new file mode 100644 index 000000000..46e1839dd --- /dev/null +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts @@ -0,0 +1,114 @@ +// src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts +export const icons = { + AddCircleIcon: 'svg-icons/AddCircleIcon.svg', + AddContentIcon: 'svg-icons/AddContentIcon.svg', + AddLinkIcon: 'svg-icons/AddLinkIcon.svg', + AddSourceIcon: 'svg-icons/AddSourceIcon.svg', + AiPauseIcon: 'svg-icons/AiPauseIcon.svg', + AiPlayIcon: 'svg-icons/AiPlayIcon.svg', + AiSummaryIcon: 'svg-icons/AiSummaryIcon.svg', + AndroidIcon: 'svg-icons/AndroidIcon.svg', + ArrowBackIcon: 'svg-icons/ArrowBackIcon.svg', + ArrowForwardIcon: 'svg-icons/ArrowForwardIcon.svg', + ArrowRightIcon: 'svg-icons/ArrowRight.svg', + AudioIcon: 'svg-icons/AudioIcon.svg', + BitcoinIcon: 'svg-icons/BitcoinIcon.svg', + BoostIcon: 'svg-icons/BoostIcon.svg', + BrowseGalleryIcon: 'svg-icons/BrowseGalleryIcon.svg', + BubbleChartIcon: 'svg-icons/BubbleChartIcon.svg', + BudgetIcon: 'svg-icons/BudgetIcon.svg', + BuildIcon: 'svg-icons/BuildIcon.svg', + CameraCenterIcon: 'svg-icons/CameraCenterIcon.svg', + CancelIcon: 'svg-icons/CancelIcon.svg', + CheckedIcon: 'svg-icons/CheckedIcon.svg', + CheckIcon: 'svg-icons/CheckIcon.svg', + ChevronDownIcon: 'svg-icons/ChevronDownIcon.svg', + ChevronLeftIcon: 'svg-icons/ChevronLeftIcon.svg', + ChevronRightIcon: 'svg-icons/ChevronRightIcon.svg', + ChevronUpIcon: 'svg-icons/ChevronUpIcon.svg', + ChipIcon: 'svg-icons/ChipIcon.svg', + ClearIcon: 'svg-icons/ClearIcon.svg', + CloseIcon: 'svg-icons/CloseIcon.svg', + ColorPickerIcon: 'svg-icons/ColorPickerIcon.svg', + CommunitiesIcon: 'svg-icons/CommunitiesIcon.svg', + CompassIcon: 'svg-icons/CompassIcon.svg', + ConstructionIcon: 'svg-icons/ConstructionIcon.svg', + ContentIcon: 'svg-icons/ContentIcon.svg', + CopyIcon: 'svg-icons/CopyIcon.svg', + CorporationIcon: 'svg-icons/CorporationIcon.svg', + CreateEdgeIcon: 'svg-icons/CreateEdgeIcon.svg', + DefaultShowIcon: 'svg-icons/DefaultShowIcon.svg', + DeleteIcon: 'svg-icons/DeleteIcon.svg', + DeleteNodeIcon: 'svg-icons/DeleteNodeIcon.svg', + DesignServicesIcon: 'svg-icons/DesignServicesIcon.svg', + DocumentIcon: 'svg-icons/DocumentIcon.svg', + DownloadIcon: 'svg-icons/DownloadIcon.svg', + EditIcon: 'svg-icons/EditIcon.svg', + EditNodeIcon: 'svg-icons/EditNodeIcon.svg', + EditTopicIcon: 'svg-icons/EditTopicIcon.svg', + EpisodeIcon: 'svg-icons/EpisodeIcon.svg', + EventIcon: 'svg-icons/EventIcon.svg', + ExploreIcon: 'svg-icons/ExploreIcon.svg', + FamilyHistoryIcon: 'svg-icons/FamilyHistoryIcon.svg', + FeedbackIcon: 'svg-icons/FeedbackIcon.svg', + FilterOffIcon: 'svg-icons/FilterOffIcon.svg', + FingerprintIcon: 'svg-icons/FingerprintIcon.svg', + FlipIcon: 'svg-icons/FlipIcon.svg', + FortIcon: 'svg-icons/FortIcon.svg', + FunctionIcon: 'svg-icons/FunctionIcon.svg', + GlobeIcon: 'svg-icons/GlobeIcon.svg', + GrainIcon: 'svg-icons/GrainIcon.svg', + HandymanIcon: 'svg-icons/HandymanIcon.svg', + HardwareIcon: 'svg-icons/HardwareIcon.svg', + HashTagIcon: 'svg-icons/HashTag.svg', + HashtagIcon: 'svg-icons/HashtagIcon.svg', + HelpIcon: 'svg-icons/HelpIcon.svg', + HomeIcon: 'svg-icons/HomeIcon.svg', + InfoIcon: 'svg-icons/InfoIcon.svg', + JoystickIcon: 'svg-icons/JoystickIcon.svg', + LinkIcon: 'svg-icons/LinkIcon.svg', + MenuIcon: 'svg-icons/MenuIcon.svg', + MergeIcon: 'svg-icons/MergeIcon.svg', + MoneyIcon: 'svg-icons/MoneyIcon.svg', + MuteVolumeIcon: 'svg-icons/MuteVolumeIcon.svg', + NodeCircleIcon: 'svg-icons/NodeCircleIcon.svg', + NodesIcon: 'svg-icons/NodesIcon.svg', + NotesIcon: 'svg-icons/NotesIcon.svg', + OrganizationIcon: 'svg-icons/OrganizationIcon.svg', + PauseIcon: 'svg-icons/PauseIcon.svg', + PersonAddIcon: 'svg-icons/PersonAdd.svg', + PersonIcon: 'svg-icons/PersonIcon.svg', + PhoneIcon: 'svg-icons/PhoneIcon.svg', + PlaceIcon: 'svg-icons/PlaceIcon.svg', + PlayIcon: 'svg-icons/PlayIcon.svg', + PlusIcon: 'svg-icons/PlusIcon.svg', + PropertyHideIcon: 'svg-icons/PropertyHide.svg', + PropertyShowIcon: 'svg-icons/PropertyShow.svg', + PublicIcon: 'svg-icons/PublicIcon.svg', + QrCodeIcon: 'svg-icons/QrCodeIcon.svg', + ReloadIcon: 'svg-icons/ReloadIcon.svg', + RobotIcon: 'svg-icons/RobotIcon.svg', + SaveIcon: 'svg-icons/SaveIcon.svg', + ScheduleIcon: 'svg-icons/ScheduleIcon.svg', + SchoolIcon: 'svg-icons/SchoolIcon.svg', + SearchFilterCloseIcon: 'svg-icons/SearchFilterCloseIcon.svg', + SearchFilterIcon: 'svg-icons/SearchFilterIcon.svg', + SearchIcon: 'svg-icons/SearchIcon.svg', + SensorsIcon: 'svg-icons/SensorsIcon.svg', + SentimentDataIcon: 'svg-icons/SentimentDataIcon.svg', + SettingsIcon: 'svg-icons/SettingsIcon.svg', + ShieldPersonIcon: 'svg-icons/ShieldPersonIcon.svg', + SortFilterIcon: 'svg-icons/SortFilterIcon.svg', + SoundIcon: 'svg-icons/SoundIcon.svg', + SourcesIcon: 'svg-icons/SourcesIcon.svg', + SourcesTableIcon: 'svg-icons/SourcesTableIcon.svg', + StackIcon: 'svg-icons/StackIcon.svg', + SuccessFeedbackIcon: 'svg-icons/SucessFeedBackIcon.svg', + SumFunctionIcon: 'svg-icons/SumFunctionIcon.svg', + ThreeDotsIcon: 'svg-icons/ThreeDotsIcons.svg', + TwitterIcon: 'svg-icons/TwitterIcon.svg', + VideoIcon: 'svg-icons/VideoIcon.svg', + VisibilityOffIcon: 'svg-icons/VisibilityOff.svg', + VisibilityOnIcon: 'svg-icons/VisibilityOn.svg', + VolumeIcon: 'svg-icons/VolumeIcon.svg', +} diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx new file mode 100644 index 000000000..e37861936 --- /dev/null +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx @@ -0,0 +1,124 @@ +import React, { useState } from 'react' +import styled, { css } from 'styled-components' +import { icons } from './icons' +import { Flex } from '~/components/common/Flex' +import { colors } from '~/utils' + +export const IconPicker: React.FC = () => { + const [selectedIcon, setSelectedIcon] = useState('') + + console.log(selectedIcon) + + const handleIconChange = (icon: string) => { + setSelectedIcon(icon) + } + + return ( + + + + + + {Object.keys(icons).map((iconKey) => ( + handleIconChange(iconKey)}> + {iconKey} + + ))} + + + + + + ) +} + +const Wrapper = styled(Flex)` + flex: 1; + + .title { + font-size: 20px; + color: ${colors.white}; + font-family: Barlow; + font-size: 22px; + font-style: normal; + font-weight: 600; + line-height: normal; + } + + .subtitle { + color: ${colors.GRAY3}; + font-family: Barlow; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; + } + + & .filters { + overflow-x: auto; + } + + .load-more { + margin: 8px auto; + align-self: center; + } +` + +const TableWrapper = styled(Flex)` + min-height: 0; + overflow: auto; + flex: 1; + width: 100%; +` + +const PickerContainer = styled.div` + padding: 0 20px; + width: 300px; + height: 350px; + overflow: auto; +` + +const IconPaletteWrapper = styled.div` + margin-left: 18px; + margin-bottom: 6px; +` + +const IconGrid = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin-bottom: 16px; +` + +const IconBox = styled.div<{ isSelected: boolean }>` + width: 50px; + height: 50px; + margin: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 10px; + border: none; + border-radius: 8px; + + ${({ isSelected }) => + isSelected + ? css` + background: ${colors.black}; + border: 1px solid ${colors.primaryBlue}; + ` + : css` + &:hover { + background: ${colors.black}; + border: 1px solid ${colors.primaryBlue}; + } + `} + + .badge__img { + width: 30px; + height: 30px; + object-fit: contain; + filter: brightness(0) invert(1); + } +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx index f2abc7eca..542d4a186 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx @@ -5,6 +5,7 @@ import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { colors } from '~/utils/colors' import { ColorPicker } from './ColorPicker' +import { IconPicker } from './IconPicker' interface TabPanelProps { children?: React.ReactNode @@ -42,7 +43,10 @@ export const ColorPickerPopoverView = () => { setValue(newValue) } - const tabs = [{ label: 'Color', component: ColorPicker }] + const tabs = [ + { label: 'Color', component: ColorPicker }, + { label: 'Icon', component: IconPicker }, + ] return ( From e8a3cb4f440f4c4983d6b29b7e77fed9165044ab Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Sat, 5 Oct 2024 19:37:40 +0500 Subject: [PATCH 10/14] fix(icon-picker-modal): reflect icon on button when we select --- .../IconPicker/index.tsx | 7 +++-- .../BlueprintModal/Body/Editor/index.tsx | 26 ++++++++++++++----- src/stores/useAppStore/index.ts | 4 +++ 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx index e37861936..8966a03c0 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx @@ -1,13 +1,12 @@ -import React, { useState } from 'react' +import React from 'react' import styled, { css } from 'styled-components' import { icons } from './icons' import { Flex } from '~/components/common/Flex' import { colors } from '~/utils' +import { useAppStore } from '~/stores/useAppStore' export const IconPicker: React.FC = () => { - const [selectedIcon, setSelectedIcon] = useState('') - - console.log(selectedIcon) + const { selectedIcon, setSelectedIcon } = useAppStore((s) => s) const handleIconChange = (icon: string) => { setSelectedIcon(icon) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index e719b323a..671d57d36 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { Button, Grid } from '@mui/material' -import { useEffect, useMemo, useState } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { FieldValues, FormProvider, useForm } from 'react-hook-form' import { ClipLoader } from 'react-spinners' import styled from 'styled-components' @@ -18,8 +18,8 @@ import { useModal } from '~/stores/useModalStore' import { colors } from '~/utils' import { CreateCustomNodeAttribute } from './CustomAttributesStep' import MediaOptions from './MediaOptions' +import { icons } from './ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons' import { convertAttributes, parsedObjProps, parseJson } from './utils' -import ColorPickerIcon from '~/components/Icons/ColorPickerIcon' import { ColorPickerPopover } from './ColorPickerPopover' import { useAppStore } from '~/stores/useAppStore' @@ -218,7 +218,7 @@ export const Editor = ({ sourceLink: false, }) - const { selectedColor } = useAppStore((s) => s) + const { selectedColor, selectedIcon } = useAppStore((s) => s) const [isPopoverOpen, setPopoverOpen] = useState(!!selectedSchema) const handleColorPickerPopover = () => setPopoverOpen(!isPopoverOpen) @@ -523,7 +523,11 @@ export const Editor = ({ /> - + {selectedIcon} @@ -552,7 +556,11 @@ export const Editor = ({ /> - + {selectedIcon} @@ -725,11 +733,17 @@ const ColorPickerIconWrapper = styled.span<{ selectedColor?: string }>` height: 36px; border-radius: 6px; margin-left: 12px; - color: ${colors.colorPickerThing}; background: ${(props) => props.selectedColor ?? colors.THING}; display: flex; justify-content: center; align-items: center; + + .badge__img { + width: 22px; + height: 22px; + object-fit: contain; + filter: brightness(0) invert(1); + } ` const InputIconWrapper = styled(Flex)` diff --git a/src/stores/useAppStore/index.ts b/src/stores/useAppStore/index.ts index 447581088..a20a546d5 100644 --- a/src/stores/useAppStore/index.ts +++ b/src/stores/useAppStore/index.ts @@ -31,6 +31,8 @@ export type AppStore = { setShowCollapseButton: (_: boolean) => void selectedColor: string setSelectedColor: (color: string) => void + selectedIcon: string + setSelectedIcon: (color: string) => void } const defaultData = { @@ -48,6 +50,7 @@ const defaultData = { currentPlayingAudio: null, showCollapseButton: true, selectedColor: '#962777', + selectedIcon: 'ColorPickerIcon', } export const useAppStore = create((set, get) => ({ @@ -72,4 +75,5 @@ export const useAppStore = create((set, get) => ({ setAppMetaData: (appMetaData) => set({ appMetaData }), setShowCollapseButton: (showCollapseButton) => set({ showCollapseButton }), setSelectedColor: (selectedColor) => set({ selectedColor }), + setSelectedIcon: (selectedIcon) => set({ selectedIcon }), })) From 67dfe9ab41a2505edf3518ab6054331f9e2f73c8 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Sat, 5 Oct 2024 19:51:03 +0500 Subject: [PATCH 11/14] fix(icon-picker-modal): pass icon in post and put request --- .../ModalsContainer/BlueprintModal/Body/Editor/index.tsx | 8 ++++++++ src/network/fetchSourcesData/index.ts | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 671d57d36..6fcb6d508 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -72,6 +72,7 @@ const handleSubmitForm = async ( isUpdate = false, deletedAttributes: string[], selectedColor: string, + selectedIcon: string, mediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean }, initialMediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean }, ): Promise => { @@ -89,6 +90,7 @@ const handleSubmitForm = async ( index?: string media_url?: string color?: string + icon?: string image_url?: string source_link?: string } = { @@ -101,6 +103,10 @@ const handleSubmitForm = async ( requestData.color = selectedColor } + if (selectedIcon) { + requestData.icon = selectedIcon + } + if (mediaOptions.videoAudio) { requestData.media_url = '' } else if (initialMediaOptions.videoAudio) { @@ -363,6 +369,7 @@ export const Editor = ({ type: data.type, parent: newParent as string, color: selectedColor, + icon: selectedIcon, attributes: { index: selectedIndex as string, }, @@ -376,6 +383,7 @@ export const Editor = ({ !!selectedSchema, deletedAttributes, selectedColor, + selectedIcon, mediaOptions, { videoAudio: !!selectedSchema?.media_url, diff --git a/src/network/fetchSourcesData/index.ts b/src/network/fetchSourcesData/index.ts index 1e6e5cf57..7b0793de6 100644 --- a/src/network/fetchSourcesData/index.ts +++ b/src/network/fetchSourcesData/index.ts @@ -181,7 +181,8 @@ interface UpdateEdgeData { export interface UpdateSchemaParams { type: string parent: string - color: string + color?: string + icon?: string attributes: { index: string } From 4000bfc4785dd9ec0a8f9680f264bb1c39146c78 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Sat, 5 Oct 2024 20:58:10 +0500 Subject: [PATCH 12/14] fix(icon-picker-modal): use store spell correction --- src/stores/useAppStore/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/useAppStore/index.ts b/src/stores/useAppStore/index.ts index a20a546d5..039089f18 100644 --- a/src/stores/useAppStore/index.ts +++ b/src/stores/useAppStore/index.ts @@ -32,7 +32,7 @@ export type AppStore = { selectedColor: string setSelectedColor: (color: string) => void selectedIcon: string - setSelectedIcon: (color: string) => void + setSelectedIcon: (icon: string) => void } const defaultData = { From 8fcef5ca86aabed8ee65f50c65903825ebcbf519 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Mon, 7 Oct 2024 13:55:26 +0500 Subject: [PATCH 13/14] fix(icon-picker-modal): use icon that auto generated --- .../IconPicker/icons.ts | 301 +++++++++++------- .../IconPicker/index.tsx | 22 +- .../BlueprintModal/Body/Editor/index.tsx | 18 +- 3 files changed, 210 insertions(+), 131 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts index 46e1839dd..e615f0100 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts @@ -1,114 +1,191 @@ -// src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts +import AddCircleIcon from '~/components/Icons/AddCircleIcon' +import AddContentIcon from '~/components/Icons/AddContentIcon' +import AddSourceIcon from '~/components/Icons/AddSourceIcon' +import AiPauseIcon from '~/components/Icons/AiPauseIcon' +import AiPlayIcon from '~/components/Icons/AiPlayIcon' +import AiSummaryIcon from '~/components/Icons/AiSummaryIcon' +import AndroidIcon from '~/components/Icons/AndroidIcon' +import ArrowBackIcon from '~/components/Icons/ArrowBackIcon' +import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon' +import ArrowRightIcon from '~/components/Icons/ArrowRight' +import AudioIcon from '~/components/Icons/AudioIcon' +import BitcoinIcon from '~/components/Icons/BitcoinIcon' +import BoostIcon from '~/components/Icons/BoostIcon' +import BudgetIcon from '~/components/Icons/BudgetIcon' +import BuildIcon from '~/components/Icons/BuildIcon' +import CameraCenterIcon from '~/components/Icons/CameraCenterIcon' +import CheckedIcon from '~/components/Icons/CheckedIcon' +import CheckIcon from '~/components/Icons/CheckIcon' +import ChevronDownIcon from '~/components/Icons/ChevronDownIcon' +import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon' +import ChevronRightIcon from '~/components/Icons/ChevronRightIcon' +import ChevronUpIcon from '~/components/Icons/ChevronUpIcon' +import ClearIcon from '~/components/Icons/ClearIcon' +import ColorPickerIcon from '~/components/Icons/ColorPickerIcon' +import CommunitiesIcon from '~/components/Icons/CommunitiesIcon' +import CompassIcon from '~/components/Icons/CompassIcon' +import ConstructionIcon from '~/components/Icons/ConstructionIcon' +import ContentIcon from '~/components/Icons/ContentIcon' +import CopyIcon from '~/components/Icons/CopyIcon' +import CorporationIcon from '~/components/Icons/CorporationIcon' +import DeleteIcon from '~/components/Icons/DeleteIcon' +import DeleteNodeIcon from '~/components/Icons/DeleteNodeIcon' +import DesignServicesIcon from '~/components/Icons/DesignServicesIcon' +import DocumentIcon from '~/components/Icons/DocumentIcon' +import DownloadIcon from '~/components/Icons/DownloadIcon' +import EditIcon from '~/components/Icons/EditIcon' +import EditNodeIcon from '~/components/Icons/EditNodeIcon' +import EditTopicIcon from '~/components/Icons/EditTopicIcon' +import EpisodeIcon from '~/components/Icons/EpisodeIcon' +import EventIcon from '~/components/Icons/EventIcon' +import ExploreIcon from '~/components/Icons/ExploreIcon' +import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon' +import FeedbackIcon from '~/components/Icons/FeedbackIcon' +import FingerprintIcon from '~/components/Icons/FingerprintIcon' +import FlipIcon from '~/components/Icons/FlipIcon' +import FortIcon from '~/components/Icons/FortIcon' +import FunctionIcon from '~/components/Icons/FunctionIcon' +import GlobeIcon from '~/components/Icons/GlobeIcon' +import GrainIcon from '~/components/Icons/GrainIcon' +import HandymanIcon from '~/components/Icons/HandymanIcon' +import HardwareIcon from '~/components/Icons/HardwareIcon' +import HashTagIcon from '~/components/Icons/HashTag' +import HelpIcon from '~/components/Icons/HelpIcon' +import HomeIcon from '~/components/Icons/HomeIcon' +import InfoIcon from '~/components/Icons/InfoIcon' +import JoystickIcon from '~/components/Icons/JoystickIcon' +import LinkIcon from '~/components/Icons/LinkIcon' +import MenuIcon from '~/components/Icons/MenuIcon' +import MergeIcon from '~/components/Icons/MergeIcon' +import MoneyIcon from '~/components/Icons/MoneyIcon' +import NodeCircleIcon from '~/components/Icons/NodeCircleIcon' +import NodesIcon from '~/components/Icons/NodesIcon' +import NotesIcon from '~/components/Icons/NotesIcon' +import OrganizationIcon from '~/components/Icons/OrganizationIcon' +import PauseIcon from '~/components/Icons/PauseIcon' +import PersonAddIcon from '~/components/Icons/PersonAdd' +import PersonIcon from '~/components/Icons/PersonIcon' +import PhoneIcon from '~/components/Icons/PhoneIcon' +import PlaceIcon from '~/components/Icons/PlaceIcon' +import PlayIcon from '~/components/Icons/PlayIcon' +import PlusIcon from '~/components/Icons/PlusIcon' +import PublicIcon from '~/components/Icons/PublicIcon' +import QrCodeIcon from '~/components/Icons/QrCodeIcon' +import ReloadIcon from '~/components/Icons/ReloadIcon' +import RobotIcon from '~/components/Icons/RobotIcon' +import SaveIcon from '~/components/Icons/SaveIcon' +import SchoolIcon from '~/components/Icons/SchoolIcon' +import SearchFilterCloseIcon from '~/components/Icons/SearchFilterCloseIcon' +import SearchFilterIcon from '~/components/Icons/SearchFilterIcon' +import SearchIcon from '~/components/Icons/SearchIcon' +import SensorsIcon from '~/components/Icons/SensorsIcon' +import SettingsIcon from '~/components/Icons/SettingsIcon' +import ShieldPersonIcon from '~/components/Icons/ShieldPersonIcon' +import SortFilterIcon from '~/components/Icons/SortFilterIcon' +import SoundIcon from '~/components/Icons/SoundIcon' +import SourcesIcon from '~/components/Icons/SourcesIcon' +import SourcesTableIcon from '~/components/Icons/SourcesTableIcon' +import SuccessFeedbackIcon from '~/components/Icons/SucessFeedBackIcon' +import SumFunctionIcon from '~/components/Icons/SumFunctionIcon' +import ThreeDotsIcon from '~/components/Icons/ThreeDotsIcons' +import TwitterIcon from '~/components/Icons/TwitterIcon' +import VideoIcon from '~/components/Icons/VideoIcon' +import VisibilityOffIcon from '~/components/Icons/VisibilityOff' +import VisibilityOnIcon from '~/components/Icons/VisibilityOn' + export const icons = { - AddCircleIcon: 'svg-icons/AddCircleIcon.svg', - AddContentIcon: 'svg-icons/AddContentIcon.svg', - AddLinkIcon: 'svg-icons/AddLinkIcon.svg', - AddSourceIcon: 'svg-icons/AddSourceIcon.svg', - AiPauseIcon: 'svg-icons/AiPauseIcon.svg', - AiPlayIcon: 'svg-icons/AiPlayIcon.svg', - AiSummaryIcon: 'svg-icons/AiSummaryIcon.svg', - AndroidIcon: 'svg-icons/AndroidIcon.svg', - ArrowBackIcon: 'svg-icons/ArrowBackIcon.svg', - ArrowForwardIcon: 'svg-icons/ArrowForwardIcon.svg', - ArrowRightIcon: 'svg-icons/ArrowRight.svg', - AudioIcon: 'svg-icons/AudioIcon.svg', - BitcoinIcon: 'svg-icons/BitcoinIcon.svg', - BoostIcon: 'svg-icons/BoostIcon.svg', - BrowseGalleryIcon: 'svg-icons/BrowseGalleryIcon.svg', - BubbleChartIcon: 'svg-icons/BubbleChartIcon.svg', - BudgetIcon: 'svg-icons/BudgetIcon.svg', - BuildIcon: 'svg-icons/BuildIcon.svg', - CameraCenterIcon: 'svg-icons/CameraCenterIcon.svg', - CancelIcon: 'svg-icons/CancelIcon.svg', - CheckedIcon: 'svg-icons/CheckedIcon.svg', - CheckIcon: 'svg-icons/CheckIcon.svg', - ChevronDownIcon: 'svg-icons/ChevronDownIcon.svg', - ChevronLeftIcon: 'svg-icons/ChevronLeftIcon.svg', - ChevronRightIcon: 'svg-icons/ChevronRightIcon.svg', - ChevronUpIcon: 'svg-icons/ChevronUpIcon.svg', - ChipIcon: 'svg-icons/ChipIcon.svg', - ClearIcon: 'svg-icons/ClearIcon.svg', - CloseIcon: 'svg-icons/CloseIcon.svg', - ColorPickerIcon: 'svg-icons/ColorPickerIcon.svg', - CommunitiesIcon: 'svg-icons/CommunitiesIcon.svg', - CompassIcon: 'svg-icons/CompassIcon.svg', - ConstructionIcon: 'svg-icons/ConstructionIcon.svg', - ContentIcon: 'svg-icons/ContentIcon.svg', - CopyIcon: 'svg-icons/CopyIcon.svg', - CorporationIcon: 'svg-icons/CorporationIcon.svg', - CreateEdgeIcon: 'svg-icons/CreateEdgeIcon.svg', - DefaultShowIcon: 'svg-icons/DefaultShowIcon.svg', - DeleteIcon: 'svg-icons/DeleteIcon.svg', - DeleteNodeIcon: 'svg-icons/DeleteNodeIcon.svg', - DesignServicesIcon: 'svg-icons/DesignServicesIcon.svg', - DocumentIcon: 'svg-icons/DocumentIcon.svg', - DownloadIcon: 'svg-icons/DownloadIcon.svg', - EditIcon: 'svg-icons/EditIcon.svg', - EditNodeIcon: 'svg-icons/EditNodeIcon.svg', - EditTopicIcon: 'svg-icons/EditTopicIcon.svg', - EpisodeIcon: 'svg-icons/EpisodeIcon.svg', - EventIcon: 'svg-icons/EventIcon.svg', - ExploreIcon: 'svg-icons/ExploreIcon.svg', - FamilyHistoryIcon: 'svg-icons/FamilyHistoryIcon.svg', - FeedbackIcon: 'svg-icons/FeedbackIcon.svg', - FilterOffIcon: 'svg-icons/FilterOffIcon.svg', - FingerprintIcon: 'svg-icons/FingerprintIcon.svg', - FlipIcon: 'svg-icons/FlipIcon.svg', - FortIcon: 'svg-icons/FortIcon.svg', - FunctionIcon: 'svg-icons/FunctionIcon.svg', - GlobeIcon: 'svg-icons/GlobeIcon.svg', - GrainIcon: 'svg-icons/GrainIcon.svg', - HandymanIcon: 'svg-icons/HandymanIcon.svg', - HardwareIcon: 'svg-icons/HardwareIcon.svg', - HashTagIcon: 'svg-icons/HashTag.svg', - HashtagIcon: 'svg-icons/HashtagIcon.svg', - HelpIcon: 'svg-icons/HelpIcon.svg', - HomeIcon: 'svg-icons/HomeIcon.svg', - InfoIcon: 'svg-icons/InfoIcon.svg', - JoystickIcon: 'svg-icons/JoystickIcon.svg', - LinkIcon: 'svg-icons/LinkIcon.svg', - MenuIcon: 'svg-icons/MenuIcon.svg', - MergeIcon: 'svg-icons/MergeIcon.svg', - MoneyIcon: 'svg-icons/MoneyIcon.svg', - MuteVolumeIcon: 'svg-icons/MuteVolumeIcon.svg', - NodeCircleIcon: 'svg-icons/NodeCircleIcon.svg', - NodesIcon: 'svg-icons/NodesIcon.svg', - NotesIcon: 'svg-icons/NotesIcon.svg', - OrganizationIcon: 'svg-icons/OrganizationIcon.svg', - PauseIcon: 'svg-icons/PauseIcon.svg', - PersonAddIcon: 'svg-icons/PersonAdd.svg', - PersonIcon: 'svg-icons/PersonIcon.svg', - PhoneIcon: 'svg-icons/PhoneIcon.svg', - PlaceIcon: 'svg-icons/PlaceIcon.svg', - PlayIcon: 'svg-icons/PlayIcon.svg', - PlusIcon: 'svg-icons/PlusIcon.svg', - PropertyHideIcon: 'svg-icons/PropertyHide.svg', - PropertyShowIcon: 'svg-icons/PropertyShow.svg', - PublicIcon: 'svg-icons/PublicIcon.svg', - QrCodeIcon: 'svg-icons/QrCodeIcon.svg', - ReloadIcon: 'svg-icons/ReloadIcon.svg', - RobotIcon: 'svg-icons/RobotIcon.svg', - SaveIcon: 'svg-icons/SaveIcon.svg', - ScheduleIcon: 'svg-icons/ScheduleIcon.svg', - SchoolIcon: 'svg-icons/SchoolIcon.svg', - SearchFilterCloseIcon: 'svg-icons/SearchFilterCloseIcon.svg', - SearchFilterIcon: 'svg-icons/SearchFilterIcon.svg', - SearchIcon: 'svg-icons/SearchIcon.svg', - SensorsIcon: 'svg-icons/SensorsIcon.svg', - SentimentDataIcon: 'svg-icons/SentimentDataIcon.svg', - SettingsIcon: 'svg-icons/SettingsIcon.svg', - ShieldPersonIcon: 'svg-icons/ShieldPersonIcon.svg', - SortFilterIcon: 'svg-icons/SortFilterIcon.svg', - SoundIcon: 'svg-icons/SoundIcon.svg', - SourcesIcon: 'svg-icons/SourcesIcon.svg', - SourcesTableIcon: 'svg-icons/SourcesTableIcon.svg', - StackIcon: 'svg-icons/StackIcon.svg', - SuccessFeedbackIcon: 'svg-icons/SucessFeedBackIcon.svg', - SumFunctionIcon: 'svg-icons/SumFunctionIcon.svg', - ThreeDotsIcon: 'svg-icons/ThreeDotsIcons.svg', - TwitterIcon: 'svg-icons/TwitterIcon.svg', - VideoIcon: 'svg-icons/VideoIcon.svg', - VisibilityOffIcon: 'svg-icons/VisibilityOff.svg', - VisibilityOnIcon: 'svg-icons/VisibilityOn.svg', - VolumeIcon: 'svg-icons/VolumeIcon.svg', + AddCircleIcon, + AddContentIcon, + AddSourceIcon, + AiPauseIcon, + AiPlayIcon, + AiSummaryIcon, + AndroidIcon, + ArrowBackIcon, + ArrowForwardIcon, + ArrowRightIcon, + AudioIcon, + BitcoinIcon, + BoostIcon, + BudgetIcon, + BuildIcon, + CameraCenterIcon, + CheckedIcon, + CheckIcon, + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronUpIcon, + ClearIcon, + ColorPickerIcon, + CommunitiesIcon, + CompassIcon, + ConstructionIcon, + ContentIcon, + CopyIcon, + CorporationIcon, + DeleteIcon, + DeleteNodeIcon, + DesignServicesIcon, + DocumentIcon, + DownloadIcon, + EditIcon, + EditNodeIcon, + EditTopicIcon, + EpisodeIcon, + EventIcon, + ExploreIcon, + FamilyHistoryIcon, + FeedbackIcon, + FingerprintIcon, + FlipIcon, + FortIcon, + FunctionIcon, + GlobeIcon, + GrainIcon, + HandymanIcon, + HardwareIcon, + HashTagIcon, + HelpIcon, + HomeIcon, + InfoIcon, + JoystickIcon, + LinkIcon, + MenuIcon, + MergeIcon, + MoneyIcon, + NodeCircleIcon, + NodesIcon, + NotesIcon, + OrganizationIcon, + PauseIcon, + PersonAddIcon, + PersonIcon, + PhoneIcon, + PlaceIcon, + PlayIcon, + PlusIcon, + PublicIcon, + QrCodeIcon, + ReloadIcon, + RobotIcon, + SaveIcon, + SchoolIcon, + SearchFilterCloseIcon, + SearchFilterIcon, + SearchIcon, + SensorsIcon, + SettingsIcon, + ShieldPersonIcon, + SortFilterIcon, + SoundIcon, + SourcesIcon, + SourcesTableIcon, + SuccessFeedbackIcon, + SumFunctionIcon, + ThreeDotsIcon, + TwitterIcon, + VideoIcon, + VisibilityOffIcon, + VisibilityOnIcon, } diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx index 8966a03c0..9ae881364 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx @@ -18,11 +18,19 @@ export const IconPicker: React.FC = () => { - {Object.keys(icons).map((iconKey) => ( - handleIconChange(iconKey)}> - {iconKey} - - ))} + {Object.keys(icons).map((iconKey) => { + const IconComponent = icons[iconKey as keyof typeof icons] + + return ( + handleIconChange(iconKey)} + > + + + ) + })} @@ -114,10 +122,10 @@ const IconBox = styled.div<{ isSelected: boolean }>` } `} - .badge__img { + svg { width: 30px; height: 30px; object-fit: contain; - filter: brightness(0) invert(1); + color: white; } ` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 6fcb6d508..ac0f748a9 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -480,6 +480,8 @@ export const Editor = ({ return undefined }, [selectedSchema, attributes]) + const IconComponent = icons[selectedIcon as keyof typeof icons] + return ( @@ -531,11 +533,7 @@ export const Editor = ({ /> - {selectedIcon} + @@ -564,11 +562,7 @@ export const Editor = ({ /> - {selectedIcon} + @@ -746,11 +740,11 @@ const ColorPickerIconWrapper = styled.span<{ selectedColor?: string }>` justify-content: center; align-items: center; - .badge__img { + svg { width: 22px; height: 22px; object-fit: contain; - filter: brightness(0) invert(1); + color: white; } ` From d9c9e30382360bbade8844f7a10813bafbdb1ff5 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Mon, 7 Oct 2024 14:18:09 +0500 Subject: [PATCH 14/14] fix(icon-picker-modal): use icon that auto generated1 --- .../IconPicker/icons.ts | 191 ------------------ .../IconPicker/index.tsx | 8 +- .../BlueprintModal/Body/Editor/index.tsx | 6 +- src/stores/useAppStore/index.ts | 2 +- 4 files changed, 8 insertions(+), 199 deletions(-) delete mode 100644 src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts deleted file mode 100644 index e615f0100..000000000 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons.ts +++ /dev/null @@ -1,191 +0,0 @@ -import AddCircleIcon from '~/components/Icons/AddCircleIcon' -import AddContentIcon from '~/components/Icons/AddContentIcon' -import AddSourceIcon from '~/components/Icons/AddSourceIcon' -import AiPauseIcon from '~/components/Icons/AiPauseIcon' -import AiPlayIcon from '~/components/Icons/AiPlayIcon' -import AiSummaryIcon from '~/components/Icons/AiSummaryIcon' -import AndroidIcon from '~/components/Icons/AndroidIcon' -import ArrowBackIcon from '~/components/Icons/ArrowBackIcon' -import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon' -import ArrowRightIcon from '~/components/Icons/ArrowRight' -import AudioIcon from '~/components/Icons/AudioIcon' -import BitcoinIcon from '~/components/Icons/BitcoinIcon' -import BoostIcon from '~/components/Icons/BoostIcon' -import BudgetIcon from '~/components/Icons/BudgetIcon' -import BuildIcon from '~/components/Icons/BuildIcon' -import CameraCenterIcon from '~/components/Icons/CameraCenterIcon' -import CheckedIcon from '~/components/Icons/CheckedIcon' -import CheckIcon from '~/components/Icons/CheckIcon' -import ChevronDownIcon from '~/components/Icons/ChevronDownIcon' -import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon' -import ChevronRightIcon from '~/components/Icons/ChevronRightIcon' -import ChevronUpIcon from '~/components/Icons/ChevronUpIcon' -import ClearIcon from '~/components/Icons/ClearIcon' -import ColorPickerIcon from '~/components/Icons/ColorPickerIcon' -import CommunitiesIcon from '~/components/Icons/CommunitiesIcon' -import CompassIcon from '~/components/Icons/CompassIcon' -import ConstructionIcon from '~/components/Icons/ConstructionIcon' -import ContentIcon from '~/components/Icons/ContentIcon' -import CopyIcon from '~/components/Icons/CopyIcon' -import CorporationIcon from '~/components/Icons/CorporationIcon' -import DeleteIcon from '~/components/Icons/DeleteIcon' -import DeleteNodeIcon from '~/components/Icons/DeleteNodeIcon' -import DesignServicesIcon from '~/components/Icons/DesignServicesIcon' -import DocumentIcon from '~/components/Icons/DocumentIcon' -import DownloadIcon from '~/components/Icons/DownloadIcon' -import EditIcon from '~/components/Icons/EditIcon' -import EditNodeIcon from '~/components/Icons/EditNodeIcon' -import EditTopicIcon from '~/components/Icons/EditTopicIcon' -import EpisodeIcon from '~/components/Icons/EpisodeIcon' -import EventIcon from '~/components/Icons/EventIcon' -import ExploreIcon from '~/components/Icons/ExploreIcon' -import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon' -import FeedbackIcon from '~/components/Icons/FeedbackIcon' -import FingerprintIcon from '~/components/Icons/FingerprintIcon' -import FlipIcon from '~/components/Icons/FlipIcon' -import FortIcon from '~/components/Icons/FortIcon' -import FunctionIcon from '~/components/Icons/FunctionIcon' -import GlobeIcon from '~/components/Icons/GlobeIcon' -import GrainIcon from '~/components/Icons/GrainIcon' -import HandymanIcon from '~/components/Icons/HandymanIcon' -import HardwareIcon from '~/components/Icons/HardwareIcon' -import HashTagIcon from '~/components/Icons/HashTag' -import HelpIcon from '~/components/Icons/HelpIcon' -import HomeIcon from '~/components/Icons/HomeIcon' -import InfoIcon from '~/components/Icons/InfoIcon' -import JoystickIcon from '~/components/Icons/JoystickIcon' -import LinkIcon from '~/components/Icons/LinkIcon' -import MenuIcon from '~/components/Icons/MenuIcon' -import MergeIcon from '~/components/Icons/MergeIcon' -import MoneyIcon from '~/components/Icons/MoneyIcon' -import NodeCircleIcon from '~/components/Icons/NodeCircleIcon' -import NodesIcon from '~/components/Icons/NodesIcon' -import NotesIcon from '~/components/Icons/NotesIcon' -import OrganizationIcon from '~/components/Icons/OrganizationIcon' -import PauseIcon from '~/components/Icons/PauseIcon' -import PersonAddIcon from '~/components/Icons/PersonAdd' -import PersonIcon from '~/components/Icons/PersonIcon' -import PhoneIcon from '~/components/Icons/PhoneIcon' -import PlaceIcon from '~/components/Icons/PlaceIcon' -import PlayIcon from '~/components/Icons/PlayIcon' -import PlusIcon from '~/components/Icons/PlusIcon' -import PublicIcon from '~/components/Icons/PublicIcon' -import QrCodeIcon from '~/components/Icons/QrCodeIcon' -import ReloadIcon from '~/components/Icons/ReloadIcon' -import RobotIcon from '~/components/Icons/RobotIcon' -import SaveIcon from '~/components/Icons/SaveIcon' -import SchoolIcon from '~/components/Icons/SchoolIcon' -import SearchFilterCloseIcon from '~/components/Icons/SearchFilterCloseIcon' -import SearchFilterIcon from '~/components/Icons/SearchFilterIcon' -import SearchIcon from '~/components/Icons/SearchIcon' -import SensorsIcon from '~/components/Icons/SensorsIcon' -import SettingsIcon from '~/components/Icons/SettingsIcon' -import ShieldPersonIcon from '~/components/Icons/ShieldPersonIcon' -import SortFilterIcon from '~/components/Icons/SortFilterIcon' -import SoundIcon from '~/components/Icons/SoundIcon' -import SourcesIcon from '~/components/Icons/SourcesIcon' -import SourcesTableIcon from '~/components/Icons/SourcesTableIcon' -import SuccessFeedbackIcon from '~/components/Icons/SucessFeedBackIcon' -import SumFunctionIcon from '~/components/Icons/SumFunctionIcon' -import ThreeDotsIcon from '~/components/Icons/ThreeDotsIcons' -import TwitterIcon from '~/components/Icons/TwitterIcon' -import VideoIcon from '~/components/Icons/VideoIcon' -import VisibilityOffIcon from '~/components/Icons/VisibilityOff' -import VisibilityOnIcon from '~/components/Icons/VisibilityOn' - -export const icons = { - AddCircleIcon, - AddContentIcon, - AddSourceIcon, - AiPauseIcon, - AiPlayIcon, - AiSummaryIcon, - AndroidIcon, - ArrowBackIcon, - ArrowForwardIcon, - ArrowRightIcon, - AudioIcon, - BitcoinIcon, - BoostIcon, - BudgetIcon, - BuildIcon, - CameraCenterIcon, - CheckedIcon, - CheckIcon, - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronUpIcon, - ClearIcon, - ColorPickerIcon, - CommunitiesIcon, - CompassIcon, - ConstructionIcon, - ContentIcon, - CopyIcon, - CorporationIcon, - DeleteIcon, - DeleteNodeIcon, - DesignServicesIcon, - DocumentIcon, - DownloadIcon, - EditIcon, - EditNodeIcon, - EditTopicIcon, - EpisodeIcon, - EventIcon, - ExploreIcon, - FamilyHistoryIcon, - FeedbackIcon, - FingerprintIcon, - FlipIcon, - FortIcon, - FunctionIcon, - GlobeIcon, - GrainIcon, - HandymanIcon, - HardwareIcon, - HashTagIcon, - HelpIcon, - HomeIcon, - InfoIcon, - JoystickIcon, - LinkIcon, - MenuIcon, - MergeIcon, - MoneyIcon, - NodeCircleIcon, - NodesIcon, - NotesIcon, - OrganizationIcon, - PauseIcon, - PersonAddIcon, - PersonIcon, - PhoneIcon, - PlaceIcon, - PlayIcon, - PlusIcon, - PublicIcon, - QrCodeIcon, - ReloadIcon, - RobotIcon, - SaveIcon, - SchoolIcon, - SearchFilterCloseIcon, - SearchFilterIcon, - SearchIcon, - SensorsIcon, - SettingsIcon, - ShieldPersonIcon, - SortFilterIcon, - SoundIcon, - SourcesIcon, - SourcesTableIcon, - SuccessFeedbackIcon, - SumFunctionIcon, - ThreeDotsIcon, - TwitterIcon, - VideoIcon, - VisibilityOffIcon, - VisibilityOnIcon, -} diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx index 9ae881364..2a198f0bb 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/IconPicker/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled, { css } from 'styled-components' -import { icons } from './icons' +import { Icons } from '~/components/Icons' import { Flex } from '~/components/common/Flex' import { colors } from '~/utils' import { useAppStore } from '~/stores/useAppStore' @@ -18,8 +18,8 @@ export const IconPicker: React.FC = () => { - {Object.keys(icons).map((iconKey) => { - const IconComponent = icons[iconKey as keyof typeof icons] + {Object.keys(Icons).map((iconKey) => { + const IconComponent = Icons[iconKey as keyof typeof Icons] return ( { isSelected={selectedIcon === iconKey} onClick={() => handleIconChange(iconKey)} > - + {IconComponent && } ) })} diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index ac0f748a9..b77a7499f 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -18,7 +18,7 @@ import { useModal } from '~/stores/useModalStore' import { colors } from '~/utils' import { CreateCustomNodeAttribute } from './CustomAttributesStep' import MediaOptions from './MediaOptions' -import { icons } from './ColorPickerPopover/ColorPickerPopoverView/IconPicker/icons' +import { Icons } from '~/components/Icons' import { convertAttributes, parsedObjProps, parseJson } from './utils' import { ColorPickerPopover } from './ColorPickerPopover' import { useAppStore } from '~/stores/useAppStore' @@ -480,7 +480,7 @@ export const Editor = ({ return undefined }, [selectedSchema, attributes]) - const IconComponent = icons[selectedIcon as keyof typeof icons] + const IconComponent = Icons[selectedIcon as keyof typeof Icons] return ( @@ -533,7 +533,7 @@ export const Editor = ({ /> - + {IconComponent && } diff --git a/src/stores/useAppStore/index.ts b/src/stores/useAppStore/index.ts index 039089f18..7a68b8e15 100644 --- a/src/stores/useAppStore/index.ts +++ b/src/stores/useAppStore/index.ts @@ -50,7 +50,7 @@ const defaultData = { currentPlayingAudio: null, showCollapseButton: true, selectedColor: '#962777', - selectedIcon: 'ColorPickerIcon', + selectedIcon: 'ConstructionIcon', } export const useAppStore = create((set, get) => ({