mirror of
https://github.com/Qortal/qortal-mobile.git
synced 2025-03-15 04:12:32 +00:00
popover for payment and message - users avatar
This commit is contained in:
parent
93fba38de3
commit
bf27a4f566
81
src/App.tsx
81
src/App.tsx
@ -82,7 +82,7 @@ import {
|
||||
groupApiSocket,
|
||||
groupApiSocketLocal,
|
||||
} from "./background";
|
||||
import { executeEvent } from "./utils/events";
|
||||
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "./utils/events";
|
||||
import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./components/Chat/GroupAnnouncements";
|
||||
import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
|
||||
import { DrawerComponent } from "./components/Drawer/Drawer";
|
||||
@ -293,7 +293,8 @@ function App() {
|
||||
const [confirmUseOfLocal, setConfirmUseOfLocal] = useState(false);
|
||||
const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false);
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
|
||||
const [isOpenSendQort, setIsOpenSendQort] = useState(false)
|
||||
const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false)
|
||||
useEffect(() => {
|
||||
if(!isMobile) return
|
||||
// Function to set the height of the app to the viewport height
|
||||
@ -519,7 +520,9 @@ function App() {
|
||||
if (response?.error) {
|
||||
setSendPaymentError(response.error);
|
||||
} else {
|
||||
setExtstate("transfer-success-regular");
|
||||
setIsOpenSendQort(false)
|
||||
setIsOpenSendQortSuccess(true)
|
||||
// setExtstate("transfer-success-regular");
|
||||
// setSendPaymentSuccess("Payment successfully sent");
|
||||
}
|
||||
setIsLoading(false);
|
||||
@ -901,6 +904,8 @@ function App() {
|
||||
setWalletToBeDownloaded(null);
|
||||
setWalletToBeDownloadedPassword("");
|
||||
setExtstate("authenticated");
|
||||
setIsOpenSendQort(false)
|
||||
setIsOpenSendQortSuccess(false)
|
||||
};
|
||||
|
||||
const resetAllStates = () => {
|
||||
@ -1026,6 +1031,17 @@ function App() {
|
||||
// Handler for when the window gains focus
|
||||
const handleFocus = () => {
|
||||
setIsFocused(true);
|
||||
if(isMobile){
|
||||
chrome?.runtime?.sendMessage(
|
||||
{
|
||||
action: "clearAllNotifications",
|
||||
payload: {
|
||||
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
console.log("Webview is focused");
|
||||
};
|
||||
|
||||
@ -1043,6 +1059,16 @@ function App() {
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
setIsFocused(true);
|
||||
if(isMobile){
|
||||
chrome?.runtime?.sendMessage(
|
||||
{
|
||||
action: "clearAllNotifications",
|
||||
payload: {
|
||||
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
console.log("Webview is visible");
|
||||
} else {
|
||||
setIsFocused(false);
|
||||
@ -1060,6 +1086,22 @@ function App() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
const openPaymentInternal = (e) => {
|
||||
const directAddress = e.detail?.address;
|
||||
const name = e.detail?.name
|
||||
setIsOpenSendQort(true)
|
||||
setPaymentTo(name || directAddress)
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
subscribeToEvent("openPaymentInternal", openPaymentInternal);
|
||||
|
||||
return () => {
|
||||
unsubscribeFromEvent("openPaymentInternal", openPaymentInternal);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const registerName = async () => {
|
||||
try {
|
||||
if (!userInfo?.address) throw new Error("Your address was not found");
|
||||
@ -1262,7 +1304,8 @@ function App() {
|
||||
<Spacer height="20px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setExtstate("send-qort");
|
||||
setIsOpenSendQort(true)
|
||||
// setExtstate("send-qort");
|
||||
setIsOpenDrawerProfile(false)
|
||||
}}
|
||||
>
|
||||
@ -1584,8 +1627,17 @@ function App() {
|
||||
|
||||
</MyContext.Provider>
|
||||
)}
|
||||
{extState === "send-qort" && isMainWindow && (
|
||||
<>
|
||||
{isOpenSendQort && isMainWindow && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
background: '#27282c',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
zIndex: 6
|
||||
}}>
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
@ -1691,7 +1743,7 @@ function App() {
|
||||
>
|
||||
Send
|
||||
</CustomButton>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
{extState === "web-app-request-buy-order" && !isMainWindow && (
|
||||
<>
|
||||
@ -2225,8 +2277,17 @@ function App() {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{extState === "transfer-success-regular" && (
|
||||
<>
|
||||
{isOpenSendQortSuccess && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
background: '#27282c',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
zIndex: 6
|
||||
}}>
|
||||
<Spacer height="48px" />
|
||||
<img src={Success} />
|
||||
<Spacer height="45px" />
|
||||
@ -2246,7 +2307,7 @@ function App() {
|
||||
>
|
||||
Continue
|
||||
</CustomButton>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
{extState === "transfer-success-request" && (
|
||||
<>
|
||||
|
@ -202,7 +202,7 @@ export function isExtMsg(data){
|
||||
} catch (error) {
|
||||
isMsgFromExtensionGroup = false
|
||||
}
|
||||
console.log('isMsgFromExtensionGroup', isMsgFromExtensionGroup)
|
||||
|
||||
return isMsgFromExtensionGroup
|
||||
}
|
||||
|
||||
@ -264,7 +264,7 @@ if (!oldestLatestTimestamp || oldChat?.timestamp > oldestLatestTimestamp?.timest
|
||||
}
|
||||
});
|
||||
|
||||
console.log('newestLatestTimestamp', newestLatestTimestamp)
|
||||
|
||||
if(checkDifference(newestLatestTimestamp.timestamp) && !oldestLatestTimestamp || (newestLatestTimestamp && newestLatestTimestamp?.timestamp > oldestLatestTimestamp?.timestamp)){
|
||||
const notificationId = 'chat_notification_' + Date.now() + '_type=direct' + `_from=${newestLatestTimestamp.address}`;
|
||||
chrome.notifications.create(notificationId, {
|
||||
@ -460,7 +460,7 @@ const handleNotification = async (groups)=> {
|
||||
if(checkDifference(newestLatestTimestamp.timestamp) && !oldestLatestTimestamp || (newestLatestTimestamp && newestLatestTimestamp?.timestamp > oldestLatestTimestamp?.timestamp)){
|
||||
if (!lastGroupNotification || ((Date.now() - lastGroupNotification) >= 120000)) {
|
||||
if(!newestLatestTimestamp?.data || !isExtMsg(newestLatestTimestamp?.data)) return
|
||||
console.log('newestLatestTimestamp', newestLatestTimestamp)
|
||||
|
||||
const notificationId = 'chat_notification_' + Date.now() + '_type=group' + `_from=${newestLatestTimestamp.groupId}`;
|
||||
|
||||
chrome.notifications.create(notificationId, {
|
||||
@ -859,6 +859,13 @@ async function getSaveWallet() {
|
||||
}
|
||||
}
|
||||
|
||||
async function clearAllNotifications(){
|
||||
const notifications = await chrome.notifications.getAll();
|
||||
for (const notificationId of Object.keys(notifications)) {
|
||||
await chrome.notifications.clear(notificationId);
|
||||
}
|
||||
}
|
||||
|
||||
async function getUserInfo() {
|
||||
const wallet = await getSaveWallet();
|
||||
const address = wallet.address0;
|
||||
@ -1502,7 +1509,7 @@ async function decryptDirectFunc({ messages, involvingAddress }) {
|
||||
publicKey: uint8PublicKey,
|
||||
};
|
||||
for (const message of messages) {
|
||||
console.log('messagedep', message)
|
||||
|
||||
try {
|
||||
const decodedMessage = decryptChatMessage(
|
||||
message.data,
|
||||
@ -2905,6 +2912,18 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "clearAllNotifications": {
|
||||
|
||||
;
|
||||
clearAllNotifications()
|
||||
.then((res) => {
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "setGroupData": {
|
||||
|
||||
const { groupId,
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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%',
|
||||
|
@ -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>
|
||||
|
||||
);
|
||||
|
@ -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={{
|
||||
|
@ -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>
|
||||
|
@ -126,6 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages }) => {
|
||||
message={message}
|
||||
onSeen={handleMessageSeen}
|
||||
isTemp={!!message?.isTemp}
|
||||
myAddress={myAddress}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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])} />
|
||||
)}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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
108
src/components/WrapperUserAction.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
@ -78,6 +78,19 @@ body {
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
||||
/* Mobile-specific scrollbar styles */
|
||||
@media only screen and (max-width: 600px) {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* Narrower scrollbar width on mobile */
|
||||
height: 6px; /* Narrower scrollbar height on mobile */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px; /* Adjust the radius for a narrower thumb */
|
||||
border: 2px solid transparent; /* Narrower thumb border */
|
||||
}
|
||||
}
|
||||
|
||||
.group-list::-webkit-scrollbar-thumb:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user