Resolve unsupported UI elements (#289)

* fix button ref

* comment out unsopported ui elements

* hide chat input if no account

* comment out avatar dropdown menu
This commit is contained in:
Felicio Mununga 2022-06-30 15:13:39 +02:00 committed by GitHub
parent 01d5f45db6
commit eb58f5f495
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 35 deletions

View File

@ -56,7 +56,17 @@ export const CommunityDialog = () => {
fill="currentColor"
/>
</svg>
<Button href="https://status.im/get">Download Status</Button>
<Button
onClick={() =>
window.open(
'https://status.im/get',
'_blank',
'noopener,noreferrer'
)
}
>
Download Status
</Button>
</Flex>
</Dialog.Body>
</Dialog>

View File

@ -1,13 +1,13 @@
import React, { useEffect, useRef, useState } from 'react'
import { useChatContext } from '~/src/contexts/chat-context'
import { EmojiIcon } from '~/src/icons/emoji-icon'
import { GifIcon } from '~/src/icons/gif-icon'
import { ImageIcon } from '~/src/icons/image-icon'
import { StickerIcon } from '~/src/icons/sticker-icon'
// import { EmojiIcon } from '~/src/icons/emoji-icon'
// import { GifIcon } from '~/src/icons/gif-icon'
// import { ImageIcon } from '~/src/icons/image-icon'
// import { StickerIcon } from '~/src/icons/sticker-icon'
import { styled } from '~/src/styles/config'
import { Box, Flex, IconButton } from '~/src/system'
// import { Box, Flex, IconButton } from '~/src/system'
import { InputReply } from './input-reply'
interface Props {
@ -47,11 +47,11 @@ export const ChatInput = (props: Props) => {
return (
<Wrapper>
<Box css={{ paddingBottom: 6 }}>
{/* <Box css={{ paddingBottom: 6 }}>
<IconButton label="Add file" color="gray">
<ImageIcon />
</IconButton>
</Box>
</Box> */}
<Bubble>
{state.message && (
<InputReply message={state.message} member={state.member} />
@ -64,7 +64,7 @@ export const ChatInput = (props: Props) => {
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<Flex>
{/* <Flex>
<IconButton label="Pick emoji">
<EmojiIcon />
</IconButton>
@ -74,7 +74,7 @@ export const ChatInput = (props: Props) => {
<IconButton label="Pick gif">
<GifIcon />
</IconButton>
</Flex>
</Flex> */}
</InputWrapper>
</Bubble>
</Wrapper>

View File

@ -4,7 +4,7 @@ import { useMatch } from 'react-router-dom'
import { UserProfileDialog } from '~/src/components/user-profile-dialog'
import { useChatContext } from '~/src/contexts/chat-context'
import { BellIcon } from '~/src/icons/bell-icon'
// import { BellIcon } from '~/src/icons/bell-icon'
// import { PinIcon } from '~/src/icons/pin-icon'
import { useProtocol } from '~/src/protocol'
import { styled } from '~/src/styles/config'
@ -14,9 +14,9 @@ import {
Button,
ContextMenu,
ContextMenuTrigger,
DropdownMenu,
DropdownMenuTrigger,
EmojiHash,
// DropdownMenu,
// DropdownMenuTrigger,
// EmojiHash,
Flex,
Image,
Text,
@ -176,15 +176,15 @@ export const ChatMessage = (props: Props) => {
{responseTo && <MessageReply messageId={responseTo} />}
<Flex gap={2}>
<Box>
<DropdownMenuTrigger>
<button type="button">
<Avatar
size={44}
name={member.username}
colorHash={member.colorHash}
/>
</button>
<DropdownMenu>
{/* <DropdownMenuTrigger>
<button type="button"> */}
<Avatar
size={44}
name={member.username}
colorHash={member.colorHash}
/>
{/* </button> */}
{/* <DropdownMenu>
<Flex direction="column" align="center" gap="1">
<Avatar size="36" />
<Text>{member.username}</Text>
@ -211,7 +211,7 @@ export const ChatMessage = (props: Props) => {
Mark as Untrustworthy
</DropdownMenu.Item>
</DropdownMenu>
</DropdownMenuTrigger>
</DropdownMenuTrigger> */}
</Box>
<Box css={{ flex: 1 }}>

View File

@ -2,14 +2,17 @@ import React from 'react'
import { useMatch } from 'react-router-dom'
import { ChatMenu } from '~/src/components/chat-menu'
// import { ChatMenu } from '~/src/components/chat-menu'
import { useAppState } from '~/src/contexts/app-context'
import { BellIcon } from '~/src/icons/bell-icon'
import { DotsIcon } from '~/src/icons/dots-icon'
// import { BellIcon } from '~/src/icons/bell-icon'
// import { DotsIcon } from '~/src/icons/dots-icon'
import { GroupIcon } from '~/src/icons/group-icon'
import { useChat } from '~/src/protocol'
import { styled } from '~/src/styles/config'
import { DropdownMenuTrigger, Flex, IconButton, Separator } from '~/src/system'
import {
/*DropdownMenuTrigger,*/ Flex,
IconButton /*,Separator*/,
} from '~/src/system'
import { ChatInfo } from '../chat-info'
@ -40,18 +43,18 @@ export const Navbar = (props: Props) => {
</IconButton>
)}
<DropdownMenuTrigger>
{/* <DropdownMenuTrigger>
<IconButton label="Options">
<DotsIcon />
</IconButton>
<ChatMenu type="dropdown" />
</DropdownMenuTrigger>
</DropdownMenuTrigger> */}
<Separator orientation="vertical" css={{ height: 24 }} />
{/* <Separator orientation="vertical" css={{ height: 24 }} /> */}
<IconButton label="Show Activity Center">
{/* <IconButton label="Show Activity Center">
<BellIcon />
</IconButton>
</IconButton> */}
</Flex>
</NavbarWrapper>
)

View File

@ -7,7 +7,7 @@ import { useMatch } from 'react-router-dom'
import { MemberSidebar } from '~/src/components/member-sidebar'
import { useAppState } from '~/src/contexts/app-context'
import { ChatProvider, useChatContext } from '~/src/contexts/chat-context'
import { useChat, useMessages, useProtocol } from '~/src/protocol'
import { useAccount, useChat, useMessages, useProtocol } from '~/src/protocol'
import { styled } from '~/src/styles/config'
import { Avatar, Flex, Heading, Text } from '~/src/system'
@ -38,6 +38,7 @@ const ChatStart = (props: ChatStartProps) => {
const Body = () => {
const { client } = useProtocol()
const { state } = useChatContext()
const { account } = useAccount()
const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const chatId = params.id!
@ -63,7 +64,7 @@ const Body = () => {
<ChatMessage key={message.messageId} message={message} />
))}
</ContentWrapper>
<ChatInput onSubmit={handleMessageSubmit} />
{account && <ChatInput onSubmit={handleMessageSubmit} />}
</>
)
}