From ad61f58644b3f0fac451dbc5b869471edcad0cf4 Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 20 Feb 2021 22:45:07 +0800 Subject: ... --- FrontEnd/src/app/views/common/FullPage.tsx | 31 +++++++++++ FrontEnd/src/app/views/common/Menu.tsx | 83 ++++++++++++++++++++++++++++++ FrontEnd/src/app/views/common/common.sass | 42 +++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 FrontEnd/src/app/views/common/FullPage.tsx create mode 100644 FrontEnd/src/app/views/common/Menu.tsx (limited to 'FrontEnd/src/app/views/common') diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx new file mode 100644 index 00000000..09b01647 --- /dev/null +++ b/FrontEnd/src/app/views/common/FullPage.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export interface FullPageProps { + show: boolean; + onBack: () => void; + contentContainerClassName?: string; +} + +const FullPage: React.FC = ({ + show, + onBack, + children, + contentContainerClassName, +}) => { + return ( +
+
+ +
+
{children}
+
+ ); +}; + +export default FullPage; diff --git a/FrontEnd/src/app/views/common/Menu.tsx b/FrontEnd/src/app/views/common/Menu.tsx new file mode 100644 index 00000000..c2110c9c --- /dev/null +++ b/FrontEnd/src/app/views/common/Menu.tsx @@ -0,0 +1,83 @@ +import React from "react"; +import clsx from "clsx"; +import { OverlayTrigger, OverlayTriggerProps, Popover } from "react-bootstrap"; +import { useTranslation } from "react-i18next"; + +import { BootstrapThemeColor, convertI18nText, I18nText } from "@/common"; + +export type MenuItem = + | { + type: "divider"; + } + | { + type: "button"; + text: I18nText; + color?: BootstrapThemeColor; + 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) => { + if (item.type === "divider") { + return
; + } else { + return ( +
{ + item.onClick(); + onItemClicked?.(); + }} + > + {convertI18nText(item.text, t)} +
+ ); + } + })} +
+ ); +}; + +export default Menu; + +export interface PopupMenuProps { + items: MenuItems; + children: OverlayTriggerProps["children"]; +} + +export const PopupMenu: React.FC = ({ items, children }) => { + const [show, setShow] = React.useState(false); + const toggle = (): void => setShow(!show); + + return ( + + setShow(false)} /> + + } + show={show} + onToggle={toggle} + > + {children} + + ); +}; diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass index e2ee8978..329ea683 100644 --- a/FrontEnd/src/app/views/common/common.sass +++ b/FrontEnd/src/app/views/common/common.sass @@ -43,3 +43,45 @@ &.last width: 50% + +.cru-full-page + position: fixed + z-index: 1031 + left: 0 + top: 0 + right: 0 + bottom: 0 + background-color: white + padding-top: 56px + +.cru-full-page-top-bar + height: 56px + + position: absolute + top: 0 + left: 0 + right: 0 + z-index: 1 + + @extend .bg-primary + + display: flex + align-items: center + +.cru-menu + min-width: 200px + +.cru-menu-item + font-size: 1.2em + padding: 0.5em 1.5em + cursor: pointer + + @each $color, $value in $theme-colors + &.color-#{$color} + color: $value + + &:hover + color: white + background-color: $value + +.cru-menu-divider -- cgit v1.2.3