aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/app/views/home-v2
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2021-04-16 17:43:16 +0800
committercrupest <crupest@outlook.com>2021-04-16 17:43:16 +0800
commit2981b7fb9002ee424a4e4358f04914de63f60141 (patch)
tree3a94b828f93dd457060999ae989c988ef32f1812 /FrontEnd/src/app/views/home-v2
parent3db441fccf1a933ac8ec9e4f89c19f81efd66052 (diff)
downloadtimeline-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.tsx101
-rw-r--r--FrontEnd/src/app/views/home-v2/home-v2.sass29
-rw-r--r--FrontEnd/src/app/views/home-v2/index.tsx101
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;