diff options
8 files changed, 62 insertions, 84 deletions
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx b/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx deleted file mode 100644 index 1c233058..00000000 --- a/Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import clsx from "clsx"; - -import SyncStatusBadge, { - TimelineSyncStatus, -} from "../timeline-common/SyncStatusBadge"; -import CollapseButton from "../timeline-common/CollapseButton"; - -const CollapseCard: React.FC<{ - className?: string; - syncStatus: TimelineSyncStatus; - toggleCollapse: () => void; - visible: boolean; -}> = ({ className, syncStatus, toggleCollapse, visible }) => { - return ( - <div - style={{ visibility: visible ? "visible" : "hidden" }} - className={clsx("cru-card p-2", className)} - > - <div className="d-flex align-items-center"> - <SyncStatusBadge status={syncStatus} className="mr-2" /> - <CollapseButton collapse onClick={toggleCollapse} /> - </div> - </div> - ); -}; - -export default CollapseCard; diff --git a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx index a5166aa4..a8de20aa 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx @@ -8,17 +8,17 @@ import CollapseButton from "../timeline-common/CollapseButton"; const InfoCardTemplate: React.FC< Pick< TimelineCardComponentProps<"">, - "toggleCollapse" | "syncStatus" | "className" + "collapse" | "toggleCollapse" | "syncStatus" | "className" > & { children: React.ReactElement[] } -> = ({ toggleCollapse, syncStatus, className, children }) => { +> = ({ collapse, toggleCollapse, syncStatus, className, children }) => { return ( <div className={clsx("cru-card p-2 clearfix", className)}> <div className="float-right d-flex align-items-center"> <SyncStatusBadge status={syncStatus} className="mr-2" /> - <CollapseButton collapse={false} onClick={toggleCollapse} /> + <CollapseButton collapse={collapse} onClick={toggleCollapse} /> </div> - <div>{children}</div> + <div style={{ display: collapse ? "none" : "block" }}>{children}</div> </div> ); }; diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx index 2b6dcd0a..327b6833 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx @@ -83,13 +83,15 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => { onClick={props.onClick} style={props.style} > - <div className="timeline-line-area"> - <div className="timeline-line-segment start"></div> - <div className="timeline-line-node-container"> - <div className="timeline-line-node"></div> + <div className="timeline-line-area-container"> + <div className="timeline-line-area"> + <div className="timeline-line-segment start"></div> + <div className="timeline-line-node-container"> + <div className="timeline-line-node"></div> + </div> + <div className="timeline-line-segment end"></div> + {current && <div className="timeline-line-segment current-end" />} </div> - <div className="timeline-line-segment end"></div> - {current && <div className="timeline-line-segment current-end" />} </div> <div className="timeline-content-area"> <div> diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index ef13fa50..e1938656 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -17,16 +17,15 @@ import Timeline, { TimelineDeleteCallback, } from "./Timeline"; import TimelineTop from "./TimelineTop"; -import CollapseCard from "./CollapseCard"; import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit"; import { TimelineSyncStatus } from "./SyncStatusBadge"; -import clsx from "clsx"; export interface TimelineCardComponentProps<TManageItems> { timeline: TimelineInfo; onManage?: (item: TManageItems | "property") => void; onMember: () => void; className?: string; + collapse: boolean; syncStatus: TimelineSyncStatus; toggleCollapse: () => void; } @@ -219,31 +218,16 @@ export default function TimelinePageTemplateUI<TManageItems>( body = ( <> - <TimelineTop> - <div - className={clsx( - "timeline-template-card-container", - cardCollapse || "my-expand" - )} - > - <CollapseCard - visible={cardCollapse} - syncStatus={syncStatus} - toggleCollapse={toggleCardCollapse} - /> - <CardComponent - className={clsx( - "timeline-template-card", - cardCollapse && "d-none" - )} - timeline={timeline} - onManage={props.onManage} - onMember={props.onMember} - syncStatus={syncStatus} - toggleCollapse={toggleCardCollapse} - /> - </div> - </TimelineTop> + <CardComponent + className="timeline-template-card" + timeline={timeline} + onManage={props.onManage} + onMember={props.onMember} + syncStatus={syncStatus} + collapse={cardCollapse} + toggleCollapse={toggleCardCollapse} + /> + <TimelineTop height="56px" /> {timelineBody} </> ); diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx index a98d3687..93a2a32c 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineTop.tsx @@ -1,14 +1,17 @@ import React from "react"; export interface TimelineTopProps { - children: React.ReactElement; + height?: number | string; + children?: React.ReactElement; } -const TimelineTop: React.FC<TimelineTopProps> = ({ children }) => { +const TimelineTop: React.FC<TimelineTopProps> = ({ height, children }) => { return ( - <div className="timeline-top"> - <div className="timeline-line-area"> - <div className="timeline-line-segment"></div> + <div style={{ height: height }} className="timeline-top"> + <div className="timeline-line-area-container"> + <div className="timeline-line-area"> + <div className="timeline-line-segment"></div> + </div> </div> {children} </div> 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 aa3544fe..4151bfcc 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass +++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass @@ -29,19 +29,26 @@ $timeline-line-color-current: #36c2e6 box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1) .timeline-line + &-area-container + display: flex + justify-content: flex-end + padding-right: 5px + + flex: 0 0 auto + width: 60px + &-area display: flex flex-direction: column align-items: center - flex: 0 0 auto - width: 60px + width: 30px &-segment width: $timeline-line-width background: $timeline-line-color &.start - height: 20px + height: 14px flex: 0 0 auto &.end @@ -131,15 +138,9 @@ $timeline-line-color-current: #36c2e6 vertical-align: middle margin-right: 0.6em -.timeline-template-card-container - position: sticky +.timeline-template-card + position: fixed z-index: 1 top: 56px - margin: 0.5em - -.timeline-template-card - width: 360px - max-width: calc(100vw - 1em) - position: absolute - top: 0 right: 0 + margin: 0.5em diff --git a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx index 6966ab41..2d787709 100644 --- a/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx +++ b/Timeline/ClientApp/src/app/views/timeline/TimelineInfoCard.tsx @@ -16,7 +16,14 @@ export type TimelineInfoCardProps = TimelineCardComponentProps< >; const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => { - const { timeline, onMember, onManage, syncStatus, toggleCollapse } = props; + const { + timeline, + collapse, + onMember, + onManage, + syncStatus, + toggleCollapse, + } = props; const { t } = useTranslation(); @@ -26,6 +33,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => { <InfoCardTemplate className={props.className} syncStatus={syncStatus} + collapse={collapse} toggleCollapse={toggleCollapse} > <h3 className="text-primary mx-3 d-inline-block align-middle"> diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx index bad2a9e1..888fb18a 100644 --- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx +++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx @@ -16,7 +16,14 @@ export type UserInfoCardProps = TimelineCardComponentProps< >; const UserInfoCard: React.FC<UserInfoCardProps> = (props) => { - const { timeline, onMember, onManage, syncStatus, toggleCollapse } = props; + const { + timeline, + collapse, + onMember, + onManage, + syncStatus, + toggleCollapse, + } = props; const { t } = useTranslation(); const avatar = useAvatar(timeline?.owner?.username); @@ -25,6 +32,7 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => { <InfoCardTemplate className={props.className} syncStatus={syncStatus} + collapse={collapse} toggleCollapse={toggleCollapse} > <div> |