Skip to content

Commit

Permalink
Feature - Custom color for components (#251)
Browse files Browse the repository at this point in the history
  • Loading branch information
Giuseppe Renzi authored Oct 4, 2023
1 parent c3a98f8 commit 395a4e0
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 31 deletions.
35 changes: 32 additions & 3 deletions frontend/src/components/Pages/Home/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Typography, Grid } from '@material-ui/core';
import TemplateCard from '../../organisms/TemplateCard';
import { themes, animations, layouts, fonts } from '../../../config/cardTemplate';
import { themes, animations, layouts, fonts, colorValues } from '../../../config/cardTemplate';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ContributorsCard from '../../ContributorsCard/ContributorCard'
Expand All @@ -11,6 +11,8 @@ const Home = () => {
const [animation, setAnimation] = useState(animations[0]);
const [layout, setLayout] = useState(layouts[0]);
const [font, setFont] = useState(fonts[0]);
const [fontColor, setFontColor] = useState("white");
const [bgColor, setBgColor] = useState("black");

return (
<React.Fragment>
Expand Down Expand Up @@ -77,11 +79,38 @@ const Home = () => {
/>
</Grid>

<Grid item xs={12} sm={6} lg={3}>
<Autocomplete
id="font-color"
options={colorValues}
value={fontColor}
style={{ width: 300 }}
onChange={(_event, newValue) => {
if (newValue != null)
setFontColor(newValue)
}}
renderInput={(params) => <TextField {...params} label="Font color" placeholder="Select a color" variant="outlined" />}
/>
</Grid>
<Grid item xs={12} sm={6} lg={3}>
<Autocomplete
id="bg-color"
options={colorValues}
value={bgColor}
style={{ width: 300 }}
onChange={(_event, newValue) => {
if (newValue != null)
setBgColor(newValue)
}}
renderInput={(params) => <TextField {...params} label="Background color" placeholder="Select a color" variant="outlined" />}
/>
</Grid>

</Grid>

<Grid container spacing={4}>
<Grid item xs={12} style={{ margin: '20px' }}>
<TemplateCard theme={theme} animation={animation} layout={layout} font={font} />
<TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} />
</Grid>
<Grid item xs={12}>
<Typography align="center">Other layouts</Typography>
Expand All @@ -90,7 +119,7 @@ const Home = () => {
layouts.filter((item) => item !== layout).map((restLayout) => {
return (
<Grid key={restLayout} item xs={12} sm={12} md={6}>
<TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} />
<TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor}/>
</Grid>
)
})
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/components/organisms/TemplateCard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,20 @@ const TemplateCard = (props) => {
quote: "This is going to be the Github quote for your README",
author: "Open Source",
};
template.setTheme(mainThemes[props.theme]);

const theme = mainThemes[props.theme];
if (props.fontColor) {
theme.quote_color = props.fontColor;
}
if (props.bgColor) {
theme.bg_color = props.bgColor;
}

template.setTheme(theme);
template.setData(data);
template.setFont(mainFonts[props.font]);
template.setAnimation(mainAnimations[props.animation]);
template.setLayout(mainLayouts[props.layout]);

const file = new Blob([getTemplate(template)], { type: "image/svg+xml" });
const url = URL.createObjectURL(file);

Expand All @@ -53,7 +61,7 @@ const TemplateCard = (props) => {
setShowSnackbar(false);
};

const quoteUrl = `${originUrl}/quote?theme=${props.theme}&animation=${props.animation}&layout=${props.layout}&font=${props.font}`;
const quoteUrl = `${originUrl}/quote?theme=${props.theme}&animation=${props.animation}&layout=${props.layout}&font=${props.font}&fontColor=${props.fontColor}&bgColor=${props.bgColor}`;

function SlideTransition(prop) {
return <Slide {...prop} direction="up" />;
Expand Down
32 changes: 32 additions & 0 deletions frontend/src/config/cardTemplate/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,35 @@ export const fonts = [
'Redressed',
'Calligraffitti',
];
export const colorValues = [
"red",
"blue",
"green",
"yellow",
"purple",
"orange",
"black",
"white",
"pink",
"brown",
"gray",
"cyan",
"magenta",
"indigo",
"teal",
"lavender",
"maroon",
"coral",
"gold",
"silver",
"lime",
"olive",
"turquoise",
"violet",
"beige",
"navy",
"plum",
"salmon",
"skyblue",
"mintgreen"
];
50 changes: 25 additions & 25 deletions frontend/src/util/layouts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const layouts = {
font-family:customFont, Arial, Helvetica, sans-serif;
padding: 40px 20px;
width: 600px;
background-color: #${template.theme.bg_color};
background-color: ${template.theme.bg_color};
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
${template.animation.animation};
Expand All @@ -21,7 +21,7 @@ const layouts = {
margin-bottom: 5px;
font-weight: 500;
font-style: oblique;
color: #${template.theme.quote_color};
color: ${template.theme.quote_color};
}
.container h3::before {
content: open-quote;
Expand All @@ -38,13 +38,13 @@ const layouts = {
font-style: italic;
padding: 5px;
text-align: right;
color: #${template.theme.author_color};
color: ${template.theme.author_color};
}`;
},
structure: (template) => {
return `<div class="container">
<h3> ${template.quote} </h3>
<p>- ${template.author === "Unknown" ? "Anonymous" : template.author
<h3 style="color: ${template.theme.quote_color}"> ${template.quote} </h3>
<p style="color: ${template.theme.quote_color}">- ${template.author === "Unknown" ? "Anonymous" : template.author
} </p>
</div>`;
},
Expand All @@ -60,7 +60,7 @@ const layouts = {
}
${template.animation.keyframes}
.square-brackets-quote blockquote {
border:solid 1em #${template.theme.bg_color === "fffefe"
border:solid 1em ${template.theme.bg_color === "fffefe"
? "ccc"
: template.theme.bg_color
};
Expand All @@ -82,7 +82,7 @@ const layouts = {
top: -1em;
}
.square-brackets-quote cite {
color:#757575;
color: ${template.theme.quote_color};
display: block;
font-size:small;
font-style: normal;
Expand All @@ -100,7 +100,7 @@ const layouts = {
structure: (template) => {
return `<div class="square-brackets-quote">
<blockquote>
<p>${template.quote}</p>
<p style="color: ${template.theme.quote_color}">${template.quote}</p>
<cite>${template.author === "Unknown"
? "Anonymous"
: template.author
Expand All @@ -118,21 +118,21 @@ const layouts = {
text-align:center;
font-family:customFont,Arial,Helvetica,sans-serif;
position:relative;
color:#${template.theme.quote_color};
color:${template.theme.quote_color};
padding:15px;
background: radial-gradient(circle at top left, transparent 15px, #${template.theme.bg_color} 0) top left,
radial-gradient(circle at top right, transparent 15px, #${template.theme.bg_color} 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #${template.theme.bg_color} 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #${template.theme.bg_color} 0) bottom left;
background: radial-gradient(circle at top left, transparent 15px, ${template.theme.bg_color} 0) top left,
radial-gradient(circle at top right, transparent 15px, ${template.theme.bg_color} 0) top right,
radial-gradient(circle at bottom right, transparent 15px, ${template.theme.bg_color} 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, ${template.theme.bg_color} 0) bottom left;
${template.animation.animation};
background-size: 51% 51%;
background-repeat: no-repeat;
}
${template.animation.keyframes}
span{
background:#${template.theme.bg_color};
color:#${template.theme.author_color};
background:${template.theme.bg_color};
color:${template.theme.author_color};
padding:0 10px;
font-size:20px;
position:relative;
Expand Down Expand Up @@ -215,12 +215,12 @@ const layouts = {
<div id="borderRight"></div>
<div id="borderBottom"></div>
<div id="borderTop"></div>
<span>${template.author === "Unknown"
<span style="color: ${template.theme.quote_color}">${template.author === "Unknown"
? "Anonymous"
: template.author
}</span>
<blockquote>
<p><i>${template.quote}</i></p>
<p style="color: ${template.theme.quote_color}"><i>${template.quote}</i></p>
</blockquote>
</div>`;
},
Expand All @@ -236,7 +236,7 @@ const layouts = {
}
${template.animation.keyframes}
blockquote {
border: solid 6px #${template.theme.bg_color === "fffefe"
border: solid 6px ${template.theme.bg_color === "fffefe"
? "757575"
: template.theme.bg_color
};
Expand Down Expand Up @@ -277,8 +277,8 @@ const layouts = {
structure: (template) => {
return `<div class="quote">
<blockquote>
<p>${template.quote}</p>
<cite>${template.author === "Unknown"
<p style="color: ${template.theme.quote_color}">${template.quote}</p>
<cite style="color: ${template.theme.quote_color}">${template.author === "Unknown"
? "Anonymous"
: template.author
}</cite>
Expand All @@ -291,7 +291,7 @@ const layouts = {
return `
.container{
background-color:#000;
background-color: ${template.theme.bg_color};
width:550px;
height:auto;
padding:30px 20px 40px 40px;
Expand All @@ -301,7 +301,7 @@ const layouts = {
${template.animation.keyframes}
.quote4{
background-color:#000;
background-color: ${template.theme.bg_color};
color:#fff;
width:450px;
text-align:justify;
Expand All @@ -316,7 +316,7 @@ const layouts = {
.quote4::before, .quote4::after{
position:absolute;
font-size:105px;
background:#000;
background: ${template.theme.bg_color};
display:block;
height:30px;
width:45px;
Expand Down Expand Up @@ -392,8 +392,8 @@ const layouts = {
<div class="container">
<div class="quote4">
<div class="border"></div>
<div class="txt">${template.quote}</div>
<div class="from">${template.author === "Unknown"
<div class="txt" style="color: ${template.theme.quote_color}">${template.quote}</div>
<div class="from" style="color: ${template.theme.quote_color}">${template.author === "Unknown"
? "Anonymous"
: template.author
}</div>
Expand Down
9 changes: 9 additions & 0 deletions src/api/controllers/quotesController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ const quoteController = async (req, res, next) => {
try {
let theme = themes[req.query.theme] ? themes[req.query.theme] : themes["default"];

const fontColor = req.query.fontColor;
if (fontColor) {
theme.quote_color = fontColor;
}
const bgColor = req.query.bgColor;
if (bgColor) {
theme.bg_color = bgColor;
}

let animation = animations[req.query.animation] ? animations[req.query.animation]
: animations["default"];

Expand Down

0 comments on commit 395a4e0

Please sign in to comment.