hide profilecard by default, calculate new notes pos with js
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
ad57b440a9
commit
6951383045
@ -11,8 +11,6 @@
|
|||||||
.latest-notes-fixed {
|
.latest-notes-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: auto;
|
width: auto;
|
||||||
z-index: 42;
|
z-index: 42;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
|
@ -3,7 +3,7 @@ import ProfileImage from "@/Element/User/ProfileImage";
|
|||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
import { ReactNode, useState } from "react";
|
import { ReactNode, useEffect, useRef, useState } from "react";
|
||||||
import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
|
import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
|
||||||
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
||||||
import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
|
import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
|
||||||
@ -24,9 +24,30 @@ export interface TimelineRendererProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function TimelineRenderer(props: TimelineRendererProps) {
|
export function TimelineRenderer(props: TimelineRendererProps) {
|
||||||
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const latestNotesFixedRef = useRef<HTMLDivElement | null>(null);
|
||||||
const { ref, inView } = useInView();
|
const { ref, inView } = useInView();
|
||||||
const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
|
const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
|
||||||
|
|
||||||
|
const updateLatestNotesPosition = () => {
|
||||||
|
if (containerRef.current && latestNotesFixedRef.current) {
|
||||||
|
const parentRect = containerRef.current.getBoundingClientRect();
|
||||||
|
const childWidth = latestNotesFixedRef.current.offsetWidth;
|
||||||
|
|
||||||
|
const leftPosition = parentRect.left + (parentRect.width - childWidth) / 2;
|
||||||
|
latestNotesFixedRef.current.style.left = `${leftPosition}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
updateLatestNotesPosition();
|
||||||
|
window.addEventListener("resize", updateLatestNotesPosition);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", updateLatestNotesPosition);
|
||||||
|
};
|
||||||
|
}, [inView, props.latest]);
|
||||||
|
|
||||||
const renderNotes = () => {
|
const renderNotes = () => {
|
||||||
return props.frags.map(frag => (
|
return props.frags.map(frag => (
|
||||||
<TimelineFragment
|
<TimelineFragment
|
||||||
@ -52,7 +73,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div ref={containerRef}>
|
||||||
{props.latest.length > 0 && (
|
{props.latest.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<div className="card latest-notes" onClick={() => props.showLatest(false)} ref={ref}>
|
<div className="card latest-notes" onClick={() => props.showLatest(false)} ref={ref}>
|
||||||
@ -68,6 +89,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
|||||||
</div>
|
</div>
|
||||||
{!inView && (
|
{!inView && (
|
||||||
<div
|
<div
|
||||||
|
ref={latestNotesFixedRef}
|
||||||
className="card latest-notes latest-notes-fixed pointer fade-in"
|
className="card latest-notes latest-notes-fixed pointer fade-in"
|
||||||
onClick={() => props.showLatest(true)}>
|
onClick={() => props.showLatest(true)}>
|
||||||
{props.latest.slice(0, 3).map(p => {
|
{props.latest.slice(0, 3).map(p => {
|
||||||
@ -99,6 +121,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
|||||||
onBack={() => setModalThread(undefined)}
|
onBack={() => setModalThread(undefined)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ export default function ShortNote({ event }: { event: TaggedNostrEvent }) {
|
|||||||
return (
|
return (
|
||||||
<Link to={`/${NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix)}`} className="flex flex-col">
|
<Link to={`/${NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix)}`} className="flex flex-col">
|
||||||
<div className="flex flex-row justify-between">
|
<div className="flex flex-row justify-between">
|
||||||
<ProfileImage pubkey={event.pubkey} size={32} />
|
<ProfileImage pubkey={event.pubkey} size={32} showProfileCard={true} />
|
||||||
<NoteTime from={event.created_at * 1000} />
|
<NoteTime from={event.created_at * 1000} />
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-10">
|
<div className="ml-10">
|
||||||
|
@ -42,7 +42,7 @@ export default function ProfileImage({
|
|||||||
onClick,
|
onClick,
|
||||||
showFollowDistance = true,
|
showFollowDistance = true,
|
||||||
icons,
|
icons,
|
||||||
showProfileCard = true,
|
showProfileCard = false,
|
||||||
}: ProfileImageProps) {
|
}: ProfileImageProps) {
|
||||||
const user = useUserProfile(profile ? "" : pubkey) ?? profile;
|
const user = useUserProfile(profile ? "" : pubkey) ?? profile;
|
||||||
const [isHovering, setIsHovering] = useState(false);
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
|
Loading…
Reference in New Issue
Block a user