From 839daa0eac6fdbe84f45e8572e5ab07126b7d67c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 18:36:47 +0800
Subject: ...

---
 FrontEnd/src/views/about/index.tsx                 |  6 +--
 .../src/views/common/dailog/FullPageDialog.css     | 26 ++++++++++++
 .../src/views/common/dailog/FullPageDialog.tsx     |  9 ++++-
 FrontEnd/src/views/common/index.css                | 47 ++++++++--------------
 .../src/views/timeline-common/CollapseButton.tsx   |  2 +-
 .../timeline-common/TimelinePageCardTemplate.tsx   | 18 ++++-----
 FrontEnd/src/views/timeline/TimelineCard.tsx       |  2 +-
 FrontEnd/src/views/user/UserCard.tsx               |  2 +-
 8 files changed, 64 insertions(+), 48 deletions(-)
 create mode 100644 FrontEnd/src/views/common/dailog/FullPageDialog.css

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index 8a358014..11618086 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -77,11 +77,11 @@ const AboutPage: React.FC = () => {
             <div>
               <p>
                 <small>{t("about.author.fullname")}</small>
-                <span className="tl-color-primary">杨宇千</span>
+                <span className="cru-color-primary">杨宇千</span>
               </p>
               <p>
                 <small>{t("about.author.nickname")}</small>
-                <span className="tl-color-primary">crupest</span>
+                <span className="cru-color-primary">crupest</span>
               </p>
               <p>
                 <small>{t("about.author.introduction")}</small>
@@ -105,7 +105,7 @@ const AboutPage: React.FC = () => {
         <h4>{t("about.site.title")}</h4>
         <p>
           <Trans i18nKey="about.site.content">
-            0<span className="tl-color-primary">1</span>2<b>3</b>4
+            0<span className="cru-color-primary">1</span>2<b>3</b>4
             <a href="#author-info">5</a>6
           </Trans>
         </p>
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
new file mode 100644
index 00000000..65f16041
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -0,0 +1,26 @@
+.cru-full-page {
+  position: fixed;
+  z-index: 1030;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  padding-top: 56px;
+}
+
+.cru-full-page-top-bar {
+  height: 56px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: var(--cru-primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.cru-full-page-content-container {
+  overflow: scroll;
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 88c90bbc..72c9b269 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import classnames from "classnames";
 
+import "./FullPageDialog.css";
+
 export interface FullPageDialogProps {
   show: boolean;
   onBack: () => void;
@@ -13,7 +16,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
   children,
   contentContainerClassName,
 }) => {
-  return (
+  return createPortal(
     <div
       className="cru-full-page"
       style={{ display: show ? undefined : "none" }}
@@ -32,7 +35,9 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
       >
         {children}
       </div>
-    </div>
+    </div>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
   );
 };
 
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index cb1cccd4..d7501f98 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -120,22 +120,34 @@
   --cru-success-r3-color: rgb(0, 243, 0);
 }
 
-.tl-color-primary {
+.cru-color-primary {
   color: var(--cru-primary-color);
 }
 
-.tl-color-secondary {
+.cru-color-secondary {
   color: var(--cru-secondary-color);
 }
 
-.tl-color-success {
+.cru-color-success {
   color: var(--cru-success-color);
 }
 
-.tl-color-danger {
+.cru-color-danger {
   color: var(--cru-danger-color);
 }
 
+.cru-text-end {
+  text-align: end;
+}
+
+.cru-float-right {
+  float: right;
+}
+
+.cru-clearfix::after {
+  clear: both;
+}
+
 .icon-button {
   font-size: 1.4rem;
   cursor: pointer;
@@ -182,33 +194,6 @@
   width: 50%;
 }
 
-.cru-full-page {
-  position: fixed;
-  z-index: 1031;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: white;
-  padding-top: 56px;
-}
-
-.cru-full-page-top-bar {
-  height: 56px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  background-color: var(--cru-primary-color);
-  display: flex;
-  align-items: center;
-}
-
-.cru-full-page-content-container {
-  overflow: scroll;
-}
-
 .cru-tab-pages-action-area {
   display: flex;
   align-items: center;
diff --git a/FrontEnd/src/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/views/timeline-common/CollapseButton.tsx
index 12a3b710..31976228 100644
--- a/FrontEnd/src/views/timeline-common/CollapseButton.tsx
+++ b/FrontEnd/src/views/timeline-common/CollapseButton.tsx
@@ -12,7 +12,7 @@ const CollapseButton: React.FC<{
       onClick={onClick}
       className={classnames(
         collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
-        "text-primary icon-button",
+        "cru-color-primary icon-button",
         className
       )}
       style={style}
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 75f2d400..f57fda2e 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -54,11 +54,11 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
       <small className="mt-1 d-block">
         {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
       </small>
-      <div className="text-end mt-2">
+      <div className="mt-2 cru-text-end">
         <i
           className={classnames(
             timeline.isHighlight ? "bi-star-fill" : "bi-star",
-            "icon-button text-yellow me-3"
+            "icon-button cru-color-primary me-3"
           )}
           onClick={
             user?.hasHighlightTimelineAdministrationPermission
@@ -81,7 +81,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <i
             className={classnames(
               timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
-              "icon-button text-yellow me-3"
+              "icon-button cru-color-primary me-3"
             )}
             onClick={() => {
               getHttpBookmarkClient()
@@ -98,12 +98,12 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           />
         ) : null}
         <i
-          className={"icon-button bi-people text-primary me-3"}
+          className={"icon-button bi-people cru-color-primary me-3"}
           onClick={() => setDialog("member")}
         />
         {manageItems != null ? (
-          <PopupMenu items={manageItems}>
-            <i className="icon-button bi-three-dots-vertical text-primary" />
+          <PopupMenu items={manageItems} containerClassName="d-inline">
+            <i className="icon-button bi-three-dots-vertical cru-color-primary" />
           </PopupMenu>
         ) : null}
       </div>
@@ -113,10 +113,10 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
   return (
     <>
       <Card
-        className={classnames("p-2 clearfix", className)}
+        className={classnames("p-2 cru-clearfix", className)}
         style={{ zIndex: collapse ? 1029 : 1031 }}
       >
-        <div className="float-end d-flex align-items-center">
+        <div className="cru-float-right ms-3 d-flex align-items-center">
           <ConnectionStatusBadge status={connectionStatus} className="me-2" />
           <CollapseButton collapse={collapse} onClick={toggleCollapse} />
         </div>
@@ -129,7 +129,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
             {content}
           </FullPageDialog>
         ) : (
-          <div style={{ display: collapse ? "none" : "block" }}>{content}</div>
+          <div style={{ display: collapse ? "none" : "inline" }}>{content}</div>
         )}
       </Card>
       {(() => {
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index 86063843..311aa112 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -18,7 +18,7 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="tl-color-primary d-inline-block align-middle">
+            <h3 className="cru-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
index 06bb2143..8a532512 100644
--- a/FrontEnd/src/views/user/UserCard.tsx
+++ b/FrontEnd/src/views/user/UserCard.tsx
@@ -16,7 +16,7 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="tl-color-primary d-inline-block align-middle">
+            <h3 className="cru-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
-- 
cgit v1.2.3