aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/app/App.tsx7
-rw-r--r--FrontEnd/src/app/index.sass1
-rw-r--r--FrontEnd/src/app/locales/en/translation.json1
-rw-r--r--FrontEnd/src/app/locales/zh/translation.json1
-rw-r--r--FrontEnd/src/app/views/home-v2/TimelineListView.tsx85
-rw-r--r--FrontEnd/src/app/views/home-v2/home-v2.sass18
-rw-r--r--FrontEnd/src/app/views/home-v2/index.tsx55
7 files changed, 168 insertions, 0 deletions
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index fb57bd1e..5c4b7eb2 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AppBar from "./views/common/AppBar";
import LoadingPage from "./views/common/LoadingPage";
import Home from "./views/home";
+import HomeV2 from "./views/home-v2";
import Login from "./views/login";
import Settings from "./views/settings";
import About from "./views/about";
@@ -41,6 +42,12 @@ const App: React.FC = () => {
<Route exact path="/">
<Home />
</Route>
+ <Route exact path="/home">
+ <Home />
+ </Route>
+ <Route exact path="/home-new">
+ <HomeV2 />
+ </Route>
<Route exact path="/login">
<Login />
</Route>
diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 2079cad8..6527a65f 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -4,6 +4,7 @@
@import './views/common/common'
@import './views/common/alert/alert'
@import './views/home/home'
+@import './views/home-v2/home-v2'
@import './views/about/about'
@import './views/login/login'
@import './views/settings/settings'
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 65ddbe0c..6707105a 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -27,6 +27,7 @@
"chooseImage": "Choose a image",
"loadImageError": "Failed to load image.",
"home": {
+ "loadingHighlightTimelines": "Loading highlight timelines...",
"highlightTimeline": "Highlight Timelines",
"relatedTimeline": "Timelines Related To You",
"publicTimeline": "Public Timelines",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index f6971241..dbff0a28 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -27,6 +27,7 @@
"chooseImage": "选择一个图片",
"loadImageError": "加载图片失败",
"home": {
+ "loadingHighlightTimelines": "正在加载高光时间线...",
"highlightTimeline": "高光时间线",
"relatedTimeline": "关于你的时间线",
"publicTimeline": "公开时间线",
diff --git a/FrontEnd/src/app/views/home-v2/TimelineListView.tsx b/FrontEnd/src/app/views/home-v2/TimelineListView.tsx
new file mode 100644
index 00000000..1ba9f765
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/TimelineListView.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import { convertI18nText, I18nText } from "@/common";
+
+import { HttpTimelineInfo } from "@/http/timeline";
+import { useTranslation } from "react-i18next";
+
+interface TimelineListItemProps {
+ timeline: HttpTimelineInfo;
+}
+
+const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
+ return (
+ <div className="home-v2-timeline-list-item">
+ <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>{timeline.title}</div>
+ </div>
+ );
+};
+
+const TimelineListLoading: 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} />)
+ ) : (
+ <TimelineListLoading />
+ )}
+ </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
new file mode 100644
index 00000000..a3218f08
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/home-v2.sass
@@ -0,0 +1,18 @@
+.home-v2-timeline-list-item
+ display: flex
+ align-items: center
+
+.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
new file mode 100644
index 00000000..d0013f1b
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/index.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { useHistory } from "react-router";
+import { useTranslation } from "react-i18next";
+import { Container, Button } from "react-bootstrap";
+
+import { useUser } from "@/services/user";
+import SearchInput from "../common/SearchInput";
+
+import TimelineListView from "./TimelineListView";
+import TimelineCreateDialog from "../home/TimelineCreateDialog";
+
+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);
+
+ return (
+ <>
+ <Container className="px-0">
+ <SearchInput
+ className="my-3 mx-3"
+ value={navText}
+ onChange={setNavText}
+ onButtonClick={() => {
+ history.push(`search?q=${navText}`);
+ }}
+ additionalButton={
+ user != null && (
+ <Button
+ variant="outline-success"
+ onClick={() => {
+ setDialog("create");
+ }}
+ >
+ {t("home.createButton")}
+ </Button>
+ )
+ }
+ />
+ <TimelineListView headerText="home.loadingHighlightTimelines" />
+ </Container>
+ {dialog === "create" && (
+ <TimelineCreateDialog open close={() => setDialog(null)} />
+ )}
+ </>
+ );
+};
+
+export default HomeV2;
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 17:57:59 +0000