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

Add drag container for web library headers (#206)

Browse source
This commit is contained in:
jeffvli 2023-09-21 18:46:47 -07:00
parent c4f9868a6b
commit fd7468a4fe
2 changed files with 56 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/renderer/components/page-header/index.tsx
View file

@ -79,6 +79,24 @@ const TitleWrapper = styled(motion.div)`
height: 100%;
`;
const DragContainer = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: calc(100% - 130px);
height: 65px;
-webkit-app-region: drag;
button {
-webkit-app-region: no-drag;
}
input {
-webkit-app-region: no-drag;
}
`;
const variants: Variants = {
animate: {
opacity: 1,
@ -106,34 +124,39 @@ export const PageHeader = ({
const theme = useTheme();
return (
<Container
ref={ref}
height={height}
position={position}
{...props}
>
<Header
$isDraggable={windowBarStyle === Platform.WEB}
$isHidden={isHidden}
$padRight={padRight}
>
<AnimatePresence initial={animated ?? false}>
<TitleWrapper
animate="animate"
exit="exit"
initial="initial"
variants={variants}
<>
{windowBarStyle === Platform.WEB && <DragContainer />}
{!isHidden && (
<Container
ref={ref}
height={height}
position={position}
{...props}
>
<Header
$isDraggable={windowBarStyle === Platform.WEB}
$isHidden={isHidden}
$padRight={padRight}
>
{children}
</TitleWrapper>
</AnimatePresence>
</Header>
{backgroundColor && (
<>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
</>
<AnimatePresence initial={animated ?? false}>
<TitleWrapper
animate="animate"
exit="exit"
initial="initial"
variants={variants}
>
{children}
</TitleWrapper>
</AnimatePresence>
</Header>
{backgroundColor && (
<>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
</>
)}
</Container>
)}
</Container>
</>
);
};

14
src/renderer/components/scroll-area/index.tsx
View file

@ -125,14 +125,12 @@ export const NativeScrollArea = forwardRef(
return (
<>
{shouldShowHeader && (
<PageHeader
animated
isHidden={false}
position="absolute"
{...pageHeaderProps}
/>
)}
<PageHeader
animated
isHidden={!shouldShowHeader}
position="absolute"
{...pageHeaderProps}
/>
<StyledNativeScrollArea
ref={mergedRef}
scrollBarOffset={scrollBarOffset}