add reaction buttons to new note and reply forms

This commit is contained in:
hzrd149 2025-01-24 11:42:41 -06:00
parent bccf7c3c6b
commit ce1544a856
5 changed files with 17 additions and 6 deletions

View File

@ -34,7 +34,7 @@ export default function InsertGifButton({
} else
return (
<>
<IconButton icon={<Clapperboard boxSize={5} />} onClick={modal.onOpen} {...props} />
<IconButton icon={<Clapperboard boxSize="1.3em" />} onClick={modal.onOpen} {...props} />
{modal.isOpen && <GifPickerModal onClose={modal.onClose} isOpen onSelect={handleSelect} />}
</>
);

View File

@ -55,7 +55,7 @@ export default function ReactionIconButton({
return (
<>
<IconButton
icon={<AddReactionIcon />}
icon={<AddReactionIcon boxSize="1.3em" />}
aria-label="Add Reaction"
title="Add Reaction"
onClick={open.on}
@ -72,7 +72,12 @@ export default function ReactionIconButton({
return (
<Popover isLazy isOpen={isOpen} onOpen={open.on} onClose={open.off}>
<PopoverTrigger>
<IconButton icon={<AddReactionIcon />} aria-label="Add Reaction" title="Add Reaction" {...props} />
<IconButton
icon={<AddReactionIcon boxSize="1.3em" />}
aria-label="Add Reaction"
title="Add Reaction"
{...props}
/>
</PopoverTrigger>
{portal ? (
<Portal>

View File

@ -14,7 +14,7 @@ export default function InsertImageButton({
return (
<>
<IconButton
icon={<UploadImageIcon boxSize={6} />}
icon={<UploadImageIcon boxSize="1.3em" />}
onClick={() => imageUploadRef.current?.click()}
isLoading={uploading}
{...props}

View File

@ -45,6 +45,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "../../../components/icons";
import ZapSplitCreator, { Split } from "./zap-split-creator";
import MinePOW from "../../../components/pow/mine-pow";
import { PublishLogEntryDetails } from "../../task-manager/publish-log/entry-details";
import InsertReactionButton from "../../../components/reactions/insert-reaction-button";
type FormValues = {
content: string;
@ -195,6 +196,7 @@ export default function ShortTextNoteForm({
<Flex mr="auto" gap="2">
<InsertImageButton onUploaded={insertText} aria-label="Upload image" />
<InsertGifButton onSelectURL={insertText} aria-label="Add gif" />
<InsertReactionButton onSelect={insertText} aria-label="Add emoji" />
</Flex>
</Flex>
<Flex gap="2" alignItems="center" justifyContent="space-between">

View File

@ -17,6 +17,7 @@ import useCacheForm from "../../../hooks/use-cache-form";
import useTextAreaUploadFile, { useTextAreaInsertTextWithForm } from "../../../hooks/use-textarea-upload-file";
import InsertGifButton from "../../../components/gif/insert-gif-button";
import InsertImageButton from "../../new/note/insert-image-button";
import InsertReactionButton from "../../../components/reactions/insert-reaction-button";
export type ReplyFormProps = {
item: ThreadItem;
@ -83,8 +84,11 @@ export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = kin
}}
/>
<Flex gap="2" alignItems="center">
<InsertImageButton onUploaded={insertText} size="sm" aria-label="Upload image" />
<InsertGifButton onSelectURL={insertText} aria-label="Add gif" size="sm" />
<ButtonGroup size="sm">
<InsertImageButton onUploaded={insertText} aria-label="Upload image" />
<InsertGifButton onSelectURL={insertText} aria-label="Add gif" />
<InsertReactionButton onSelect={insertText} aria-label="Add emoji" />
</ButtonGroup>
<ButtonGroup size="sm" ml="auto">
{onCancel && <Button onClick={onCancel}>Cancel</Button>}
<Button type="submit" colorScheme="primary" size="sm">