Дизайн звонков
This commit is contained in:
@@ -9,12 +9,13 @@ import { useEffect } from "react";
|
||||
import { useViewPanelsState, ViewPanelsState } from "@/app/hooks/useViewPanelsState";
|
||||
import { GroupHeader } from "@/app/components/GroupHeader/GroupHeader";
|
||||
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
|
||||
import { ActiveCall } from "@/app/components/ActiveCall/ActiveCall";
|
||||
|
||||
export function Chat() {
|
||||
const params = useParams();
|
||||
const dialog = params.id || "DELETED";
|
||||
const {lg} = useRosettaBreakpoints();
|
||||
const [__, setViewState] = useViewPanelsState();
|
||||
const [viewState, setViewState] = useViewPanelsState();
|
||||
const {hasGroup} = useGroups();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -30,6 +31,9 @@ export function Chat() {
|
||||
return (<>
|
||||
<DialogProvider dialog={dialog} key={dialog}>
|
||||
<Flex direction={'column'} justify={'space-between'} h={'100%'}>
|
||||
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && (
|
||||
<ActiveCall></ActiveCall>
|
||||
)}
|
||||
{/* Group Header */}
|
||||
{hasGroup(dialog) && <GroupHeader></GroupHeader>}
|
||||
{/* Dialog peer to peer Header */}
|
||||
|
||||
@@ -31,6 +31,7 @@ import { useUpdateMessage } from "@/app/hooks/useUpdateMessage";
|
||||
import { useDeviceMessage } from "@/app/hooks/useDeviceMessage";
|
||||
import { UpdateProvider } from "@/app/providers/UpdateProvider/UpdateProvider";
|
||||
import { useSynchronize } from "@/app/providers/DialogProvider/useSynchronize";
|
||||
import { CallProvider } from "@/app/providers/CallProvider/CallProvider";
|
||||
|
||||
export function Main() {
|
||||
const { mainColor, borderColor } = useRosettaColors();
|
||||
@@ -154,52 +155,56 @@ export function Main() {
|
||||
<SystemAccountProvider>
|
||||
<TransportProvider>
|
||||
<UpdateProvider>
|
||||
<Flex direction={'row'} style={{
|
||||
height: '100%',
|
||||
width: '100vw',
|
||||
}}>
|
||||
<div style={{
|
||||
display: viewState != ViewPanelsState.DIALOGS_PANEL_HIDE ? 'block' : 'none',
|
||||
width: viewState == ViewPanelsState.DIALOGS_PANEL_ONLY ? '100%' : '300px',
|
||||
<CallProvider>
|
||||
<Flex direction={'row'} style={{
|
||||
height: '100%',
|
||||
width: '100vw',
|
||||
}}>
|
||||
<DialogsPanel></DialogsPanel>
|
||||
</div>
|
||||
<Divider color={borderColor} orientation={'vertical'}></Divider>
|
||||
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && <Box
|
||||
bg={mainColor}
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
height: 'calc(100vh - 27px)',
|
||||
width: `calc(100% - 300px)`,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path={'/chat/:id'} element={<Chat />}></Route>
|
||||
<Route path={'/profile/:id'} element={<Profile />}></Route>
|
||||
<Route path={'/'} element={<DialogPreview />}></Route>
|
||||
<Route path={'/theme'} element={<Theme />}></Route>
|
||||
<Route path={'/safety'} element={<Safety />}></Route>
|
||||
<Route path={'/update'} element={<Update />}></Route>
|
||||
<Route path={'/backup'} element={<Backup />}></Route>
|
||||
<Route path={'/dialogs'} element={<Dialogs />}></Route>
|
||||
<Route path={'/newgroup'} element={<CreateGroup />}></Route>
|
||||
<Route path={'/group/:id'} element={<GroupInfo />}></Route>
|
||||
<Route path={'/groupencrypt/:key'} element={<GroupEncryption />}></Route>
|
||||
</Routes>
|
||||
</Box>}
|
||||
</Flex>
|
||||
{oldPublicKey && (
|
||||
<Overlay blur={8} color="#333">
|
||||
<Flex direction={'column'} align={'center'} justify={'center'} h={'100%'}>
|
||||
<Alert w={400} variant="filled" color="red" title="Old account">
|
||||
Your account uses an old format public key which is no longer supported. Please create a new account to continue using the application.
|
||||
<br></br>After press "OK" button, the application will close and remove all data.
|
||||
</Alert>
|
||||
<Button w={400} mt={'md'} color="red" onClick={dropAccountsAndMessages}>OK</Button>
|
||||
</Flex>
|
||||
</Overlay>
|
||||
)}
|
||||
<div style={{
|
||||
display: viewState != ViewPanelsState.DIALOGS_PANEL_HIDE ? 'block' : 'none',
|
||||
width: viewState == ViewPanelsState.DIALOGS_PANEL_ONLY ? '100%' : '300px',
|
||||
}}>
|
||||
<DialogsPanel></DialogsPanel>
|
||||
</div>
|
||||
{lg && (
|
||||
<Divider color={borderColor} orientation={'vertical'}></Divider>
|
||||
)}
|
||||
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && <Box
|
||||
bg={mainColor}
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
height: 'calc(100vh - 27px)',
|
||||
width: `calc(100% - 300px)`,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path={'/chat/:id'} element={<Chat />}></Route>
|
||||
<Route path={'/profile/:id'} element={<Profile />}></Route>
|
||||
<Route path={'/'} element={<DialogPreview />}></Route>
|
||||
<Route path={'/theme'} element={<Theme />}></Route>
|
||||
<Route path={'/safety'} element={<Safety />}></Route>
|
||||
<Route path={'/update'} element={<Update />}></Route>
|
||||
<Route path={'/backup'} element={<Backup />}></Route>
|
||||
<Route path={'/dialogs'} element={<Dialogs />}></Route>
|
||||
<Route path={'/newgroup'} element={<CreateGroup />}></Route>
|
||||
<Route path={'/group/:id'} element={<GroupInfo />}></Route>
|
||||
<Route path={'/groupencrypt/:key'} element={<GroupEncryption />}></Route>
|
||||
</Routes>
|
||||
</Box>}
|
||||
</Flex>
|
||||
{oldPublicKey && (
|
||||
<Overlay blur={8} color="#333">
|
||||
<Flex direction={'column'} align={'center'} justify={'center'} h={'100%'}>
|
||||
<Alert w={400} variant="filled" color="red" title="Old account">
|
||||
Your account uses an old format public key which is no longer supported. Please create a new account to continue using the application.
|
||||
<br></br>After press "OK" button, the application will close and remove all data.
|
||||
</Alert>
|
||||
<Button w={400} mt={'md'} color="red" onClick={dropAccountsAndMessages}>OK</Button>
|
||||
</Flex>
|
||||
</Overlay>
|
||||
)}
|
||||
</CallProvider>
|
||||
</UpdateProvider>
|
||||
</TransportProvider>
|
||||
</SystemAccountProvider>
|
||||
|
||||
Reference in New Issue
Block a user