From 4868c9b16f28744b109a64e5d7c4e1918ca5aa72 Mon Sep 17 00:00:00 2001 From: Coder_Srinivas Date: Mon, 5 Aug 2024 14:53:50 -0500 Subject: [PATCH 1/3] Added color to the images based on the learning path --- frontend/public/Other/placeholder.svg | 9 ++++ frontend/src/components/index.ts | 1 + .../study-card-images/card-images.tsx | 4 +- .../study-card-images/study-image.tsx | 46 +++++++++++++++++++ .../screens/admin/manage-learning-paths.tsx | 1 + frontend/src/screens/learner/card.tsx | 7 +-- frontend/src/theme.ts | 1 + 7 files changed, 62 insertions(+), 7 deletions(-) create mode 100644 frontend/public/Other/placeholder.svg create mode 100644 frontend/src/components/study-card-images/study-image.tsx diff --git a/frontend/public/Other/placeholder.svg b/frontend/public/Other/placeholder.svg new file mode 100644 index 000000000..751311d79 --- /dev/null +++ b/frontend/public/Other/placeholder.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index ae055f69c..305f2707e 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -17,6 +17,7 @@ export * from './segment-bar' export * from './multi-session-bar' export * from './form-select' export * from './study-card-images/card-images' +export * from './study-card-images/study-image' export * from './form/character-count' export * from './form/field-error-message' diff --git a/frontend/src/components/study-card-images/card-images.tsx b/frontend/src/components/study-card-images/card-images.tsx index cb4a80bd5..d8af31311 100644 --- a/frontend/src/components/study-card-images/card-images.tsx +++ b/frontend/src/components/study-card-images/card-images.tsx @@ -33,12 +33,12 @@ interface CardImage { export const getImageUrl = (imageId: string | undefined) => { if (!imageId) { - return `https://kinetic-app-assets.s3.amazonaws.com/assets/card-images/placeholder.svg` + return '/Other/placeholder.svg' } const image = cardImages.find(image => image.imageId === imageId) if (!image) { - return `https://kinetic-app-assets.s3.amazonaws.com/assets/card-images/placeholder.svg` + return '/Other/placeholder.svg' } return `/${image.category}/${image.imageId}`; diff --git a/frontend/src/components/study-card-images/study-image.tsx b/frontend/src/components/study-card-images/study-image.tsx new file mode 100644 index 000000000..bc262e79a --- /dev/null +++ b/frontend/src/components/study-card-images/study-image.tsx @@ -0,0 +1,46 @@ +import { React, useState, useEffect } from '@common' +import { ParticipantStudy } from '@api' +import { getImageUrl, getAltText } from './card-images' +import { colors } from '@theme'; + +const SVGManipulator: React.FC<{src: string, fillColor: string, altText: string}> = ({ src, fillColor, altText }) => { + const [imgSrc, setImgSrc] = useState(''); + + useEffect(() => { + fetch(src) + .then((response) => response.text()) + .then((data) => { + const parser = new DOMParser(); + const doc = parser.parseFromString(data, 'image/svg+xml'); + + const paths = doc.querySelectorAll('path'); + paths.forEach((path) => { + const currentFill = path.getAttribute('fill'); + const newFill = currentFill && currentFill != colors.lavender ? fillColor : currentFill; + path.setAttribute('fill', newFill || 'none'); + }); + const updatedSVG = new XMLSerializer().serializeToString(doc); + + const svgBlob = new Blob([updatedSVG], { type: 'image/svg+xml' }); + const url = URL.createObjectURL(svgBlob); + + setImgSrc(url); + + return () => URL.revokeObjectURL(url); + }); + }, [src, fillColor]); + + return {altText}; +}; + + +export const StudyCardImage: React.FC<{study: ParticipantStudy}> = ({ study }) => { + + return ( + + ) +} \ No newline at end of file diff --git a/frontend/src/screens/admin/manage-learning-paths.tsx b/frontend/src/screens/admin/manage-learning-paths.tsx index b1a752de0..19beea2ea 100644 --- a/frontend/src/screens/admin/manage-learning-paths.tsx +++ b/frontend/src/screens/admin/manage-learning-paths.tsx @@ -317,6 +317,7 @@ const LearningPathForm: FC<{ = ({ study }) => { return ( - {study.imageId} + {study.titleForParticipants} Date: Wed, 7 Aug 2024 00:41:22 -0500 Subject: [PATCH 2/3] Added support for png images --- frontend/src/components/study-card-images/study-image.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/study-card-images/study-image.tsx b/frontend/src/components/study-card-images/study-image.tsx index bc262e79a..a8c2f7ba5 100644 --- a/frontend/src/components/study-card-images/study-image.tsx +++ b/frontend/src/components/study-card-images/study-image.tsx @@ -7,6 +7,10 @@ const SVGManipulator: React.FC<{src: string, fillColor: string, altText: string} const [imgSrc, setImgSrc] = useState(''); useEffect(() => { + if(src.includes('.png')){ + setImgSrc(src) + return; + } fetch(src) .then((response) => response.text()) .then((data) => { From b3fac1cc2d58834c2bdbf1ce1c086eb2cee9a18b Mon Sep 17 00:00:00 2001 From: Coder_Srinivas Date: Wed, 7 Aug 2024 00:48:08 -0500 Subject: [PATCH 3/3] Removed duplicate image --- frontend/src/components/study-card-images/card-images.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/study-card-images/card-images.tsx b/frontend/src/components/study-card-images/card-images.tsx index d8af31311..d57fd4d1b 100644 --- a/frontend/src/components/study-card-images/card-images.tsx +++ b/frontend/src/components/study-card-images/card-images.tsx @@ -61,7 +61,6 @@ export const cardImages: CardImage[] = [ { imageId: 'Education-Online-Learning-02--Streamline-Bangalore.svg', category: 'Curated Studies', altText: 'A hat placed on top of a screen which is displaying books' }, { imageId: 'Job-Interview--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'A Job interview' }, { imageId: 'Leave-A-Review--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'Leave a Review' }, - { imageId: 'Leave-A-Review--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'Leave a Review' }, { imageId: 'Marketing-Filling-Survey-01--Streamline-Bangalore-Curated.svg',category: 'Curated Studies', altText: 'Marketting Filling Survey' }, { imageId: 'Task-List--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'A Task List' },