vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add shell layout

Browse Source
This commit is contained in:
jeffvli
2022-10-30 20:21:55 -07:00
parent 895356701f
commit 1cdcde010c
1 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/layouts/default-layout.tsx
+46 -43
View File
@@ -1,6 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Menu, Button } from '@mantine/core';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Outlet } from 'react-router'; import { Outlet } from 'react-router';
import { SideQueue } from '@/renderer/features/side-queue/components/side-queue'; import { SideQueue } from '@/renderer/features/side-queue/components/side-queue';
@@ -74,18 +73,22 @@ const ResizeHandle = styled.div<{
bottom: ${(props) => props.placement === 'bottom' && 0}; bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0}; left: ${(props) => props.placement === 'left' && 0};
z-index: 100; z-index: 100;
width: 3px; width: 2px;
height: 100%; height: 100%;
background-color: var(--sidebar-handle-bg); background-color: var(--sidebar-handle-bg);
cursor: ew-resize; cursor: ew-resize;
opacity: ${(props) => (props.isResizing ? 1 : 0)}; opacity: ${(props) => (props.isResizing ? 1 : 0)};
&:hover { &:hover {
opacity: 1; opacity: 0.5;
} }
`; `;
export const DefaultLayout = () => { interface DefaultLayoutProps {
shell?: boolean;
}
export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
const sidebar = useAppStore((state) => state.sidebar); const sidebar = useAppStore((state) => state.sidebar);
const setSidebar = useAppStore((state) => state.setSidebar); const setSidebar = useAppStore((state) => state.setSidebar);
@@ -136,52 +139,48 @@ export const DefaultLayout = () => {
<Layout> <Layout>
<TitlebarContainer> <TitlebarContainer>
<Titlebar /> <Titlebar />
<Menu withinPortal>
<Menu.Target>
<Button />
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Hello</Menu.Item>
<Menu.Item>Hello</Menu.Item>
</Menu.Dropdown>
</Menu>
</TitlebarContainer> </TitlebarContainer>
<MainContainer <MainContainer
leftSidebarWidth={sidebar.leftWidth} leftSidebarWidth={sidebar.leftWidth}
rightExpanded={sidebar.rightExpanded} rightExpanded={sidebar.rightExpanded}
rightSidebarWidth={sidebar.rightWidth} rightSidebarWidth={sidebar.rightWidth}
> >
<SidebarContainer> {!shell && (
<ResizeHandle <>
ref={sidebarRef} <SidebarContainer>
isResizing={isResizing} <ResizeHandle
placement="right" ref={sidebarRef}
onMouseDown={(e) => { isResizing={isResizing}
e.preventDefault(); placement="right"
startResizing('left'); onMouseDown={(e) => {
}} e.preventDefault();
/> startResizing('left');
<Sidebar /> }}
</SidebarContainer> />
{sidebar.rightExpanded && ( <Sidebar />
<RightSidebarContainer </SidebarContainer>
key="sb" {sidebar.rightExpanded && (
animate={{ opacity: 1, scale: 1, x: 0 }} <RightSidebarContainer
initial={{ opacity: 0, x: 500 }} key="sb"
transition={{ duration: 0.3, ease: 'circOut' }} animate={{ opacity: 1, scale: 1, x: 0 }}
> initial={{ opacity: 0, x: 500 }}
<ResizeHandle transition={{ duration: 0.3, ease: 'circOut' }}
ref={rightSidebarRef} >
isResizing={isResizingRight} <ResizeHandle
placement="left" ref={rightSidebarRef}
onMouseDown={(e) => { isResizing={isResizingRight}
e.preventDefault(); placement="left"
startResizing('right'); onMouseDown={(e) => {
}} e.preventDefault();
/> startResizing('right');
<SideQueue /> }}
</RightSidebarContainer> />
<SideQueue />
</RightSidebarContainer>
)}
</>
)} )}
<Outlet /> <Outlet />
</MainContainer> </MainContainer>
<PlayerbarContainer> <PlayerbarContainer>
@@ -191,3 +190,7 @@ export const DefaultLayout = () => {
</> </>
); );
}; };
DefaultLayout.defaultProps = {
shell: false,
};