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

Mariamawit guide infobox 1590 #2023

Merged
merged 5 commits into from
Feb 2, 2025
Merged

Mariamawit guide infobox 1590 #2023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f3ad06
Updated guide infobox background to #EEF1F4 and added bottom padding …
mmogesdesigns Sep 26, 2024
b5b8ce5
Updated container background to use theme lightGray
mmogesdesigns Oct 3, 2024
353fe7a
Changes to tooltip
mmogesdesigns Jan 9, 2025
1ba513a
Modifications to PR #2023 per new Issue #1997
entrotech Feb 2, 2025
9738e4d
Merge branch 'develop' into mariamawit-guide-infobox-1823
entrotech Feb 2, 2025
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
91 changes: 75 additions & 16 deletions client/src/components/Layout/NavBarLogin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@ import { Link } from "react-router-dom";
import { useLocation } from "react-router";
import PropTypes from "prop-types";
import clsx from "clsx";
import NavBarToolTip from "./NavBarToolTip";
// import NavBarToolTip from "./NavBarToolTip";
import { useTheme } from "react-jss";
import Popup from "reactjs-popup";
import { MdClose, MdWarning } from "react-icons/md";

const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => {
const theme = useTheme();
const userContext = useContext(UserContext);
const account = userContext.account;

const [isCalculation, setIsCalculation] = useState(false);
const [tooltipOpen, setTooltipOpen] = useState(true);
const closeModal = () => setTooltipOpen(false);

const location = useLocation();
const pathname = location.pathname;
Expand All @@ -24,16 +30,14 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => {
}, [pathname]);

const loginLink = (
<li className={clsx(classes.userLogin, classes.linkBlock)}>
<Link
id="cy-login-menu-item"
className={`${classes.link} ${classes.lastItem}`}
to="/login"
onClick={handleHamburgerMenuClick}
>
Login
</Link>
</li>
<Link
id="cy-login-menu-item"
className={`${classes.link} ${classes.lastItem}`}
to="/login"
onClick={handleHamburgerMenuClick}
>
Login
</Link>
);

const getUserGreeting = account => (
Expand Down Expand Up @@ -70,12 +74,67 @@ const NavBarLogin = ({ classes, handleHamburgerMenuClick }) => {

return !account || !account.email ? (
!isCalculation ? (
<>{loginLink}</>
) : (
<>
<NavBarToolTip />
<li className={clsx(classes.userLogin, classes.linkBlock)}>
{loginLink}
</>
</li>
) : (
<li
className={clsx(classes.userLogin, classes.linkBlock)}
onMouseEnter={() => setTooltipOpen(true)}
>
<Popup
open={tooltipOpen}
onClose={closeModal}
closeOnDocumentClick={false}
lockScroll={true}
trigger={<span style={{ cursor: "pointer" }}>{loginLink}</span>}
position="bottom right"
arrow={true}
contentStyle={{
borderRadius: "5px",
border: "1px solid " + theme.colorCritical,
width: "50%",
backgroundColor: theme.colorTooltipBackground,
boxShadow:
"0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)"
}}
>
{close => {
return (
<div style={{ margin: "1rem" }}>
<button
style={{
backgroundColor: "transparent",
color: theme.colors.secondary.gray,
border: "none",
position: "absolute",
top: "0",
right: "0",
cursor: "pointer"
}}
onClick={close}
>
<MdClose />
</button>
<div style={{ display: "flex", margin: "0" }}>
<MdWarning
style={{
color: theme.colorCritical,
width: "20px",
height: "20px",
margin: "0"
}}
/>
<div style={{ marginLeft: "0.5rem" }}>
Only projects created after logging in can be saved
</div>
</div>
</div>
);
}}
</Popup>
{/* <NavBarToolTip /> */}
</li>
)
) : (
<>
Expand Down
46 changes: 39 additions & 7 deletions client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { createUseStyles } from "react-jss";
import { createUseStyles, useTheme } from "react-jss";
import ToolTipIcon from "../../ToolTip/ToolTipIcon";
import ToolTip from "../../ToolTip/ToolTip";
// import ToolTip from "../../ToolTip/ToolTip";
import clsx from "clsx";
import Popup from "reactjs-popup";
import { MdClose } from "react-icons/md";

const useStyles = createUseStyles(theme => ({
field: {
Expand Down Expand Up @@ -187,6 +189,7 @@ const RuleCalculation = ({
},
onPropInputChange
}) => {
const theme = useTheme();
const classes = useStyles();

// The validationErrors property of the rule indicates whether the
Expand Down Expand Up @@ -342,16 +345,45 @@ const RuleCalculation = ({
{name}
<div className={classes.baselineIconContainer}>
{description ? (
<ToolTipIcon
id={"tooltip-parking-baseline" + id}
tooltipContent={description}
/>
<Popup
trigger={
<span style={{ cursor: "pointer" }}>
<ToolTipIcon id={id} />
</span>
}
position="left center"
arrow={true}
contentStyle={{ width: "30%" }}
>
{close => {
return (
<div style={{ margin: "1rem" }}>
<button
style={{
backgroundColor: "transparent",
color: theme.colors.secondary.gray,
border: "none",
position: "absolute",
top: "0",
right: "0",
cursor: "pointer"
}}
onClick={close}
>
<MdClose style={{ height: "20px", width: "20px" }} />
</button>
<div
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>
);
}}
</Popup>
) : (
<span />
)}
</div>
</span>
<ToolTip id={"tooltip-parking-baseline" + id} />
<div className={classes.codeWrapper} name={code} id={code} />
<div className={classes.unitsCaption}>{units}</div>
<div className={classes.calcUnitsCaption}>
Expand Down
76 changes: 57 additions & 19 deletions client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import PropTypes from "prop-types";
import { createUseStyles, useTheme } from "react-jss";
import ToolTipIcon from "../../ToolTip/ToolTipIcon";
import clsx from "clsx";
import Popup from "reactjs-popup";
import { MdClose } from "react-icons/md";

/*
See https://css-tricks.com/building-progress-ring-quickly/
Expand Down Expand Up @@ -107,11 +109,10 @@ const useStyles = createUseStyles({
}
});

const EarnedPointsProgress = props => {
const EarnedPointsProgress = ({ rulesConfig }) => {
const theme = useTheme();
const classes = useStyles({ theme });

const { rulesConfig } = props;
const radius = DIAL_RADIUS;
const stroke = STROKE_WIDTH;

Expand All @@ -124,6 +125,8 @@ const EarnedPointsProgress = props => {
0,
target ? circumference - (earned / target) * 0.875 * circumference : 0
);
const tipText = `<div><p><strong>Earned Points:</strong> ${rulesConfig.earnedPointsRule.description}</p>
<p style="margin-top: 0.5rem;"><strong>Target Points:</strong> ${rulesConfig.targetPointsRule.description}</p></div>`;

return (
<div
Expand All @@ -142,23 +145,44 @@ const EarnedPointsProgress = props => {
<div className={classes.targetPointsLabel}>TARGET</div>
</div>
<div
data-tip={
"<p>Earned Points: " +
rulesConfig.earnedPointsRule.description +
"</p><p>Target Points: " +
rulesConfig.targetPointsRule.description +
"</p>"
}
data-iscapture="true"
data-html="true"
data-class={
target > 0
? classes.tooltip
: clsx(classes.tooltip, classes.noDisplay)
}
className={classes.tooltipIcon}
className={clsx(
classes.tooltipIcon,
target > 0 ? "" : classes.noDisplay
)}
>
<ToolTipIcon />
<Popup
lockScroll={false}
trigger={
<span style={{ cursor: "pointer" }}>
<ToolTipIcon />
</span>
}
position="right center"
arrow={true}
contentStyle={{ width: "30%" }}
>
{close => {
return (
<div style={{ margin: "1rem" }}>
<button
style={{
backgroundColor: "transparent",
color: theme.colors.secondary.gray,
border: "none",
position: "absolute",
top: "0",
right: "0",
cursor: "pointer"
}}
onClick={close}
>
<MdClose style={{ height: "20px", width: "20px" }} />
</button>
<div dangerouslySetInnerHTML={{ __html: tipText }} />
</div>
);
}}
</Popup>
</div>
<svg className={clsx(classes.rotate, classes.dial)}>
<circle
Expand Down Expand Up @@ -205,8 +229,22 @@ const EarnedPointsProgress = props => {
);
};

// EarnedPointsProgress.propTypes = {
// rulesConfig: PropTypes.object
// };
EarnedPointsProgress.propTypes = {
rulesConfig: PropTypes.object
rulesConfig: PropTypes.shape({
targetPointsRule: PropTypes.shape({
value: PropTypes.number,
code: PropTypes.string,
description: PropTypes.string
}).isRequired,
earnedPointsRule: PropTypes.shape({
value: PropTypes.number,
code: PropTypes.string,
description: PropTypes.string
}).isRequired
}).isRequired
};

export default EarnedPointsProgress;
Loading