Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-23 04:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

popover for payment and message - users avatar

Browse Source
This commit is contained in:
PhilReact
2024-09-14 11:42:05 +03:00
parent 93fba38de3
commit bf27a4f566
17 changed files with 1145 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Chat/AnnouncementDiscussion.tsx
View File

@@ -283,6 +283,7 @@ export const AnnouncementDiscussion = ({
disableComment
showLoadMore={comments.length > 0 && comments.length % 20 === 0}
loadMore={loadMore}
myName={myName}
/>
<div
@@ -331,6 +332,29 @@ export const AnnouncementDiscussion = ({
flexShrink: 0,
position: 'relative',
}}>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
background: 'red',
}}
>
{` Close`}
</CustomButton>
)}
<CustomButton
onClick={() => {
if (isSending) return;
@@ -361,29 +385,7 @@ export const AnnouncementDiscussion = ({
)}
{` Publish Comment`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>

7
src/components/Chat/AnnouncementItem.tsx
View File

@@ -10,7 +10,8 @@ import { getBaseApi } from "../../background";
import { requestQueueCommentCount } from "./GroupAnnouncements";
import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApiReact } from "../../App";
export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement, disableComment }) => {
import { WrapperUserAction } from "../WrapperUserAction";
export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement, disableComment, myName }) => {
const [commentLength, setCommentLength] = useState(0)
const getNumberOfComments = React.useCallback(
@@ -63,6 +64,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
width: '100%',
wordBreak: 'break-word'
}}>
<WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
<Avatar
sx={{
backgroundColor: '#27282c',
@@ -73,6 +75,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
>
{message?.name?.charAt(0)}
</Avatar>
</WrapperUserAction>
<Box
sx={{
display: "flex",
@@ -81,6 +84,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
width: '100%'
}}
>
<WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
<Typography
sx={{
fontWight: 600,
@@ -90,6 +94,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
>
{message?.name}
</Typography>
</WrapperUserAction>
{!messageData?.decryptedData && (
<Box sx={{
width: '100%',

5
src/components/Chat/AnnouncementList.tsx
View File

@@ -20,7 +20,8 @@ export const AnnouncementList = ({
setSelectedAnnouncement,
disableComment,
showLoadMore,
loadMore
loadMore,
myName
}) => {
const listRef = useRef();
@@ -63,7 +64,7 @@ export const AnnouncementList = ({
alignItems: "center",
}}
>
<AnnouncementItem disableComment={disableComment} setSelectedAnnouncement={setSelectedAnnouncement} message={message} messageData={messageData} />
<AnnouncementItem myName={myName} disableComment={disableComment} setSelectedAnnouncement={setSelectedAnnouncement} message={message} messageData={messageData} />
</div>
);

84
src/components/Chat/ChatDirect.tsx
View File

@@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import Tiptap from './TipTap'
import { CustomButton } from '../../App-styles'
import CircularProgress from '@mui/material/CircularProgress';
import { Box, Input } from '@mui/material';
import { Box, Input, Typography } from '@mui/material';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import { getNameInfo } from '../Group/Group';
import { Spacer } from '../../common/Spacer';
@@ -14,14 +14,13 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App';
import { getPublicKey } from '../../background';
import { useMessageQueue } from '../../MessageQueueContext';
import { executeEvent } from '../../utils/events';
import zIndex from '@mui/material/styles/zIndex';
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close}) => {
const { queueChats, addToQueue, } = useMessageQueue();
const [isFocusedParent, setIsFocusedParent] = useState(false);
@@ -187,7 +186,16 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
};
};
const setDirectChatValueFunc = async (e)=> {
setDirectToValue(e.detail.directToValue)
}
useEffect(() => {
subscribeToEvent("setDirectToValueNewChat", setDirectChatValueFunc);
return () => {
unsubscribeFromEvent("setDirectToValueNewChat", setDirectChatValueFunc);
};
}, []);
useEffect(() => {
if (hasInitializedWebsocket.current || isNewChat) return;
@@ -327,6 +335,27 @@ console.log('isFocusedParent', isFocusedParent)
flexDirection: 'column',
width: '100%'
}}>
<Box onClick={close} sx={{
display: 'flex',
alignItems: 'center',
gap: '5px',
cursor: 'pointer',
padding: '4px 6px',
width: 'fit-content',
borderRadius: '3px',
background: 'rgb(35, 36, 40)',
margin: '10px 0px',
alignSelf: 'center'
}}>
<ArrowBackIcon sx={{
color: 'white',
fontSize: isMobile ? '20px' : '20px'
}}/>
<Typography sx={{
color: 'white',
fontSize: isMobile ? '14px' : '14px'
}}>Close Direct Chat</Typography>
</Box>
{isNewChat && (
<>
<Spacer height="30px" />
@@ -375,6 +404,28 @@ console.log('isFocusedParent', isFocusedParent)
flexShrink: 0,
position: 'relative',
}}>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: 'red',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
<CustomButton
onClick={()=> {
if(isSending) return
@@ -404,28 +455,7 @@ console.log('isFocusedParent', isFocusedParent)
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
<LoadingSnackbar open={isLoading} info={{

43
src/components/Chat/ChatGroup.tsx
View File

@@ -395,6 +395,28 @@ const clearEditorContent = () => {
flexShrink: 0,
position: 'relative',
}}>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: 'red',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
<CustomButton
onClick={()=> {
if(isSending) return
@@ -425,28 +447,7 @@ const clearEditorContent = () => {
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
{/* <button onClick={sendMessage}>send</button> */}
</div>

1
src/components/Chat/ChatList.tsx
View File

@@ -126,6 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages }) => {
message={message}
onSeen={handleMessageSeen}
isTemp={!!message?.isTemp}
myAddress={myAddress}
/>
</div>
</div>

49
src/components/Chat/GroupAnnouncements.tsx
View File

@@ -301,6 +301,7 @@ export const GroupAnnouncements = ({
}
// send chat message
} catch (error) {
if(!error) return
setInfoSnack({
type: "error",
message: error,
@@ -542,6 +543,7 @@ export const GroupAnnouncements = ({
disableComment={false}
showLoadMore={announcements.length > 0 && announcements.length % 20 === 0}
loadMore={loadMore}
myName={myName}
/>
@@ -591,6 +593,29 @@ export const GroupAnnouncements = ({
flexShrink: 0,
position: 'relative',
}}>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: 'red',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
<CustomButton
onClick={() => {
if (isSending) return;
@@ -622,29 +647,7 @@ export const GroupAnnouncements = ({
)}
{` Publish Announcement`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
)}

9
src/components/Chat/MessageItem.tsx
View File

@@ -10,7 +10,9 @@ import { generateHTML } from "@tiptap/react";
import Highlight from '@tiptap/extension-highlight'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
import { executeEvent } from "../../utils/events";
import { WrapperUserAction } from "../WrapperUserAction";
export const MessageItem = ({ message, onSeen, isLast, isTemp, myAddress }) => {
const { ref, inView } = useInView({
threshold: 0.7, // Fully visible
@@ -36,6 +38,7 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
opacity: isTemp ? 0.5 : 1
}}
>
<WrapperUserAction disabled={myAddress === message?.sender} address={message?.sender} name={message?.senderName}>
<Avatar
sx={{
backgroundColor: '#27282c',
@@ -46,6 +49,7 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
>
{message?.senderName?.charAt(0)}
</Avatar>
</WrapperUserAction>
<Box
sx={{
display: "flex",
@@ -54,15 +58,18 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
width: '100%'
}}
>
<WrapperUserAction disabled={myAddress === message?.sender} address={message?.sender} name={message?.senderName}>
<Typography
sx={{
fontWight: 600,
fontFamily: "Inter",
color: "cadetBlue",
}}
>
{message?.senderName || message?.sender}
</Typography>
</WrapperUserAction>
{message?.messageText && (
<MessageDisplay htmlContent={generateHTML(message?.messageText, [StarterKit, Underline, Highlight])} />
)}

5
src/components/Group/Forum/GroupMail.tsx
View File

@@ -54,6 +54,7 @@ import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
import RefreshIcon from '@mui/icons-material/Refresh';
import { getBaseApiReact } from "../../../App";
import { WrapperUserAction } from "../../WrapperUserAction";
const filterOptions = ["Recently active", "Newest", "Oldest"];
export const threadIdentifier = "DOCUMENT";
@@ -672,6 +673,7 @@ export const GroupMail = ({
}
}}
>
<Avatar
sx={{
height: "50px",
@@ -682,11 +684,14 @@ export const GroupMail = ({
>
{thread?.threadData?.name?.charAt(0)}
</Avatar>
<ThreadInfoColumn>
<ThreadInfoColumnNameP>
<ThreadInfoColumnbyP>by </ThreadInfoColumnbyP>
{thread?.threadData?.name}
</ThreadInfoColumnNameP>
<ThreadInfoColumnTime>
{formatTimestamp(thread?.threadData?.createdAt)}
</ThreadInfoColumnTime>

9
src/components/Group/Forum/ShowMessageWithoutModal.tsx
View File

@@ -19,8 +19,9 @@ import ReadOnlySlate from "./ReadOnlySlate";
import { MessageDisplay } from "../../Chat/MessageDisplay";
import { getBaseApi } from "../../../background";
import { getBaseApiReact } from "../../../App";
import { WrapperUserAction } from "../../WrapperUserAction";
export const ShowMessage = ({ message, openNewPostWithQuote }: any) => {
export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
let cleanHTML = "";
@@ -53,13 +54,17 @@ export const ShowMessage = ({ message, openNewPostWithQuote }: any) => {
}}
>
<WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
<Avatar sx={{
height: '50px',
width: '50px'
}} src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${message?.name}/qortal_avatar?async=true`} alt={message?.name}>{message?.name?.charAt(0)}</Avatar>
</WrapperUserAction>
<ThreadInfoColumn>
<WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
<ThreadInfoColumnNameP>{message?.name}</ThreadInfoColumnNameP>
</WrapperUserAction>
<ThreadInfoColumnTime>
{formatTimestampForum(message?.created)}
</ThreadInfoColumnTime>

2
src/components/Group/Forum/Thread.tsx
View File

@@ -531,6 +531,7 @@ export const Thread = ({
key={message?.identifier}
message={fullMessage}
openNewPostWithQuote={openNewPostWithQuote}
myName={userInfo?.name}
/>
);
} else if(message?.tempData){
@@ -539,6 +540,7 @@ export const Thread = ({
key={message?.identifier}
message={message?.tempData}
openNewPostWithQuote={openNewPostWithQuote}
myName={userInfo?.name}
/>
);
}

1333
src/components/Group/Group.tsx
View File

File diff suppressed because it is too large Load Diff

2
src/components/Loader.tsx
View File

@@ -14,7 +14,7 @@ export const Loader = () => {
left:'0px',
right: '0px',
bottom: '0px',
zIndex: 2,
zIndex: 10,
background: 'rgba(0, 0, 0, 0.4)'
}}>
<CircularProgress color="success" size={25} />

108
src/components/WrapperUserAction.tsx Normal file
View File

@@ -0,0 +1,108 @@
import React, { useState } from 'react';
import { Popover, Button, Box } from '@mui/material';
import { executeEvent } from '../utils/events';
export const WrapperUserAction = ({ children, address, name, disabled }) => {
const [anchorEl, setAnchorEl] = useState(null);
// Handle child element click to open Popover
const handleChildClick = (event) => {
event.stopPropagation(); // Prevent parent onClick from firing
setAnchorEl(event.currentTarget);
};
// Handle closing the Popover
const handleClose = () => {
setAnchorEl(null);
};
// Determine if the popover is open
const open = Boolean(anchorEl);
const id = open ? address || name : undefined;
if(disabled){
return children
}
return (
<>
<Box
onClick={handleChildClick} // Open popover on click
sx={{
display: 'inline-flex', // Keep inline behavior
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
padding: 0,
width: 'fit-content', // Limit width to content size
height: 'fit-content', // Limit height to content size
alignSelf: 'flex-start', // Prevent stretching to parent height
maxWidth: '100%', // Optional: Limit the width to avoid overflow
maxHeight: '100%', // Prevent flex shrink behavior in a flex container
}}
>
{/* Render the child without altering dimensions */}
{children}
</Box>
{/* Popover */}
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose} // Close popover on click outside
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
componentsProps={{
paper: {
onClick: (event) => event.stopPropagation(), // Stop propagation inside popover
},
}}
>
<Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
{/* Option 1: Message */}
<Button
variant="text"
onClick={() => {
executeEvent('openDirectMessageInternal', {
address,
name,
});
handleClose();
console.log('Message clicked');
}}
sx={{
color: 'white'
}}
>
Message
</Button>
{/* Option 2: Send QORT */}
<Button
variant="text"
onClick={() => {
executeEvent('openPaymentInternal', {
address,
name,
});
handleClose();
console.log('Send QORT clicked');
}}
sx={{
color: 'white'
}}
>
Send QORT
</Button>
</Box>
</Popover>
</>
);
};