aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/views/about/index.tsx6
-rw-r--r--FrontEnd/src/views/common/dailog/FullPageDialog.css26
-rw-r--r--FrontEnd/src/views/common/dailog/FullPageDialog.tsx9
-rw-r--r--FrontEnd/src/views/common/index.css47
-rw-r--r--FrontEnd/src/views/timeline-common/CollapseButton.tsx2
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx18
-rw-r--r--FrontEnd/src/views/timeline/TimelineCard.tsx2
-rw-r--r--FrontEnd/src/views/user/UserCard.tsx2
8 files changed, 64 insertions, 48 deletions
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>
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 18:49:03 +0000