From 0be1f595578153765d081cdb4478140da9cb8fc9 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 17:14:04 +0800
Subject: ...

---
 FrontEnd/src/views/common/Card.css                 |  2 +-
 FrontEnd/src/views/common/button/FlatButton.tsx    |  2 +-
 FrontEnd/src/views/common/button/TextButton.tsx    |  2 +-
 .../src/views/timeline-common/TimelinePostView.tsx | 25 +++++++++++-----------
 FrontEnd/src/views/timeline-common/index.css       |  8 ++++++-
 5 files changed, 22 insertions(+), 17 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index daf4e12b..17c3c779 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -2,7 +2,7 @@
   border: 1px solid;
   border-color: #e9ecef;
   border-radius: 8px;
-  background: #f8f9fa;
+  background: #fefeff;
   transition: all 0.3s;
 }
 
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index f5349765..6351971a 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -17,7 +17,7 @@ function _FlatButton(
   }: {
     text: I18nText;
     color?: PaletteColorType;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     style?: React.CSSProperties;
   },
diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
index 1e2b4873..1a2bac94 100644
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ b/FrontEnd/src/views/common/button/TextButton.tsx
@@ -17,7 +17,7 @@ function _TextButton(
   }: {
     text: I18nText;
     color?: PaletteColorType;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     style?: React.CSSProperties;
   },
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index f7b81478..e9dd3443 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -8,6 +8,8 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 import { pushAlert } from "@/services/alert";
 
 import UserAvatar from "../common/user/UserAvatar";
+import Card from "../common/Card";
+import FlatButton from "../common/button/FlatButton";
 import TimelineLine from "./TimelineLine";
 import TimelinePostContentView from "./TimelinePostContentView";
 import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog";
@@ -60,7 +62,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
       style={style}
     >
       <TimelineLine center="node" current={current} />
-      <div ref={cardRef} className="timeline-item-card" style={cardStyle}>
+      <Card ref={cardRef} className="timeline-item-card" style={cardStyle}>
         {post.editable ? (
           <i
             className="bi-chevron-down text-info icon-button float-end"
@@ -91,32 +93,29 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-around align-items-center"
+            className="timeline-post-item-options-mask d-flex justify-content-around align-items-center"
             onClick={() => {
               setOperationMaskVisible(false);
             }}
           >
-            <span
-              className="tl-color-primary"
+            <FlatButton
+              text="changeProperty"
               onClick={(e) => {
                 setDialog("changeproperty");
                 e.stopPropagation();
               }}
-            >
-              {t("changeProperty")}
-            </span>
-            <span
-              className="tl-color-danger"
+            />
+            <FlatButton
+              text="delete"
+              color="danger"
               onClick={(e) => {
                 setDialog("delete");
                 e.stopPropagation();
               }}
-            >
-              {t("delete")}
-            </span>
+            />
           </div>
         ) : null}
-      </div>
+      </Card>
       {dialog === "delete" ? (
         <TimelinePostDeleteConfirmDialog
           onClose={() => {
diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css
index 89399961..f35a86c9 100644
--- a/FrontEnd/src/views/timeline-common/index.css
+++ b/FrontEnd/src/views/timeline-common/index.css
@@ -154,6 +154,7 @@
   animation: 0.6s forwards;
   opacity: 0;
 }
+
 @media (max-width: 575.98px) {
   .timeline-item-card {
     padding-left: 3em;
@@ -205,9 +206,14 @@
   max-height: 100px;
 }
 
-.mask {
+.timeline-post-item-options-mask {
   background: rgba(255, 255, 255, 0.8);
   z-index: 100;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 .timeline-sync-state-badge {
-- 
cgit v1.2.3