diff --git a/nest_frontend/components/base/Button.js b/nest_frontend/components/base/Button.js index 1c0dc3f..1692c46 100644 --- a/nest_frontend/components/base/Button.js +++ b/nest_frontend/components/base/Button.js @@ -8,6 +8,8 @@ import make_icon from "../../utils/make_icon" * A clickable button. * * @param children - The contents of the button. + * @param disabled - Whether the button is disabled or not. + * @param onClick - Function to call when the button is clicked. Won't be called if the button is disabled. * @param className - Additional class(es) that should be added to the button. * @param color - The color of the button. Either `Red`, `Grey`, `Green` or `Yellow`. * @param icon - The FontAwesome IconDefinition of the icon that should be rendered in the button. @@ -15,9 +17,15 @@ import make_icon from "../../utils/make_icon" * @returns {JSX.Element} * @constructor */ -export default function Button({ children, className, color, icon, ...props }) { +export default function Button({ children, disabled, onClick, className, color, icon, ...props }) { return ( - ) diff --git a/nest_frontend/components/base/Button.module.css b/nest_frontend/components/base/Button.module.css index c3f74f1..134d88f 100644 --- a/nest_frontend/components/base/Button.module.css +++ b/nest_frontend/components/base/Button.module.css @@ -15,14 +15,6 @@ opacity: 0.5; } -.Button:hover { - filter: brightness(110%); -} - -.Button:active { - filter: brightness(125%); -} - .Button:focus-visible { outline: 4px solid var(--outline); } diff --git a/nest_frontend/components/base/ButtonSidebar.js b/nest_frontend/components/base/ButtonSidebar.js index d0d3ef8..c9b4840 100644 --- a/nest_frontend/components/base/ButtonSidebar.js +++ b/nest_frontend/components/base/ButtonSidebar.js @@ -30,7 +30,7 @@ export default function ButtonSidebar({ icon, children, to, className, ...props return ( -
+
{make_icon(icon, Style.ButtonIcon)}
{children} diff --git a/nest_frontend/components/base/Summary.js b/nest_frontend/components/base/Summary.js deleted file mode 100644 index ea36ea8..0000000 --- a/nest_frontend/components/base/Summary.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react" -import Style from "./Summary.module.css" -import classNames from "classnames" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" - - -/** - * A long line displaying the summary of a certain entity, such as a repository or an user. - * - * @param icon - The icon of the summary. - * @param title - The title of the summary. - * @param subtitle - The subtitle of the summary. - * @param onClick - A function to call when the summary is clicked. - * @param upperLabel - The label for the upper value. - * @param upperValue - The upper value. - * @param lowerLabel - The label for the lower value. - * @param lowerValue - The lower value. - * @param buttons - Buttons to add to the right of the summary. - * @param className - Additional class(es) to add to the summary. - * @param props - Additional props to pass to the summary. - * @returns {JSX.Element} - * @constructor - */ -export default function Summary( - { icon, title, subtitle, onClick, upperLabel, upperValue, lowerLabel, lowerValue, buttons, className, ...props }, -) { - return ( -
-
-
- -
-
- {title} -
-
- {subtitle} -
-
-
-
- {upperLabel} -
-
- {upperValue} -
-
- {lowerLabel} -
-
- {lowerValue} -
-
-
- {buttons} -
-
- ) -} diff --git a/nest_frontend/components/base/Summary.module.css b/nest_frontend/components/base/Summary.module.css deleted file mode 100644 index 9d222e8..0000000 --- a/nest_frontend/components/base/Summary.module.css +++ /dev/null @@ -1,110 +0,0 @@ -.Summary { - width: 100%; - height: 60px; - - margin: 10px 0; - - display: flex; -} - -.Clickable { - cursor: pointer; -} - -.Clickable:hover { - filter: brightness(110%); -} - -.Left { - width: 280px; - height: 60px; - - display: grid; - grid-template-areas: - "a b" - "a c" - "a d" - "a e"; - grid-template-columns: auto 1fr; - grid-template-rows: 5px 1fr 1fr 5px; - - background-color: var(--bg-accent); - border-radius: 30px 0 0 30px; -} - -.IconContainer { - margin: 5px 15px 5px 5px; - width: 50px; - height: 50px; - border-radius: 50px; - - display: flex; - justify-content: center; - align-items: center; - - background-color: var(--bg-light); - color: var(--fg-primary); - - font-size: x-large; - - grid-area: a; -} - -.Title { - grid-area: c; - align-self: flex-end; -} - -.Subtitle { - grid-area: d; - font-size: small; - align-self: flex-start; -} - -.Middle { - flex-grow: 1; - height: 60px; - padding: 5px 20px; - - background-color: var(--bg-light); - - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr 1fr; - grid-column-gap: 10px; - align-items: center; - - font-size: small; - -} - -.Middle .Label { - grid-column: 1; - text-align: right; - font-weight: bold; -} - -.Middle .Value { - grid-column: 2; -} - -.Middle .Upper { - grid-row: 1; -} - -.Middle .Lower { - grid-row: 2; -} - -.Right { - width: 280px; - height: 60px; - padding: 5px; - - background-color: var(--bg-accent); - border-radius: 0 30px 30px 0; - - display: flex; - justify-content: flex-end; - align-items: center; -} diff --git a/nest_frontend/components/base/summary/SummaryBase.js b/nest_frontend/components/base/summary/SummaryBase.js new file mode 100644 index 0000000..ae8d437 --- /dev/null +++ b/nest_frontend/components/base/summary/SummaryBase.js @@ -0,0 +1,12 @@ +import React from "react" +import Style from "./SummaryBase.module.css" +import classNames from "classnames" + + +export default function SummaryBase({ children, className, ...props }) { + return ( +
+ {children} +
+ ) +} diff --git a/nest_frontend/components/base/summary/SummaryBase.module.css b/nest_frontend/components/base/summary/SummaryBase.module.css new file mode 100644 index 0000000..68d7d5e --- /dev/null +++ b/nest_frontend/components/base/summary/SummaryBase.module.css @@ -0,0 +1,8 @@ +.SummaryBase { + width: 100%; + height: 60px; + + margin: 10px 0; + + display: flex; +} diff --git a/nest_frontend/components/base/summary/SummaryButton.js b/nest_frontend/components/base/summary/SummaryButton.js new file mode 100644 index 0000000..199ce03 --- /dev/null +++ b/nest_frontend/components/base/summary/SummaryButton.js @@ -0,0 +1,11 @@ +import React from "react" +import Style from "./SummaryButton.module.css" +import classNames from "classnames" +import Button from "../Button" + + +export default function SummaryButton({ className, ...props }) { + return ( + - : null} - {canEdit ? - - : null} - {canArchive ? - - : null} - - return ( - + + + + {canDelete ? + + {strings.delete} + + : null} + {canEdit ? + + {strings.edit} + + : null} + {canArchive ? + + {strings.archive} + + : null} + + ) -} +} \ No newline at end of file diff --git a/nest_frontend/components/interactive/SummaryUser.js b/nest_frontend/components/interactive/SummaryUser.js index dc341b1..d158ddf 100644 --- a/nest_frontend/components/interactive/SummaryUser.js +++ b/nest_frontend/components/interactive/SummaryUser.js @@ -1,41 +1,40 @@ import React, { useContext } from "react" -import Summary from "../base/Summary" import { faStar, faTrash, faUser } from "@fortawesome/free-solid-svg-icons" -import Button from "../base/Button" -import ContextUser from "../../contexts/ContextUser" import ContextLanguage from "../../contexts/ContextLanguage" +import SummaryBase from "../base/summary/SummaryBase" +import SummaryLeft from "../base/summary/SummaryLeft" +import SummaryLabels from "../base/summary/SummaryLabels" +import SummaryButton from "../base/summary/SummaryButton" +import SummaryRight from "../base/summary/SummaryRight" export default function SummaryUser({ user, destroyUser, running, ...props }) { - const { user: loggedUser } = useContext(ContextUser) const { strings } = useContext(ContextLanguage) - const buttons = <> - {loggedUser.email !== user.email ? - - : null} - - return ( - + + + + { + event.stopPropagation() + // TODO: Errors are not caught here. Where should they be displayed? + await destroyUser(user["email"]) + }} + disabled={running} + > + {strings.delete} + + + ) } diff --git a/nest_frontend/index.css b/nest_frontend/index.css index fee1d7b..99c0f40 100644 --- a/nest_frontend/index.css +++ b/nest_frontend/index.css @@ -83,3 +83,15 @@ h1, h2, h3, h4, h5, h6 { --outline: black; } + +.Clickable { + cursor: pointer; +} + +.Clickable:hover { + filter: brightness(110%); +} + +.Clickable:active { + filter: brightness(125%); +} \ No newline at end of file