This commit is contained in:
parent
4b335faa36
commit
a9c8fd9ba5
@ -1,7 +1,6 @@
|
|||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { ReactNode, useState } from "react";
|
import { ReactNode, useState } from "react";
|
||||||
|
|
||||||
import ShowMore from "@/Components/Event/ShowMore";
|
|
||||||
import Icon from "@/Components/Icons/Icon";
|
import Icon from "@/Components/Icons/Icon";
|
||||||
|
|
||||||
interface CollapsedProps {
|
interface CollapsedProps {
|
||||||
@ -13,8 +12,8 @@ interface CollapsedProps {
|
|||||||
|
|
||||||
const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps) => {
|
const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps) => {
|
||||||
return collapsed ? (
|
return collapsed ? (
|
||||||
<div className="collapsed">
|
<div className="text-nostr-purple px-4 pb-3 cursor-pointer hover:underline" onClick={() => setCollapsed(false)}>
|
||||||
<ShowMore text={text} onClick={() => setCollapsed(false)} />
|
{text}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="uncollapsed">{children}</div>
|
<div className="uncollapsed">{children}</div>
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
.show-more {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--highlight);
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-more:hover {
|
|
||||||
color: var(--highlight);
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-weight: normal;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-more-container {
|
|
||||||
min-height: 40px;
|
|
||||||
}
|
|
@ -1,5 +1,3 @@
|
|||||||
import "./ShowMore.css";
|
|
||||||
|
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
@ -14,7 +12,7 @@ interface ShowMoreProps {
|
|||||||
const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
||||||
return (
|
return (
|
||||||
<div className="show-more-container">
|
<div className="show-more-container">
|
||||||
<button className={classNames("show-more", className)} onClick={onClick}>
|
<button type="button" className={classNames("show-more", className)} onClick={onClick}>
|
||||||
{text || <FormattedMessage defaultMessage="Show More" id="O8Z8t9" />}
|
{text || <FormattedMessage defaultMessage="Show More" id="O8Z8t9" />}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -23,7 +21,7 @@ const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
|||||||
|
|
||||||
export default ShowMore;
|
export default ShowMore;
|
||||||
|
|
||||||
export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
|
export function AutoShowMore({ text, onClick, className }: ShowMoreProps) {
|
||||||
const { ref, inView } = useInView({ rootMargin: "2000px" });
|
const { ref, inView } = useInView({ rootMargin: "2000px" });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -33,8 +31,8 @@ export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
|
|||||||
}, [inView]);
|
}, [inView]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames("show-more-container", className)} ref={ref}>
|
<div ref={ref}>
|
||||||
{text}
|
<ShowMore onClick={onClick} text={text} className={className} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -85,11 +85,6 @@
|
|||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-container .collapsed,
|
|
||||||
.thread-container .show-more-container {
|
|
||||||
min-height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread-container .hidden-note {
|
.thread-container .hidden-note {
|
||||||
padding-left: 48px;
|
padding-left: 48px;
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,7 @@ import { EventKind, NostrEvent, TaggedNostrEvent } from "@snort/system";
|
|||||||
import { ReactNode, useCallback, useMemo, useState } from "react";
|
import { ReactNode, useCallback, useMemo, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
import { ShowMoreInView } from "@/Components/Event/ShowMore";
|
import { AutoShowMore } from "@/Components/Event/ShowMore";
|
||||||
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
||||||
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
||||||
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
||||||
@ -100,10 +100,11 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
|
|||||||
displayAs={displayAs}
|
displayAs={displayAs}
|
||||||
/>
|
/>
|
||||||
{mainFeed.length > 0 && (
|
{mainFeed.length > 0 && (
|
||||||
<ShowMoreInView
|
<AutoShowMore
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
feed.loadMore();
|
feed.loadMore();
|
||||||
}}
|
}}
|
||||||
|
className="mx-3 my-4"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@ -4,7 +4,7 @@ import { unwrap } from "@snort/shared";
|
|||||||
import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
|
import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
import { lazy, Suspense, useEffect, useMemo } from "react";
|
import { lazy, Suspense, useEffect, useMemo } from "react";
|
||||||
|
|
||||||
import { ShowMoreInView } from "@/Components/Event/ShowMore";
|
import { AutoShowMore } from "@/Components/Event/ShowMore";
|
||||||
import PageSpinner from "@/Components/PageSpinner";
|
import PageSpinner from "@/Components/PageSpinner";
|
||||||
import { useNotificationsView } from "@/Feed/WorkerRelayView";
|
import { useNotificationsView } from "@/Feed/WorkerRelayView";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
@ -63,7 +63,7 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
|
|||||||
{login.publicKey &&
|
{login.publicKey &&
|
||||||
[...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
|
[...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
|
||||||
|
|
||||||
<ShowMoreInView onClick={() => {}} />
|
<AutoShowMore onClick={() => {}} />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user