Skip to content

Commit a68e236

Browse files
ThomasKranitsasThomasKranitsas
authored
Merge pull request #355 from topcoder-platform/issue-338
The styles in 'Style & Theme' section should open a modal upon clicki…
2 parents 0daec2f + b5c25e1 commit a68e236

File tree

6 files changed

+228
-2
lines changed

6 files changed

+228
-2
lines changed

‎src/components/Modal/styles.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
.stickyHeader {
2727
position: sticky;
2828
top: 0;
29+
z-index: 1;
2930
}
3031

3132
.titleContainer {

‎src/routes/Products/components/BasicInfoForm/index.jsx

+18
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import DataExplorationIcon from "../../../../assets/images/data-exploration-icon
2323
import FindMeDataIcon from "../../../../assets/images/find-me-data-icon.svg";
2424
import WebsiteDesignIcon from "../../../../assets/images/website-design-icon.svg";
2525
import AddWebsiteIcon from "../../../../assets/images/add-website-icon.svg";
26+
import StylesOptionsModal from "../StyleOptionsModal"
2627
import "./styles.module.scss";
2728
import {
2829
PrimaryDataChallengeOptions,
@@ -31,6 +32,7 @@ import {
3132
ColorOptionsItems,
3233
} from "../../../../constants";
3334
import StyleOptions from "../StyleOptions";
35+
import styles from "../../../../assets/data/website-design-styles.json";
3436

3537
const BasicInfoForm = ({
3638
formData,
@@ -47,6 +49,7 @@ const BasicInfoForm = ({
4749
PrimaryDataChallengeOptions
4850
);
4951
const [selectedColor, setSelectedColor] = useState({});
52+
const [selectedStyleOption, setSelectedStyleOption] = useState(null);
5053

5154
const {
5255
title,
@@ -760,6 +763,7 @@ const BasicInfoForm = ({
760763
<StyleOptions
761764
likes={formData?.likedStyles?.value}
762765
dislikes={formData?.dislikedStyles?.value}
766+
onSelect={(style) => setSelectedStyleOption(style)}
763767
onLike={(likes) => {
764768
handleInputChange("likedStyles", likes, likes);
765769
}}
@@ -791,6 +795,20 @@ const BasicInfoForm = ({
791795
</div>
792796
</PageRow>
793797
)}
798+
{isWebsiteDesign && selectedStyleOption && (
799+
<StylesOptionsModal
800+
style={selectedStyleOption}
801+
likes={formData?.likedStyles?.value}
802+
dislikes={formData?.dislikedStyles?.value}
803+
onLike={(likes) => {
804+
handleInputChange("likedStyles", likes, likes);
805+
}}
806+
onDislike={(dislikes) => {
807+
handleInputChange("dislikedStyles", dislikes, dislikes);
808+
}}
809+
onDismiss={() => setSelectedStyleOption(null)}
810+
/>
811+
)}
794812

795813
{isWebsiteDesign && (
796814
<PageRow styleName="form-row">

‎src/routes/Products/components/StyleOptions/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import styles from "../../../../assets/data/website-design-styles.json";
1212
import HelpIcon from "../../../../components/HelpIcon"
1313
import "./styles.module.scss";
1414

15-
const StyleOptions = ({ likes = [], dislikes = [], onLike, onDislike }) => {
15+
const StyleOptions = ({ likes = [], dislikes = [], onLike, onDislike, onSelect }) => {
1616
return (
1717
<div styleName="styleOptions">
1818
{styles.map((style, index) => (
@@ -33,7 +33,7 @@ const StyleOptions = ({ likes = [], dislikes = [], onLike, onDislike }) => {
3333
</HelpIcon>
3434
</div>
3535
<div styleName="box">
36-
<div styleName="preview" />
36+
<div styleName="preview" role="button" onClick={() => onSelect(style)} />
3737
<div styleName="actions">
3838
<LikeIcon
3939
role="button"

‎src/routes/Products/components/StyleOptions/styles.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
.preview {
2424
width: 240px;
2525
height: 200px;
26+
cursor: pointer;
2627
}
2728

2829
.actions {

‎src/routes/Products/components/StyleOptionsModal/index.jsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* Style Options component
3+
*/
4+
import classNames from "classnames";
5+
import PT from "prop-types";
6+
import React from "react";
7+
import _ from "lodash";
8+
import LikeIcon from "../../../../assets/images/thumbsup.svg";
9+
import DislikeIcon from "../../../../assets/images/thumbsdown.svg";
10+
import PageDivider from "../../../../components/PageDivider"
11+
import "./styles.module.scss";
12+
import Modal from "components/Modal"
13+
14+
const StylesOptionsModal = ({ onDismiss, style, likes = [], dislikes = [], onLike, onDislike }) => {
15+
return (
16+
<Modal
17+
show={true}
18+
halfWidth
19+
handleClose={onDismiss}
20+
>
21+
<div styleName="styleWrapper">
22+
<div
23+
styleName={classNames(
24+
"style",
25+
style.className
26+
)}
27+
>
28+
<div styleName="name">
29+
<span>{style.name}</span> &nbsp;
30+
</div>
31+
<PageDivider />
32+
<div styleName="description">
33+
<span>{style.description}</span>
34+
</div>
35+
<div styleName="box">
36+
<div styleName="preview" />
37+
<div styleName="actions">
38+
<LikeIcon
39+
role="button"
40+
onClick={() => {
41+
if (likes.includes(style.name)) {
42+
onLike(likes.filter(s => s !== style.name))
43+
} else {
44+
onLike([...likes, style.name])
45+
if (dislikes.includes(style.name)) {
46+
onDislike(dislikes.filter(s => s !== style.name))
47+
}
48+
}
49+
}}
50+
styleName={_.includes(likes, style.name) ? "liked" : null}
51+
/>
52+
<DislikeIcon
53+
role="button"
54+
onClick={() => {
55+
if (dislikes.includes(style.name)) {
56+
onDislike(dislikes.filter(s => s !== style.name))
57+
} else {
58+
onDislike([...dislikes, style.name])
59+
if (likes.includes(style.name)) {
60+
onLike(likes.filter(s => s !== style.name))
61+
}
62+
}
63+
}}
64+
styleName={_.includes(dislikes, style.name) ? "disliked" : null}
65+
/>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</Modal>
71+
);
72+
};
73+
74+
StylesOptionsModal.defaultProps = {
75+
};
76+
77+
StylesOptionsModal.propTypes = {
78+
likes: PT.arrayOf(PT.string),
79+
dislikes: PT.arrayOf(PT.string),
80+
onLike: PT.func,
81+
onDislike: PT.func,
82+
};
83+
84+
export default StylesOptionsModal;

‎src/routes/Products/components/StyleOptionsModal/styles.module.scss

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import "styles/include";
2+
3+
.styleWrapper {
4+
min-width:500px;
5+
.style {
6+
position: relative;
7+
padding: 16px;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
font-size: 22px;
12+
13+
.box {
14+
border: 1px solid $black-20;
15+
border-radius: 4px;
16+
}
17+
18+
.preview {
19+
width: 100%;
20+
height: 450px;
21+
}
22+
23+
.actions {
24+
display: flex;
25+
justify-content: center;
26+
padding: 20px;
27+
28+
svg {
29+
width: 25px;
30+
height: 25px;
31+
margin-left: 10px;
32+
margin-right: 10px;
33+
}
34+
}
35+
36+
&.dark-saturated {
37+
.preview {
38+
background: url('../../../../assets/images/products/website-design/dark-saturated.png');
39+
background-size: cover;
40+
}
41+
}
42+
&.light-airy {
43+
.preview {
44+
background: url('../../../../assets/images/products/website-design/light-airy.png');
45+
background-size: cover;
46+
}
47+
}
48+
&.fun-playful {
49+
.preview {
50+
background: url('../../../../assets/images/products/website-design/fun-playful.png');
51+
background-size: cover;
52+
}
53+
}
54+
&.mature-serious {
55+
.preview {
56+
background: url('../../../../assets/images/products/website-design/mature-serious.png');
57+
background-size: cover;
58+
}
59+
}
60+
&.simple-minimalist {
61+
.preview {
62+
background: url('../../../../assets/images/products/website-design/simple-minimalist.png');
63+
background-size: cover;
64+
}
65+
}
66+
&.vibrant-colorful {
67+
.preview {
68+
background: url('../../../../assets/images/products/website-design/vibrant-colorful.png');
69+
background-size: cover;
70+
}
71+
}
72+
&.soft-organic {
73+
.preview {
74+
background: url('../../../../assets/images/products/website-design/soft-organic.png');
75+
background-size: cover;
76+
}
77+
}
78+
&.bold-rugged {
79+
.preview {
80+
background: url('../../../../assets/images/products/website-design/bold-ragged.png');
81+
background-size: cover;
82+
}
83+
}
84+
}
85+
86+
.liked {
87+
fill: $green1;
88+
* {
89+
fill: $green1;
90+
}
91+
}
92+
93+
.disliked {
94+
fill: $green1;
95+
* {
96+
fill: $green1;
97+
}
98+
}
99+
100+
.name {
101+
@include font-roboto;
102+
display: flex;
103+
justify-content: flex-start;
104+
style: $black;
105+
font-size: 22px;
106+
font-weight: 600;
107+
line-height: 26px;
108+
text-align: left;
109+
margin-top: -10px;
110+
margin-bottom: 8px;
111+
112+
.toolTip {
113+
margin-left: 2px;
114+
}
115+
}
116+
117+
.description {
118+
font-size: 16px;
119+
line-height: 24px;
120+
margin-bottom: 10px;
121+
}
122+
}

0 commit comments

Comments
 (0)