Skip to content

Commit 227fc01

Browse files
axlewinaxlewin
committed
Merge branch 'redesign-2024' of https://github.com/isaacphysics/isaac-react-app into redesign/previous-context-overhaul
2 parents ab56547 + c42a0b0 commit 227fc01

21 files changed

+282
-66
lines changed

‎public/assets/phy/icons/redesign/flag.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/phy/icons/redesign/print.svg

Lines changed: 10 additions & 0 deletions
Loading

‎public/assets/phy/icons/redesign/share.svg

Lines changed: 10 additions & 0 deletions
Loading

‎public/assets/phy/icons/redesign/status-not-started.svg

Lines changed: 11 additions & 0 deletions
Loading

‎src/app/components/elements/AffixButton.tsx

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import classNames from "classnames";
55

66
interface AffixProps {
77
affix: ReactNode;
8-
position: "prefix" | "suffix";
8+
position: "prefix" | "suffix" | "center";
99
type: "text" | "icon" | "icon-img";
10+
affixClassName?: string;
1011
}
1112

1213
export interface AffixButtonProps extends ButtonProps {
@@ -27,14 +28,28 @@ const renderAffix = (affix: AffixProps, className?: string) => {
2728
export const AffixButton = (props: AffixButtonProps) => {
2829
const { affix, children, className, ...rest } = props;
2930
return <Button {...rest} className={classNames("d-inline-flex align-items-center", className)}>
30-
{affix.position !== "suffix" && <>
31-
{renderAffix(affix, "me-2")}
31+
{affix.position === "prefix" && <>
32+
{renderAffix(affix, classNames("me-2", affix.affixClassName))}
3233
<Spacer/>
3334
</>}
34-
{children}
35+
{affix.position === "center" ? <>
36+
<Spacer/>
37+
{renderAffix(affix, affix.affixClassName)}
38+
<Spacer/>
39+
</> : children}
3540
{affix.position === "suffix" && <>
3641
<Spacer/>
37-
{renderAffix(affix, "ms-2")}
42+
{renderAffix(affix, classNames("ms-2", affix.affixClassName))}
3843
</>}
3944
</Button>;
4045
};
46+
47+
interface IconButtonProps extends ButtonProps {
48+
icon: string;
49+
affixClassName?: string;
50+
}
51+
52+
export const IconButton = (props: IconButtonProps) => {
53+
const { icon, className, affixClassName, ...rest } = props;
54+
return <AffixButton {...rest} className={classNames(className, "p-3")} affix={{affix: icon, position: "center", type: "icon", affixClassName}}/>;
55+
};

‎src/app/components/elements/PrintButton.tsx

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, {useState} from "react";
22
import {printingSettingsSlice, useAppDispatch} from "../../state";
33
import {Button} from "reactstrap";
4+
import { IconButton } from "./AffixButton";
5+
import { siteSpecific } from "../../services";
46

57
interface PrintProps {
68
questionPage?: boolean;
@@ -13,12 +15,7 @@ export const PrintButton = ({questionPage}: PrintProps ) => {
1315

1416
return questionPage ?
1517
<>
16-
<button
17-
className="print-icon btn-action"
18-
onClick={() => setQuestionPrintOpen(!questionPrintOpen)}
19-
aria-label="Print page"
20-
/>
21-
{questionPrintOpen && <div className="question-actions-link-box">
18+
{questionPrintOpen && <div className="question-actions-link-box not-mobile">
2219
<div className="question-actions-link text-nowrap">
2320
<Button
2421
size={"sm"}
@@ -44,14 +41,46 @@ export const PrintButton = ({questionPage}: PrintProps ) => {
4441
><span className="visually-hidden">Print{" "}</span>Without hints</Button>
4542
</div>
4643
</div>}
44+
{siteSpecific(
45+
<IconButton
46+
icon="icon-print"
47+
className="w-max-content h-max-content not-mobile"
48+
affixClassName="icon-color-black"
49+
aria-label="Print page"
50+
title="Print page"
51+
color="tint"
52+
data-bs-theme="neutral"
53+
onClick={() => setQuestionPrintOpen(!questionPrintOpen)}
54+
/>,
55+
<button
56+
className="print-icon btn-action not-mobile"
57+
onClick={() => setQuestionPrintOpen(!questionPrintOpen)}
58+
aria-label="Print page"
59+
/>
60+
)}
4761
</>
4862
:
49-
<button
50-
className="print-icon btn-action"
51-
onClick={() => {
52-
dispatch(printingSettingsSlice.actions.enableHints(false));
53-
setTimeout(window.print, 100);
54-
}}
55-
aria-label="Print page"
56-
/>;
63+
siteSpecific(
64+
<IconButton
65+
icon="icon-print"
66+
className="w-max-content h-max-content not-mobile"
67+
affixClassName="icon-color-black"
68+
aria-label="Print page"
69+
title="Print page"
70+
color="tint"
71+
data-bs-theme="neutral"
72+
onClick={() => {
73+
dispatch(printingSettingsSlice.actions.enableHints(false));
74+
setTimeout(window.print, 100);
75+
}}
76+
/>,
77+
<button
78+
className="print-icon btn-action not-mobile"
79+
onClick={() => {
80+
dispatch(printingSettingsSlice.actions.enableHints(false));
81+
setTimeout(window.print, 100);
82+
}}
83+
aria-label="Print page"
84+
/>
85+
);
5786
};

‎src/app/components/elements/ReportButton.tsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
22
import {logAction, useAppDispatch} from "../../state";
3+
import { siteSpecific } from "../../services";
4+
import { IconButton } from "./AffixButton";
35

46
export const ReportButton = ({pageId} : {pageId?: string}) => {
57
const dispatch = useAppDispatch();
@@ -12,13 +14,28 @@ export const ReportButton = ({pageId} : {pageId?: string}) => {
1214
dispatch(logAction(eventDetails));
1315
}
1416

15-
return <button
16-
className="report-icon btn-action"
17-
aria-label="Report a problem (opens in new tab)"
18-
title="Report a problem (opens in new tab)"
19-
onClick={(event) => {
20-
logPageReport();
21-
window.open(pageId ? `/contact?preset=contentProblem&page=${pageId}` : "/contact?preset=contentProblem", "_blank");
22-
}}
23-
/>;
17+
return siteSpecific(
18+
<IconButton
19+
icon="icon-flag"
20+
className="w-max-content h-max-content"
21+
affixClassName="icon-color-black"
22+
aria-label="Report a problem (opens in new tab)"
23+
title="Report a problem (opens in new tab)"
24+
color="tint"
25+
data-bs-theme="neutral"
26+
onClick={() => {
27+
logPageReport();
28+
window.open(pageId ? `/contact?preset=contentProblem&page=${pageId}` : "/contact?preset=contentProblem", "_blank");
29+
}}
30+
/>,
31+
<button
32+
className="report-icon btn-action"
33+
aria-label="Report a problem (opens in new tab)"
34+
title="Report a problem (opens in new tab)"
35+
onClick={() => {
36+
logPageReport();
37+
window.open(pageId ? `/contact?preset=contentProblem&page=${pageId}` : "/contact?preset=contentProblem", "_blank");
38+
}}
39+
/>
40+
);
2441
};

‎src/app/components/elements/ShareLink.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {useEffect, useRef, useState} from "react";
22
import {isMobile, isPhy, isTutorOrAbove, PATHS, siteSpecific, useOutsideCallback} from "../../services";
33
import {selectors, useAppSelector} from "../../state";
44
import classNames from "classnames";
5+
import { IconButton } from "./AffixButton";
56

67
export const ShareLink = ({linkUrl, reducedWidthLink, gameboardId, clickAwayClose, outline, className}: {linkUrl: string; reducedWidthLink?: boolean; gameboardId?: string; clickAwayClose?: boolean; outline?: boolean; className?: string}) => {
78
const [showShareLink, setShowShareLink] = useState(false);
@@ -41,8 +42,20 @@ export const ShareLink = ({linkUrl, reducedWidthLink, gameboardId, clickAwayClos
4142
const buttonAriaLabel = showShareLink ? "Hide share link" : "Get share link";
4243
const linkWidth = isMobile() || reducedWidthLink ? 192 : (shareUrl.length * siteSpecific(9, 6));
4344
const showDuplicateAndEdit = gameboardId && isTutorOrAbove(user);
44-
return <div ref={shareLinkDivRef} className={classNames("share-link-icon", className)}>
45-
<button className={siteSpecific("btn-action", classNames({"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
45+
return <div ref={shareLinkDivRef} className={classNames(className, "share-link-icon", {"w-max-content d-inline-flex": isPhy})}>
46+
{siteSpecific(
47+
<IconButton
48+
icon="icon-share"
49+
className="w-max-content h-max-content"
50+
affixClassName="icon-color-black"
51+
aria-label="Share page"
52+
title="Share page"
53+
color="tint"
54+
data-bs-theme="neutral"
55+
onClick={(e) => { e.preventDefault(); toggleShareLink(); }}
56+
/>,
57+
<button className={siteSpecific("btn-action", classNames({"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
58+
)}
4659
<div className={`share-link ${showShareLink ? "d-block" : ""} ${showDuplicateAndEdit ? "double-height" : ""}`} style={{width: linkWidth}}>
4760
<input type="text" readOnly ref={shareLink} value={shareUrl} onClick={(e) => e.preventDefault()} aria-label="Share URL" />
4861
{showDuplicateAndEdit && <React.Fragment>

‎src/app/components/elements/TitleAndBreadcrumb.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const BreadcrumbTrail = ({currentPageTitle, intermediateCrumbs = [], collectionT
2828
...intermediateCrumbs
2929
]);
3030

31-
return !!breadcrumbHistory.length && <Breadcrumb className={classNames("py-md-2 mb-3 mb-md-0 bread", siteSpecific("container-override", "px-md-0"))}>
31+
return !!breadcrumbHistory.length && <Breadcrumb className={classNames("mb-3 mb-md-0 bread", siteSpecific("container-override py-2", "px-md-0 py-md-2"))}>
3232
{breadcrumbHistory.map((breadcrumb) => formatBreadcrumbHistoryItem(breadcrumb, disallowLaTeX))}
3333
{isAda && formatBreadcrumbItem(currentPageTitle, disallowLaTeX)}
3434
</Breadcrumb>;

‎src/app/components/elements/cards/GameboardCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const GameboardCard = (props: GameboardCardProps) => {
113113
? above['md'](deviceSize) && <Button className="mb-2" color="keyline" onClick={(e) => {e.preventDefault(); setAssignmentsDetails.toggleAssignModal?.();}}>
114114
Assign{!isDefined(setAssignmentsDetails.groupCount) || setAssignmentsDetails.groupCount > 0 && " / Unassign"}
115115
</Button>
116-
: boardLink && <div className="card-share-link">
116+
: boardLink && <div className="d-flex justify-content-end card-share-link">
117117
<ShareLink linkUrl={boardLink} gameboardId={gameboard.id} reducedWidthLink clickAwayClose />
118118
</div>
119119
}

‎src/app/components/elements/svg/DifficultyIcons.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import {Difficulty} from "../../../../IsaacApiTypes";
33
import {calculateHexagonProportions, Hexagon} from "./Hexagon";
4-
import {difficultyLabelMap, difficultyShortLabelMap, isAda, siteSpecific} from "../../../services";
4+
import {difficultyLabelMap, difficultyShortLabelMap, isAda, isPhy, siteSpecific} from "../../../services";
55
import classnames from "classnames";
66
import {Rectangle} from "./Rectangle";
77
import {Circle} from "./Circle";
@@ -51,6 +51,7 @@ export function DifficultyIcons({difficulty, blank, className} : {difficulty: Di
5151
role={"img"}
5252
width={`${difficultyCategoryLevels.length * (difficultyIconWidth + 2 * difficultyIconXPadding) + difficultyIconXPadding}px`}
5353
height={`${miniHexagon.quarterHeight * 4 + 2 * yPadding}px`}
54+
{...(isPhy && {viewBox: `0 0 ${difficultyCategoryLevels.length * (difficultyIconWidth + 2 * difficultyIconXPadding) - difficultyIconXPadding} ${miniHexagon.quarterHeight * 4}`})}
5455
>
5556
<title>{difficultyLabelMap[difficulty]}</title>
5657
{difficultyCategoryLevels.map(difficultyCategoryLevel => {

‎src/app/components/pages/Concept.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Concept = withRouter(({match: {params}, location: {search}, concept
4242

4343
const pageContext = usePreviousPageContext(user && user.loggedIn && user.registeredContexts || undefined, doc && doc !== 404 ? doc : undefined);
4444

45-
const ManageButtons = () => <div className="no-print d-flex justify-content-end mt-1 ms-2">
45+
const ManageButtons = () => <div className={classNames("no-print d-flex justify-content-end mt-1 ms-2", {"gap-2": isPhy})}>
4646
<div className="question-actions">
4747
<ShareLink linkUrl={`/concepts/${conceptId}${search || ""}`} />
4848
</div>

0 commit comments

Comments
 (0)