mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-09-20 01:56:33 +00:00
vertically tighter note layout
This commit is contained in:
parent
c5021783b3
commit
fb51316140
@ -7,7 +7,7 @@ type Props = {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
const Dropdown = ({ children }: Props) => {
|
||||
const Dropdown = ({ children, small }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const toggle = (e: MouseEvent, newOpenState: boolean) => {
|
||||
@ -44,7 +44,9 @@ const Dropdown = ({ children }: Props) => {
|
||||
onMouseEnter={(e) => toggle(e, true)}
|
||||
onMouseLeave={(e) => toggle(e, false)}
|
||||
>
|
||||
<button className="dropbtn btn btn-circle btn-ghost text-neutral-500">…</button>
|
||||
<button className={`dropbtn btn btn-circle ${small && 'btn-sm'} btn-ghost text-neutral-500`}>
|
||||
…
|
||||
</button>
|
||||
<Show when={open}>
|
||||
<div className="absolute z-10 p-2 flex flex-col gap-2 right-0 w-56 rounded-md shadow-lg bg-black border-neutral-500 border-2">
|
||||
{children}
|
||||
|
@ -104,7 +104,7 @@ const EventDropdown = (props: EventDropdownProps) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown>
|
||||
<Dropdown small>
|
||||
<Copy className="btn btn-sm" key={`${id!}copy_link`} text={t('copy_link')} copyStr={url} />
|
||||
<Copy
|
||||
className="btn btn-sm"
|
||||
|
@ -7,8 +7,9 @@ import Name from '../../user/Name';
|
||||
import EventDropdown from '../EventDropdown';
|
||||
|
||||
import Avatar from './Avatar';
|
||||
import ReplyingToUsers from './ReplyingToUsers';
|
||||
|
||||
const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText }) => {
|
||||
const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText, isQuoting }) => {
|
||||
const { time, dateStr, timeStr } = useMemo(() => {
|
||||
const t = new Date(event.created_at * 1000);
|
||||
const dStr = t.toLocaleString(window.navigator.language, {
|
||||
@ -29,19 +30,25 @@ const Author = ({ event, fullWidth, isQuote, standalone, setTranslatedText }) =>
|
||||
<Show when={fullWidth}>
|
||||
<Avatar event={event} isQuote={isQuote} standalone={standalone} />
|
||||
</Show>
|
||||
<a href={`/${Key.toNostrBech32Address(event.pubkey, 'npub')}`} className="font-bold">
|
||||
<Name pub={event.pubkey} />
|
||||
</a>
|
||||
<small>
|
||||
{'· '}
|
||||
<a
|
||||
href={`/${Key.toNostrBech32Address(event.id, 'note')}`}
|
||||
className="tooltip text-neutral-500"
|
||||
data-tip={`${dateStr} ${timeStr}`}
|
||||
>
|
||||
{time && Helpers.getRelativeTimeText(time)}
|
||||
</a>
|
||||
</small>
|
||||
<div className="flex flex-col">
|
||||
<div>
|
||||
<a href={`/${Key.toNostrBech32Address(event.pubkey, 'npub')}`} className="font-bold">
|
||||
<Name pub={event.pubkey} />
|
||||
</a>
|
||||
<small>
|
||||
{'· '}
|
||||
<a
|
||||
href={`/${Key.toNostrBech32Address(event.id, 'note')}`}
|
||||
className="tooltip text-neutral-500"
|
||||
data-tip={`${dateStr} ${timeStr}`}
|
||||
>
|
||||
{time && Helpers.getRelativeTimeText(time)}
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<ReplyingToUsers event={event} isQuoting={isQuoting} />
|
||||
</div>
|
||||
<Show when={!isQuote}>
|
||||
<div className="flex-1 flex items-center justify-end">
|
||||
<EventDropdown id={event.id} event={event} onTranslate={setTranslatedText} />
|
||||
|
@ -13,7 +13,6 @@ import Reactions from '../buttons/ReactionButtons';
|
||||
|
||||
import Author from './Author';
|
||||
import Helmet from './Helmet';
|
||||
import ReplyingToUsers from './ReplyingToUsers';
|
||||
|
||||
let loadReactions = true;
|
||||
let showLikes = true;
|
||||
@ -99,10 +98,10 @@ const Content = ({ standalone, isQuote, fullWidth, isQuoting, asInlineQuote, eve
|
||||
standalone={standalone}
|
||||
event={event}
|
||||
isQuote={isQuote}
|
||||
isQuoting={isQuoting}
|
||||
fullWidth={fullWidth}
|
||||
setTranslatedText={setTranslatedText}
|
||||
/>
|
||||
<ReplyingToUsers event={event} isQuoting={isQuoting} />
|
||||
<Show when={standalone}>
|
||||
<Helmet name={name} text={text} attachments={attachments} />
|
||||
</Show>
|
||||
@ -110,7 +109,7 @@ const Content = ({ standalone, isQuote, fullWidth, isQuoting, asInlineQuote, eve
|
||||
<Torrent torrentId={meta.torrentId} autopause={!standalone} />
|
||||
</Show>
|
||||
<Show when={text?.length > 0}>
|
||||
<div className={`preformatted-wrap py-2 ${emojiOnly && 'text-2xl'}`}>
|
||||
<div className={`preformatted-wrap pb-1 ${emojiOnly && 'text-2xl'}`}>
|
||||
{text}
|
||||
<Show when={translatedText}>
|
||||
<p>
|
||||
|
@ -43,7 +43,7 @@ const Note = ({
|
||||
}
|
||||
|
||||
const className = useMemo(() => {
|
||||
const classNames = ['msg'];
|
||||
const classNames = [] as string[];
|
||||
|
||||
if (standalone) {
|
||||
classNames.push('standalone');
|
||||
|
Loading…
Reference in New Issue
Block a user