From 8c56e3fd388005bcb7aced75b73d7018511ceac8 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 16:41:03 +0800
Subject: ...

---
 FrontEnd/src/views/common/button/TextButton.tsx | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 FrontEnd/src/views/common/button/TextButton.tsx

(limited to 'FrontEnd/src/views/common/button/TextButton.tsx')

diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
new file mode 100644
index 00000000..2014158a
--- /dev/null
+++ b/FrontEnd/src/views/common/button/TextButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
+
+import "./TextButton.css";
+
+function _TextButton(
+  {
+    text,
+    color,
+    onClick,
+  }: {
+    text: I18nText;
+    color?: PaletteColorType;
+    onClick?: () => void;
+  },
+  ref: React.ForwardedRef<HTMLButtonElement>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  return (
+    <button
+      ref={ref}
+      className={classNames("cru-text-button", color ?? "primary")}
+      onClick={onClick}
+    >
+      {convertI18nText(text, t)}
+    </button>
+  );
+}
+
+const TextButton = React.forwardRef(_TextButton);
+export default TextButton;
-- 
cgit v1.2.3


From 57a4aa9bc47d3d38f66819f01f41ab10e9673667 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 16:46:12 +0800
Subject: ...

---
 FrontEnd/src/views/common/button/FlatButton.tsx         |  7 ++++++-
 FrontEnd/src/views/common/button/TextButton.tsx         |  7 ++++++-
 FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx | 13 +++++--------
 3 files changed, 17 insertions(+), 10 deletions(-)

(limited to 'FrontEnd/src/views/common/button/TextButton.tsx')

diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 24f47785..f5349765 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -12,10 +12,14 @@ function _FlatButton(
     text,
     color,
     onClick,
+    className,
+    style,
   }: {
     text: I18nText;
     color?: PaletteColorType;
     onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
   },
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
@@ -24,8 +28,9 @@ function _FlatButton(
   return (
     <button
       ref={ref}
-      className={classNames("cru-flat-button", color ?? "primary")}
+      className={classNames("cru-flat-button", color ?? "primary", className)}
       onClick={onClick}
+      style={style}
     >
       {convertI18nText(text, t)}
     </button>
diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
index 2014158a..1e2b4873 100644
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ b/FrontEnd/src/views/common/button/TextButton.tsx
@@ -12,10 +12,14 @@ function _TextButton(
     text,
     color,
     onClick,
+    className,
+    style,
   }: {
     text: I18nText;
     color?: PaletteColorType;
     onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
   },
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
@@ -24,8 +28,9 @@ function _TextButton(
   return (
     <button
       ref={ref}
-      className={classNames("cru-text-button", color ?? "primary")}
+      className={classNames("cru-text-button", color ?? "primary", className)}
       onClick={onClick}
+      style={style}
     >
       {convertI18nText(text, t)}
     </button>
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
index 685e17be..005da933 100644
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
@@ -6,7 +6,7 @@ import { Prompt } from "react-router";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
-import FlatButton from "../common/FlatButton";
+import FlatButton from "../common/button/FlatButton";
 import TabPages from "../common/TabPages";
 import TimelinePostBuilder from "@/services/TimelinePostBuilder";
 import ConfirmDialog from "../common/ConfirmDialog";
@@ -106,8 +106,9 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
           ) : (
             <>
               <FlatButton
+                text="operationDialog.cancel"
                 className="me-2"
-                variant="danger"
+                color="danger"
                 onClick={() => {
                   if (canLeave) {
                     onClose();
@@ -115,12 +116,8 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                     setShowLeaveConfirmDialog(true);
                   }
                 }}
-              >
-                {t("operationDialog.cancel")}
-              </FlatButton>
-              <FlatButton onClick={send} disabled={!canSend}>
-                {t("timeline.send")}
-              </FlatButton>
+              />
+              {canSend && <FlatButton text="timeline.send" onClick={send} />}
             </>
           )
         }
-- 
cgit v1.2.3


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/src/views/common/button/TextButton.tsx')

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