From de7df0e4fb38863b830a104a5a38d0e5247679f8 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 29 Jun 2021 23:50:55 +0800 Subject: ... --- FrontEnd/src/views/common/menu/Menu.css | 35 +++++++++++++++ FrontEnd/src/views/common/menu/Menu.tsx | 66 ++++++++++++++++++++++++++++ FrontEnd/src/views/common/menu/PopupMenu.tsx | 17 +++++++ 3 files changed, 118 insertions(+) create mode 100644 FrontEnd/src/views/common/menu/Menu.css create mode 100644 FrontEnd/src/views/common/menu/Menu.tsx create mode 100644 FrontEnd/src/views/common/menu/PopupMenu.tsx (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css new file mode 100644 index 00000000..0b455baa --- /dev/null +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -0,0 +1,35 @@ +.cru-menu { + min-width: 200px; +} + +.cru-menu-item { + font-size: 1.2em; + padding: 0.5em 1.5em; + cursor: pointer; +} + +.cru-menu-item.color-primary { + color: var(--cru-primary-color); +} + +.cru-menu-item.color-primary:hover { + color: var(--cru-text-on-primary-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-text-on-secondary-color); + background-color: var(--cru-secondary-color); +} + +.cru-menu-item-icon { + margin-right: 1em; +} + +.cru-menu-divider { + border-top: 1px solid #e9ecef; +} diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx new file mode 100644 index 00000000..7523247d --- /dev/null +++ b/FrontEnd/src/views/common/menu/Menu.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import classnames from "classnames"; +import { useTranslation } from "react-i18next"; + +import { convertI18nText, I18nText } from "@/common"; +import { PaletteColorType } from "@/palette"; + +export type MenuItem = + | { + type: "divider"; + } + | { + type: "button"; + text: I18nText; + iconClassName?: string; + color?: PaletteColorType; + onClick: () => void; + }; + +export type MenuItems = MenuItem[]; + +export interface MenuProps { + items: MenuItems; + className?: string; + onItemClicked?: () => void; +} + +const Menu: React.FC = ({ items, className, onItemClicked }) => { + const { t } = useTranslation(); + + return ( +
+ {items.map((item, index) => { + if (item.type === "divider") { + return
; + } else { + return ( +
{ + item.onClick(); + onItemClicked?.(); + }} + > + {item.iconClassName != null ? ( + + ) : null} + {convertI18nText(item.text, t)} +
+ ); + } + })} +
+ ); +}; + +export default Menu; diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx new file mode 100644 index 00000000..0d447f09 --- /dev/null +++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +import Menu, { MenuItems } from "./Menu"; + +export interface PopupMenuProps { + items: MenuItems; + children: React.ReactElement; +} + +export const PopupMenu: React.FC = ({ items, children }) => { + const [show, setShow] = React.useState(false); + const toggle = (): void => setShow(!show); + + // TODO: + + return setShow(false)} />; +}; -- cgit v1.2.3 From 6b5d88a6a1a3fe12721f3159a6837d3f41d69022 Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 30 Jun 2021 00:15:20 +0800 Subject: ... --- FrontEnd/package.json | 2 + FrontEnd/src/views/common/menu/Menu.tsx | 22 +++++---- FrontEnd/src/views/common/menu/PopupMenu.css | 3 ++ FrontEnd/src/views/common/menu/PopupMenu.tsx | 56 ++++++++++++++++++++-- .../timeline-common/TimelinePageCardTemplate.tsx | 3 +- .../src/views/timeline-common/TimelinePostEdit.tsx | 2 +- 6 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 FrontEnd/src/views/common/menu/PopupMenu.css (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/package.json b/FrontEnd/package.json index 55c7c95f..2c92d6b2 100644 --- a/FrontEnd/package.json +++ b/FrontEnd/package.json @@ -7,6 +7,7 @@ "description": "Timeline app.", "dependencies": { "@microsoft/signalr": "^5.0.7", + "@popperjs/core": "^2.9.2", "axios": "^0.21.1", "bootstrap": "^5.0.2", "bootstrap-icons": "^1.5.0", @@ -23,6 +24,7 @@ "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-i18next": "^11.11.0", + "react-popper": "^2.2.5", "react-responsive": "^8.2.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx index 7523247d..04243fa3 100644 --- a/FrontEnd/src/views/common/menu/Menu.tsx +++ b/FrontEnd/src/views/common/menu/Menu.tsx @@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next"; import { convertI18nText, I18nText } from "@/common"; import { PaletteColorType } from "@/palette"; +import "./Menu.css"; + export type MenuItem = | { type: "divider"; @@ -19,17 +21,23 @@ export type MenuItem = export type MenuItems = MenuItem[]; -export interface MenuProps { +export type MenuProps = { items: MenuItems; - className?: string; onItemClicked?: () => void; -} + className?: string; + style?: React.CSSProperties; +}; -const Menu: React.FC = ({ items, className, onItemClicked }) => { +export default function _Menu({ + items, + onItemClicked, + className, + style, +}: MenuProps): React.ReactElement | null { const { t } = useTranslation(); return ( -
+
{items.map((item, index) => { if (item.type === "divider") { return
; @@ -61,6 +69,4 @@ const Menu: React.FC = ({ items, className, onItemClicked }) => { })}
); -}; - -export default Menu; +} diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css new file mode 100644 index 00000000..8465a1bb --- /dev/null +++ b/FrontEnd/src/views/common/menu/PopupMenu.css @@ -0,0 +1,3 @@ +.cru-popup-menu-menu-container { + +} diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx index 0d447f09..50f80a91 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.tsx +++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx @@ -1,17 +1,63 @@ +import classNames from "classnames"; import React from "react"; +import { usePopper } from "react-popper"; import Menu, { MenuItems } from "./Menu"; +import "./PopupMenu.css"; + export interface PopupMenuProps { items: MenuItems; - children: React.ReactElement; + children?: React.ReactNode; + containerClassName?: string; + containerStyle?: React.CSSProperties; } -export const PopupMenu: React.FC = ({ items, children }) => { +const PopupMenu: React.FC = ({ + items, + children, + containerClassName, + containerStyle, +}) => { const [show, setShow] = React.useState(false); - const toggle = (): void => setShow(!show); - // TODO: + const [referenceElement, setReferenceElement] = + React.useState(null); + const [popperElement, setPopperElement] = + React.useState(null); + const [arrowElement, setArrowElement] = React.useState( + null + ); + const { styles, attributes } = usePopper(referenceElement, popperElement, { + modifiers: [{ name: "arrow", options: { element: arrowElement } }], + }); - return setShow(false)} />; + return ( + <> +
setShow(true)} + > + {children} +
+ {show ? ( +
+ +
+
+ ) : null} + + ); }; + +export default PopupMenu; diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx index 78af1131..75f2d400 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx @@ -17,7 +17,8 @@ import CollapseButton from "./CollapseButton"; import { TimelineMemberDialog } from "./TimelineMember"; import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog"; import ConnectionStatusBadge from "./ConnectionStatusBadge"; -import { MenuItems, PopupMenu } from "../common/menu/Menu"; +import { MenuItems } from "../common/menu/Menu"; +import PopupMenu from "../common/menu/PopupMenu"; import FullPageDialog from "../common/dailog/FullPageDialog"; import Card from "../common/Card"; diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx index 1e6591c0..e2045429 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx @@ -16,7 +16,7 @@ import { base64 } from "@/http/common"; import BlobImage from "../common/BlobImage"; import LoadingButton from "../common/button/LoadingButton"; -import { PopupMenu } from "../common/menu/Menu"; +import PopupMenu from "../common/menu/PopupMenu"; import Card from "../common/Card"; import MarkdownPostEdit from "./MarkdownPostEdit"; import TimelineLine from "./TimelineLine"; -- cgit v1.2.3 From 979ad8556be3576b09e318c9e85ae0138ecf11ec Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 30 Jun 2021 18:18:04 +0800 Subject: ... --- FrontEnd/src/views/common/index.css | 2 ++ FrontEnd/src/views/common/menu/PopupMenu.css | 4 +++- FrontEnd/src/views/common/menu/PopupMenu.tsx | 32 +++++++++++++++++++++------- 3 files changed, 29 insertions(+), 9 deletions(-) (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index e2769fe4..cb1cccd4 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,4 +1,6 @@ :root { + --cru-background-color: #f8f9fa; + --cru-primary-color: rgb(255, 105, 0); --cru-primary-l1-color: rgb(255, 120, 26); --cru-primary-l2-color: rgb(255, 135, 51); diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css index 8465a1bb..8f8fd20e 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.css +++ b/FrontEnd/src/views/common/menu/PopupMenu.css @@ -1,3 +1,5 @@ .cru-popup-menu-menu-container { - + border-radius: 5px; + border: var(--cru-primary-color) 1px solid; + background-color: var(--cru-background-color); } diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx index 50f80a91..851f3bee 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.tsx +++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx @@ -25,12 +25,24 @@ const PopupMenu: React.FC = ({ React.useState(null); const [popperElement, setPopperElement] = React.useState(null); - const [arrowElement, setArrowElement] = React.useState( - null - ); - const { styles, attributes } = usePopper(referenceElement, popperElement, { - modifiers: [{ name: "arrow", options: { element: arrowElement } }], - }); + const { styles, attributes } = usePopper(referenceElement, popperElement); + + React.useEffect(() => { + const handler = (event: MouseEvent): void => { + let element: HTMLElement | null = event.target as HTMLElement; + while (element) { + if (element == referenceElement || element == popperElement) { + return; + } + element = element.parentElement; + } + setShow(false); + }; + document.addEventListener("click", handler); + return () => { + document.removeEventListener("click", handler); + }; + }, [referenceElement, popperElement]); return ( <> @@ -52,8 +64,12 @@ const PopupMenu: React.FC = ({ style={styles.popper} {...attributes.popper} > - -
+ { + setShow(false); + }} + />
) : null} -- cgit v1.2.3 From bb7a017dba4c466eaf167627b3605cf539b1e516 Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 30 Jun 2021 19:00:13 +0800 Subject: ... --- FrontEnd/src/palette.ts | 6 +- FrontEnd/src/views/common/index.css | 78 +++++++++++----------- FrontEnd/src/views/common/menu/Menu.css | 2 +- FrontEnd/src/views/common/menu/PopupMenu.css | 1 + FrontEnd/src/views/common/menu/PopupMenu.tsx | 35 +++++----- .../timeline-common/TimelinePageCardTemplate.tsx | 2 +- FrontEnd/src/views/timeline/TimelineCard.tsx | 12 ++-- FrontEnd/src/views/user/UserCard.tsx | 8 ++- 8 files changed, 77 insertions(+), 67 deletions(-) (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts index fb54f042..ca1f76cf 100644 --- a/FrontEnd/src/palette.ts +++ b/FrontEnd/src/palette.ts @@ -90,7 +90,7 @@ export function generatePalette(options: { primaryEnhance == null ? lightenBy(p, 0.3).saturate(0.3) : Color(primaryEnhance); - const s = secondary == null ? p.rotate(90) : Color(secondary); + const s = secondary == null ? Color("gray") : Color(secondary); return { primary: generatePaletteColor(p.toString()), @@ -130,8 +130,8 @@ export function generatePaletteCSS(palette: Palette): string { const paletteSubject: BehaviorSubject = new BehaviorSubject( - generatePalette({ primary: "rgb(0, 123, 255)" }) - // null + // generatePalette({ primary: "rgb(0, 123, 255)" }) + null ); export const palette$: Observable = diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index d7501f98..4a860e95 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,45 +1,45 @@ :root { --cru-background-color: #f8f9fa; - --cru-primary-color: rgb(255, 105, 0); - --cru-primary-l1-color: rgb(255, 120, 26); - --cru-primary-l2-color: rgb(255, 135, 51); - --cru-primary-l3-color: rgb(255, 150, 77); - --cru-primary-d1-color: rgb(230, 95, 0); - --cru-primary-d2-color: rgb(204, 84, 0); - --cru-primary-d3-color: rgb(179, 74, 0); - --cru-primary-f1-color: rgb(230, 95, 0); - --cru-primary-f2-color: rgb(204, 84, 0); - --cru-primary-f3-color: rgb(179, 74, 0); - --cru-primary-r1-color: rgb(255, 120, 26); - --cru-primary-r2-color: rgb(255, 135, 51); - --cru-primary-r3-color: rgb(255, 150, 77); - --cru-primary-enhance-color: rgb(255, 150, 77); - --cru-primary-enhance-l1-color: rgb(255, 161, 94); - --cru-primary-enhance-l2-color: rgb(255, 171, 112); - --cru-primary-enhance-l3-color: rgb(255, 182, 130); - --cru-primary-enhance-d1-color: rgb(255, 131, 43); - --cru-primary-enhance-d2-color: rgb(255, 111, 10); - --cru-primary-enhance-d3-color: rgb(232, 96, 0); - --cru-primary-enhance-f1-color: rgb(255, 161, 94); - --cru-primary-enhance-f2-color: rgb(255, 171, 112); - --cru-primary-enhance-f3-color: rgb(255, 182, 130); - --cru-primary-enhance-r1-color: rgb(255, 131, 43); - --cru-primary-enhance-r2-color: rgb(255, 111, 10); - --cru-primary-enhance-r3-color: rgb(232, 96, 0); - --cru-secondary-color: rgb(23, 255, 0); - --cru-secondary-l1-color: rgb(46, 255, 26); - --cru-secondary-l2-color: rgb(69, 255, 51); - --cru-secondary-l3-color: rgb(92, 255, 77); - --cru-secondary-d1-color: rgb(20, 230, 0); - --cru-secondary-d2-color: rgb(18, 204, 0); - --cru-secondary-d3-color: rgb(16, 179, 0); - --cru-secondary-f1-color: rgb(20, 230, 0); - --cru-secondary-f2-color: rgb(18, 204, 0); - --cru-secondary-f3-color: rgb(16, 179, 0); - --cru-secondary-r1-color: rgb(46, 255, 26); - --cru-secondary-r2-color: rgb(69, 255, 51); - --cru-secondary-r3-color: rgb(92, 255, 77); + --cru-primary-color: rgb(0, 123, 255); + --cru-primary-l1-color: rgb(26, 136, 255); + --cru-primary-l2-color: rgb(51, 149, 255); + --cru-primary-l3-color: rgb(77, 163, 255); + --cru-primary-d1-color: rgb(0, 111, 230); + --cru-primary-d2-color: rgb(0, 98, 204); + --cru-primary-d3-color: rgb(0, 86, 179); + --cru-primary-f1-color: rgb(0, 111, 230); + --cru-primary-f2-color: rgb(0, 98, 204); + --cru-primary-f3-color: rgb(0, 86, 179); + --cru-primary-r1-color: rgb(26, 136, 255); + --cru-primary-r2-color: rgb(51, 149, 255); + --cru-primary-r3-color: rgb(77, 163, 255); + --cru-primary-enhance-color: rgb(77, 163, 255); + --cru-primary-enhance-l1-color: rgb(94, 172, 255); + --cru-primary-enhance-l2-color: rgb(112, 181, 255); + --cru-primary-enhance-l3-color: rgb(130, 190, 255); + --cru-primary-enhance-d1-color: rgb(43, 145, 255); + --cru-primary-enhance-d2-color: rgb(10, 128, 255); + --cru-primary-enhance-d3-color: rgb(0, 112, 232); + --cru-primary-enhance-f1-color: rgb(94, 172, 255); + --cru-primary-enhance-f2-color: rgb(112, 181, 255); + --cru-primary-enhance-f3-color: rgb(130, 190, 255); + --cru-primary-enhance-r1-color: rgb(43, 145, 255); + --cru-primary-enhance-r2-color: rgb(10, 128, 255); + --cru-primary-enhance-r3-color: rgb(0, 112, 232); + --cru-secondary-color: rgb(128, 128, 128); + --cru-secondary-l1-color: rgb(141, 141, 141); + --cru-secondary-l2-color: rgb(153, 153, 153); + --cru-secondary-l3-color: rgb(166, 166, 166); + --cru-secondary-d1-color: rgb(115, 115, 115); + --cru-secondary-d2-color: rgb(102, 102, 102); + --cru-secondary-d3-color: rgb(90, 90, 90); + --cru-secondary-f1-color: rgb(115, 115, 115); + --cru-secondary-f2-color: rgb(102, 102, 102); + --cru-secondary-f3-color: rgb(90, 90, 90); + --cru-secondary-r1-color: rgb(141, 141, 141); + --cru-secondary-r2-color: rgb(153, 153, 153); + --cru-secondary-r3-color: rgb(166, 166, 166); --cru-text-primary-color: rgb(17, 17, 17); --cru-text-primary-l1-color: rgb(41, 41, 41); --cru-text-primary-l2-color: rgb(65, 65, 65); diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css index 0b455baa..e0ea2cad 100644 --- a/FrontEnd/src/views/common/menu/Menu.css +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -3,7 +3,7 @@ } .cru-menu-item { - font-size: 1.2em; + font-size: 1em; padding: 0.5em 1.5em; cursor: pointer; } diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css index 8f8fd20e..658532d3 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.css +++ b/FrontEnd/src/views/common/menu/PopupMenu.css @@ -1,4 +1,5 @@ .cru-popup-menu-menu-container { + z-index: 1040; border-radius: 5px; border: var(--cru-primary-color) 1px solid; background-color: var(--cru-background-color); diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx index 851f3bee..d7b81f49 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.tsx +++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx @@ -1,5 +1,6 @@ import classNames from "classnames"; import React from "react"; +import { createPortal } from "react-dom"; import { usePopper } from "react-popper"; import Menu, { MenuItems } from "./Menu"; @@ -57,21 +58,25 @@ const PopupMenu: React.FC = ({ > {children}
- {show ? ( -
- { - setShow(false); - }} - /> -
- ) : null} + {show + ? createPortal( +
+ { + setShow(false); + }} + /> +
, + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + document.getElementById("portal")! + ) + : null} ); }; diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx index f57fda2e..4802ca93 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx @@ -23,7 +23,7 @@ import FullPageDialog from "../common/dailog/FullPageDialog"; import Card from "../common/Card"; export interface TimelineCardTemplateProps extends TimelinePageCardProps { - infoArea: React.ReactElement; + infoArea: React.ReactNode; manageItems?: MenuItems; dialog: string | "property" | "member" | null; setDialog: (dialog: "property" | "member" | null) => void; diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx index 311aa112..56057560 100644 --- a/FrontEnd/src/views/timeline/TimelineCard.tsx +++ b/FrontEnd/src/views/timeline/TimelineCard.tsx @@ -20,16 +20,18 @@ const TimelineCard: React.FC = (props) => { <>

{timeline.title} - {timeline.name} + + {timeline.name} +

-
+
{timeline.owner.nickname} - - src{timeline.owner.username} + + @{timeline.owner.username}
diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx index 8a532512..739d26ee 100644 --- a/FrontEnd/src/views/user/UserCard.tsx +++ b/FrontEnd/src/views/user/UserCard.tsx @@ -16,11 +16,13 @@ const UserCard: React.FC = (props) => { -

+

{timeline.title} - {timeline.name} + + {timeline.name} +

-
+
Date: Wed, 30 Jun 2021 23:13:08 +0800 Subject: ... --- FrontEnd/src/palette.ts | 28 ++++----- FrontEnd/src/views/common/AppBar.css | 8 +-- FrontEnd/src/views/common/button/Button.css | 7 ++- .../src/views/common/dailog/FullPageDialog.css | 2 +- FrontEnd/src/views/common/index.css | 72 ++++++---------------- FrontEnd/src/views/common/menu/Menu.css | 2 +- 6 files changed, 46 insertions(+), 73 deletions(-) (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts index ca1f76cf..dedad5e2 100644 --- a/FrontEnd/src/palette.ts +++ b/FrontEnd/src/palette.ts @@ -27,6 +27,10 @@ export interface PaletteColor { r1: string; r2: string; r3: string; + t: string; + t1: string; + t2: string; + t3: string; [key: string]: string; } @@ -34,10 +38,6 @@ const paletteColorList = [ "primary", "primary-enhance", "secondary", - "text-primary", - "text-on-primary", - "text-on-primary-enhance", - "text-on-secondary", "danger", "success", ] as const; @@ -61,6 +61,12 @@ export function generatePaletteColor(color: string): PaletteColor { const r1 = light ? d1 : l1; const r2 = light ? d2 : l2; const r3 = light ? d3 : l3; + const _t = light ? Color("black") : Color("white"); + const t = _t.rgb().toString(); + const _b = light ? lightenBy : darkenBy; + const t1 = _b(_t, 0.1).rgb().toString(); + const t2 = _b(_t, 0.2).rgb().toString(); + const t3 = _b(_t, 0.3).rgb().toString(); return { color: c.rgb().toString(), @@ -76,6 +82,10 @@ export function generatePaletteColor(color: string): PaletteColor { r1, r2, r3, + t, + t1, + t2, + t3, }; } @@ -96,16 +106,6 @@ export function generatePalette(options: { primary: generatePaletteColor(p.toString()), "primary-enhance": generatePaletteColor(pe.toString()), secondary: generatePaletteColor(s.toString()), - "text-primary": generatePaletteColor("#111111"), - "text-on-primary": generatePaletteColor( - p.lightness() > 60 ? "black" : "white" - ), - "text-on-primary-enhance": generatePaletteColor( - pe.lightness() > 60 ? "black" : "white" - ), - "text-on-secondary": generatePaletteColor( - s.lightness() > 60 ? "black" : "white" - ), danger: generatePaletteColor("red"), success: generatePaletteColor("green"), }; diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css index e4bdf852..3ec4fa36 100644 --- a/FrontEnd/src/views/common/AppBar.css +++ b/FrontEnd/src/views/common/AppBar.css @@ -16,16 +16,16 @@ } .app-bar a { - color: var(--cru-text-on-primary-r1-color); + color: var(--cru-primary-t1-color); text-decoration: none; margin: 0 1em; transition: color 1s; } .app-bar a:hover { - color: var(--cru-text-on-primary-color); + color: var(--cru-primary-t-color); } .app-bar a.active { - color: var(--cru-text-on-primary-color); + color: var(--cru-primary-t-color); } .app-bar-brand { @@ -89,7 +89,7 @@ margin-left: auto; font-size: 2em; margin-right: 1em; - color: var(--cru-text-on-primary-color); + color: var(--cru-primary-t-color); cursor: pointer; user-select: none; } diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 3e408d8d..11d211c5 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,5 +1,6 @@ .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); @@ -7,6 +8,7 @@ .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); @@ -14,6 +16,7 @@ .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); @@ -21,6 +24,7 @@ .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); @@ -28,13 +32,14 @@ .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: white; + color: var(--cru-button-t-color); cursor: pointer; padding: 0.2em 0.5em; border-radius: 0.2em; diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css index a7033398..a196981c 100644 --- a/FrontEnd/src/views/common/dailog/FullPageDialog.css +++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css @@ -26,5 +26,5 @@ } .cru-full-page-back-button { - color: var(--cru-text-on-primary-color); + color: var(--cru-primary-t-color); } diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 8eb24e1d..75ec6485 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -14,6 +14,10 @@ --cru-primary-r1-color: rgb(26, 136, 255); --cru-primary-r2-color: rgb(51, 149, 255); --cru-primary-r3-color: rgb(77, 163, 255); + --cru-primary-t-color: rgb(255, 255, 255); + --cru-primary-t1-color: rgb(230, 230, 230); + --cru-primary-t2-color: rgb(204, 204, 204); + --cru-primary-t3-color: rgb(179, 179, 179); --cru-primary-enhance-color: rgb(77, 163, 255); --cru-primary-enhance-l1-color: rgb(94, 172, 255); --cru-primary-enhance-l2-color: rgb(112, 181, 255); @@ -27,6 +31,10 @@ --cru-primary-enhance-r1-color: rgb(43, 145, 255); --cru-primary-enhance-r2-color: rgb(10, 128, 255); --cru-primary-enhance-r3-color: rgb(0, 112, 232); + --cru-primary-enhance-t-color: rgb(0, 0, 0); + --cru-primary-enhance-t1-color: rgb(26, 26, 26); + --cru-primary-enhance-t2-color: rgb(51, 51, 51); + --cru-primary-enhance-t3-color: rgb(77, 77, 77); --cru-secondary-color: rgb(128, 128, 128); --cru-secondary-l1-color: rgb(141, 141, 141); --cru-secondary-l2-color: rgb(153, 153, 153); @@ -40,58 +48,10 @@ --cru-secondary-r1-color: rgb(141, 141, 141); --cru-secondary-r2-color: rgb(153, 153, 153); --cru-secondary-r3-color: rgb(166, 166, 166); - --cru-text-primary-color: rgb(17, 17, 17); - --cru-text-primary-l1-color: rgb(41, 41, 41); - --cru-text-primary-l2-color: rgb(65, 65, 65); - --cru-text-primary-l3-color: rgb(88, 88, 88); - --cru-text-primary-d1-color: rgb(15, 15, 15); - --cru-text-primary-d2-color: rgb(14, 14, 14); - --cru-text-primary-d3-color: rgb(12, 12, 12); - --cru-text-primary-f1-color: rgb(15, 15, 15); - --cru-text-primary-f2-color: rgb(14, 14, 14); - --cru-text-primary-f3-color: rgb(12, 12, 12); - --cru-text-primary-r1-color: rgb(41, 41, 41); - --cru-text-primary-r2-color: rgb(65, 65, 65); - --cru-text-primary-r3-color: rgb(88, 88, 88); - --cru-text-on-primary-color: rgb(255, 255, 255); - --cru-text-on-primary-l1-color: rgb(255, 255, 255); - --cru-text-on-primary-l2-color: rgb(255, 255, 255); - --cru-text-on-primary-l3-color: rgb(255, 255, 255); - --cru-text-on-primary-d1-color: rgb(230, 230, 230); - --cru-text-on-primary-d2-color: rgb(204, 204, 204); - --cru-text-on-primary-d3-color: rgb(179, 179, 179); - --cru-text-on-primary-f1-color: rgb(255, 255, 255); - --cru-text-on-primary-f2-color: rgb(255, 255, 255); - --cru-text-on-primary-f3-color: rgb(255, 255, 255); - --cru-text-on-primary-r1-color: rgb(230, 230, 230); - --cru-text-on-primary-r2-color: rgb(204, 204, 204); - --cru-text-on-primary-r3-color: rgb(179, 179, 179); - --cru-text-on-primary-enhance-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-l1-color: rgb(26, 26, 26); - --cru-text-on-primary-enhance-l2-color: rgb(51, 51, 51); - --cru-text-on-primary-enhance-l3-color: rgb(77, 77, 77); - --cru-text-on-primary-enhance-d1-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-d2-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-d3-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-f1-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-f2-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-f3-color: rgb(0, 0, 0); - --cru-text-on-primary-enhance-r1-color: rgb(26, 26, 26); - --cru-text-on-primary-enhance-r2-color: rgb(51, 51, 51); - --cru-text-on-primary-enhance-r3-color: rgb(77, 77, 77); - --cru-text-on-secondary-color: rgb(255, 255, 255); - --cru-text-on-secondary-l1-color: rgb(255, 255, 255); - --cru-text-on-secondary-l2-color: rgb(255, 255, 255); - --cru-text-on-secondary-l3-color: rgb(255, 255, 255); - --cru-text-on-secondary-d1-color: rgb(230, 230, 230); - --cru-text-on-secondary-d2-color: rgb(204, 204, 204); - --cru-text-on-secondary-d3-color: rgb(179, 179, 179); - --cru-text-on-secondary-f1-color: rgb(255, 255, 255); - --cru-text-on-secondary-f2-color: rgb(255, 255, 255); - --cru-text-on-secondary-f3-color: rgb(255, 255, 255); - --cru-text-on-secondary-r1-color: rgb(230, 230, 230); - --cru-text-on-secondary-r2-color: rgb(204, 204, 204); - --cru-text-on-secondary-r3-color: rgb(179, 179, 179); + --cru-secondary-t-color: rgb(255, 255, 255); + --cru-secondary-t1-color: rgb(230, 230, 230); + --cru-secondary-t2-color: rgb(204, 204, 204); + --cru-secondary-t3-color: rgb(179, 179, 179); --cru-danger-color: rgb(255, 0, 0); --cru-danger-l1-color: rgb(255, 26, 26); --cru-danger-l2-color: rgb(255, 51, 51); @@ -105,6 +65,10 @@ --cru-danger-r1-color: rgb(255, 26, 26); --cru-danger-r2-color: rgb(255, 51, 51); --cru-danger-r3-color: rgb(255, 77, 77); + --cru-danger-t-color: rgb(255, 255, 255); + --cru-danger-t1-color: rgb(230, 230, 230); + --cru-danger-t2-color: rgb(204, 204, 204); + --cru-danger-t3-color: rgb(179, 179, 179); --cru-success-color: rgb(0, 128, 0); --cru-success-l1-color: rgb(0, 166, 0); --cru-success-l2-color: rgb(0, 204, 0); @@ -118,6 +82,10 @@ --cru-success-r1-color: rgb(0, 166, 0); --cru-success-r2-color: rgb(0, 204, 0); --cru-success-r3-color: rgb(0, 243, 0); + --cru-success-t-color: rgb(255, 255, 255); + --cru-success-t1-color: rgb(230, 230, 230); + --cru-success-t2-color: rgb(204, 204, 204); + --cru-success-t3-color: rgb(179, 179, 179); } .cru-color-primary { diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css index e0ea2cad..c933b34f 100644 --- a/FrontEnd/src/views/common/menu/Menu.css +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -13,7 +13,7 @@ } .cru-menu-item.color-primary:hover { - color: var(--cru-text-on-primary-color); + color: var(--cru-primary-t-color); background-color: var(--cru-primary-color); } -- cgit v1.2.3 From 81e54efaae0ec1d5f1f90c3ca40448f8c61f0e80 Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 1 Jul 2021 16:43:59 +0800 Subject: ... --- FrontEnd/src/views/admin/UserAdmin.tsx | 12 ++++++------ FrontEnd/src/views/center/TimelineBoard.tsx | 6 +++--- FrontEnd/src/views/common/button/Button.css | 16 +++++++++------- FrontEnd/src/views/common/dailog/ConfirmDialog.tsx | 7 +++++-- FrontEnd/src/views/common/dailog/Dialog.css | 9 +++++++++ FrontEnd/src/views/common/dailog/OperationDialog.css | 0 FrontEnd/src/views/common/dailog/OperationDialog.tsx | 16 +++++++++++----- FrontEnd/src/views/common/index.css | 3 ++- FrontEnd/src/views/common/menu/Menu.css | 2 +- FrontEnd/src/views/login/index.tsx | 2 +- FrontEnd/src/views/settings/index.tsx | 11 ++++++----- FrontEnd/src/views/timeline-common/TimelinePostView.tsx | 2 +- 12 files changed, 54 insertions(+), 32 deletions(-) create mode 100644 FrontEnd/src/views/common/dailog/OperationDialog.css (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx index 481db1cc..6d2760f2 100644 --- a/FrontEnd/src/views/admin/UserAdmin.tsx +++ b/FrontEnd/src/views/admin/UserAdmin.tsx @@ -206,23 +206,23 @@ const UserItem: React.FC = ({ user, on }) => { return (
setEditMaskVisible(true)} /> -

{user.username}

-
+

{user.username}

+
{t("admin:user.nickname")} {user.nickname}
-
+
{t("admin:user.uniqueId")} {user.uniqueId}
-
+
{t("admin:user.permissions")} {user.permissions.map((permission) => { return ( - + {permission}{" "} ); diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx index 3961a7bc..8c1f5fac 100644 --- a/FrontEnd/src/views/center/TimelineBoard.tsx +++ b/FrontEnd/src/views/center/TimelineBoard.tsx @@ -48,16 +48,16 @@ const TimelineBoardItem: React.FC = ({ )} {title} - {name} + {name} {actions != null ? (
{ e.currentTarget.setPointerCapture(e.pointerId); actions.onMove.start(e); diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index ec2dd798..54127f05 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -57,7 +57,8 @@ } .cru-button:not(.outline):disabled { - background-color: var(--cru-button-f3-color); + background-color: var(--cru-disable-color); + cursor: auto; } .cru-button.outline { @@ -67,23 +68,24 @@ padding: 0.2em 0.5em; border-radius: 0.2em; transition: all 0.6s; - background-color: var(--cru-background-color); + background-color: white; } .cru-button.outline:hover { color: var(--cru-button-f1-color); border-color: var(--cru-button-f1-color); - background-color: var(--cru-background-1-color); + background-color: var(--cru-background-color); } .cru-button.outline:active { color: var(--cru-button-f2-color); border-color: var(--cru-button-f2-color); - background-color: var(--cru-background-2-color); + background-color: var(--cru-background-1-color); } .cru-button.outline:disabled { - color: var(--cru-button-f3-color); - border-color: var(--cru-button-f3-color); - background-color: var(--cru-background-3-color); + color: var(--cru-disable-color); + border-color: var(--cru-disable-color); + background-color: white; + cursor: auto; } diff --git a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx index 1ad52350..c10b1cdb 100644 --- a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx +++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx @@ -16,12 +16,15 @@ const ConfirmDialog: React.FC<{ return ( -

{convertI18nText(title, t)}

+

{convertI18nText(title, t)}

+

{convertI18nText(body, t)}

-
+
+
-
+
+
@@ -446,11 +451,12 @@ const OperationDialog = <

{title}

+
{body} ); diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 02eed6d9..62167cfc 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -2,7 +2,8 @@ --cru-background-color: #f8f9fa; --cru-background-1-color: #e9ecef; --cru-background-2-color: #dee2e6; - --cru-background-3-color: #ced4da; + + --cru-disable-color: #ced4da; --cru-primary-color: rgb(0, 123, 255); --cru-primary-l1-color: rgb(26, 136, 255); diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css index c933b34f..a30eb5c6 100644 --- a/FrontEnd/src/views/common/menu/Menu.css +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -22,7 +22,7 @@ } .cru-menu-item.color-secondary:hover { - color: var(--cru-text-on-secondary-color); + color: var(--cru-secondary-t-color); background-color: var(--cru-secondary-color); } diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx index 6d70c64a..782acdaa 100644 --- a/FrontEnd/src/views/login/index.tsx +++ b/FrontEnd/src/views/login/index.tsx @@ -122,7 +122,7 @@ const LoginPage: React.FC = (_) => {
{error ?

{t(error)}

: null} -
+
{ diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx index f25911d7..69a74327 100644 --- a/FrontEnd/src/views/settings/index.tsx +++ b/FrontEnd/src/views/settings/index.tsx @@ -28,7 +28,7 @@ const SettingsPage: React.FC = (_) => {
{user ? ( -

+

{t("settings.subheaders.account")}

{ {t("settings.changeNickname")}
setDialog("changepassword")} > {t("settings.changePassword")}
{ setDialog("logout"); }} @@ -60,13 +60,13 @@ const SettingsPage: React.FC = (_) => { ) : null} -

+

{t("settings.subheaders.customization")}

{t("settings.languagePrimary")}
- + {t("settings.languageSecondary")}
@@ -94,6 +94,7 @@ const SettingsPage: React.FC = (_) => { title="settings.dialogConfirmLogout.title" body="settings.dialogConfirmLogout.prompt" onClose={() => setDialog(null)} + open onConfirm={() => { void userService.logout().then(() => { history.push("/"); diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx index 995c43df..652ff9c9 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx @@ -64,7 +64,7 @@ const TimelinePostView: React.FC = (props) => { > {post.editable ? ( { setOperationMaskVisible(true); e.stopPropagation(); -- cgit v1.2.3 From 1f83bb6867b270aced3e1b71ca7a73bc6ac38cf4 Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 1 Jul 2021 17:02:12 +0800 Subject: ... --- FrontEnd/src/views/common/menu/Menu.css | 28 ++++++++++++++++++++++++++++ FrontEnd/src/views/common/menu/PopupMenu.css | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) (limited to 'FrontEnd/src/views/common/menu') diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css index a30eb5c6..923c7d3c 100644 --- a/FrontEnd/src/views/common/menu/Menu.css +++ b/FrontEnd/src/views/common/menu/Menu.css @@ -6,6 +6,7 @@ font-size: 1em; padding: 0.5em 1.5em; cursor: pointer; + transition: all 0.5s; } .cru-menu-item.color-primary { @@ -26,6 +27,33 @@ 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-icon { margin-right: 1em; } diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css index 658532d3..f6654f68 100644 --- a/FrontEnd/src/views/common/menu/PopupMenu.css +++ b/FrontEnd/src/views/common/menu/PopupMenu.css @@ -2,5 +2,5 @@ z-index: 1040; border-radius: 5px; border: var(--cru-primary-color) 1px solid; - background-color: var(--cru-background-color); + background-color: white; } -- cgit v1.2.3 From 47175cf9afcd86b0b92f7121ce0c3d85b948b6dd Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 1 Jul 2021 19:59:22 +0800 Subject: ... --- FrontEnd/src/services/alert.ts | 14 ++-- FrontEnd/src/views/admin/UserAdmin.tsx | 8 +- FrontEnd/src/views/common/alert/AlertHost.tsx | 45 +++++++---- FrontEnd/src/views/common/alert/alert.css | 28 +++++++ FrontEnd/src/views/common/button/Button.css | 60 +++----------- FrontEnd/src/views/common/button/FlatButton.css | 38 +-------- FrontEnd/src/views/common/button/TextButton.css | 36 --------- FrontEnd/src/views/common/button/TextButton.tsx | 18 ----- FrontEnd/src/views/common/button/common.ts | 6 +- FrontEnd/src/views/common/index.css | 100 ++++++++++++++++++++++++ FrontEnd/src/views/common/menu/Menu.css | 47 +---------- FrontEnd/src/views/common/menu/Menu.tsx | 2 +- 12 files changed, 189 insertions(+), 213 deletions(-) delete mode 100644 FrontEnd/src/views/common/button/TextButton.css delete mode 100644 FrontEnd/src/views/common/button/TextButton.tsx (limited to 'FrontEnd/src/views/common/menu') 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 | 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 { open: boolean; @@ -232,12 +232,12 @@ const UserItem: React.FC = ({ user, on }) => { className={classnames("edit-mask", !editMaskVisible && "d-none")} onClick={() => setEditMaskVisible(false)} > - - + - void; @@ -51,14 +49,29 @@ export const AutoCloseAlert: React.FC = (props) => { }; return ( -
- {(() => { - const { message } = alert; - if (typeof message === "function") { - const Message = message; - return ; - } else return convertI18nText(message, t); - })()} +
+
+ {(() => { + const { message, customMessage } = alert; + if (customMessage != null) { + return customMessage; + } else { + return convertI18nText(message, t); + } + })()} +
+
+ +
); }; @@ -66,8 +79,6 @@ export const AutoCloseAlert: React.FC = (props) => { const AlertHost: React.FC = () => { const [alerts, setAlerts] = React.useState([]); - // 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 ( -
+
{alerts.map((alert) => { return ( -): React.ReactElement | null { - return ( -