diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/views/timeline-common')
6 files changed, 55 insertions, 67 deletions
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx index f2441612..ce371015 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx @@ -1,19 +1,11 @@ import React from "react"; import clsx from "clsx"; -import { - Row, - Col, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - Button, -} from "reactstrap"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; import Svg from "react-inlinesvg"; import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg"; import trashIcon from "bootstrap-icons/icons/trash.svg"; +import { Row, Col, Modal, Button } from "react-bootstrap"; import { useAvatar } from "@/services/user"; import { TimelinePostInfo } from "@/services/timeline"; @@ -28,16 +20,18 @@ const TimelinePostDeleteConfirmDialog: React.FC<{ return ( <Modal toggle={toggle} isOpen centered> - <ModalHeader className="text-danger"> - {t("timeline.post.deleteDialog.title")} - </ModalHeader> - <ModalBody>{t("timeline.post.deleteDialog.prompt")}</ModalBody> - <ModalFooter> - <Button color="secondary" onClick={toggle}> + <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={toggle}> {t("operationDialog.cancel")} </Button> <Button - color="danger" + variant="danger" onClick={() => { onConfirm(); toggle(); @@ -45,7 +39,7 @@ const TimelinePostDeleteConfirmDialog: React.FC<{ > {t("operationDialog.confirm")} </Button> - </ModalFooter> + </Modal.Footer> </Modal> ); }; diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx index 99605922..67a8543a 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineMember.tsx @@ -1,14 +1,6 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { - Container, - ListGroup, - ListGroupItem, - Modal, - Row, - Col, - Button, -} from "reactstrap"; +import { Container, ListGroup, Modal, Row, Col, Button } from "react-bootstrap"; import { User, useAvatar } from "@/services/user"; @@ -25,9 +17,9 @@ const TimelineMemberItem: React.FC<{ const avatar = useAvatar(user.username); return ( - <ListGroupItem className="container"> + <ListGroup.Item className="container"> <Row> - <Col className="col-auto"> + <Col xs="auto"> <BlobImage blob={avatar} className="avatar small" /> </Col> <Col> @@ -46,7 +38,7 @@ const TimelineMemberItem: React.FC<{ return ( <Button className="align-self-center" - color="danger" + variant="danger" onClick={() => { onRemove(user.username); }} @@ -56,7 +48,7 @@ const TimelineMemberItem: React.FC<{ ); })()} </Row> - </ListGroupItem> + </ListGroup.Item> ); }; @@ -169,7 +161,7 @@ const TimelineMember: React.FC<TimelineMemberProps> = (props) => { </Row> </Col> <Button - color="primary" + variant="primary" className="align-self-center" disabled={!addable} onClick={() => { @@ -212,7 +204,7 @@ export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = ( props ) => { return ( - <Modal isOpen={props.open} toggle={props.onClose}> + <Modal show centered onHide={props.onClose}> <TimelineMember {...props} /> </Modal> ); diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx index 1b03d5c7..d5c91622 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplate.tsx @@ -160,10 +160,6 @@ export default function TimelinePageTemplate<TManageItem>( [onManageProp] ); - const onMember = React.useCallback(() => { - setDialog("member"); - }, []); - return ( <> <UiComponent @@ -181,7 +177,7 @@ export default function TimelinePageTemplate<TManageItem>( ? onManage : undefined } - onMember={onMember} + onMember={() => setDialog("member")} /> {dialogElement} </> diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index 7af11efa..e25ed962 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -1,9 +1,9 @@ import React, { CSSProperties } from "react"; -import { Spinner } from "reactstrap"; +import clsx from "clsx"; import { useTranslation } from "react-i18next"; import { fromEvent } from "rxjs"; import Svg from "react-inlinesvg"; -import clsx from "clsx"; +import { Spinner } from "react-bootstrap"; import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg"; import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg"; @@ -262,7 +262,7 @@ export default function TimelinePageTemplateUI<TManageItems>( } else { timelineBody = ( <div className="full-viewport-center-child"> - <Spinner color="primary" type="grow" /> + <Spinner variant="primary" animation="grow" /> </div> ); } @@ -271,7 +271,7 @@ export default function TimelinePageTemplateUI<TManageItems>( body = ( <> <div - className="fixed-top mt-appbar info-card-container" + className="info-card-container" data-collapse={infoCardCollapse ? "true" : "false"} > <Svg @@ -304,7 +304,7 @@ export default function TimelinePageTemplateUI<TManageItems>( } else { body = ( <div className="full-viewport-center-child"> - <Spinner color="primary" type="grow" /> + <Spinner variant="primary" animation="grow" /> </div> ); } @@ -313,13 +313,7 @@ export default function TimelinePageTemplateUI<TManageItems>( return ( <> <AppBar /> - <div> - <div - style={{ height: 56 + cardHeight }} - className="timeline-page-top-space flex-fix-length" - /> - {body} - </div> + {body} </> ); } diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx index 6a8bb000..42f83b52 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { Button, Spinner, Row, Col } from "reactstrap"; import { useTranslation } from "react-i18next"; import Svg from "react-inlinesvg"; +import { Button, Spinner, Row, Col, Form } from "react-bootstrap"; import textIcon from "bootstrap-icons/icons/card-text.svg"; import imageIcon from "bootstrap-icons/icons/image.svg"; @@ -10,8 +10,6 @@ import { UiLogicError } from "@/common"; import { pushAlert } from "@/services/alert"; import { TimelineCreatePostRequest } from "@/services/timeline"; -import FileInput from "../common/FileInput"; - interface TimelinePostEditImageProps { onSelect: (blob: Blob | null) => void; } @@ -59,11 +57,11 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => { return ( <> - <FileInput - labelText={t("chooseImage")} + <Form.File + label={t("chooseImage")} onChange={onInputChange} accept="image/*" - className="mx-3 my-1" + className="mx-3 my-1 d-inline-block" /> {fileUrl && error == null && ( <img @@ -189,7 +187,8 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { <Row> <Col className="px-1 py-1"> {kind === "text" ? ( - <textarea + <Form.Control + as="textarea" className="w-100 h-100 timeline-post-edit" value={text} disabled={state === "process"} @@ -203,7 +202,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { <TimelinePostEditImage onSelect={onImageSelect} /> )} </Col> - <Col sm="col-auto align-self-end m-1"> + <Col xs="auto" className="align-self-end m-1"> {(() => { if (state === "input") { return ( @@ -216,13 +215,17 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { onClick={toggleKind} /> </div> - <Button color="primary" onClick={onSend} disabled={!canSend}> + <Button + variant="primary" + onClick={onSend} + disabled={!canSend} + > {t("timeline.send")} </Button> </> ); } else { - return <Spinner />; + return <Spinner variant="primary" animation="border" />; } })()} </Col> diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass index 960c992d..1862de02 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass +++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass @@ -119,14 +119,6 @@ $timeline-line-color-current: #36c2e6 background: change-color($color: white, $alpha: 0.8) z-index: 100 -textarea.timeline-post-edit - @extend .border-primary - @extend .rounded - - &:focus - outline: none - box-shadow: 0 0 5px 0 $primary - .timeline-page-top-space transition: height 0.5s @@ -147,3 +139,20 @@ textarea.timeline-post-edit border-radius: 50% vertical-align: middle margin-right: 0.6em + +.info-card-container + position: sticky + z-index: 1 + + .info-card-collapse-button + z-index: 1 + position: relative + + .info-card-content + width: 100% + transform-origin: right top + transition: transform 0.5s + + &[data-collapse='true'] + .info-card-content + transform: scale(0) |