diff options
Diffstat (limited to 'FrontEnd/src/views/timeline-common')
10 files changed, 61 insertions, 101 deletions
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx index 005da933..b16bf43d 100644 --- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx @@ -1,15 +1,17 @@ +/* eslint-disable react/jsx-no-undef */ import React from "react"; import classnames from "classnames"; -import { Form, Spinner } from "react-bootstrap"; import { useTranslation } from "react-i18next"; import { Prompt } from "react-router"; import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; -import FlatButton from "../common/button/FlatButton"; -import TabPages from "../common/TabPages"; import TimelinePostBuilder from "@/services/TimelinePostBuilder"; -import ConfirmDialog from "../common/ConfirmDialog"; + +import FlatButton from "../common/button/FlatButton"; +import TabPages from "../common/tab/TabPages"; +import ConfirmDialog from "../common/dailog/ConfirmDialog"; +import Spinner from "../common/Spinner"; export interface MarkdownPostEditProps { timeline: string; @@ -102,7 +104,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ pageContainerClassName="py-2" actions={ process ? ( - <Spinner variant="primary" animation="border" size="sm" /> + <Spinner /> ) : ( <> <FlatButton @@ -126,8 +128,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ id: "text", tabText: "edit", page: ( - <Form.Control - as="textarea" + <textarea value={text} disabled={process} onChange={(event) => { @@ -161,7 +162,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ /> </div> ))} - <Form.Control + <input type="file" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" onChange={(event: React.ChangeEvent<HTMLInputElement>) => { diff --git a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx index 001e52d7..988124b6 100644 --- a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx +++ b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx @@ -2,7 +2,7 @@ import React from "react"; import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; function PostPropertyChangeDialog(props: { onClose: () => void; @@ -14,7 +14,7 @@ function PostPropertyChangeDialog(props: { return ( <OperationDialog title="timeline.changePostPropertyDialog.title" - close={onClose} + onClose={onClose} open inputScheme={[ { diff --git a/FrontEnd/src/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/views/timeline-common/TimelineMember.tsx index 299d6a53..c8f26da7 100644 --- a/FrontEnd/src/views/timeline-common/TimelineMember.tsx +++ b/FrontEnd/src/views/timeline-common/TimelineMember.tsx @@ -1,49 +1,47 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Container, ListGroup, Modal, Row, Col, Button } from "react-bootstrap"; import { convertI18nText, I18nText } from "@/common"; import { HttpUser } from "@/http/user"; import { getHttpSearchClient } from "@/http/search"; +import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; import SearchInput from "../common/SearchInput"; import UserAvatar from "../common/user/UserAvatar"; -import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; +import Button from "../common/button/Button"; +import Dialog from "../common/dailog/Dialog"; const TimelineMemberItem: React.FC<{ user: HttpUser; add?: boolean; onAction?: (username: string) => void; }> = ({ user, add, onAction }) => { - const { t } = useTranslation(); - return ( - <ListGroup.Item className="container"> - <Row> - <Col xs="auto"> + <div className="container"> + <div className="row"> + <div className="col col-auto"> <UserAvatar username={user.username} className="avatar small" /> - </Col> - <Col> - <Row>{user.nickname}</Row> - <Row> + </div> + <div className="col"> + <div className="row">{user.nickname}</div> + <div className="row"> <small>{"@" + user.username}</small> - </Row> - </Col> + </div> + </div> {onAction ? ( - <Col xs="auto"> + <div className="col col-auto"> <Button - variant={add ? "success" : "danger"} + text={`timeline.member.${add ? "add" : "remove"}`} + color={add ? "success" : "danger"} onClick={() => { onAction(user.username); }} - > - {t(`timeline.member.${add ? "add" : "remove"}`)} - </Button> - </Col> + /> + </div> ) : null} - </Row> - </ListGroup.Item> + </div> + </div> ); }; @@ -110,7 +108,7 @@ const TimelineMemberUserSearch: React.FC<{ return <div>{t("timeline.member.noUserAvailableToAdd")}</div>; } else { return ( - <ListGroup className="mt-2"> + <div className="mt-2"> {users.map((user) => ( <TimelineMemberItem key={user.username} @@ -127,7 +125,7 @@ const TimelineMemberUserSearch: React.FC<{ }} /> ))} - </ListGroup> + </div> ); } } else if (userSearchState.type === "error") { @@ -152,8 +150,8 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => { const members = [timeline.owner, ...timeline.members]; return ( - <Container className="px-4 py-3"> - <ListGroup> + <div className="container px-4 py-3"> + <div> {members.map((member, index) => ( <TimelineMemberItem key={member.username} @@ -169,11 +167,11 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => { } /> ))} - </ListGroup> + </div> {timeline.manageable ? ( <TimelineMemberUserSearch timeline={timeline} onChange={onChange} /> ) : null} - </Container> + </div> ); }; @@ -188,8 +186,8 @@ export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = ( props ) => { return ( - <Modal show centered onHide={props.onClose}> + <Dialog open onClose={props.onClose}> <TimelineMember {...props} /> - </Modal> + </Dialog> ); }; diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx index 851dfa55..78057be2 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx @@ -18,7 +18,7 @@ import { TimelineMemberDialog } from "./TimelineMember"; import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog"; import ConnectionStatusBadge from "./ConnectionStatusBadge"; import { MenuItems, PopupMenu } from "../common/Menu"; -import FullPage from "../common/FullPage"; +import FullPageDialog from "../common/dailog/FullPageDialog"; import Card from "../common/Card"; export interface TimelineCardTemplateProps extends TimelinePageCardProps { @@ -120,13 +120,13 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({ <CollapseButton collapse={collapse} onClick={toggleCollapse} /> </div> {isSmallScreen ? ( - <FullPage + <FullPageDialog onBack={toggleCollapse} show={!collapse} contentContainerClassName="p-2" > {content} - </FullPage> + </FullPageDialog> ) : ( <div style={{ display: collapse ? "none" : "block" }}>{content}</div> )} diff --git a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx index 6f032eae..ea6e8d40 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePageTemplate.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { Container } from "react-bootstrap"; import { HubConnectionState } from "@microsoft/signalr"; import { HttpTimelineInfo } from "@/http/timeline"; @@ -75,7 +74,7 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => { connectionStatus={connectionStatus} /> ) : null} - <Container> + <div className="container"> <Timeline timelineName={timelineName} reloadKey={reloadKey} @@ -83,7 +82,7 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => { onTimelineLoaded={(t) => setTimeline(t)} onConnectionStateChanged={setConnectionStatus} /> - </Container> + </div> </> ); }; diff --git a/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx deleted file mode 100644 index b2c7a470..00000000 --- a/FrontEnd/src/views/timeline-common/TimelinePostDeleteConfirmDialog.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Modal, Button } from "react-bootstrap"; -import { useTranslation } from "react-i18next"; - -const TimelinePostDeleteConfirmDialog: React.FC<{ - onClose: () => void; - onConfirm: () => void; -}> = ({ onClose, onConfirm }) => { - const { t } = useTranslation(); - - return ( - <Modal onHide={onClose} show centered> - <Modal.Header> - <Modal.Title className="text-danger"> - {t("timeline.post.deleteDialog.title")} - </Modal.Title> - </Modal.Header> - <Modal.Body>{t("timeline.post.deleteDialog.prompt")}</Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={onClose}> - {t("operationDialog.cancel")} - </Button> - <Button - variant="danger" - onClick={() => { - onConfirm(); - onClose(); - }} - > - {t("operationDialog.confirm")} - </Button> - </Modal.Footer> - </Modal> - ); -}; - -export default TimelinePostDeleteConfirmDialog; diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx index 14cd50d4..13aacb54 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx @@ -1,7 +1,6 @@ import React from "react"; import classnames from "classnames"; import { useTranslation } from "react-i18next"; -import { Row, Col, Form } from "react-bootstrap"; import { UiLogicError } from "@/common"; @@ -16,7 +15,7 @@ import { pushAlert } from "@/services/alert"; import { base64 } from "@/http/common"; import BlobImage from "../common/BlobImage"; -import LoadingButton from "../common/LoadingButton"; +import LoadingButton from "../common/button/LoadingButton"; import { PopupMenu } from "../common/Menu"; import Card from "../common/Card"; import MarkdownPostEdit from "./MarkdownPostEdit"; @@ -36,8 +35,7 @@ const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => { const { text, disabled, onChange, className, style } = props; return ( - <Form.Control - as="textarea" + <textarea value={text} disabled={disabled} onChange={(event) => { @@ -81,7 +79,7 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => { return ( <> - <Form.Control + <input type="file" onChange={onInputChange} accept="image/*" @@ -212,8 +210,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { onPostError={onPostError} /> ) : ( - <Row> - <Col className="px-1 py-1"> + <div className="row"> + <div className="col px-1 py-1"> {(() => { if (kind === "text") { return ( @@ -239,8 +237,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { ); } })()} - </Col> - <Col xs="auto" className="align-self-end m-1"> + </div> + <div className="col col-auto align-self-end m-1"> <div className="d-block text-center mt-1 mb-2"> <PopupMenu items={(["text", "image", "markdown"] as const).map( @@ -267,15 +265,14 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { </PopupMenu> </div> <LoadingButton - variant="primary" onClick={onSend} disabled={!canSend} loading={process} > {t("timeline.send")} </LoadingButton> - </Col> - </Row> + </div> + </div> )} </Card> </div> diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx index 7b16e898..995c43df 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx @@ -9,9 +9,9 @@ import { pushAlert } from "@/services/alert"; import UserAvatar from "../common/user/UserAvatar"; import Card from "../common/Card"; import FlatButton from "../common/button/FlatButton"; +import ConfirmDialog from "../common/dailog/ConfirmDialog"; import TimelineLine from "./TimelineLine"; import TimelinePostContentView from "./TimelinePostContentView"; -import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog"; import PostPropertyChangeDialog from "./PostPropertyChangeDialog"; export interface TimelinePostViewProps { @@ -116,7 +116,9 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => { ) : null} </Card> {dialog === "delete" ? ( - <TimelinePostDeleteConfirmDialog + <ConfirmDialog + title="timeline.post.deleteDialog.title" + body="timeline.post.deleteDialog.prompt" onClose={() => { setDialog(null); setOperationMaskVisible(false); diff --git a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx index 70f72025..64daa19b 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx @@ -8,7 +8,7 @@ import { TimelineVisibility, } from "@/http/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; export interface TimelinePropertyChangeDialogProps { open: boolean; @@ -60,7 +60,7 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> ] as const } open={props.open} - close={props.close} + onClose={props.close} onProcess={([newTitle, newVisibility, newDescription, newColor]) => { const req: HttpTimelinePatchRequest = {}; if (newTitle !== timeline.title) { diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css index e38d0ba7..b78564a3 100644 --- a/FrontEnd/src/views/timeline-common/index.css +++ b/FrontEnd/src/views/timeline-common/index.css @@ -13,19 +13,19 @@ @keyframes timeline-line-node-noncurrent { to { - box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color); + box-shadow: 0 0 20px 3px var(--tl-primary-l1-color); } } @keyframes timeline-line-node-current { to { - box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color); + box-shadow: 0 0 20px 3px var(--tl-primary-enhance-l1-color); } } @keyframes timeline-line-node-loading { to { - box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color); + box-shadow: 0 0 20px 3px var(--tl-primary-l1-color); } } |