diff options
Diffstat (limited to 'Timeline/ClientApp')
5 files changed, 24 insertions, 84 deletions
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index 1e17c4a1..4296a5ce 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -3,7 +3,7 @@ import clsx from "clsx"; import { useTranslation } from "react-i18next"; import { fromEvent } from "rxjs"; import Svg from "react-inlinesvg"; -import { Spinner } from "react-bootstrap"; +import { Spinner, Collapse } from "react-bootstrap"; import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg"; import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg"; @@ -78,7 +78,6 @@ export interface TimelineCardComponentProps<TManageItems> { onManage?: (item: TManageItems | "property") => void; onMember: () => void; className?: string; - onHeight?: (height: number) => void; } export interface TimelinePageTemplateUIProps<TManageItems> { @@ -173,8 +172,6 @@ export default function TimelinePageTemplateUI<TManageItems>( } }, [getResizeEvent, triggerResizeEvent, timeline, postListState]); - const [cardHeight, setCardHeight] = React.useState<number>(0); - const genCardCollapseLocalStorageKey = (uniqueId: string): string => `timeline.${uniqueId}.cardCollapse`; @@ -219,10 +216,6 @@ export default function TimelinePageTemplateUI<TManageItems>( }) ); - const topHeight: string = infoCardCollapse - ? "calc(68px + 1.5em)" - : `${cardHeight + 60}px`; - const syncState: TimelinePostSyncState = postListState.syncing ? "syncing" : postListState.type === "synced" @@ -231,10 +224,7 @@ export default function TimelinePageTemplateUI<TManageItems>( timelineBody = ( <div> - <TimelinePostSyncStateBadge - style={{ top: topHeight }} - state={syncState} - /> + <TimelinePostSyncStateBadge state={syncState} /> <Timeline containerRef={timelineRef} posts={posts} @@ -249,6 +239,7 @@ export default function TimelinePageTemplateUI<TManageItems>( {timelineBody} <div ref={bottomSpaceRef} className="flex-fix-length" /> <TimelinePostEdit + className="fixed-bottom" onPost={props.onPost} onHeightChange={onPostEditHeightChange} timelineUniqueId={timeline.uniqueId} @@ -268,10 +259,7 @@ export default function TimelinePageTemplateUI<TManageItems>( body = ( <> - <div - className="info-card-container" - data-collapse={infoCardCollapse ? "true" : "false"} - > + <div className="info-card-container"> <Svg src={ infoCardCollapse @@ -288,14 +276,16 @@ export default function TimelinePageTemplateUI<TManageItems>( }} className="float-right m-1 info-card-collapse-button text-primary icon-button" /> - <CardComponent - timeline={timeline} - onManage={props.onManage} - onMember={props.onMember} - onHeight={setCardHeight} - className="info-card-content" - /> + <Collapse in={!infoCardCollapse}> + <CardComponent + timeline={timeline} + onManage={props.onManage} + onMember={props.onMember} + className="info-card-content" + /> + </Collapse> </div> + {timelineBody} </> ); diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx index 42f83b52..dfa2f879 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx @@ -1,4 +1,5 @@ import React from "react"; +import clsx from "clsx"; import { useTranslation } from "react-i18next"; import Svg from "react-inlinesvg"; import { Button, Spinner, Row, Col, Form } from "react-bootstrap"; @@ -183,7 +184,10 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { }, []); return ( - <div ref={containerRef} className="container-fluid fixed-bottom bg-light"> + <div + ref={containerRef} + className={clsx("container-fluid bg-light", props.className)} + > <Row> <Col className="px-1 py-1"> {kind === "text" ? ( 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 1862de02..a7b9af7b 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass +++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass @@ -142,17 +142,5 @@ $timeline-line-color-current: #36c2e6 .info-card-container position: sticky + top: 56px 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) diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx index bf5c3105..9f989148 100644 --- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx +++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx @@ -1,7 +1,6 @@ import React from "react"; import clsx from "clsx"; import { useTranslation } from "react-i18next"; -import { fromEvent } from "rxjs"; import { Dropdown, Button } from "react-bootstrap"; import { useAvatar } from "@/services/user"; @@ -17,41 +16,19 @@ export type TimelineInfoCardProps = TimelineCardComponentProps< >; const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => { - const { onHeight, onMember, onManage } = props; + const { onMember, onManage } = props; const { t } = useTranslation(); const avatar = useAvatar(props.timeline.owner.username); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const containerRef = React.useRef<HTMLDivElement>(null!); - - const notifyHeight = React.useCallback((): void => { - if (onHeight) { - onHeight(containerRef.current.getBoundingClientRect().height); - } - }, [onHeight]); - - React.useEffect(() => { - const subscription = fromEvent(window, "resize").subscribe(notifyHeight); - return () => subscription.unsubscribe(); - }); - return ( - <div - ref={containerRef} - className={clsx("rounded border p-2 bg-light clearfix", props.className)} - onTransitionEnd={notifyHeight} - > + <div className={clsx("rounded border p-2 bg-light", props.className)}> <h3 className="text-primary mx-3 d-inline-block align-middle"> {props.timeline.name} </h3> <div className="d-inline-block align-middle"> - <BlobImage - blob={avatar} - onLoad={notifyHeight} - className="avatar small rounded-circle" - /> + <BlobImage blob={avatar} className="avatar small rounded-circle" /> {props.timeline.owner.nickname} <small className="ml-3 text-secondary"> @{props.timeline.owner.username} diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx index f1878b5c..cec81421 100644 --- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx +++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx @@ -17,34 +17,15 @@ export type UserInfoCardProps = TimelineCardComponentProps< >; const UserInfoCard: React.FC<UserInfoCardProps> = (props) => { - const { onHeight, onManage } = props; + const { onManage } = props; const { t } = useTranslation(); const avatar = useAvatar(props.timeline.owner.username); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const containerRef = React.useRef<HTMLDivElement>(null!); - - const notifyHeight = React.useCallback((): void => { - if (onHeight) { - onHeight(containerRef.current.getBoundingClientRect().height); - } - }, [onHeight]); - - React.useEffect(() => { - const subscription = fromEvent(window, "resize").subscribe(notifyHeight); - return () => subscription.unsubscribe(); - }); - return ( - <div - ref={containerRef} - className={clsx("rounded border bg-light p-2 clearfix", props.className)} - onTransitionEnd={notifyHeight} - > + <div className={clsx("rounded border bg-light p-2", props.className)}> <BlobImage blob={avatar} - onLoad={notifyHeight} className="avatar large mr-2 rounded-circle float-left" /> <div> |