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

Improve semantic html of default layout and add ids

Browse source
This commit is contained in:
jeffvli 2023-01-06 14:49:41 -08:00
parent 3cf7127f56
commit f7b8e34905
3 changed files with 126 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
View file

@ -14,8 +14,8 @@ export const useFixedTableHeader = () => {
}); });
useEffect(() => { useEffect(() => {
const header = document.querySelector('.ag-header'); const header = document.querySelector('main .ag-header');
const root = document.querySelector('.ag-root'); const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) { if (isNotPastTableIntersection || !tableInView) {
header?.classList.remove('ag-header-fixed'); header?.classList.remove('ag-header-fixed');

2
src/renderer/features/shared/components/animated-page.tsx
View file

@ -7,7 +7,7 @@ interface AnimatedPageProps {
children: ReactNode; children: ReactNode;
} }
const StyledAnimatedPage = styled(motion.div)` const StyledAnimatedPage = styled(motion.main)`
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

245
src/renderer/layouts/default-layout.tsx
View file

@ -28,7 +28,7 @@ if (!isElectron()) {
const Layout = styled.div` const Layout = styled.div`
display: grid; display: grid;
grid-template-areas: grid-template-areas:
'main' 'main-content'
'player'; 'player';
grid-template-rows: calc(100vh - 85px) 85px; grid-template-rows: calc(100vh - 85px) 85px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -36,7 +36,7 @@ const Layout = styled.div`
height: 100%; height: 100%;
`; `;
const MainContainer = styled.main<{ const MainContentContainer = styled.div<{
leftSidebarWidth: string; leftSidebarWidth: string;
rightExpanded?: boolean; rightExpanded?: boolean;
rightSidebarWidth?: string; rightSidebarWidth?: string;
@ -44,7 +44,7 @@ const MainContainer = styled.main<{
}>` }>`
position: relative; position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')}; display: ${(props) => (props.shell ? 'flex' : 'grid')};
grid-area: main; grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar'; grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) => grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
@ -53,14 +53,14 @@ const MainContainer = styled.main<{
background: var(--main-bg); background: var(--main-bg);
`; `;
const SidebarContainer = styled.div` const SidebarContainer = styled.aside`
position: relative; position: relative;
grid-area: sidebar; grid-area: sidebar;
background: var(--sidebar-bg); background: var(--sidebar-bg);
border-right: var(--sidebar-border); border-right: var(--sidebar-border);
`; `;
const RightSidebarContainer = styled(motion.div)` const RightSidebarContainer = styled(motion.aside)`
position: relative; position: relative;
grid-area: right-sidebar; grid-area: right-sidebar;
height: 100%; height: 100%;
@ -253,125 +253,126 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
}, [throttledResize, stopResizing]); }, [throttledResize, stopResizing]);
return ( return (
<> <Layout id="default-layout">
<Layout> <MainContentContainer
<MainContainer id="main-content"
leftSidebarWidth={sidebar.leftWidth} leftSidebarWidth={sidebar.leftWidth}
rightExpanded={showSideQueue && sideQueueType === 'sideQueue'} rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
rightSidebarWidth={sidebar.rightWidth} rightSidebarWidth={sidebar.rightWidth}
shell={shell} shell={shell}
> >
{!shell && ( {!shell && (
<> <>
<SidebarContainer> <SidebarContainer id="sidebar">
<ResizeHandle <ResizeHandle
ref={sidebarRef} ref={sidebarRef}
isResizing={isResizing} isResizing={isResizing}
placement="right" placement="right"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
startResizing('left'); startResizing('left');
}} }}
/> />
<Sidebar /> <Sidebar />
</SidebarContainer> </SidebarContainer>
<AnimatePresence <AnimatePresence
initial={false} initial={false}
mode="wait" mode="wait"
> >
{isQueueDrawerButtonVisible && ( {isQueueDrawerButtonVisible && (
<QueueDrawerArea <QueueDrawerArea
key="queue-drawer-button" key="queue-drawer-button"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
initial="hidden" initial="hidden"
variants={queueDrawerButtonVariants} variants={queueDrawerButtonVariants}
whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }} whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
onMouseEnter={handleEnterDrawerButton} onMouseEnter={handleEnterDrawerButton}
onMouseLeave={handleLeaveDrawerButton} onMouseLeave={handleLeaveDrawerButton}
> >
<TbArrowBarLeft size={12} /> <TbArrowBarLeft size={12} />
</QueueDrawerArea> </QueueDrawerArea>
)} )}
{drawer && ( {drawer && (
<QueueDrawer <QueueDrawer
key="queue-drawer" key="queue-drawer"
animate="open" animate="open"
exit="closed" exit="closed"
initial="closed" initial="closed"
variants={queueDrawerVariants} variants={queueDrawerVariants}
onMouseLeave={() => { onMouseLeave={() => {
// The drawer will close due to the delay when setting isReorderingQueue // The drawer will close due to the delay when setting isReorderingQueue
setTimeout(() => { setTimeout(() => {
if (useAppStore.getState().isReorderingQueue) return; if (useAppStore.getState().isReorderingQueue) return;
drawerHandler.close(); drawerHandler.close();
}, 50); }, 50);
}} }}
> >
<DrawerPlayQueue /> <DrawerPlayQueue />
</QueueDrawer> </QueueDrawer>
)} )}
</AnimatePresence> </AnimatePresence>
<AnimatePresence <AnimatePresence
key="queue-sidebar" key="queue-sidebar"
presenceAffectsLayout presenceAffectsLayout
initial={false} initial={false}
mode="wait" mode="wait"
> >
{showSideQueue && ( {showSideQueue && (
<> <>
{sideQueueType === 'sideQueue' ? ( {sideQueueType === 'sideQueue' ? (
<RightSidebarContainer <RightSidebarContainer
key="queue-sidebar" key="queue-sidebar"
animate="open" animate="open"
exit="closed" exit="closed"
initial="closed" id="sidebar-queue"
variants={queueSidebarVariants} initial="closed"
> variants={queueSidebarVariants}
<ResizeHandle >
ref={rightSidebarRef} <ResizeHandle
isResizing={isResizingRight} ref={rightSidebarRef}
placement="left" isResizing={isResizingRight}
onMouseDown={(e) => { placement="left"
e.preventDefault(); onMouseDown={(e) => {
startResizing('right'); e.preventDefault();
}} startResizing('right');
/>
<SidebarPlayQueue />
</RightSidebarContainer>
) : (
<QueueDrawer
key="queue-drawer"
animate="open"
exit="closed"
initial="closed"
variants={queueDrawerVariants}
onMouseLeave={() => {
// The drawer will close due to the delay when setting isReorderingQueue
setTimeout(() => {
if (useAppStore.getState().isReorderingQueue) return;
drawerHandler.close();
}, 50);
}} }}
> />
<DrawerPlayQueue /> <SidebarPlayQueue />
</QueueDrawer> </RightSidebarContainer>
)} ) : (
</> <QueueDrawer
)} key="queue-drawer"
</AnimatePresence> animate="open"
</> exit="closed"
)} id="drawer-queue"
<Suspense fallback={<></>}> initial="closed"
<Outlet /> variants={queueDrawerVariants}
</Suspense> onMouseLeave={() => {
</MainContainer> // The drawer will close due to the delay when setting isReorderingQueue
<PlayerbarContainer> setTimeout(() => {
<Playerbar /> if (useAppStore.getState().isReorderingQueue) return;
</PlayerbarContainer> drawerHandler.close();
</Layout> }, 50);
</> }}
>
<DrawerPlayQueue />
</QueueDrawer>
)}
</>
)}
</AnimatePresence>
</>
)}
<Suspense fallback={<></>}>
<Outlet />
</Suspense>
</MainContentContainer>
<PlayerbarContainer id="player-bar">
<Playerbar />
</PlayerbarContainer>
</Layout>
); );
}; };