Fix mobile navigation on Chats

revert-fa4bd20d
Chewbacca 2022-11-11 07:16:53 -05:00
rodzic d12ca77502
commit c889ece788
3 zmienionych plików z 34 dodań i 11 usunięć

Wyświetl plik

@ -1,10 +1,9 @@
import classNames from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
import { Stack } from 'soapbox/components/ui';
import { useOwnAccount } from 'soapbox/hooks';
import { useChat } from 'soapbox/queries/chats';
import ChatPageMain from './components/chat-page-main';
import ChatPageNew from './components/chat-page-new';
@ -18,9 +17,15 @@ interface IChatPage {
const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
const account = useOwnAccount();
const history = useHistory();
const isOnboarded = account?.chats_onboarded;
const { data: chat } = useChat(chatId);
const path = history.location.pathname;
const isSidebarHidden = matchPath(path, {
path: ['/chats/settings', '/chats/new', '/chats/:chatId'],
exact: true,
});
const containerRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState<string | number>('100%');
@ -61,7 +66,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
<Stack
className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
'hidden sm:block': chat,
'hidden sm:block': isSidebarHidden,
})}
>
<ChatPageSidebar />
@ -69,7 +74,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
<Stack
className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
'hidden sm:block': !chat,
'hidden sm:block': !isSidebarHidden,
})}
>
<Switch>

Wyświetl plik

@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router-dom';
import AccountSearch from 'soapbox/components/account_search';
import { CardTitle, HStack, Stack, Text } from 'soapbox/components/ui';
import { CardTitle, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
import { ChatKeys, useChats } from 'soapbox/queries/chats';
import { queryClient } from 'soapbox/queries/client';
@ -23,8 +23,16 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
return (
<Stack className='h-full'>
<Stack className='flex-grow p-6 space-y-4'>
<Stack className='flex-grow py-6 px-4 sm:p-6 space-y-4'>
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
onClick={() => history.push('/chats')}
/>
<CardTitle title='New Message' />
</HStack>
<HStack space={2} alignItems='center'>
<Text>

Wyświetl plik

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import List, { ListItem } from 'soapbox/components/list';
import { Button, CardBody, CardTitle, Form, Stack, Toggle } from 'soapbox/components/ui';
import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui';
import { useOwnAccount } from 'soapbox/hooks';
import { useUpdateCredentials } from 'soapbox/queries/accounts';
@ -21,6 +22,7 @@ const messages = defineMessages({
const ChatPageSettings = () => {
const account = useOwnAccount();
const intl = useIntl();
const history = useHistory();
const updateCredentials = useUpdateCredentials();
const [data, setData] = useState<FormData>({
@ -35,8 +37,16 @@ const ChatPageSettings = () => {
};
return (
<Stack className='h-full p-6 space-y-8'>
<Stack className='h-full py-6 px-4 sm:p-6 space-y-8'>
<HStack alignItems='center'>
<IconButton
src={require('@tabler/icons/arrow-left.svg')}
className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
onClick={() => history.push('/chats')}
/>
<CardTitle title={intl.formatMessage(messages.title)} />
</HStack>
<Form onSubmit={handleSubmit}>
<CardTitle title={intl.formatMessage(messages.privacy)} />