miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

ChatIndex: improve the desktop layout

alex-chats
Alex Gleason 2022-08-31 12:05:01 -05:00
rodzic 7fc732d0d0
commit 90ece157e6
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
2 zmienionych plików z 13 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
app/soapbox/components/ui/stack/stack.tsx
Wyświetl plik

@ -1,7 +1,7 @@
import classNames from 'clsx'; import classNames from 'clsx';
import React from 'react'; import React from 'react';
type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10 type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 10
const spaces = { const spaces = {
0: 'space-y-0', 0: 'space-y-0',
@ -12,6 +12,7 @@ const spaces = {
3: 'space-y-3', 3: 'space-y-3',
4: 'space-y-4', 4: 'space-y-4',
5: 'space-y-5', 5: 'space-y-5',
6: 'space-y-6',
10: 'space-y-10', 10: 'space-y-10',
}; };

23
app/soapbox/features/chats/index.tsx
Wyświetl plik

@ -5,9 +5,8 @@ import { useHistory } from 'react-router-dom';
import { launchChat } from 'soapbox/actions/chats'; import { launchChat } from 'soapbox/actions/chats';
import AccountSearch from 'soapbox/components/account_search'; import AccountSearch from 'soapbox/components/account_search';
import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
import { Column, Stack } from '../../components/ui'; import { Card, CardTitle, Stack } from '../../components/ui';
import ChatList from './components/chat-list'; import ChatList from './components/chat-list';
@ -30,26 +29,26 @@ const ChatIndex: React.FC = () => {
}; };
return ( return (
<Column label={intl.formatMessage(messages.title)}> <Card className='p-0' variant='rounded'>
<div className='grid grid-cols-9'> <div className='grid grid-cols-9'>
<Stack className='col-span-3'> <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
<div className='column__switch'> <CardTitle title={intl.formatMessage(messages.title)} />
<AudioToggle />
</div>
<AccountSearch <AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={handleSuggestion} onSelected={handleSuggestion}
/> />
<ChatList <div className='-mx-3'>
onClickChat={handleClickChat} <ChatList
useWindowScroll onClickChat={handleClickChat}
/> useWindowScroll
/>
</div>
</Stack> </Stack>
<Stack className='col-span-6'>Message area</Stack> <Stack className='col-span-6'>Message area</Stack>
</div> </div>
</Column> </Card>
); );
}; };