reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add focus button to note actionbar

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-29 12:14:45 +07:00
parent d4eb237e40
commit d1701eff20
8 changed files with 98 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/shared/notes/actions.tsx
View File

@@ -1,8 +1,9 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ThreadIcon } from '@shared/icons';
import { FocusIcon, ThreadIcon } from '@shared/icons';
import { MoreActions } from '@shared/notes/actions/more';
import { NoteReaction } from '@shared/notes/actions/reaction';
import { NoteReply } from '@shared/notes/actions/reply';
@@ -14,12 +15,12 @@ import { WidgetKinds, useWidgets } from '@stores/widgets';
export function NoteActions({
id,
pubkey,
noOpenThread,
extraButtons = true,
root,
}: {
id: string;
pubkey: string;
noOpenThread?: boolean;
extraButtons?: boolean;
root?: string;
}) {
const { db } = useStorage();
@@ -34,32 +35,50 @@ export function NoteActions({
<NoteRepost id={id} pubkey={pubkey} />
<NoteZap id={id} />
</div>
{!noOpenThread && (
{extraButtons && (
<>
<div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={() =>
setWidget(db, {
kind: WidgetKinds.thread,
title: 'Thread',
content: id,
})
}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Open thread
<Tooltip.Arrow className="fill-black" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<div className="inline-flex items-center gap-2">
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<Link
to={`/notes/text/${id}`}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<FocusIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
</Link>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Open thread
<Tooltip.Arrow className="fill-black" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={() =>
setWidget(db, {
kind: WidgetKinds.thread,
title: 'Thread',
content: id,
})
}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<ThreadIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
Open thread
<Tooltip.Arrow className="fill-black" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</div>
</>
)}
<MoreActions id={id} pubkey={pubkey} />

10
src/shared/notes/actions/more.tsx
View File

@@ -45,15 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Portal>
</Tooltip.Root>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none">
<DropdownMenu.Item asChild>
<Link
to={`/notes/text/${id}`}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
>
Focus mode
</Link>
</DropdownMenu.Item>
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
<DropdownMenu.Item asChild>
<button
type="button"