doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 09:21:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix emoji-picker z-index & use better icon

Browse Source
This commit is contained in:
jilv220 2023-11-12 15:28:37 -08:00
parent f48d5ff024
commit 6d589cf6be
3 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/Forms/Emojis/emoji-picker.tsx
View File

@ -1,7 +1,7 @@
import data, { Emoji } from "@emoji-mart/data"; import data, { Emoji } from "@emoji-mart/data";
import Picker from "@emoji-mart/react"; import Picker from "@emoji-mart/react";
import { RefObject } from "react"; import { RefObject } from "react";
import customEmojis from '../custom_emojis.json'; import customEmojis from "../custom_emojis.json";
interface EmojiPickerProps { interface EmojiPickerProps {
topOffset: number; topOffset: number;
@ -14,11 +14,11 @@ interface EmojiPickerProps {
const customCategoryIcons = { const customCategoryIcons = {
categoryIcons: { categoryIcons: {
"poast": { poast: {
src: 'https://poa.st/emoji/custom/poast_hat.png', src: "https://poa.st/emoji/custom/poast_hat.png",
}, },
}, },
} };
export function EmojiPicker({ export function EmojiPicker({
topOffset, topOffset,
@ -28,11 +28,11 @@ export function EmojiPicker({
height = 300, height = 300,
ref, ref,
}: EmojiPickerProps) { }: EmojiPickerProps) {
const customEmojiList = customEmojis.map(pack => { const customEmojiList = customEmojis.map((pack) => {
return { return {
id: pack.id, id: pack.id,
name: pack.name, name: pack.name,
emojis: pack.emojis.map(e => { emojis: pack.emojis.map((e) => {
return { return {
id: e.shortcode, id: e.shortcode,
name: e.shortcode, name: e.shortcode,
@ -44,9 +44,7 @@ export function EmojiPicker({
return ( return (
<> <>
<div <div className="absolute z-25" ref={ref}>
className="z-25"
ref={ref}>
<style> <style>
{` {`
em-emoji-picker { max-height: ${height}px; } em-emoji-picker { max-height: ${height}px; }
@ -68,4 +66,4 @@ export function EmojiPicker({
</div> </div>
</> </>
); );
} }

4
client/src/components/Forms/PostFormCard.tsx
View File

@ -2,7 +2,7 @@ import {
ArrowUpTrayIcon, ArrowUpTrayIcon,
CpuChipIcon, CpuChipIcon,
ArrowPathIcon, ArrowPathIcon,
Square2StackIcon FaceSmileIcon
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { XCircleIcon } from "@heroicons/react/24/solid"; import { XCircleIcon } from "@heroicons/react/24/solid";
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
@ -231,7 +231,7 @@ const NewNoteCard = ({
ref={emojiRef} ref={emojiRef}
/> />
)} )}
<Square2StackIcon className="h-4 w-4 text-neutral-400 cursor-pointer" onClick={pickEmoji}/> <FaceSmileIcon className="h-4 w-4 text-neutral-400 cursor-pointer" onClick={pickEmoji}/>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<ArrowUpTrayIcon <ArrowUpTrayIcon

10
client/src/components/Thread.tsx
View File

@ -4,7 +4,7 @@ import { Event, nip19 } from "nostr-tools"
import { subNote, subNotesOnce } from '../utils/subscriptions'; import { subNote, subNotesOnce } from '../utils/subscriptions';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { uniqBy } from '../utils/otherUtils'; import { uniqBy } from '../utils/otherUtils';
import { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline'; import { ChatBubbleOvalLeftIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
import { getPow } from '../utils/mine'; import { getPow } from '../utils/mine';
import PostCard from './Modals/Card'; import PostCard from './Modals/Card';
import Placeholder from './Modals/Placeholder'; import Placeholder from './Modals/Placeholder';
@ -119,16 +119,16 @@ const Thread = () => {
{OPEvent && <PostCard event={OPEvent} metadata={getMetadataEvent(OPEvent)} replyCount={countReplies(OPEvent)} type={'OP'}/>} {OPEvent && <PostCard event={OPEvent} metadata={getMetadataEvent(OPEvent)} replyCount={countReplies(OPEvent)} type={'OP'}/>}
</div> </div>
<div className="col-span-full flex justify-center space-x-36"> <div className="col-span-full flex justify-center space-x-36">
<DocumentTextIcon <ChatBubbleOvalLeftIcon
className="h-5 w-5 text-gray-200" className="h-5 w-5 text-gray-200 cursor-pointer"
onClick={() => { onClick={() => {
setShowForm(prevShowForm => !prevShowForm); setShowForm(prevShowForm => !prevShowForm);
setPostType('Reply'); setPostType('Reply');
}} }}
/> />
<FolderPlusIcon <PlusCircleIcon
className="h-5 w-5 text-gray-200" className="h-5 w-5 text-gray-200 cursor-pointer"
onClick={() => { onClick={() => {
setShowForm(prevShowForm => !prevShowForm); setShowForm(prevShowForm => !prevShowForm);
setPostType('Quote'); setPostType('Quote');