mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
fix emoji-picker z-index & use better icon
This commit is contained in:
parent
f48d5ff024
commit
6d589cf6be
@ -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; }
|
||||||
|
@ -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
|
||||||
|
@ -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');
|
||||||
|
Loading…
Reference in New Issue
Block a user