diff options
author | crupest <crupest@outlook.com> | 2021-04-16 17:43:16 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2021-04-16 17:43:16 +0800 |
commit | 2981b7fb9002ee424a4e4358f04914de63f60141 (patch) | |
tree | 3a94b828f93dd457060999ae989c988ef32f1812 /FrontEnd/src/app/views/home-v2 | |
parent | 3db441fccf1a933ac8ec9e4f89c19f81efd66052 (diff) | |
download | timeline-2981b7fb9002ee424a4e4358f04914de63f60141.tar.gz timeline-2981b7fb9002ee424a4e4358f04914de63f60141.tar.bz2 timeline-2981b7fb9002ee424a4e4358f04914de63f60141.zip |
...
Diffstat (limited to 'FrontEnd/src/app/views/home-v2')
-rw-r--r-- | FrontEnd/src/app/views/home-v2/TimelineListView.tsx | 101 | ||||
-rw-r--r-- | FrontEnd/src/app/views/home-v2/home-v2.sass | 29 | ||||
-rw-r--r-- | FrontEnd/src/app/views/home-v2/index.tsx | 101 |
3 files changed, 0 insertions, 231 deletions
diff --git a/FrontEnd/src/app/views/home-v2/TimelineListView.tsx b/FrontEnd/src/app/views/home-v2/TimelineListView.tsx deleted file mode 100644 index 9c44a0c2..00000000 --- a/FrontEnd/src/app/views/home-v2/TimelineListView.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from "react"; - -import { convertI18nText, I18nText } from "@/common"; - -import { HttpTimelineInfo } from "@/http/timeline"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; - -interface TimelineListItemProps { - timeline: HttpTimelineInfo; -} - -const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => { - const url = React.useMemo( - () => - timeline.name.startsWith("@") - ? `/users/${timeline.owner.username}` - : `/timelines/${timeline.name}`, - [timeline] - ); - - return ( - <div className="home-v2-timeline-list-item home-v2-timeline-list-item-timeline"> - <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 100"> - <path - d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z" - fillRule="evenodd" - fill="#007bff" - /> - </svg> - <div> - <div>{timeline.title}</div> - <div> - <small className="text-secondary">{timeline.description}</small> - </div> - </div> - <Link to={url}> - <i className="icon-button bi-arrow-right ml-3" /> - </Link> - </div> - ); -}; - -const TimelineListArrow: React.FC = () => { - return ( - <div> - <div className="home-v2-timeline-list-item"> - <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 60"> - <path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" /> - </svg> - </div> - <div className="home-v2-timeline-list-item"> - <svg - className="home-v2-timeline-list-item-line home-v2-timeline-list-loading-head" - viewBox="0 0 120 40" - > - <path - d="M 60,10 l 20,20 l 20,-20" - fill="none" - stroke="#007bff" - strokeWidth="5" - /> - </svg> - </div> - </div> - ); -}; - -interface TimelineListViewProps { - headerText?: I18nText; - timelines?: HttpTimelineInfo[]; -} - -const TimelineListView: React.FC<TimelineListViewProps> = ({ - headerText, - timelines, -}) => { - const { t } = useTranslation(); - - return ( - <div className="home-v2-timeline-list"> - <div className="home-v2-timeline-list-item"> - <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 120"> - <path - d="M 0,20 Q 80,20 80,80 l 0,40" - stroke="#007bff" - strokeWidth="40" - fill="none" - /> - </svg> - <h3>{convertI18nText(headerText, t)}</h3> - </div> - {timelines != null - ? timelines.map((t) => <TimelineListItem key={t.name} timeline={t} />) - : null} - <TimelineListArrow /> - </div> - ); -}; - -export default TimelineListView; diff --git a/FrontEnd/src/app/views/home-v2/home-v2.sass b/FrontEnd/src/app/views/home-v2/home-v2.sass deleted file mode 100644 index 56049994..00000000 --- a/FrontEnd/src/app/views/home-v2/home-v2.sass +++ /dev/null @@ -1,29 +0,0 @@ -.home-v2-timeline-list-item
- display: flex
- align-items: center
-
-.home-v2-timeline-list-item-timeline
- transition: background 0.8s
- animation: 0.8s home-v2-timeline-list-item-timeline-enter
- &:hover
- background: $gray-200
-
-@keyframes home-v2-timeline-list-item-timeline-enter
- from
- transform: translate(-100%,0)
- opacity: 0
-
-.home-v2-timeline-list-item-line
- width: 80px
- flex-shrink: 0
-
-@keyframes home-v2-timeline-list-loading-head-animation
- from
- transform: translate(0,-30px)
- opacity: 1
-
- to
- opacity: 0
-
-.home-v2-timeline-list-loading-head
- animation: 1s infinite home-v2-timeline-list-loading-head-animation
diff --git a/FrontEnd/src/app/views/home-v2/index.tsx b/FrontEnd/src/app/views/home-v2/index.tsx deleted file mode 100644 index cb3c1428..00000000 --- a/FrontEnd/src/app/views/home-v2/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from "react"; -import { useHistory } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Container, Button, Row, Col } from "react-bootstrap"; - -import { useUser } from "@/services/user"; -import SearchInput from "../common/SearchInput"; - -import TimelineListView from "./TimelineListView"; -import TimelineCreateDialog from "../home/TimelineCreateDialog"; -import { HttpTimelineInfo } from "@/http/timeline"; -import { getHttpHighlightClient } from "@/http/highlight"; - -const highlightTimelineMessageMap = { - loading: "home.loadingHighlightTimelines", - done: "home.loadedHighlightTimelines", - error: "home.errorHighlightTimelines", -} as const; - -const HomeV2: React.FC = () => { - const history = useHistory(); - - const { t } = useTranslation(); - - const user = useUser(); - - const [navText, setNavText] = React.useState<string>(""); - - const [dialog, setDialog] = React.useState<"create" | null>(null); - - const [highlightTimelineState, setHighlightTimelineState] = React.useState< - "loading" | "done" | "error" - >("loading"); - const [highlightTimelines, setHighlightTimelines] = React.useState< - HttpTimelineInfo[] | undefined - >(); - - React.useEffect(() => { - if (highlightTimelineState === "loading") { - let subscribe = true; - void getHttpHighlightClient() - .list() - .then( - (data) => { - if (subscribe) { - setHighlightTimelineState("done"); - setHighlightTimelines(data); - } - }, - () => { - if (subscribe) { - setHighlightTimelineState("error"); - setHighlightTimelines(undefined); - } - } - ); - return () => { - subscribe = false; - }; - } - }, [highlightTimelineState]); - - return ( - <> - <Container fluid className="px-0"> - <Row className="mx-0 my-3 px-2 justify-content-end"> - <Col xs="12" sm="auto"> - <SearchInput - value={navText} - onChange={setNavText} - onButtonClick={() => { - history.push(`search?q=${navText}`); - }} - additionalButton={ - user != null && ( - <Button - variant="outline-success" - onClick={() => { - setDialog("create"); - }} - > - {t("home.createButton")} - </Button> - ) - } - /> - </Col> - </Row> - <TimelineListView - headerText={highlightTimelineMessageMap[highlightTimelineState]} - timelines={highlightTimelines} - /> - </Container> - {dialog === "create" && ( - <TimelineCreateDialog open close={() => setDialog(null)} /> - )} - </> - ); -}; - -export default HomeV2; |