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

Task #0000 - UI of feedback form for player #461

Merged
merged 6 commits into from
Aug 8, 2024
Merged

Task #0000 - UI of feedback form for player #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d75719
ui
Ekta29yadav Aug 8, 2024
ef79c5c
Merge branch 'main' of github.com:NIUANULP/nulp-elite-ui into ui
Ekta29yadav Aug 8, 2024
ce1578b
ui
Ekta29yadav Aug 8, 2024
304fbc3
Merge branch 'main' of github.com:NIUANULP/nulp-elite-ui into ui
Ekta29yadav Aug 8, 2024
9394bfc
Merge branch 'main' of github.com:NIUANULP/nulp-elite-ui into ui
Ekta29yadav Aug 8, 2024
4797c82
ui
Ekta29yadav Aug 8, 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
81 changes: 72 additions & 9 deletions packages/nulp_elite/src/components/FeedbackPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import {
TextField,
} from "@mui/material";
import StarIcon from "@mui/icons-material/Star";
import { styled } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";

const FeedbackPopup = ({ open, onClose }) => {
const [rating, setRating] = useState(0);
Expand All @@ -21,6 +24,14 @@ const FeedbackPopup = ({ open, onClose }) => {
const [showTextBox, setShowTextBox] = useState(false);
const [checkboxes, setCheckboxes] = useState({});

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
padding: theme.spacing(2),
},
"& .MuiDialogActions-root": {
padding: theme.spacing(1),
},
}));
// Mapping of checkbox names to labels
const checkboxLabels = {
conceptWell: "Understood the concept well",
Expand Down Expand Up @@ -84,6 +95,9 @@ const FeedbackPopup = ({ open, onClose }) => {
console.log("Additional Feedback:", additionalFeedback);
onClose();
};
const handleClose = () => {
setOpen(false);
};

const renderCheckboxes = () => {
if (rating >= 5) {
Expand Down Expand Up @@ -249,11 +263,25 @@ const FeedbackPopup = ({ open, onClose }) => {
};

return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Feedback</DialogTitle>
<DialogContent>
<Typography variant="h6">Rate Us</Typography>
<Box display="flex" alignItems="center">
<BootstrapDialog open={open} onClose={onClose} className="feedback-popup">
<DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
Feedback
</DialogTitle>
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
<DialogContent dividers>
<Box className="h5-title">Rate Us</Box>
<Box>
<Rating
name="feedback-rating"
value={rating}
Expand All @@ -267,22 +295,57 @@ const FeedbackPopup = ({ open, onClose }) => {
</Typography>
</Box>
<Typography
variant="body2"
className="h6-title"
style={{ marginTop: "10px", fontStyle: "italic" }}
>
{ratingMessages[rating]}
</Typography>
{renderCheckboxes()}
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
<Button onClick={onClose} className="custom-btn-default">
Cancel
</Button>
<Button onClick={handleSubmit} color="primary">
<Button onClick={handleSubmit} className="custom-btn-primary">
Submit
</Button>
</DialogActions>
</Dialog>
</BootstrapDialog>

// <Dialog open={open} onClose={onClose}>
// <DialogTitle>Feedback</DialogTitle>
// <DialogContent>
// <Typography variant="h6">Rate Us</Typography>
// <Box>
// <Rating
// name="feedback-rating"
// value={rating}
// onChange={handleRatingChange}
// icon={<StarIcon style={{ color: "gold" }} />}
// emptyIcon={<StarIcon style={{ color: "grey" }} />}
// precision={1}
// />
// <Typography variant="body1" style={{ marginLeft: "10px" }}>
// {rating} {rating === 1 ? "star" : "stars"}
// </Typography>
// </Box>
// <Typography
// variant="body2"
// style={{ marginTop: "10px", fontStyle: "italic" }}
// >
// {ratingMessages[rating]}
// </Typography>
// {renderCheckboxes()}
// </DialogContent>
// <DialogActions>
// <Button onClick={onClose} color="primary">
// Cancel
// </Button>
// <Button onClick={handleSubmit} color="primary">
// Submit
// </Button>
// </DialogActions>
// </Dialog>
);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/nulp_elite/src/components/VotingCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export default function VotingCard({ items, index, onClick }) {

return (
<Card
className="cardBox pb-20"
className="cardBox pb-10"
sx={{ position: "relative", cursor: "pointer", textAlign: "left" }}
onClick={onClick}
>
Expand Down
6 changes: 5 additions & 1 deletion packages/nulp_elite/src/pages/content/Player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,11 @@ const Player = () => {
</Box>
</Container>
{openFeedBack && (
<FeedbackPopup open={openFeedBack} onClose={handleClose} />
<FeedbackPopup
open={openFeedBack}
onClose={handleClose}
className="feedback-popup"
/>
)}
<FloatingChatIcon />
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion packages/nulp_elite/src/pages/events/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,7 @@ const Dashboard = () => {
]}
series={[{ data: eventTopUser }]}
height={300}
barSize={10}
barSize={2}
/>
<Box className="brYlabel">No. of Participants</Box>
<Box sx={{ textAlign: "center" }}>Events</Box>
Expand Down
7 changes: 4 additions & 3 deletions packages/nulp_elite/src/pages/voting/pollsDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const pollsDetailes = () => {
<Container
maxWidth="xl"
role="main"
className="xs-pb-20 lg-pt-20 min-"
className="xs-pb-20 lg-pt-20 votingDashboard"
>
<Box
display="flex"
Expand Down Expand Up @@ -178,7 +178,7 @@ const pollsDetailes = () => {
key={items.poll_id}
>
<Card
className="cardBox1 pb-20"
className="cardBox1 pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand Down Expand Up @@ -209,8 +209,9 @@ const pollsDetailes = () => {
lg={4}
style={{ marginBottom: "10px" }}
key={items.poll_id}
className="pl-0"
>
<Box className="xs-hide">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down
24 changes: 14 additions & 10 deletions packages/nulp_elite/src/pages/voting/votingDashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,11 @@ const votingDashboard = () => {
{toasterMessage && <Toast response={toasterMessage} type="success" />}

{contentCreator || admin ? (
<Container maxWidth="xl" role="main" className="xs-pb-20 lg-pt-20 min-">
<Container
maxWidth="xl"
role="main"
className="xs-pb-20 lg-pt-20 votingDashboard"
>
<Box mb={2} mt={2}>
<Box className="p-15">
<Grid container spacing={2} alignItems="center">
Expand Down Expand Up @@ -385,7 +389,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -408,7 +412,7 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
Expand Down Expand Up @@ -486,7 +490,7 @@ const votingDashboard = () => {
style={{ marginBottom: "10px" }}
key={items.poll_id}
>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-4"
Expand Down Expand Up @@ -675,7 +679,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -692,14 +696,14 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
)}
</Box>
<Box>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down Expand Up @@ -938,7 +942,7 @@ const votingDashboard = () => {
key={items.poll_id}
>
<Card
className="pb-20"
className="pb-10"
sx={{
position: "relative",
cursor: "pointer",
Expand All @@ -955,14 +959,14 @@ const votingDashboard = () => {
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
className="mt-10 event-title width-inherit"
>
{items.title}
</Typography>
)}
</Box>
<Box>
<Box className="xs-hide text-right pl-10">
<Box className="xs-hide text-right">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down
18 changes: 9 additions & 9 deletions packages/nulp_elite/src/pages/voting/votingDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,8 +336,8 @@ const VotingDetails = () => {
<span className=" h3-custom-title"> Live until</span>
)}
<TodayOutlinedIcon
className="h3-custom-title pl-10"
style={{ verticalAlign: "-webkit-baseline-middle" }}
className="h3-custom-title pl-10 pt-10"
style={{ verticalAlign: "middle" }}
/>
<span className="h3-custom-title ">
{moment(poll.end_date).format(
Expand All @@ -351,7 +351,7 @@ const VotingDetails = () => {
<VerifiedIcon
className="h3-custom-title pl-10 icon-blue fs-18"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingLeft: "10px",
paddingRight: "10px",
fontSize: "22px",
Expand Down Expand Up @@ -402,7 +402,7 @@ const VotingDetails = () => {
</Box>
</Grid>
) : (
<Grid item xs={9} md={6} lg={6}>
<Grid item xs={9} md={6} lg={8}>
<Typography
gutterBottom
className="mt-10 h1-title mb-20 xs-pl-15"
Expand All @@ -412,9 +412,9 @@ const VotingDetails = () => {
<Box className="pr-5 h3-custom-title">
<span className=" h3-custom-title"> Live until</span>
<TodayOutlinedIcon
className="h3-custom-title pl-10 mb-10"
className="h3-custom-title pl-10 mb-10 pt-10"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingRight: "10px",
}}
/>
Expand Down Expand Up @@ -452,7 +452,7 @@ const VotingDetails = () => {
<span className=" h3-custom-title"> Your Vote</span>
<VerifiedIcon
className="h3-custom-title pl-10 icon-blue"
style={{ verticalAlign: "-webkit-baseline-middle" }}
style={{ verticalAlign: "middle" }}
/>
<span className="h3-custom-title ">
{userVote[0]?.poll_result}
Expand Down Expand Up @@ -539,9 +539,9 @@ const VotingDetails = () => {
<Box className="pr-5">
<span className=" h3-custom-title"> Poll Ended On</span>
<TodayOutlinedIcon
className="h3-custom-title pl-10"
className="h3-custom-title pl-10 pt-10"
style={{
verticalAlign: "-webkit-baseline-middle",
verticalAlign: "middle",
paddingRight: "10px",
}}
/>
Expand Down
11 changes: 7 additions & 4 deletions packages/nulp_elite/src/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1315,7 +1315,7 @@ button {
}
.custom-event-container .cardBox,
.votingDashboard .cardBox {
height: inherit !important;
height: 100% !important;
}
.lg-left {
text-align: right;
Expand Down Expand Up @@ -2086,6 +2086,7 @@ button {
position: fixed !important;
width: 100%;
z-index: 99999;
top: 80px;
}
.domain-fixed .mt-180 {
margin-top: 180px !important;
Expand Down Expand Up @@ -3017,8 +3018,7 @@ tspan {
.pt-12 {
padding-top: 12px !important;
}

.mt-15 {
MuiDialog-paper .mt-15 {
margin-top: 15px !important;
}

Expand Down Expand Up @@ -3705,6 +3705,9 @@ input:required::after {
.d-inline-block {
display: inline-block !important;
}
.MuiChartsAxis-tickContainer {
/* .MuiChartsAxis-tickContainer {
transform: rotate(0.1turn);
} */
.feedback-popup .MuiDialog-paper {
width: 434px !important;
}
Loading