Skip to content
Snippets Groups Projects
Commit 9ea3ef45 authored by Léopold Chappuis's avatar Léopold Chappuis
Browse files

contact-list: enhance UI

Add support dynamic language switching. Improved color schemes for better alignment with the application's overall style.

Change-Id: I833b16c820691fd3561f2fd2ba5866fb840c7f98
parent 30fc39b3
No related branches found
No related tags found
No related merge requests found
...@@ -16,9 +16,8 @@ ...@@ -16,9 +16,8 @@
* <https://www.gnu.org/licenses/>. * <https://www.gnu.org/licenses/>.
*/ */
import { Box, Divider, ListItem, ListItemAvatar, ListItemText } from '@mui/material' import { Box, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material'
import List from '@mui/material/List' import List from '@mui/material/List'
import { motion } from 'framer-motion'
import { memo, SetStateAction, useMemo, useState } from 'react' import { memo, SetStateAction, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
...@@ -36,7 +35,7 @@ import { ConfirmationDialog, useDialogHandler } from './Dialog' ...@@ -36,7 +35,7 @@ import { ConfirmationDialog, useDialogHandler } from './Dialog'
import EllipsisMiddle from './EllipsisMiddle' import EllipsisMiddle from './EllipsisMiddle'
import LoadingPage from './Loading' import LoadingPage from './Loading'
import { PopoverListItemData } from './PopoverList' import { PopoverListItemData } from './PopoverList'
import { BlockContactIcon, CancelIcon, CheckedIcon, PersonIcon } from './SvgIcon' import { BlockContactIcon, CancelIcon, PersonIcon } from './SvgIcon'
interface ContactListProps { interface ContactListProps {
members?: string[] members?: string[]
...@@ -55,6 +54,7 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb ...@@ -55,6 +54,7 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb
const singleContactQuery = useContactQuery(currentContactId) const singleContactQuery = useContactQuery(currentContactId)
const { data: contactDetail } = singleContactQuery const { data: contactDetail } = singleContactQuery
const contextMenuHandler = useContextMenuHandler() const contextMenuHandler = useContextMenuHandler()
const theme = useTheme()
const { const {
props: { open: dialogOpen, onClose: closeContactDialog }, props: { open: dialogOpen, onClose: closeContactDialog },
...@@ -90,18 +90,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb ...@@ -90,18 +90,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb
setFilterValue(event.target.value) setFilterValue(event.target.value)
} }
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
},
}
if (isLoading) { if (isLoading) {
return <LoadingPage /> return <LoadingPage />
} }
const isSelected = (contactId: string): boolean =>
selectedContacts !== undefined && selectedContacts.includes(contactId)
return ( return (
<> <>
<ContactDialog <ContactDialog
...@@ -124,7 +119,21 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb ...@@ -124,7 +119,21 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb
<> <>
<ListItem <ListItem
onClick={() => setSelectedContact && setSelectedContact(contact.id)} onClick={() => setSelectedContact && setSelectedContact(contact.id)}
sx={{ cursor: 'pointer' }} sx={{
cursor: 'pointer',
backgroundColor: isSelected(contact.id) ? theme.ChatInterface.selectedColor : 'inherit',
'&:hover': {
borderColor: theme.palette.primary.light,
textShadow: '0 0 .01px black',
backgroundColor: theme.Footer.backgroundColor,
},
'&.Mui-selected': {
backgroundColor: theme.ChatInterface.selectedColor,
color: theme.palette.primary.dark,
borderColor: theme.ChatInterface.selectedColor,
textShadow: `0 0 .01px ${theme.ChatInterface.selectedColor}`,
},
}}
alignItems="flex-start" alignItems="flex-start"
key={contact.id} key={contact.id}
onContextMenu={(e) => { onContextMenu={(e) => {
...@@ -151,20 +160,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb ...@@ -151,20 +160,13 @@ export default function ContactList({ setSelectedContact, selectedContacts, memb
width: '24px', width: '24px',
height: '24px', height: '24px',
}} }}
> ></Box>
{selectedContacts !== undefined && selectedContacts.includes(contact.id) && (
<motion.div variants={item} initial="hidden" animate="visible" transition={{ delay: 0.2 }}>
<CheckedIcon />
</motion.div>
)}
</Box>
</ListItem> </ListItem>
{contact.id !== filteredContacts[filteredContacts.length - 1].id && <Divider variant="middle" />}
</> </>
))} ))}
</List> </List>
{filteredContacts !== undefined && filteredContacts.length === 0 && ( {filteredContacts !== undefined && filteredContacts.length === 0 && (
<Box sx={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>No contacts found</Box> <Box sx={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>{t('no_countact_found')}</Box>
)} )}
</> </>
) )
......
...@@ -32,6 +32,7 @@ declare module '@mui/material/styles' { ...@@ -32,6 +32,7 @@ declare module '@mui/material/styles' {
replyBorderColor: string replyBorderColor: string
messageReplyColor: string messageReplyColor: string
reactionModalBackground: string reactionModalBackground: string
selectedColor: string
backgroundColor: string backgroundColor: string
} }
LoginPage: { LoginPage: {
...@@ -255,6 +256,7 @@ const palettes = { ...@@ -255,6 +256,7 @@ const palettes = {
replyBorderColor: '2px solid white', replyBorderColor: '2px solid white',
messageReplyColor: '#D3D3D3', messageReplyColor: '#D3D3D3',
reactionModalBackground: 'lightgrey', reactionModalBackground: 'lightgrey',
selectedColor: '#D5E3EE',
backgroundColor: 'white', backgroundColor: 'white',
}, },
LoginPage: { LoginPage: {
...@@ -358,6 +360,7 @@ const palettes = { ...@@ -358,6 +360,7 @@ const palettes = {
replyBorderColor: '3px solid #121212', replyBorderColor: '3px solid #121212',
messageReplyColor: '#404040', messageReplyColor: '#404040',
reactionModalBackground: '#1e1f1e', reactionModalBackground: '#1e1f1e',
selectedColor: '#122D42',
backgroundColor: '#050505', backgroundColor: '#050505',
}, },
LoginPage: { LoginPage: {
......
...@@ -200,6 +200,7 @@ ...@@ -200,6 +200,7 @@
"mute_conversation": "Mute conversation", "mute_conversation": "Mute conversation",
"nameserver_already_set": "The name server is already set.", "nameserver_already_set": "The name server is already set.",
"next": "Next", "next": "Next",
"no_contact_found": "No contact found",
"no_files_found": "No files yet.", "no_files_found": "No files yet.",
"ongoing_call_muted": "Ongoing call (muted)", "ongoing_call_muted": "Ongoing call (muted)",
"ongoing_call_unmuted": "Ongoing call", "ongoing_call_unmuted": "Ongoing call",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment