refactor: use tab instead of modal. fixed layout as well.

This commit is contained in:
鲁树人 2023-06-04 23:56:15 +01:00
parent bb74c6e2b9
commit 429580006c
9 changed files with 98 additions and 129 deletions

View File

@ -1,5 +1,5 @@
import { renderWithProviders, screen, waitFor } from '~/test-utils/test-helper';
import App from '~/components/App';
import { AppRoot } from '~/components/AppRoot';
vi.mock('../decrypt-worker/client', () => {
return {
@ -10,7 +10,7 @@ vi.mock('../decrypt-worker/client', () => {
});
test('should be able to render App', async () => {
renderWithProviders(<App />);
renderWithProviders(<AppRoot />);
// Should eventually load sdk version
await waitFor(() => screen.getByTestId('sdk-version'));

View File

@ -1,23 +0,0 @@
import { Box, Center, Container } from '@chakra-ui/react';
import { SelectFile } from './SelectFile';
import { FileListing } from '~/features/file-listing/FileListing';
import { Footer } from './Footer';
import { Toolbar } from './Toolbar';
function App() {
return (
<Box height="full" width="full" pt="4">
<Container maxW="container.large">
<Center>
<SelectFile />
</Center>
<Toolbar />
<FileListing />
<Footer />
</Container>
</Box>
);
}
export default App;

View File

@ -1,11 +1,15 @@
import { useEffect } from 'react';
import App from './App';
import { MdSettings, MdHome } from 'react-icons/md';
import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, chakra } from '@chakra-ui/react';
import { MainTab } from '~/tabs/MainTab';
import { SettingsTab } from '~/tabs/SettingsTab';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import { theme } from '~/theme';
import { persistSettings } from '~/features/settings/persistSettings';
import { setupStore } from '~/store';
import { Footer } from '~/components/Footer';
// Private to this file only.
const store = setupStore();
@ -16,7 +20,29 @@ export function AppRoot() {
return (
<ChakraProvider theme={theme}>
<Provider store={store}>
<App />
<Tabs flex={1} minH={0} display="flex" flexDir="column">
<TabList justifyContent="center">
<Tab>
<Icon as={MdHome} mr="1" />
<chakra.span></chakra.span>
</Tab>
<Tab>
<Icon as={MdSettings} mr="1" />
<chakra.span></chakra.span>
</Tab>
</TabList>
<TabPanels overflow="auto" minW={0}>
<TabPanel>
<MainTab />
</TabPanel>
<TabPanel>
<SettingsTab />
</TabPanel>
</TabPanels>
</Tabs>
<Footer />
</Provider>
</ChakraProvider>
);

View File

@ -5,39 +5,39 @@ import { CurrentYear } from './CurrentYear';
export function Footer() {
return (
<Center height="footer.container">
<Center
height="footer.content"
fontSize="sm"
textAlign="center"
position="fixed"
bottom="0"
w="full"
bg="gray.100"
color="gray.800"
left="0"
flexDir="column"
>
<Flex as={Text}>
{'音乐解锁 (__APP_VERSION_SHORT__'}
<Suspense>
<SDKVersion />
</Suspense>
{') - 移除已购音乐的加密保护。'}
</Flex>
<Text>
{'Copyright © 2019 - '}
<CurrentYear />{' '}
<Link href="https://git.unlock-music.dev/um" isExternal>
UnlockMusic
</Link>
{' | 音乐解锁授权基于'}
<Link href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE" isExternal>
MIT许可协议
</Link>
</Text>
</Center>
<Center
fontSize="sm"
textAlign="center"
bottom="0"
w="full"
pt="3"
pb="3"
borderTop="1px solid"
borderColor="gray.300"
bg="gray.100"
color="gray.800"
flexDir="column"
flexShrink={0}
>
<Flex as={Text}>
{'音乐解锁 (__APP_VERSION_SHORT__'}
<Suspense>
<SDKVersion />
</Suspense>
{') - 移除已购音乐的加密保护。'}
</Flex>
<Text>
{'Copyright © 2019 - '}
<CurrentYear />{' '}
<Link href="https://git.unlock-music.dev/um" isExternal>
UnlockMusic
</Link>
{' | 音乐解锁授权基于'}
<Link href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE" isExternal>
MIT许可协议
</Link>
</Text>
</Center>
);
}

View File

@ -1,23 +0,0 @@
import { Button, HStack, Icon, useDisclosure } from '@chakra-ui/react';
import { MdSettings } from 'react-icons/md';
import { SettingsModal } from '~/modals/SettingsModal';
export function Toolbar() {
const {
isOpen: isSettingsModalOpen,
onClose: onSettingsModalClose,
getButtonProps: getSettingsButtonProps,
} = useDisclosure();
return (
<>
<HStack alignItems="center" justifyContent="center" p="4">
<Button {...getSettingsButtonProps()}>
<Icon as={MdSettings} mr="1" />
</Button>
</HStack>
<SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} />
</>
);
}

View File

@ -1,42 +0,0 @@
import {
Button,
HStack,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/react';
export interface SettingsModalProps {
onClose: () => void;
isOpen: boolean;
}
export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
return (
<Modal onClose={onClose} isOpen={isOpen} closeOnOverlayClick={false} scrollBehavior="inside" size="full" isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<p>Hallo</p>
<p>Thank you, thank you very much.</p>
<p>Ha-Halo, thank you</p>
<p>Thank you very much!</p>
</ModalBody>
<ModalFooter>
<HStack>
<Button onClick={onClose} variant="ghost" colorScheme="red">
</Button>
<Button onClick={onClose}></Button>
</HStack>
</ModalFooter>
</ModalContent>
</Modal>
);
}

18
src/tabs/MainTab.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Box, VStack } from '@chakra-ui/react';
import { SelectFile } from '../components/SelectFile';
import { FileListing } from '~/features/file-listing/FileListing';
export function MainTab() {
return (
<Box h="full" w="full" pt="4">
<VStack gap="3">
<SelectFile />
<Box w="full">
<FileListing />
</Box>
</VStack>
</Box>
);
}

10
src/tabs/SettingsTab.tsx Normal file
View File

@ -0,0 +1,10 @@
export function SettingsTab() {
return (
<div>
<p>Hallo</p>
<p>Thank you, thank you very much.</p>
<p>Ha-Halo, thank you</p>
<p>Thank you very much!</p>
</div>
);
}

View File

@ -21,15 +21,18 @@ export const theme = extendTheme({
},
styles: {
global: {
body: {
'#root': {
minHeight: '100vh',
maxHeight: '100vh',
display: 'flex',
flexDirection: 'column',
},
},
},
sizes: {
footer: {
container: '7rem',
content: '5rem',
container: '5rem',
content: '4rem',
},
},
});