From 620e547b373368501970e4521dca5d8fed43fb92 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 21 Dec 2020 17:33:16 +0800
Subject: ...

---
 .../src/app/views/timeline-common/TimelinePageTemplate.tsx | 14 ++++++++++++++
 .../app/views/timeline-common/TimelinePageTemplateUI.tsx   |  4 ++++
 2 files changed, 18 insertions(+)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 6c57e91d..3833cdd9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -11,6 +11,7 @@ import {
   usePostList,
   useTimelineInfo,
 } from "@/services/timeline";
+import { getHttpBookmarkClient } from "@/http/bookmark";
 
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
@@ -116,6 +117,19 @@ export default function TimelinePageTemplate<TManageItem>(
             ? onManage
             : undefined,
           onMember: () => setDialog("member"),
+          onBookmark:
+            user != null
+              ? () => {
+                  void getHttpBookmarkClient()
+                    .put(name, user.token)
+                    .then(() => {
+                      pushAlert({
+                        message: "Succeeded to add bookmark!", //TODO: i18n
+                        type: "success",
+                      });
+                    });
+                }
+              : undefined,
         };
 
         if (type === "cache") {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index f60383dd..b7cd4a45 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -15,6 +15,8 @@ export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
+  onBookmark?: () => void;
+  onHighlight?: () => void;
   className?: string;
   collapse: boolean;
   syncStatus: TimelineSyncStatus;
@@ -28,6 +30,7 @@ export interface TimelinePageTemplateUIProps<TManageItems> {
         posts?: TimelinePostInfoEx[];
         onManage?: (item: TManageItems | "property") => void;
         onMember: () => void;
+        onBookmark?: () => void;
         onPost?: TimelinePostSendCallback;
       }
     | I18nText;
@@ -153,6 +156,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
             timeline={data.timeline}
             onManage={data.onManage}
             onMember={data.onMember}
+            onBookmark={data.onBookmark}
             syncStatus={syncStatus}
             collapse={cardCollapse}
             toggleCollapse={toggleCardCollapse}
-- 
cgit v1.2.3


From be318ee2dbdc865c51dd7fc675cfb35c73e5b70b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 22 Dec 2020 00:27:33 +0800
Subject: ...

---
 .../app/views/timeline-common/InfoCardTemplate.tsx |  26 -----
 .../views/timeline-common/TimelineCardTemplate.tsx | 100 ++++++++++++++++
 .../src/app/views/timeline/TimelineInfoCard.tsx    | 128 +++++++++------------
 FrontEnd/src/app/views/user/UserInfoCard.tsx       | 123 +++++++++-----------
 4 files changed, 208 insertions(+), 169 deletions(-)
 delete mode 100644 FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx
 create mode 100644 FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx
deleted file mode 100644
index a8de20aa..00000000
--- a/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
-import CollapseButton from "../timeline-common/CollapseButton";
-
-const InfoCardTemplate: React.FC<
-  Pick<
-    TimelineCardComponentProps<"">,
-    "collapse" | "toggleCollapse" | "syncStatus" | "className"
-  > & { children: React.ReactElement[] }
-> = ({ collapse, toggleCollapse, syncStatus, className, children }) => {
-  return (
-    <div className={clsx("cru-card p-2 clearfix", className)}>
-      <div className="float-right d-flex align-items-center">
-        <SyncStatusBadge status={syncStatus} className="mr-2" />
-        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
-      </div>
-
-      <div style={{ display: collapse ? "none" : "block" }}>{children}</div>
-    </div>
-  );
-};
-
-export default InfoCardTemplate;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
new file mode 100644
index 00000000..a47b3d76
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Dropdown, Button } from "react-bootstrap";
+import Svg from "react-inlinesvg";
+import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
+
+import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
+
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
+import CollapseButton from "../timeline-common/CollapseButton";
+
+export interface TimelineCardTemplateProps
+  extends Omit<TimelineCardComponentProps<"">, "onManage" | "onMember"> {
+  infoArea: React.ReactElement;
+  manageArea:
+    | { type: "member"; onMember: () => void }
+    | {
+        type: "manage";
+        items: (
+          | {
+              type: "button";
+              text: string;
+              color?: string;
+              onClick: () => void;
+            }
+          | { type: "divider" }
+        )[];
+      };
+}
+
+function TimelineCardTemplate({
+  timeline,
+  collapse,
+  infoArea,
+  manageArea,
+  onBookmark,
+  toggleCollapse,
+  syncStatus,
+  className,
+}: TimelineCardTemplateProps): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  return (
+    <div className={clsx("cru-card p-2 clearfix", className)}>
+      <div className="float-right d-flex align-items-center">
+        <SyncStatusBadge status={syncStatus} className="mr-2" />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
+      </div>
+      <div style={{ display: collapse ? "none" : "block" }}>
+        {infoArea}
+        <p className="mb-0">{timeline.description}</p>
+        <small className="mt-1 d-block">
+          {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
+        </small>
+        <div className="text-right mt-2">
+          {onBookmark != null ? (
+            <Svg
+              src={bookmarkIcon}
+              className="icon-button text-yellow mr-3"
+              onClick={onBookmark}
+            />
+          ) : null}
+          {manageArea.type === "manage" ? (
+            <Dropdown className="d-inline-block">
+              <Dropdown.Toggle variant="outline-primary">
+                {t("timeline.manage")}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {manageArea.items.map((item, index) => {
+                  if (item.type === "divider") {
+                    return <Dropdown.Divider key={index} />;
+                  } else {
+                    return (
+                      <Dropdown.Item
+                        onClick={item.onClick}
+                        className={
+                          item.color != null ? "text-" + item.color : undefined
+                        }
+                      >
+                        {t(item.text)}
+                      </Dropdown.Item>
+                    );
+                  }
+                })}
+              </Dropdown.Menu>
+            </Dropdown>
+          ) : (
+            <Button variant="outline-primary" onClick={manageArea.onMember}>
+              {t("timeline.memberButton")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineCardTemplate;
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index 8f967a34..f4dbb67d 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -1,93 +1,73 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { Dropdown, Button } from "react-bootstrap";
-import Svg from "react-inlinesvg";
-import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
 import { useAvatar } from "@/services/user";
-import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 
 import BlobImage from "../common/BlobImage";
+import TimelineCardTemplate, {
+  TimelineCardTemplateProps,
+} from "../timeline-common/TimelineCardTemplate";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import InfoCardTemplate from "../timeline-common/InfoCardTemplate";
 
 export type OrdinaryTimelineManageItem = "delete";
 
 export type TimelineInfoCardProps = TimelineCardComponentProps<OrdinaryTimelineManageItem>;
 
 const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const {
-    timeline,
-    collapse,
-    onMember,
-    onBookmark,
-    onManage,
-    syncStatus,
-    toggleCollapse,
-  } = props;
-
-  const { t } = useTranslation();
+  const { onMember, onManage, ...otherProps } = props;
+  const { timeline } = props;
 
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <InfoCardTemplate
-      className={props.className}
-      syncStatus={syncStatus}
-      collapse={collapse}
-      toggleCollapse={toggleCollapse}
-    >
-      <h3 className="text-primary d-inline-block align-middle">
-        {timeline.title}
-        <small className="ml-3 text-secondary">{timeline.name}</small>
-      </h3>
-      <div className="align-middle">
-        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
-        {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{timeline.owner.username}
-        </small>
-      </div>
-      <p className="mb-0">{timeline.description}</p>
-      <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
-      </small>
-      <div className="text-right mt-2">
-        {onBookmark != null ? (
-          <Svg
-            src={bookmarkIcon}
-            className="icon-button text-yellow mr-3"
-            onClick={onBookmark}
-          />
-        ) : null}
-        {onManage != null ? (
-          <Dropdown className="d-inline-block">
-            <Dropdown.Toggle variant="outline-primary">
-              {t("timeline.manage")}
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={() => onManage("property")}>
-                {t("timeline.manageItem.property")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Item
-                className="text-danger"
-                onClick={() => onManage("delete")}
-              >
-                {t("timeline.manageItem.delete")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
-      </div>
-    </InfoCardTemplate>
+    <TimelineCardTemplate
+      infoArea={
+        <>
+          <h3 className="text-primary d-inline-block align-middle">
+            {timeline.title}
+            <small className="ml-3 text-secondary">{timeline.name}</small>
+          </h3>
+          <div className="align-middle">
+            <BlobImage
+              blob={avatar}
+              className="avatar small rounded-circle mr-3"
+            />
+            {timeline.owner.nickname}
+            <small className="ml-3 text-secondary">
+              @{timeline.owner.username}
+            </small>
+          </div>
+        </>
+      }
+      manageArea={((): TimelineCardTemplateProps["manageArea"] => {
+        if (onManage == null) {
+          return { type: "member", onMember };
+        } else {
+          return {
+            type: "manage",
+            items: [
+              {
+                type: "button",
+                text: "timeline.manageItem.property",
+                onClick: () => onManage("property"),
+              },
+              {
+                type: "button",
+                onClick: onMember,
+                text: "timeline.manageItem.member",
+              },
+              { type: "divider" },
+              {
+                type: "button",
+                onClick: () => onManage("delete"),
+                color: "danger",
+                text: "timeline.manageItem.delete",
+              },
+            ],
+          };
+        }
+      })()}
+      {...otherProps}
+    />
   );
 };
 
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index 0e1e093a..f31a939f 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -1,88 +1,73 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { Dropdown, Button } from "react-bootstrap";
-import Svg from "react-inlinesvg";
-import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
-import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 import { useAvatar } from "@/services/user";
 
 import BlobImage from "../common/BlobImage";
+import TimelineCardTemplate, {
+  TimelineCardTemplateProps,
+} from "../timeline-common/TimelineCardTemplate";
 import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import InfoCardTemplate from "../timeline-common/InfoCardTemplate";
 
 export type PersonalTimelineManageItem = "avatar" | "nickname";
 
 export type UserInfoCardProps = TimelineCardComponentProps<PersonalTimelineManageItem>;
 
 const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
-  const {
-    timeline,
-    collapse,
-    onMember,
-    onManage,
-    onBookmark,
-    syncStatus,
-    toggleCollapse,
-  } = props;
-  const { t } = useTranslation();
+  const { onMember, onManage, ...otherProps } = props;
+  const { timeline } = props;
 
   const avatar = useAvatar(timeline?.owner?.username);
 
   return (
-    <InfoCardTemplate
-      className={props.className}
-      syncStatus={syncStatus}
-      collapse={collapse}
-      toggleCollapse={toggleCollapse}
-    >
-      <h3 className="text-primary d-inline-block align-middle">
-        {timeline.title}
-        <small className="ml-3 text-secondary">{timeline.name}</small>
-      </h3>
-      <div className="align-middle">
-        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
-        {timeline.owner.nickname}
-      </div>
-      <p className="mb-0">{timeline.description}</p>
-      <small className="mt-1 d-block">
-        {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
-      </small>
-      <div className="text-right mt-2">
-        {onBookmark != null ? (
-          <Svg
-            src={bookmarkIcon}
-            className="icon-button text-yellow mr-3"
-            onClick={onBookmark}
-          />
-        ) : null}
-        {onManage != null ? (
-          <Dropdown className="d-inline-block">
-            <Dropdown.Toggle variant="outline-primary">
-              {t("timeline.manage")}
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <Dropdown.Item onClick={() => onManage("nickname")}>
-                {t("timeline.manageItem.nickname")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("avatar")}>
-                {t("timeline.manageItem.avatar")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => onManage("property")}>
-                {t("timeline.manageItem.property")}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={onMember}>
-                {t("timeline.manageItem.member")}
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        ) : (
-          <Button variant="outline-primary" onClick={onMember}>
-            {t("timeline.memberButton")}
-          </Button>
-        )}
-      </div>
-    </InfoCardTemplate>
+    <TimelineCardTemplate
+      infoArea={
+        <>
+          <h3 className="text-primary d-inline-block align-middle">
+            {timeline.title}
+            <small className="ml-3 text-secondary">{timeline.name}</small>
+          </h3>
+          <div className="align-middle">
+            <BlobImage
+              blob={avatar}
+              className="avatar small rounded-circle mr-3"
+            />
+            {timeline.owner.nickname}
+          </div>
+        </>
+      }
+      manageArea={((): TimelineCardTemplateProps["manageArea"] => {
+        if (onManage == null) {
+          return { type: "member", onMember };
+        } else {
+          return {
+            type: "manage",
+            items: [
+              {
+                type: "button",
+                text: "timeline.manageItem.nickname",
+                onClick: () => onManage("nickname"),
+              },
+              {
+                type: "button",
+                text: "timeline.manageItem.avatar",
+                onClick: () => onManage("avatar"),
+              },
+              {
+                type: "button",
+                text: "timeline.manageItem.property",
+                onClick: () => onManage("property"),
+              },
+              {
+                type: "button",
+                onClick: onMember,
+                text: "timeline.manageItem.member",
+              },
+            ],
+          };
+        }
+      })()}
+      {...otherProps}
+    />
   );
 };
 
-- 
cgit v1.2.3


From 5e8c5c4e145e1eef799b1b745438de4c34fd3471 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 23 Dec 2020 22:35:11 +0800
Subject: ...

---
 FrontEnd/src/app/services/user.ts                        |  4 ++++
 .../app/views/timeline-common/TimelineCardTemplate.tsx   |  9 +++++++++
 .../app/views/timeline-common/TimelinePageTemplate.tsx   | 16 +++++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/services/user.ts b/FrontEnd/src/app/services/user.ts
index 0166bce0..7a60b474 100644
--- a/FrontEnd/src/app/services/user.ts
+++ b/FrontEnd/src/app/services/user.ts
@@ -43,6 +43,10 @@ export class AuthUser implements User {
   get hasAllTimelineAdministrationPermission(): boolean {
     return this.permissions.includes("AllTimelineManagement");
   }
+
+  get hasHighlightTimelineAdministrationPermission(): boolean {
+    return this.permissions.includes("HighlightTimelineManagement");
+  }
 }
 
 export interface LoginCredentials {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index a47b3d76..ffec1a90 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
 import Svg from "react-inlinesvg";
+import starIcon from "bootstrap-icons/icons/star.svg";
 import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
@@ -36,6 +37,7 @@ function TimelineCardTemplate({
   infoArea,
   manageArea,
   onBookmark,
+  onHighlight,
   toggleCollapse,
   syncStatus,
   className,
@@ -55,6 +57,13 @@ function TimelineCardTemplate({
           {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
         </small>
         <div className="text-right mt-2">
+          {onHighlight != null ? (
+            <Svg
+              src={starIcon}
+              className="icon-button text-yellow mr-3"
+              onClick={onHighlight}
+            />
+          ) : null}
           {onBookmark != null ? (
             <Svg
               src={bookmarkIcon}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 3833cdd9..21720601 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -12,6 +12,7 @@ import {
   useTimelineInfo,
 } from "@/services/timeline";
 import { getHttpBookmarkClient } from "@/http/bookmark";
+import { getHttpHighlightClient } from "@/http/highlight";
 
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
@@ -124,7 +125,20 @@ export default function TimelinePageTemplate<TManageItem>(
                     .put(name, user.token)
                     .then(() => {
                       pushAlert({
-                        message: "Succeeded to add bookmark!", //TODO: i18n
+                        message: "Succeeded to add bookmark!", // TODO: i18n
+                        type: "success",
+                      });
+                    });
+                }
+              : undefined,
+          onHighlight:
+            user != null && user.hasHighlightTimelineAdministrationPermission
+              ? () => {
+                  void getHttpHighlightClient()
+                    .put(name, user.token)
+                    .then(() => {
+                      pushAlert({
+                        message: "Succeeded to add highlight!", // TODO: i18n
                         type: "success",
                       });
                     });
-- 
cgit v1.2.3


From 02aff31ef153ed400d9348b2f9518861993778d2 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Dec 2020 21:07:52 +0800
Subject: ...

---
 FrontEnd/src/app/index.sass                                 |  7 +++----
 FrontEnd/src/app/views/admin/UserAdmin.tsx                  |  7 ++-----
 FrontEnd/src/app/views/timeline-common/CollapseButton.tsx   | 12 ++++++------
 .../src/app/views/timeline-common/TimelineCardTemplate.tsx  | 13 ++++---------
 FrontEnd/src/app/views/timeline-common/TimelineItem.tsx     | 13 ++++---------
 FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx | 11 +++++------
 6 files changed, 24 insertions(+), 39 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index ae315715..1a833174 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -1,4 +1,5 @@
 @import '~bootstrap/scss/bootstrap'
+@import '~bootstrap-icons/font/bootstrap-icons.css'
 
 @import './views/common/common'
 @import './views/common/alert/alert'
@@ -34,12 +35,10 @@ small
     width: 40px
 
 .icon-button
-  width: 1.4em
-  height: 1.4em
+  font-size: 1.4em
   cursor: pointer
   &.large
-    width: 1.6em
-    height: 1.6em
+    font-size: 1.6em
 
 .cursor-pointer
   cursor: pointer
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index e1d2c3da..d66abbec 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import { ListGroup, Row, Col, Spinner, Button } from "react-bootstrap";
-import InlineSVG from "react-inlinesvg";
-import PencilSquareIcon from "bootstrap-icons/icons/pencil-square.svg";
 
 import OperationDialog, {
   OperationBoolInputInfo,
@@ -220,9 +218,8 @@ const UserItem: React.FC<UserItemProps> = ({ user, on }) => {
 
   return (
     <ListGroup.Item className="admin-user-item">
-      <InlineSVG
-        src={PencilSquareIcon}
-        className="float-right icon-button text-warning"
+      <i
+        className="bi-pencil-square float-right icon-button text-warning"
         onClick={() => setEditMaskVisible(true)}
       />
       <h4 className="text-primary">{user.username}</h4>
diff --git a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
index 3c52150f..da54f3fd 100644
--- a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
+++ b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
@@ -1,8 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import Svg from "react-inlinesvg";
-import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
-import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
 const CollapseButton: React.FC<{
   collapse: boolean;
@@ -11,10 +8,13 @@ const CollapseButton: React.FC<{
   style?: React.CSSProperties;
 }> = ({ collapse, onClick, className, style }) => {
   return (
-    <Svg
-      src={collapse ? arrowsAngleExpandIcon : arrowsAngleContractIcon}
+    <i
       onClick={onClick}
-      className={clsx("text-primary icon-button", className)}
+      className={clsx(
+        collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
+        "text-primary icon-button",
+        className
+      )}
       style={style}
     />
   );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index ffec1a90..b42b3aa3 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -2,9 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
-import Svg from "react-inlinesvg";
-import starIcon from "bootstrap-icons/icons/star.svg";
-import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 
@@ -58,16 +55,14 @@ function TimelineCardTemplate({
         </small>
         <div className="text-right mt-2">
           {onHighlight != null ? (
-            <Svg
-              src={starIcon}
-              className="icon-button text-yellow mr-3"
+            <i
+              className="bi-star icon-button text-yellow mr-3"
               onClick={onHighlight}
             />
           ) : null}
           {onBookmark != null ? (
-            <Svg
-              src={bookmarkIcon}
-              className="icon-button text-yellow mr-3"
+            <i
+              className="bi-bookmark icon-button text-yellow mr-3"
               onClick={onBookmark}
             />
           ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
index 408c49a1..233c81bd 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
@@ -2,9 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import Svg from "react-inlinesvg";
-import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg";
-import trashIcon from "bootstrap-icons/icons/trash.svg";
 import { Modal, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
@@ -98,9 +95,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             <small className="text-dark">{props.post.author.nickname}</small>
           </span>
           {more != null ? (
-            <Svg
-              src={chevronDownIcon}
-              className="text-info icon-button"
+            <i
+              className="bi-chevron-down text-info icon-button"
               onClick={(e) => {
                 more.toggle();
                 e.stopPropagation();
@@ -139,9 +135,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
             onClick={more.toggle}
           >
-            <Svg
-              src={trashIcon}
-              className="text-danger icon-button large"
+            <i
+              className="bi-trash text-danger icon-button large"
               onClick={(e) => {
                 setDeleteDialog(true);
                 e.stopPropagation();
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index dfa2f879..207bf6af 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import Svg from "react-inlinesvg";
 import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
-import textIcon from "bootstrap-icons/icons/card-text.svg";
-import imageIcon from "bootstrap-icons/icons/image.svg";
 
 import { UiLogicError } from "@/common";
 
@@ -212,10 +209,12 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
               return (
                 <>
                   <div className="d-block text-center mt-1 mb-2">
-                    <Svg
+                    <i
                       onLoad={notifyHeightChange}
-                      src={kind === "text" ? imageIcon : textIcon}
-                      className="icon-button"
+                      className={clsx(
+                        kind === "text" ? "bi-image" : "bi-card-text",
+                        "icon-button"
+                      )}
                       onClick={toggleKind}
                     />
                   </div>
-- 
cgit v1.2.3


From 6016377a737ccbc64f02403ba6d9a22821b28508 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Dec 2020 21:10:17 +0800
Subject: ...

---
 FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index b42b3aa3..ece1942f 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -78,6 +78,7 @@ function TimelineCardTemplate({
                   } else {
                     return (
                       <Dropdown.Item
+                        key={index}
                         onClick={item.onClick}
                         className={
                           item.color != null ? "text-" + item.color : undefined
-- 
cgit v1.2.3


From 681ed22edbe6ead81f7177c956322c8645f77398 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Dec 2020 21:38:22 +0800
Subject: ...

---
 FrontEnd/src/app/views/home/BoardWithUser.tsx      | 10 +++++++
 FrontEnd/src/app/views/home/TimelineBoard.tsx      | 33 +++++++++++++++-------
 FrontEnd/src/app/views/home/home.sass              |  8 +++++-
 .../timeline-common/TimelinePageTemplateUI.tsx     |  2 ++
 4 files changed, 42 insertions(+), 11 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 469eb388..ab87a58f 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -17,6 +17,16 @@ const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
         <TimelineBoard
           title={t("home.highlightTimeline")}
           load={() => getHttpHighlightClient().list()}
+          editHandler={
+            user.hasHighlightTimelineAdministrationPermission
+              ? {
+                  onDelete: () => {
+                    // TODO: Implement this.
+                    return Promise.resolve();
+                  },
+                }
+              : undefined
+          }
         />
       </Col>
       <Col xs="12" md="6" className="my-3 my-md-0">
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 87ed98e1..0195f1b5 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -30,13 +30,21 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
 
   const content = (
     <>
-      {isPersonal ? (
-        <UserTimelineLogo className="icon" />
-      ) : (
-        <TimelineLogo className="icon" />
-      )}
-      {title}
-      <small className="ml-2 text-secondary">{name}</small>
+      <div>
+        {isPersonal ? (
+          <UserTimelineLogo className="icon" />
+        ) : (
+          <TimelineLogo className="icon" />
+        )}
+        {title}
+        <small className="ml-2 text-secondary">{name}</small>
+      </div>
+      {actions != null ? (
+        <div>
+          <i className="bi-trash icon-button text-danger" />
+          <i className="bi-grip-vertical icon-button text-danger" />
+        </div>
+      ) : null}
     </>
   );
 
@@ -49,7 +57,7 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
   );
 };
 
-interface TimelineBoardUIProps {
+export interface TimelineBoardUIProps {
   title?: string;
   timelines: TimelineInfo[] | "offline" | "loading";
   onReload: () => void;
@@ -68,8 +76,8 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
 
   return (
     <div className={clsx("timeline-board", className)}>
-      <div>
-        {title != null && <h3 className="text-center">{title}</h3>}
+      <div className="timeline-board-header">
+        {title != null && <h3>{title}</h3>}
         {
           editable &&
             (editing ? (
@@ -132,12 +140,16 @@ export interface TimelineBoardProps {
   title?: string;
   className?: string;
   load: () => Promise<TimelineInfo[]>;
+  editHandler?: {
+    onDelete: (timeline: string) => Promise<void>;
+  };
 }
 
 const TimelineBoard: React.FC<TimelineBoardProps> = ({
   className,
   title,
   load,
+  editHandler,
 }) => {
   const [timelines, setTimelines] = React.useState<
     TimelineInfo[] | "offline" | "loading"
@@ -170,6 +182,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = ({
       onReload={() => {
         setTimelines("loading");
       }}
+      editHandler={editHandler}
     />
   );
 };
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 0c01019b..e15441bc 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -3,13 +3,19 @@
   @extend .d-flex
   @extend .flex-column
   @extend .py-3
+  @extend .px-3
   min-height: 200px
 
+.timeline-board-header
+  display: flex
+  justify-content: space-between
+
 .timeline-board-item
   font-size: 1.1em
-  @extend .px-3
   @extend .py-2
   transition: background 0.3s
+  display: flex
+  justify-content: space-between
   .icon
     height: 1.3em
     color: black
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index b7cd4a45..20ec6e43 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -31,6 +31,7 @@ export interface TimelinePageTemplateUIProps<TManageItems> {
         onManage?: (item: TManageItems | "property") => void;
         onMember: () => void;
         onBookmark?: () => void;
+        onHighlight?: () => void;
         onPost?: TimelinePostSendCallback;
       }
     | I18nText;
@@ -157,6 +158,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
             onManage={data.onManage}
             onMember={data.onMember}
             onBookmark={data.onBookmark}
+            onHighlight={data.onHighlight}
             syncStatus={syncStatus}
             collapse={cardCollapse}
             toggleCollapse={toggleCardCollapse}
-- 
cgit v1.2.3


From 1b7a9096b1fd7c26a9336950a4a4b4253bcb5926 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 3 Jan 2021 19:35:36 +0800
Subject: ...

---
 FrontEnd/src/app/locales/en/translation.json                   |  4 +++-
 FrontEnd/src/app/locales/zh/translation.json                   |  4 +++-
 .../src/app/views/timeline-common/TimelinePageTemplate.tsx     | 10 ++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 414cc747..596b5217 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -106,7 +106,9 @@
         "title": "Confirm Delete",
         "prompt": "Are you sure to delete the post? This operation is not recoverable."
       }
-    }
+    },
+    "addHighlightSuccess": "Succeeded to add highlight.",
+    "addBookmarkSuccess": "Succeeded to add bookmark."
   },
   "user": {
     "username": "username",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index bbee28af..e15e177e 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -106,7 +106,9 @@
         "title": "确认删除",
         "prompt": "确定删除这个消息？这个操作不可撤销。"
       }
-    }
+    },
+    "addHighlightSuccess": "成功添加高光。",
+    "addBookmarkSuccess": "成功添加书签。"
   },
   "user": {
     "username": "用户名",
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 21720601..7f5c8206 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -125,7 +125,10 @@ export default function TimelinePageTemplate<TManageItem>(
                     .put(name, user.token)
                     .then(() => {
                       pushAlert({
-                        message: "Succeeded to add bookmark!", // TODO: i18n
+                        message: {
+                          type: "i18n",
+                          key: "timeline.addBookmarkSuccess",
+                        },
                         type: "success",
                       });
                     });
@@ -138,7 +141,10 @@ export default function TimelinePageTemplate<TManageItem>(
                     .put(name, user.token)
                     .then(() => {
                       pushAlert({
-                        message: "Succeeded to add highlight!", // TODO: i18n
+                        message: {
+                          type: "i18n",
+                          key: "timeline.addHighlightSuccess",
+                        },
                         type: "success",
                       });
                     });
-- 
cgit v1.2.3