From ad61f58644b3f0fac451dbc5b869471edcad0cf4 Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 20 Feb 2021 22:45:07 +0800 Subject: ... --- FrontEnd/src/app/common.ts | 47 +----- FrontEnd/src/app/services/alert.ts | 4 +- FrontEnd/src/app/utilities/mediaQuery.ts | 5 + FrontEnd/src/app/views/common/FullPage.tsx | 31 ++++ FrontEnd/src/app/views/common/Menu.tsx | 83 ++++++++++ FrontEnd/src/app/views/common/common.sass | 42 +++++ .../timeline-common/TimelinePageCardTemplate.tsx | 180 +++++++++------------ .../app/views/timeline-common/timeline-common.sass | 2 +- FrontEnd/src/app/views/timeline/TimelineCard.tsx | 27 +--- FrontEnd/src/app/views/user/UserCard.tsx | 26 +-- 10 files changed, 267 insertions(+), 180 deletions(-) create mode 100644 FrontEnd/src/app/utilities/mediaQuery.ts create mode 100644 FrontEnd/src/app/views/common/FullPage.tsx create mode 100644 FrontEnd/src/app/views/common/Menu.tsx (limited to 'FrontEnd/src') diff --git a/FrontEnd/src/app/common.ts b/FrontEnd/src/app/common.ts index 681568bb..1a4f6dda 100644 --- a/FrontEnd/src/app/common.ts +++ b/FrontEnd/src/app/common.ts @@ -1,49 +1,18 @@ -import React from "react"; -import { Observable, Subject } from "rxjs"; import { TFunction } from "i18next"; +export type BootstrapThemeColor = + | "primary" + | "secondary" + | "success" + | "danger" + | "warning" + | "info"; + // This error is thrown when ui goes wrong with bad logic. // Such as a variable should not be null, but it does. // This error should never occur. If it does, it indicates there is some logic bug in codes. export class UiLogicError extends Error {} -export function useEventEmiiter(): [() => Observable, () => void] { - const ref = React.useRef | null>(null); - - return React.useMemo(() => { - const getter = (): Subject => { - if (ref.current == null) { - ref.current = new Subject(); - } - return ref.current; - }; - const trigger = (): void => { - getter().next(null); - }; - return [getter, trigger]; - }, []); -} - -export function useValueEventEmiiter(): [ - () => Observable, - (value: T) => void -] { - const ref = React.useRef | null>(null); - - return React.useMemo(() => { - const getter = (): Subject => { - if (ref.current == null) { - ref.current = new Subject(); - } - return ref.current; - }; - const trigger = (value: T): void => { - getter().next(value); - }; - return [getter, trigger]; - }, []); -} - export type I18nText = | string | { type: "custom"; value: string } diff --git a/FrontEnd/src/app/services/alert.ts b/FrontEnd/src/app/services/alert.ts index b6d6be6e..48d482ea 100644 --- a/FrontEnd/src/app/services/alert.ts +++ b/FrontEnd/src/app/services/alert.ts @@ -1,10 +1,10 @@ import React from "react"; import pull from "lodash/pull"; -import { I18nText } from "@/common"; +import { BootstrapThemeColor, I18nText } from "@/common"; export interface AlertInfo { - type?: "primary" | "secondary" | "success" | "danger" | "warning" | "info"; + type?: BootstrapThemeColor; message: React.FC | I18nText; dismissTime?: number | "never"; } diff --git a/FrontEnd/src/app/utilities/mediaQuery.ts b/FrontEnd/src/app/utilities/mediaQuery.ts new file mode 100644 index 00000000..ad55c3c0 --- /dev/null +++ b/FrontEnd/src/app/utilities/mediaQuery.ts @@ -0,0 +1,5 @@ +import { useMediaQuery } from "react-responsive"; + +export function useIsSmallScreen(): boolean { + return useMediaQuery({ maxWidth: 576 }); +} 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 diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx index 13b823bf..6069d54e 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePageCardTemplate.tsx @@ -1,7 +1,6 @@ import React from "react"; import clsx from "clsx"; import { useTranslation } from "react-i18next"; -import { Dropdown, Button } from "react-bootstrap"; import { getHttpHighlightClient } from "@/http/highlight"; import { getHttpBookmarkClient } from "@/http/bookmark"; @@ -10,28 +9,19 @@ import { useUser } from "@/services/user"; import { pushAlert } from "@/services/alert"; import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline"; +import { useIsSmallScreen } from "@/utilities/mediaQuery"; + import { TimelinePageCardProps } from "./TimelinePageTemplate"; import CollapseButton from "./CollapseButton"; import { TimelineMemberDialog } from "./TimelineMember"; import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog"; +import { MenuItems, PopupMenu } from "../common/Menu"; +import FullPage from "../common/FullPage"; export interface TimelineCardTemplateProps extends TimelinePageCardProps { infoArea: React.ReactElement; - manageArea: - | { type: "member" } - | { - type: "manage"; - items: ( - | { - type: "button"; - text: string; - color?: string; - onClick: () => void; - } - | { type: "divider" } - )[]; - }; + manageItems?: MenuItems; dialog: string | "property" | "member" | null; setDialog: (dialog: "property" | "member" | null) => void; } @@ -41,7 +31,7 @@ const TimelinePageCardTemplate: React.FC = ({ collapse, toggleCollapse, infoArea, - manageArea, + manageItems, onReload, className, dialog, @@ -49,100 +39,90 @@ const TimelinePageCardTemplate: React.FC = ({ }) => { const { t } = useTranslation(); + const isSmallScreen = useIsSmallScreen(); + const user = useUser(); - return ( + const content = ( <> -
-
- -
-
- {infoArea} -

{timeline.description}

- - {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])} - -
- { - getHttpHighlightClient() - [timeline.isHighlight ? "delete" : "put"](timeline.name) - .then(onReload, () => { - pushAlert({ - message: timeline.isHighlight - ? "timeline.removeHighlightFail" - : "timeline.addHighlightFail", - type: "danger", - }); - }); - } - : undefined - } - /> - {user != null ? ( - { - getHttpBookmarkClient() - [timeline.isBookmark ? "delete" : "put"](timeline.name) + {infoArea} +

{timeline.description}

+ + {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])} + +
+ { + getHttpHighlightClient() + [timeline.isHighlight ? "delete" : "put"](timeline.name) .then(onReload, () => { pushAlert({ - message: timeline.isBookmark - ? "timeline.removeBookmarkFail" - : "timeline.addBookmarkFail", + message: timeline.isHighlight + ? "timeline.removeHighlightFail" + : "timeline.addHighlightFail", type: "danger", }); }); - }} - /> - ) : null} - {manageArea.type === "manage" ? ( - - - {t("timeline.manage")} - - - {manageArea.items.map((item, index) => { - if (item.type === "divider") { - return ; - } else { - return ( - - {t(item.text)} - - ); - } - })} - - - ) : ( - + } + : undefined + } + /> + {user != null ? ( + + onClick={() => { + getHttpBookmarkClient() + [timeline.isBookmark ? "delete" : "put"](timeline.name) + .then(onReload, () => { + pushAlert({ + message: timeline.isBookmark + ? "timeline.removeBookmarkFail" + : "timeline.addBookmarkFail", + type: "danger", + }); + }); + }} + /> + ) : null} + setDialog("member")} + /> + {manageItems != null ? ( + + + + ) : null} +
+ + ); + + return ( + <> +
+
+
+ {isSmallScreen ? ( + + {content} + + ) : ( +
{content}
+ )}
{(() => { if (dialog === "member") { diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass index 31404d8c..c74058c0 100644 --- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass +++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass @@ -166,7 +166,7 @@ $timeline-line-color-current: #36c2e6 .timeline-template-card position: fixed - z-index: 1 + z-index: 1031 top: 56px right: 0 margin: 0.5em diff --git a/FrontEnd/src/app/views/timeline/TimelineCard.tsx b/FrontEnd/src/app/views/timeline/TimelineCard.tsx index a777cbbd..2a9bcfc8 100644 --- a/FrontEnd/src/app/views/timeline/TimelineCard.tsx +++ b/FrontEnd/src/app/views/timeline/TimelineCard.tsx @@ -1,9 +1,8 @@ import React from "react"; -import TimelinePageCardTemplate, { - TimelineCardTemplateProps, -} from "../timeline-common/TimelinePageCardTemplate"; import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate"; +import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate"; + import UserAvatar from "../common/user/UserAvatar"; import TimelineDeleteDialog from "./TimelineDeleteDialog"; @@ -35,23 +34,14 @@ const TimelineCard: React.FC = (props) => {
} - manageArea={((): TimelineCardTemplateProps["manageArea"] => { - if (!timeline.manageable) { - return { type: "member" }; - } else { - return { - type: "manage", - items: [ + manageItems={ + timeline.manageable + ? [ { type: "button", text: "timeline.manageItem.property", onClick: () => setDialog("property"), }, - { - type: "button", - onClick: () => setDialog("member"), - text: "timeline.manageItem.member", - }, { type: "divider" }, { type: "button", @@ -59,10 +49,9 @@ const TimelineCard: React.FC = (props) => { color: "danger", text: "timeline.manageItem.delete", }, - ], - }; - } - })()} + ] + : undefined + } dialog={dialog} setDialog={setDialog} {...props} diff --git a/FrontEnd/src/app/views/user/UserCard.tsx b/FrontEnd/src/app/views/user/UserCard.tsx index b2c94457..552f5ced 100644 --- a/FrontEnd/src/app/views/user/UserCard.tsx +++ b/FrontEnd/src/app/views/user/UserCard.tsx @@ -1,8 +1,6 @@ import React from "react"; -import TimelinePageCardTemplate, { - TimelineCardTemplateProps, -} from "../timeline-common/TimelinePageCardTemplate"; +import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate"; import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate"; import UserAvatar from "../common/user/UserAvatar"; @@ -31,27 +29,17 @@ const UserCard: React.FC = (props) => {
} - manageArea={((): TimelineCardTemplateProps["manageArea"] => { - if (!timeline.manageable) { - return { type: "member" }; - } else { - return { - type: "manage", - items: [ + manageItems={ + timeline.manageable + ? [ { type: "button", text: "timeline.manageItem.property", onClick: () => setDialog("property"), }, - { - type: "button", - text: "timeline.manageItem.member", - onClick: () => setDialog("member"), - }, - ], - }; - } - })()} + ] + : undefined + } dialog={dialog} setDialog={setDialog} {...props} -- cgit v1.2.3