aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd')
-rw-r--r--FrontEnd/src/services/alert.ts14
-rw-r--r--FrontEnd/src/views/admin/UserAdmin.tsx8
-rw-r--r--FrontEnd/src/views/common/alert/AlertHost.tsx45
-rw-r--r--FrontEnd/src/views/common/alert/alert.css28
-rw-r--r--FrontEnd/src/views/common/button/Button.css60
-rw-r--r--FrontEnd/src/views/common/button/FlatButton.css38
-rw-r--r--FrontEnd/src/views/common/button/TextButton.css36
-rw-r--r--FrontEnd/src/views/common/button/TextButton.tsx18
-rw-r--r--FrontEnd/src/views/common/button/common.ts6
-rw-r--r--FrontEnd/src/views/common/index.css100
-rw-r--r--FrontEnd/src/views/common/menu/Menu.css47
-rw-r--r--FrontEnd/src/views/common/menu/Menu.tsx2
12 files changed, 189 insertions, 213 deletions
diff --git a/FrontEnd/src/services/alert.ts b/FrontEnd/src/services/alert.ts
index 48d482ea..abe56315 100644
--- a/FrontEnd/src/services/alert.ts
+++ b/FrontEnd/src/services/alert.ts
@@ -1,11 +1,13 @@
import React from "react";
import pull from "lodash/pull";
-import { BootstrapThemeColor, I18nText } from "@/common";
+import { I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
export interface AlertInfo {
- type?: BootstrapThemeColor;
- message: React.FC<unknown> | I18nText;
+ type?: PaletteColorType;
+ message?: I18nText;
+ customMessage?: React.ReactElement;
dismissTime?: number | "never";
}
@@ -55,9 +57,3 @@ export const alertService = new AlertService();
export function pushAlert(alert: AlertInfo): void {
alertService.push(alert);
}
-
-export const kAlertHostId = "alert-host";
-
-export function getAlertHost(): HTMLElement | null {
- return document.getElementById(kAlertHostId);
-}
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 6d2760f2..4ceff8ab 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -14,8 +14,8 @@ import {
} from "@/http/user";
import { Trans, useTranslation } from "react-i18next";
import Button from "../common/button/Button";
-import TextButton from "../common/button/TextButton";
import Spinner from "../common/Spinner";
+import FlatButton from "../common/button/FlatButton";
interface DialogProps<TData = undefined, TReturn = undefined> {
open: boolean;
@@ -232,12 +232,12 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
className={classnames("edit-mask", !editMaskVisible && "d-none")}
onClick={() => setEditMaskVisible(false)}
>
- <TextButton text="admin:user.modify" onClick={on[kModify]} />
- <TextButton
+ <FlatButton text="admin:user.modify" onClick={on[kModify]} />
+ <FlatButton
text="admin:user.modifyPermissions"
onClick={on[kModifyPermission]}
/>
- <TextButton
+ <FlatButton
text="admin:user.delete"
color="danger"
onClick={on[kDelete]}
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index 21b9882d..ba6d6a0f 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -1,15 +1,13 @@
import React from "react";
import without from "lodash/without";
import { useTranslation } from "react-i18next";
+import classNames from "classnames";
-import {
- alertService,
- AlertInfoEx,
- kAlertHostId,
- AlertInfo,
-} from "@/services/alert";
+import { alertService, AlertInfoEx, AlertInfo } from "@/services/alert";
import { convertI18nText } from "@/common";
+import "./alert.css";
+
interface AutoCloseAlertProps {
alert: AlertInfo;
close: () => void;
@@ -51,14 +49,29 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
};
return (
- <div className="m-3" onClick={cancelTimer}>
- {(() => {
- const { message } = alert;
- if (typeof message === "function") {
- const Message = message;
- return <Message />;
- } else return convertI18nText(message, t);
- })()}
+ <div
+ className={classNames(
+ "m-3 cru-alert",
+ "cru-" + (alert.type ?? "primary")
+ )}
+ onClick={cancelTimer}
+ >
+ <div className="cru-alert-content">
+ {(() => {
+ const { message, customMessage } = alert;
+ if (customMessage != null) {
+ return customMessage;
+ } else {
+ return convertI18nText(message, t);
+ }
+ })()}
+ </div>
+ <div className="cru-alert-close-button-container">
+ <i
+ className={classNames("icon-button bi-x cru-alert-close-button")}
+ onClick={close}
+ />
+ </div>
</div>
);
};
@@ -66,8 +79,6 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
const AlertHost: React.FC = () => {
const [alerts, setAlerts] = React.useState<AlertInfoEx[]>([]);
- // react guarantee that state setters are stable, so we don't need to add it to dependency list
-
React.useEffect(() => {
const consume = (alert: AlertInfoEx): void => {
setAlerts((old) => [...old, alert]);
@@ -80,7 +91,7 @@ const AlertHost: React.FC = () => {
}, []);
return (
- <div id={kAlertHostId} className="alert-container">
+ <div className="alert-container">
{alerts.map((alert) => {
return (
<AutoCloseAlert
diff --git a/FrontEnd/src/views/common/alert/alert.css b/FrontEnd/src/views/common/alert/alert.css
index 12ce294e..328f5f9b 100644
--- a/FrontEnd/src/views/common/alert/alert.css
+++ b/FrontEnd/src/views/common/alert/alert.css
@@ -2,3 +2,31 @@
position: fixed;
z-index: 1040;
}
+
+.cru-alert {
+ border-radius: 5px;
+ border: var(--cru-theme-color) 1px solid;
+ color: var(--cru-theme-t-color);
+ background-color: var(--cru-theme-r1-color);
+
+ display: flex;
+ overflow: hidden;
+}
+
+.cru-alert-content {
+ padding: 0.5em 2em;
+}
+
+.cru-alert-close-button-container {
+ margin-left: auto;
+ width: 2em;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--cru-theme-t-color);
+}
+
+.cru-alert-close-button {
+ color: var(--cru-theme-color);
+}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 54127f05..c34176f6 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,59 +1,19 @@
-.cru-button.primary {
- --cru-button-color: var(--cru-primary-color);
- --cru-button-t-color: var(--cru-primary-t-color);
- --cru-button-f1-color: var(--cru-primary-f1-color);
- --cru-button-f2-color: var(--cru-primary-f2-color);
- --cru-button-f3-color: var(--cru-primary-f3-color);
-}
-
-.cru-button.primary-enhance {
- --cru-button-color: var(--cru-primary-enhance-color);
- --cru-button-t-color: var(--cru-primary-enhance-t-color);
- --cru-button-f1-color: var(--cru-primary-enhance-f1-color);
- --cru-button-f2-color: var(--cru-primary-enhance-f2-color);
- --cru-button-f3-color: var(--cru-primary-enhance-f3-color);
-}
-
-.cru-button.secondary {
- --cru-button-color: var(--cru-secondary-color);
- --cru-button-t-color: var(--cru-secondary-t-color);
- --cru-button-f1-color: var(--cru-secondary-f1-color);
- --cru-button-f2-color: var(--cru-secondary-f2-color);
- --cru-button-f3-color: var(--cru-secondary-f3-color);
-}
-
-.cru-button.success {
- --cru-button-color: var(--cru-success-color);
- --cru-button-t-color: var(--cru-success-t-color);
- --cru-button-f1-color: var(--cru-success-f1-color);
- --cru-button-f2-color: var(--cru-success-f2-color);
- --cru-button-f3-color: var(--cru-success-f3-color);
-}
-
-.cru-button.danger {
- --cru-button-color: var(--cru-danger-color);
- --cru-button-t-color: var(--cru-danger-t-color);
- --cru-button-f1-color: var(--cru-danger-f1-color);
- --cru-button-f2-color: var(--cru-danger-f2-color);
- --cru-button-f3-color: var(--cru-danger-f3-color);
-}
-
.cru-button:not(.outline) {
- color: var(--cru-button-t-color);
+ color: var(--cru-theme-t-color);
cursor: pointer;
padding: 0.2em 0.5em;
border-radius: 0.2em;
border: none;
transition: all 0.5s;
- background-color: var(--cru-button-color);
+ background-color: var(--cru-theme-color);
}
.cru-button:not(.outline):hover {
- background-color: var(--cru-button-f1-color);
+ background-color: var(--cru-theme-f1-color);
}
.cru-button:not(.outline):active {
- background-color: var(--cru-button-f2-color);
+ background-color: var(--cru-theme-f2-color);
}
.cru-button:not(.outline):disabled {
@@ -62,8 +22,8 @@
}
.cru-button.outline {
- color: var(--cru-button-color);
- border: var(--cru-button-color) 1px solid;
+ color: var(--cru-theme-color);
+ border: var(--cru-theme-color) 1px solid;
cursor: pointer;
padding: 0.2em 0.5em;
border-radius: 0.2em;
@@ -72,14 +32,14 @@
}
.cru-button.outline:hover {
- color: var(--cru-button-f1-color);
- border-color: var(--cru-button-f1-color);
+ color: var(--cru-theme-f1-color);
+ border-color: var(--cru-theme-f1-color);
background-color: var(--cru-background-color);
}
.cru-button.outline:active {
- color: var(--cru-button-f2-color);
- border-color: var(--cru-button-f2-color);
+ color: var(--cru-theme-f2-color);
+ border-color: var(--cru-theme-f2-color);
background-color: var(--cru-background-1-color);
}
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 986fb061..f0d33153 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -5,44 +5,14 @@
border: none;
background-color: transparent;
transition: all 0.6s;
-}
-
-.cru-flat-button:hover:not(.disabled) {
- background-color: #e9ecef;
+ color: var(--cru-theme-color);
}
.cru-flat-button.disabled {
+ color: var(--cru-theme-l1-color);
cursor: default;
}
-.cru-flat-button.primary {
- color: var(--cru-primary-color);
-}
-
-.cru-flat-button.primary.disabled {
- color: var(--cru-primary-l1-color);
-}
-
-.cru-flat-button.secondary {
- color: var(--cru-secondary-color);
-}
-
-.cru-flat-button.secondary.disabled {
- color: var(--cru-secondary-l1-color);
-}
-
-.cru-flat-button.success {
- color: var(--cru-success-color);
-}
-
-.cru-flat-button.success.disabled {
- color: var(--cru-success-l1-color);
-}
-
-.cru-flat-button.danger {
- color: var(--cru-danger-color);
-}
-
-.cru-flat-button.danger.disabled {
- color: var(--cru-danger-l1-color);
+.cru-flat-button:hover:not(.disabled) {
+ background-color: #e9ecef;
}
diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
deleted file mode 100644
index f5c8aefa..00000000
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.cru-text-button {
- background: transparent;
- border: none;
-}
-
-.cru-text-button.primary {
- color: var(--cru-primary-color);
-}
-
-.cru-text-button.primary:hover {
- color: var(--cru-primary-l1-color);
-}
-
-.cru-text-button.secondary {
- color: var(--cru-secondary-color);
-}
-
-.cru-text-button.secondary:hover {
- color: var(--cru-secondary-l1-color);
-}
-
-.cru-text-button.success {
- color: var(--cru-success-color);
-}
-
-.cru-text-button.success:hover {
- color: var(--cru-success-l1-color);
-}
-
-.cru-text-button.danger {
- color: var(--cru-danger-color);
-}
-
-.cru-text-button.danger:hover {
- color: var(--cru-danger-l1-color);
-}
diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
deleted file mode 100644
index 1d8e7a4b..00000000
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
-
-import "./TextButton.css";
-
-function _TextButton(
- props: CommonButtonProps,
- ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
- return (
- <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
- );
-}
-
-const TextButton = React.forwardRef(_TextButton);
-export default TextButton;
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
index a9db959e..0d84bae0 100644
--- a/FrontEnd/src/views/common/button/common.ts
+++ b/FrontEnd/src/views/common/button/common.ts
@@ -20,7 +20,11 @@ export function calculateProps(
} {
const { text, color, className, children, ...otherProps } = props;
const newProps = {
- className: classNames(buttonClassName, color ?? "primary", className),
+ className: classNames(
+ buttonClassName,
+ color != null ? "cru-" + color : "cru-primary",
+ className
+ ),
...otherProps,
};
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 529e0e51..a4ce8cf3 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -92,6 +92,106 @@
--cru-success-t3-color: rgb(179, 179, 179);
}
+.cru-primary {
+ --cru-theme-color: var(--cru-primary-color);
+ --cru-theme-l1-color: var(--cru-primary-l1-color);
+ --cru-theme-l2-color: var(--cru-primary-l2-color);
+ --cru-theme-l3-color: var(--cru-primary-l3-color);
+ --cru-theme-d1-color: var(--cru-primary-d1-color);
+ --cru-theme-d2-color: var(--cru-primary-d2-color);
+ --cru-theme-d3-color: var(--cru-primary-d3-color);
+ --cru-theme-f1-color: var(--cru-primary-f1-color);
+ --cru-theme-f2-color: var(--cru-primary-f2-color);
+ --cru-theme-f3-color: var(--cru-primary-f3-color);
+ --cru-theme-r1-color: var(--cru-primary-r1-color);
+ --cru-theme-r2-color: var(--cru-primary-r2-color);
+ --cru-theme-r3-color: var(--cru-primary-r3-color);
+ --cru-theme-t-color: var(--cru-primary-t-color);
+ --cru-theme-t1-color: var(--cru-primary-t1-color);
+ --cru-theme-t2-color: var(--cru-primary-t2-color);
+ --cru-theme-t3-color: var(--cru-primary-t3-color);
+}
+
+.cru-primary-enhance {
+ --cru-theme-color: var(--cru-primary-enhance-color);
+ --cru-theme-l1-color: var(--cru-primary-enhance-l1-color);
+ --cru-theme-l2-color: var(--cru-primary-enhance-l2-color);
+ --cru-theme-l3-color: var(--cru-primary-enhance-l3-color);
+ --cru-theme-d1-color: var(--cru-primary-enhance-d1-color);
+ --cru-theme-d2-color: var(--cru-primary-enhance-d2-color);
+ --cru-theme-d3-color: var(--cru-primary-enhance-d3-color);
+ --cru-theme-f1-color: var(--cru-primary-enhance-f1-color);
+ --cru-theme-f2-color: var(--cru-primary-enhance-f2-color);
+ --cru-theme-f3-color: var(--cru-primary-enhance-f3-color);
+ --cru-theme-r1-color: var(--cru-primary-enhance-r1-color);
+ --cru-theme-r2-color: var(--cru-primary-enhance-r2-color);
+ --cru-theme-r3-color: var(--cru-primary-enhance-r3-color);
+ --cru-theme-t-color: var(--cru-primary-enhance-t-color);
+ --cru-theme-t1-color: var(--cru-primary-enhance-t1-color);
+ --cru-theme-t2-color: var(--cru-primary-enhance-t2-color);
+ --cru-theme-t3-color: var(--cru-primary-enhance-t3-color);
+}
+
+.cru-secondary {
+ --cru-theme-color: var(--cru-secondary-color);
+ --cru-theme-l1-color: var(--cru-secondary-l1-color);
+ --cru-theme-l2-color: var(--cru-secondary-l2-color);
+ --cru-theme-l3-color: var(--cru-secondary-l3-color);
+ --cru-theme-d1-color: var(--cru-secondary-d1-color);
+ --cru-theme-d2-color: var(--cru-secondary-d2-color);
+ --cru-theme-d3-color: var(--cru-secondary-d3-color);
+ --cru-theme-f1-color: var(--cru-secondary-f1-color);
+ --cru-theme-f2-color: var(--cru-secondary-f2-color);
+ --cru-theme-f3-color: var(--cru-secondary-f3-color);
+ --cru-theme-r1-color: var(--cru-secondary-r1-color);
+ --cru-theme-r2-color: var(--cru-secondary-r2-color);
+ --cru-theme-r3-color: var(--cru-secondary-r3-color);
+ --cru-theme-t-color: var(--cru-secondary-t-color);
+ --cru-theme-t1-color: var(--cru-secondary-t1-color);
+ --cru-theme-t2-color: var(--cru-secondary-t2-color);
+ --cru-theme-t3-color: var(--cru-secondary-t3-color);
+}
+
+.cru-success {
+ --cru-theme-color: var(--cru-success-color);
+ --cru-theme-l1-color: var(--cru-success-l1-color);
+ --cru-theme-l2-color: var(--cru-success-l2-color);
+ --cru-theme-l3-color: var(--cru-success-l3-color);
+ --cru-theme-d1-color: var(--cru-success-d1-color);
+ --cru-theme-d2-color: var(--cru-success-d2-color);
+ --cru-theme-d3-color: var(--cru-success-d3-color);
+ --cru-theme-f1-color: var(--cru-success-f1-color);
+ --cru-theme-f2-color: var(--cru-success-f2-color);
+ --cru-theme-f3-color: var(--cru-success-f3-color);
+ --cru-theme-r1-color: var(--cru-success-r1-color);
+ --cru-theme-r2-color: var(--cru-success-r2-color);
+ --cru-theme-r3-color: var(--cru-success-r3-color);
+ --cru-theme-t-color: var(--cru-success-t-color);
+ --cru-theme-t1-color: var(--cru-success-t1-color);
+ --cru-theme-t2-color: var(--cru-success-t2-color);
+ --cru-theme-t3-color: var(--cru-success-t3-color);
+}
+
+.cru-danger {
+ --cru-theme-color: var(--cru-danger-color);
+ --cru-theme-l1-color: var(--cru-danger-l1-color);
+ --cru-theme-l2-color: var(--cru-danger-l2-color);
+ --cru-theme-l3-color: var(--cru-danger-l3-color);
+ --cru-theme-d1-color: var(--cru-danger-d1-color);
+ --cru-theme-d2-color: var(--cru-danger-d2-color);
+ --cru-theme-d3-color: var(--cru-danger-d3-color);
+ --cru-theme-f1-color: var(--cru-danger-f1-color);
+ --cru-theme-f2-color: var(--cru-danger-f2-color);
+ --cru-theme-f3-color: var(--cru-danger-f3-color);
+ --cru-theme-r1-color: var(--cru-danger-r1-color);
+ --cru-theme-r2-color: var(--cru-danger-r2-color);
+ --cru-theme-r3-color: var(--cru-danger-r3-color);
+ --cru-theme-t-color: var(--cru-danger-t-color);
+ --cru-theme-t1-color: var(--cru-danger-t1-color);
+ --cru-theme-t2-color: var(--cru-danger-t2-color);
+ --cru-theme-t3-color: var(--cru-danger-t3-color);
+}
+
.cru-color-primary {
color: var(--cru-primary-color);
}
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index 923c7d3c..c3fa82c4 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -7,51 +7,12 @@
padding: 0.5em 1.5em;
cursor: pointer;
transition: all 0.5s;
+ color: var(--cru-theme-color);
}
-.cru-menu-item.color-primary {
- color: var(--cru-primary-color);
-}
-
-.cru-menu-item.color-primary:hover {
- color: var(--cru-primary-t-color);
- background-color: var(--cru-primary-color);
-}
-
-.cru-menu-item.color-secondary {
- color: var(--cru-secondary-color);
-}
-
-.cru-menu-item.color-secondary:hover {
- color: var(--cru-secondary-t-color);
- background-color: var(--cru-secondary-color);
-}
-
-.cru-menu-item.color-primary-enhance {
- color: var(--cru-primary-enhance-color);
-}
-
-.cru-menu-item.color-primary-enhance:hover {
- color: var(--cru-primary-enhance-t-color);
- background-color: var(--cru-primary-enhance-color);
-}
-
-.cru-menu-item.color-success {
- color: var(--cru-success-color);
-}
-
-.cru-menu-item.color-success:hover {
- color: var(--cru-success-t-color);
- background-color: var(--cru-success-color);
-}
-
-.cru-menu-item.color-danger {
- color: var(--cru-danger-color);
-}
-
-.cru-menu-item.color-danger:hover {
- color: var(--cru-danger-t-color);
- background-color: var(--cru-danger-color);
+.cru-menu-item:hover {
+ color: var(--cru-theme-t-color);
+ background-color: var(--cru-theme-color);
}
.cru-menu-item-icon {
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 04243fa3..d2f65391 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -47,7 +47,7 @@ export default function _Menu({
key={index}
className={classnames(
"cru-menu-item",
- `color-${item.color ?? "primary"}`
+ `cru-${item.color ?? "primary"}`
)}
onClick={() => {
item.onClick();
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 20:17:23 +0000