pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Split sidebar action bar to separate component

Browse source
This commit is contained in:
jeffvli 2023-03-29 00:31:09 -07:00
parent 58c7370536
commit 50af8f4d3a
2 changed files with 96 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/renderer/features/sidebar/components/action-bar.tsx Normal file
View file

@ -0,0 +1,79 @@
import { Grid, Group, TextInput } from '@mantine/core';
import { RiSearchLine, RiMenuFill, RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
import { useNavigate } from 'react-router';
import styled from 'styled-components';
import { Button, DropdownMenu } from '/@/renderer/components';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
const ActionsContainer = styled(Grid)`
display: flex;
align-items: center;
height: 70px;
padding: 0 1rem;
-webkit-app-region: drag;
input {
-webkit-app-region: no-drag;
}
`;
export const ActionBar = () => {
const cq = useContainerQuery({ sm: 300 });
const navigate = useNavigate();
return (
<ActionsContainer
ref={cq.ref}
gutter="sm"
>
<Grid.Col span={cq.isSm ? 7 : 5}>
<TextInput
disabled
readOnly
icon={<RiSearchLine />}
placeholder="Search"
size="md"
/>
</Grid.Col>
<Grid.Col span={cq.isSm ? 5 : 7}>
<Group
grow
noWrap
spacing="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
</ActionsContainer>
);
};

88
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -1,15 +1,13 @@
import { MouseEvent } from 'react';
import { Stack, Grid, Accordion, Center, Group, Divider, Box } from '@mantine/core';
import { Stack, Accordion, Center, Group, Divider, Box } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion } from 'framer-motion';
import { Button, DropdownMenu, MotionStack, Spinner, TextInput } from '/@/renderer/components';
import { Button, MotionStack, Spinner } from '/@/renderer/components';
import {
RiAddFill,
RiAlbumFill,
RiAlbumLine,
RiArrowDownSLine,
RiArrowLeftSLine,
RiArrowRightSLine,
RiDatabaseFill,
RiDatabaseLine,
RiDiscLine,
@ -18,14 +16,12 @@ import {
RiHome5Fill,
RiHome5Line,
RiListUnordered,
RiMenuFill,
RiMusic2Fill,
RiMusic2Line,
RiSearchLine,
RiUserVoiceFill,
RiUserVoiceLine,
} from 'react-icons/ri';
import { useNavigate, Link, useLocation } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
import { AppRoute } from '/@/renderer/router/routes';
@ -41,12 +37,17 @@ import { fadeIn } from '/@/renderer/styles';
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
import { Platform } from '/@/renderer/types';
import { useGeneralSettings } from '../../../store/settings.store';
const SidebarContainer = styled.div`
const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
height: 100%;
max-height: calc(100vh - 149px); // Playerbar (90px), titlebar (65px)
max-height: ${(props) =>
props.windowBarStyle === Platform.WEB
? 'calc(100vh - 149px)'
: 'calc(100vh - 179px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
user-select: none;
`;
@ -73,21 +74,11 @@ const SidebarImage = styled.img`
background: var(--placeholder-bg);
`;
const ActionsContainer = styled(Grid)`
height: 65px;
padding: 1rem;
-webkit-app-region: drag;
input {
-webkit-app-region: no-drag;
}
`;
export const Sidebar = () => {
const navigate = useNavigate();
const location = useLocation();
const sidebar = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { windowBarStyle } = useGeneralSettings();
const imageUrl = useCurrentSong()?.imageUrl;
const server = useCurrentServer();
@ -123,56 +114,11 @@ export const Sidebar = () => {
const cq = useContainerQuery({ sm: 300 });
return (
<SidebarContainer ref={cq.ref}>
<ActionsContainer gutter="sm">
<Grid.Col span={cq.isSm ? 7 : 5}>
<TextInput
disabled
readOnly
icon={<RiSearchLine />}
placeholder="Search"
size="md"
/>
</Grid.Col>
<Grid.Col span={cq.isSm ? 5 : 7}>
<Group
grow
noWrap
spacing="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
</ActionsContainer>
<SidebarContainer
ref={cq.ref}
windowBarStyle={windowBarStyle}
>
<ActionBar />
<Stack
h="100%"
justify="space-between"