aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/timeline
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/timeline')
-rw-r--r--FrontEnd/src/views/timeline/CollapseButton.tsx12
-rw-r--r--FrontEnd/src/views/timeline/MarkdownPostEdit.tsx14
-rw-r--r--FrontEnd/src/views/timeline/TimelineCard.tsx16
-rw-r--r--FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx2
-rw-r--r--FrontEnd/src/views/timeline/TimelinePostEdit.tsx19
-rw-r--r--FrontEnd/src/views/timeline/TimelinePostView.tsx7
6 files changed, 36 insertions, 34 deletions
diff --git a/FrontEnd/src/views/timeline/CollapseButton.tsx b/FrontEnd/src/views/timeline/CollapseButton.tsx
index 31976228..b8d06916 100644
--- a/FrontEnd/src/views/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/views/timeline/CollapseButton.tsx
@@ -1,5 +1,6 @@
import React from "react";
-import classnames from "classnames";
+
+import IconButton from "../common/button/IconButton";
const CollapseButton: React.FC<{
collapse: boolean;
@@ -8,13 +9,10 @@ const CollapseButton: React.FC<{
style?: React.CSSProperties;
}> = ({ collapse, onClick, className, style }) => {
return (
- <i
+ <IconButton
+ icon={collapse ? "arrows-angle-expand" : "arrows-angle-contract"}
onClick={onClick}
- className={classnames(
- collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
- "cru-color-primary icon-button",
- className
- )}
+ className={className}
style={style}
/>
);
diff --git a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
index 35a2bbf5..9ab40e54 100644
--- a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
@@ -10,6 +10,7 @@ import FlatButton from "../common/button/FlatButton";
import TabPages from "../common/tab/TabPages";
import ConfirmDialog from "../common/dailog/ConfirmDialog";
import Spinner from "../common/Spinner";
+import IconButton from "../common/button/IconButton";
import "./MarkdownPostEdit.css";
@@ -113,8 +114,11 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
<Spinner />
) : (
<div>
- <i
- className="icon-button large bi-x cru-color-danger cru-align-middle me-2"
+ <IconButton
+ icon="x"
+ color="danger"
+ large
+ className="cru-align-middle me-2"
onClick={() => {
if (canLeave) {
onClose();
@@ -158,9 +162,11 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
src={image.url}
className="timeline-markdown-post-edit-image"
/>
- <i
+ <IconButton
+ icon="trash"
+ color="danger"
className={classnames(
- "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button",
+ "timeline-markdown-post-edit-image-delete-button",
process && "d-none"
)}
onClick={() => {
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index d258dc75..b1146ad5 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -19,6 +19,7 @@ import ConnectionStatusBadge from "./ConnectionStatusBadge";
import CollapseButton from "./CollapseButton";
import { TimelineMemberDialog } from "./TimelineMember";
import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
+import IconButton from "../common/button/IconButton";
export interface TimelinePageCardProps {
timeline: HttpTimelineInfo;
@@ -67,11 +68,9 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
</small>
<div className="mt-2 cru-text-end">
{user != null ? (
- <i
- className={classnames(
- timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
- "icon-button cru-color-primary me-3"
- )}
+ <IconButton
+ icon={timeline.isBookmark ? "bookmark-fill" : "bookmark"}
+ className="me-3"
onClick={() => {
getHttpBookmarkClient()
[timeline.isBookmark ? "delete" : "post"](
@@ -90,8 +89,9 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
}}
/>
) : null}
- <i
- className={"icon-button bi-people cru-color-primary me-3"}
+ <IconButton
+ icon="people"
+ className="me-3"
onClick={() => setDialog("member")}
/>
{timeline.manageable ? (
@@ -112,7 +112,7 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
]}
containerClassName="d-inline"
>
- <i className="icon-button bi-three-dots-vertical cru-color-primary" />
+ <IconButton icon="three-dots-vertical" />
</PopupMenu>
) : null}
</div>
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index 5b57b0c4..3a339622 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -27,7 +27,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
return (
<Trans
i18nKey="timeline.deleteDialog.inputPrompt"
- values={[{ name: timeline.nameV2 }]}
+ values={{ name: timeline.nameV2 }}
>
0<code className="mx-2">1</code>2
</Trans>
diff --git a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
index 3b42f38d..f1c5b22c 100644
--- a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import classnames from "classnames";
import { useTranslation } from "react-i18next";
import { UiLogicError } from "@/common";
@@ -20,6 +19,7 @@ import LoadingButton from "../common/button/LoadingButton";
import PopupMenu from "../common/menu/PopupMenu";
import MarkdownPostEdit from "./MarkdownPostEdit";
import TimelinePostEditCard from "./TimelinePostEditCard";
+import IconButton from "../common/button/IconButton";
import "./TimelinePostEdit.css";
@@ -104,10 +104,10 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
type PostKind = "text" | "markdown" | "image";
-const postKindIconClassNameMap: Record<PostKind, string> = {
- text: "bi-fonts",
- markdown: "bi-markdown",
- image: "bi-image",
+const postKindIconMap: Record<PostKind, string> = {
+ text: "fonts",
+ markdown: "markdown",
+ image: "image",
};
export interface TimelinePostEditProps {
@@ -237,7 +237,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
items={(["text", "image", "markdown"] as const).map((kind) => ({
type: "button",
text: `timeline.post.type.${kind}`,
- iconClassName: postKindIconClassNameMap[kind],
+ iconClassName: postKindIconMap[kind],
onClick: () => {
if (kind === "markdown") {
setShowMarkdown(true);
@@ -247,12 +247,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
},
}))}
>
- <i
- className={classnames(
- postKindIconClassNameMap[kind],
- "icon-button large"
- )}
- />
+ <IconButton large icon={postKindIconMap[kind]} />
</PopupMenu>
</div>
<LoadingButton
diff --git a/FrontEnd/src/views/timeline/TimelinePostView.tsx b/FrontEnd/src/views/timeline/TimelinePostView.tsx
index 8a4da9ab..ca6ee2c5 100644
--- a/FrontEnd/src/views/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostView.tsx
@@ -14,6 +14,7 @@ import ConfirmDialog from "../common/dailog/ConfirmDialog";
import TimelineLine from "./TimelineLine";
import TimelinePostContentView from "./TimelinePostContentView";
import PostPropertyChangeDialog from "./PostPropertyChangeDialog";
+import IconButton from "../common/button/IconButton";
export interface TimelinePostViewProps {
post: HttpTimelinePostInfo;
@@ -70,8 +71,10 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
style={cardStyle}
>
{post.editable ? (
- <i
- className="bi-chevron-down icon-button primary-enhance cru-float-right"
+ <IconButton
+ icon="chevron-down"
+ color="primary-enhance"
+ className="cru-float-right"
onClick={(e) => {
setOperationMaskVisible(true);
e.stopPropagation();
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 16:09:19 +0000