diff options
Diffstat (limited to 'FrontEnd/src/views/common/button')
-rw-r--r-- | FrontEnd/src/views/common/button/Button.css | 64 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/Button.tsx | 46 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/ButtonRow.css | 0 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/ButtonRow.tsx | 62 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/ButtonRowV2.tsx | 143 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/FlatButton.css | 27 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/FlatButton.tsx | 36 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/IconButton.css | 30 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/IconButton.tsx | 30 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/LoadingButton.css | 13 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/LoadingButton.tsx | 40 | ||||
-rw-r--r-- | FrontEnd/src/views/common/button/index.tsx | 15 |
12 files changed, 0 insertions, 506 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css deleted file mode 100644 index 1da70f0e..00000000 --- a/FrontEnd/src/views/common/button/Button.css +++ /dev/null @@ -1,64 +0,0 @@ -.cru-button {
- font-size: 1rem;
- padding: 0.4em 0.8em;
- transition: all 0.3s;
- border-radius: 0.2em;
- border: 1px solid;
- cursor: pointer;
-}
-
-.cru-button:not(.outline) {
- color: var(--cru-push-button-text-color);
- background-color: var(--cru-clickable-normal-color);
- border-color: var(--cru-clickable-normal-color);
-}
-
-.cru-button:not(.outline):hover {
- background-color: var(--cru-clickable-hover-color);
- border-color: var(--cru-clickable-hover-color);
-}
-
-.cru-button:not(.outline):focus {
- background-color: var(--cru-clickable-focus-color);
- border-color: var(--cru-clickable-focus-color);
-}
-
-.cru-button:not(.outline):active {
- background-color: var(--cru-clickable-active-color);
- border-color: var(--cru-clickable-active-color);
-}
-
-.cru-button:not(.outline):disabled {
- color: var(--cru-push-button-disabled-text-color);
- background-color: var(--cru-push-button-disabled-color);
- border-color: var(--cru-push-button-disabled-color);
- cursor: auto;
-}
-
-
-.cru-button.outline {
- color: var(--cru-clickable-normal-color);
- border-color: var(--cru-clickable-normal-color);
- background-color: transparent;
-}
-
-.cru-button.outline:hover {
- color: var(--cru-clickable-hover-color);
- border-color: var(--cru-clickable-hover-color);
-}
-
-.cru-button.outline:focus {
- color: var(--cru-clickable-focus-color);
- border-color: var(--cru-clickable-focus-color);
-}
-
-.cru-button.outline:active {
- color: var(--cru-clickable-active-color);
- border-color: var(--cru-clickable-active-color);
-}
-
-.cru-button.outline:disabled {
- color: var(--cru-clickable-disabled-color);
- border-color: var(--cru-clickable-disabled-color);
- cursor: auto;
-}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx deleted file mode 100644 index 6c38e130..00000000 --- a/FrontEnd/src/views/common/button/Button.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ComponentPropsWithoutRef, Ref } from "react"; -import classNames from "classnames"; - -import { Text, useC, ThemeColor } from "../common"; - -import "./Button.css"; - -interface ButtonProps extends ComponentPropsWithoutRef<"button"> { - color?: ThemeColor; - text?: Text; - outline?: boolean; - buttonRef?: Ref<HTMLButtonElement> | null; -} - -export default function Button(props: ButtonProps) { - const { - buttonRef, - color, - text, - outline, - className, - children, - ...otherProps - } = props; - - if (text != null && children != null) { - console.warn("You can't set both text and children props."); - } - - const c = useC(); - - return ( - <button - ref={buttonRef} - className={classNames( - "cru-button", - `cru-clickable-${color ?? "primary"}`, - outline && "outline", - className, - )} - {...otherProps} - > - {text != null ? c(text) : children} - </button> - ); -} diff --git a/FrontEnd/src/views/common/button/ButtonRow.css b/FrontEnd/src/views/common/button/ButtonRow.css deleted file mode 100644 index e69de29b..00000000 --- a/FrontEnd/src/views/common/button/ButtonRow.css +++ /dev/null diff --git a/FrontEnd/src/views/common/button/ButtonRow.tsx b/FrontEnd/src/views/common/button/ButtonRow.tsx deleted file mode 100644 index eea60cc4..00000000 --- a/FrontEnd/src/views/common/button/ButtonRow.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { ComponentPropsWithoutRef, Ref } from "react"; -import classNames from "classnames"; - -import Button from "./Button"; -import FlatButton from "./FlatButton"; -import IconButton from "./IconButton"; -import LoadingButton from "./LoadingButton"; - -import "./ButtonRow.css"; - -type ButtonRowButton = ( - | { - type: "normal"; - props: ComponentPropsWithoutRef<typeof Button>; - } - | { - type: "flat"; - props: ComponentPropsWithoutRef<typeof FlatButton>; - } - | { - type: "icon"; - props: ComponentPropsWithoutRef<typeof IconButton>; - } - | { type: "loading"; props: ComponentPropsWithoutRef<typeof LoadingButton> } -) & { key: string | number }; - -interface ButtonRowProps { - className?: string; - containerRef?: Ref<HTMLDivElement>; - buttons: ButtonRowButton[]; - buttonsClassName?: string; -} - -export default function ButtonRow({ - className, - containerRef, - buttons, - buttonsClassName, -}: ButtonRowProps) { - return ( - <div ref={containerRef} className={classNames("cru-button-row", className)}> - {buttons.map((button) => { - const { type, key, props } = button; - const newClassName = classNames(props.className, buttonsClassName); - switch (type) { - case "normal": - return <Button key={key} {...props} className={newClassName} />; - case "flat": - return <FlatButton key={key} {...props} className={newClassName} />; - case "icon": - return <IconButton key={key} {...props} className={newClassName} />; - case "loading": - return ( - <LoadingButton key={key} {...props} className={newClassName} /> - ); - default: - throw new Error(); - } - })} - </div> - ); -} diff --git a/FrontEnd/src/views/common/button/ButtonRowV2.tsx b/FrontEnd/src/views/common/button/ButtonRowV2.tsx deleted file mode 100644 index 3467ad52..00000000 --- a/FrontEnd/src/views/common/button/ButtonRowV2.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { ComponentPropsWithoutRef, Ref } from "react"; -import classNames from "classnames"; - -import Button from "./Button"; -import FlatButton from "./FlatButton"; -import IconButton from "./IconButton"; -import LoadingButton from "./LoadingButton"; - -import "./ButtonRow.css"; -import { Text, ThemeColor } from "../common"; - -interface ButtonRowV2ButtonBase { - key: string | number; - action?: "primary" | "secondary"; - color?: ThemeColor; - disabled?: boolean; - onClick?: () => void; -} - -interface ButtonRowV2ButtonWithNoType extends ButtonRowV2ButtonBase { - type?: undefined | null; - text: Text; - outline?: boolean; - props?: ComponentPropsWithoutRef<typeof Button>; -} - -interface ButtonRowV2NormalButton extends ButtonRowV2ButtonBase { - type: "normal"; - text: Text; - outline?: boolean; - props?: ComponentPropsWithoutRef<typeof Button>; -} - -interface ButtonRowV2FlatButton extends ButtonRowV2ButtonBase { - type: "flat"; - text: Text; - props?: ComponentPropsWithoutRef<typeof FlatButton>; -} - -interface ButtonRowV2IconButton extends ButtonRowV2ButtonBase { - type: "icon"; - icon: string; - props?: ComponentPropsWithoutRef<typeof IconButton>; -} - -interface ButtonRowV2LoadingButton extends ButtonRowV2ButtonBase { - type: "loading"; - text: Text; - loading?: boolean; - props?: ComponentPropsWithoutRef<typeof LoadingButton>; -} - -type ButtonRowV2Button = - | ButtonRowV2ButtonWithNoType - | ButtonRowV2NormalButton - | ButtonRowV2FlatButton - | ButtonRowV2IconButton - | ButtonRowV2LoadingButton; - -interface ButtonRowV2Props { - className?: string; - containerRef?: Ref<HTMLDivElement>; - buttons: ButtonRowV2Button[]; - buttonsClassName?: string; -} - -export default function ButtonRowV2({ - className, - containerRef, - buttons, - buttonsClassName, -}: ButtonRowV2Props) { - return ( - <div ref={containerRef} className={classNames("cru-button-row", className)}> - {buttons.map((button) => { - const { key, action, color, disabled, onClick } = button; - - const realAction = action ?? "primary"; - const realColor = - color ?? (realAction === "primary" ? "primary" : "secondary"); - - const commonProps = { key, color: realColor, disabled, onClick }; - const newClassName = classNames( - button.props?.className, - buttonsClassName, - ); - - switch (button.type) { - case null: - case undefined: - case "normal": { - const { text, outline, props } = button; - return ( - <Button - {...commonProps} - text={text} - outline={outline ?? realAction !== "primary"} - {...props} - className={newClassName} - /> - ); - } - case "flat": { - const { text, props } = button; - return ( - <FlatButton - {...commonProps} - text={text} - {...props} - className={newClassName} - /> - ); - } - case "icon": { - const { icon, props } = button; - return ( - <IconButton - {...commonProps} - icon={icon} - {...props} - className={newClassName} - /> - ); - } - case "loading": { - const { text, loading, props } = button; - return ( - <LoadingButton - {...commonProps} - text={text} - loading={loading} - {...props} - className={newClassName} - /> - ); - } - default: - throw new Error(); - } - })} - </div> - ); -} diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css deleted file mode 100644 index 2050946c..00000000 --- a/FrontEnd/src/views/common/button/FlatButton.css +++ /dev/null @@ -1,27 +0,0 @@ -.cru-flat-button {
- font-size: 1rem;
- padding: 0.4em 0.8em;
- transition: all 0.5s;
- border-radius: 0.2em;
- background-color: var(--cru-clickable-grayscale-normal-color);
- border: 1px none;
- color: var(--cru-clickable-normal-color);
- cursor: pointer;
-}
-
-.cru-flat-button:hover {
- background-color: var(--cru-clickable-grayscale-hover-color);
-}
-
-.cru-flat-button:focus {
- background-color: var(--cru-clickable-grayscale-focus-color);
-}
-
-.cru-flat-button:active {
- background-color: var(--cru-clickable-grayscale-active-color);
-}
-
-.cru-flat-button:disabled {
- color: var(--cru-clickable-disabled-color);
- cursor: auto;
-}
\ No newline at end of file diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx deleted file mode 100644 index 9f074dd6..00000000 --- a/FrontEnd/src/views/common/button/FlatButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ComponentPropsWithoutRef, Ref } from "react"; -import classNames from "classnames"; - -import { Text, useC, ThemeColor } from "../common"; - -import "./FlatButton.css"; - -interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> { - color?: ThemeColor; - text?: Text; - buttonRef?: Ref<HTMLButtonElement> | null; -} - -export default function FlatButton(props: FlatButtonProps) { - const { color, text, className, children, buttonRef, ...otherProps } = props; - - if (text != null && children != null) { - console.warn("You can't set both text and children props."); - } - - const c = useC(); - - return ( - <button - ref={buttonRef} - className={classNames( - "cru-flat-button", - `cru-clickable-${color ?? "primary"}`, - className, - )} - {...otherProps} - > - {text != null ? c(text) : children} - </button> - ); -} diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css deleted file mode 100644 index a3747201..00000000 --- a/FrontEnd/src/views/common/button/IconButton.css +++ /dev/null @@ -1,30 +0,0 @@ -.cru-icon-button { - color: var(--cru-clickable-normal-color); - font-size: 1.4rem; - background: none; - border: none; - transition: all 0.5s; - cursor: pointer; - user-select: none; -} - -.cru-icon-button:hover { - color: var(--cru-clickable-hover-color); -} - -.cru-icon-button:focus { - color: var(--cru-clickable-focus-color); -} - -.cru-icon-button:active { - color: var(--cru-clickable-active-color); -} - -.cru-flat-button:disabled { - color: var(--cru-clickable-disabled-color); - cursor: auto; -} - -.cru-icon-button.large { - font-size: 1.6rem; -} diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx deleted file mode 100644 index 95c58887..00000000 --- a/FrontEnd/src/views/common/button/IconButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ComponentPropsWithoutRef } from "react"; -import classNames from "classnames"; - -import { ThemeColor } from "../common"; - -import "./IconButton.css"; - -interface IconButtonProps extends ComponentPropsWithoutRef<"i"> { - icon: string; - color?: ThemeColor | "grayscale"; - large?: boolean; - disabled?: boolean; // TODO: Not implemented -} - -export default function IconButton(props: IconButtonProps) { - const { icon, color, className, large, ...otherProps } = props; - - return ( - <button - className={classNames( - "cru-icon-button", - `cru-clickable-${color ?? "grayscale"}`, - large && "large", - "bi-" + icon, - className, - )} - {...otherProps} - /> - ); -} diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css deleted file mode 100644 index 23fadd3d..00000000 --- a/FrontEnd/src/views/common/button/LoadingButton.css +++ /dev/null @@ -1,13 +0,0 @@ -.cru-loading-button { - display: flex; - align-items: center; -} - -.cru-loading-button-spinner { - margin-left: 0.5em; -} - -.cru-loading-button-loading { - color: var(--cru-clickable-normal-color) !important; - border-color: var(--cru-clickable-normal-color) !important; -}
\ No newline at end of file diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx deleted file mode 100644 index 7e7d08e6..00000000 --- a/FrontEnd/src/views/common/button/LoadingButton.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import classNames from "classnames"; - -import { I18nText, ThemeColor, useC } from "../common"; - -import Spinner from "../Spinner"; - -import "./LoadingButton.css"; - -interface LoadingButtonProps extends React.ComponentPropsWithoutRef<"button"> { - color?: ThemeColor; - text?: I18nText; - loading?: boolean; -} - -export default function LoadingButton(props: LoadingButtonProps) { - const c = useC(); - - const { color, text, loading, disabled, className, children, ...otherProps } = - props; - - if (text != null && children != null) { - console.warn("You can't set both text and children props."); - } - - return ( - <button - disabled={disabled || loading} - className={classNames( - "cru-button outline cru-loading-button", - `cru-clickable-${color ?? "primary"}`, - loading && "cru-loading-button-loading", - className, - )} - {...otherProps} - > - {text != null ? c(text) : children} - {loading && <Spinner className="cru-loading-button-spinner" />} - </button> - ); -} diff --git a/FrontEnd/src/views/common/button/index.tsx b/FrontEnd/src/views/common/button/index.tsx deleted file mode 100644 index b5aa5470..00000000 --- a/FrontEnd/src/views/common/button/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Button from "./Button"; -import FlatButton from "./FlatButton"; -import IconButton from "./IconButton"; -import LoadingButton from "./LoadingButton"; -import ButtonRow from "./ButtonRow"; -import ButtonRowV2 from "./ButtonRowV2"; - -export { - Button, - FlatButton, - IconButton, - LoadingButton, - ButtonRow, - ButtonRowV2, -}; |