antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-03-02 20:27:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Move drag container to scrollarea component

Browse source
This commit is contained in:
jeffvli 2023-09-22 02:40:27 -07:00
parent 1a87adb728
commit 14f4649b93
2 changed files with 55 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -79,24 +79,6 @@ 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,
@ -125,40 +107,35 @@ export const PageHeader = ({
return (
<>
{windowBarStyle === Platform.WEB && <DragContainer />}
{!isHidden && (
<Container
ref={ref}
$height={height}
$position={position}
{...props}
<Container
ref={ref}
$height={height}
$position={position}
{...props}
>
<Header
$isDraggable={windowBarStyle === Platform.WEB}
$isHidden={isHidden}
$padRight={padRight}
>
<Header
$isDraggable={windowBarStyle === Platform.WEB}
$isHidden={isHidden}
$padRight={padRight}
>
<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>
)}
<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>
</>
);
};