Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added color to the images based on the learning path #391

Merged
merged 3 commits into from
Aug 8, 2024
Merged

Added color to the images based on the learning path #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4868c9b
Added color to the images based on the learning path
Coder-Srinivas Aug 5, 2024
5bd3f4f
Added support for png images
Coder-Srinivas Aug 7, 2024
b3fac1c
Removed duplicate image
Coder-Srinivas Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions frontend/public/Other/placeholder.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/study-card-images/card-images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand All @@ -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' },

Expand Down
50 changes: 50 additions & 0 deletions frontend/src/components/study-card-images/study-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
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 }) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not an expert with SVGs so im curious about this approach, it looks like we are modifying the fill property in the SVG and then replacing the image?

would this be possible/simpler with CSS? something like this? not sure if it work, but would simplify this a bit: https://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that approach initially and found that since we are using an img tag and using the svg as a src, it would not work. For the above approach to work, the svg file should be rendered directly instead of using an img tag, since the images are in the public folder, I could not import them, to use them directly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another problem I noticed with that approach is that on setting the fill values on the svg container, it automatically applies to all the paths, unless a fill property is already present. So we have to manually edit all the paths which don't have a fill value and set it to none, and remove the fill value for the paths which have the secondary color. This way by setting the fill value once, it is applied to all the paths which don't have a fill value (secondary color). The only problem is, the svg files have to be edited manually and should be placed inside the src folder

const [imgSrc, setImgSrc] = useState('');

useEffect(() => {
if(src.includes('.png')){
setImgSrc(src)
return;
}
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 <img src={imgSrc} alt={altText} className='study-card-image' />;
};


export const StudyCardImage: React.FC<{study: ParticipantStudy}> = ({ study }) => {

return (
<SVGManipulator
src={getImageUrl(study.imageId)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More a question of where getImageUrl is defined - do we still want to reference the kinetic s3 bucket or are all the images officially local now with your placeholder addition here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getImageUrl is defined in the card-images.tsx file which is inside the study-cards-images component folder. The kinetic s3 bucket is no longer needed.

fillColor={study.learningPath?.color || colors.lavender}
altText={getAltText(study.imageId)}
/>
)
}
1 change: 1 addition & 0 deletions frontend/src/screens/admin/manage-learning-paths.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,7 @@ const LearningPathForm: FC<{
<ColorInput format='hex'
withAsterisk
withPicker={false}
withEyeDropper={false}
label="Color"
error={form.errors['color']}
{...form.getInputProps('color')}
Expand Down
7 changes: 2 additions & 5 deletions frontend/src/screens/learner/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { cx, React, useState } from '@common'
import { Box, getImageUrl } from '@components'
import { Box, StudyCardImage } from '@components'
import { useEnvironment, useIsMobileDevice, useApi } from '@lib'
import { isMultiSession, getStudyPi, getStudyLead, launchStudy, isStudyLaunchable, getPointsForCurrentStage, getCurrentStudyDuration, getNextAvailableStage } from '@models'
import { ParticipantStudy, Study } from '@api'
Expand Down Expand Up @@ -321,10 +321,7 @@ const CardContent: FC<{study: ParticipantStudy}> = ({ study }) => {

return (
<Flex justify='center' align='flex-start' direction='column' h="100%">
<img src={getImageUrl(study.imageId)}
alt={study.imageId}
className='study-card-image'
/>
<StudyCardImage study={study} />
<CompleteFlag study={study} />
<Title order={6} >{study.titleForParticipants}</Title>
<small
Expand Down
1 change: 1 addition & 0 deletions frontend/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const colors = {
coral50: '#F8D5CD',
purple50: '#DFE1F9',
pink50: '#F6DBED',
lavender: '#6153bd',

// Neutral colors
gray90: '#2F2F2F', // Example: tooltip background color
Expand Down