antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix various issues

Browse source
This commit is contained in:
jeffvli 2022-12-29 18:50:57 -08:00
parent 46a23318af
commit be52f61fdb
5 changed files with 39 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,8 @@ import { useEffect, useRef } from 'react';
import styled from 'styled-components';
import { useShouldPadTitlebar } from '/@/renderer/hooks';
const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>`
const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string; position?: string }>`
position: ${(props) => props.position};
z-index: 100;
width: 100%;
height: ${(props) => props.height || '60px'};
@ -12,6 +13,7 @@ const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>
`;
const Header = styled(motion.div)<{ $padRight?: boolean }>`
z-index: 15;
height: 100%;
margin-right: ${(props) => props.$padRight && '170px'};
padding: 1rem;
@ -26,14 +28,41 @@ const Header = styled(motion.div)<{ $padRight?: boolean }>`
}
`;
// const BackgroundImage = styled.div<{ background: string }>`
// position: absolute;
// top: 0;
// z-index: -1;
// width: 100%;
// height: 100%;
// background: ${(props) => props.background};
// `;
// const BackgroundImageOverlay = styled.div`
// position: absolute;
// top: 0;
// left: 0;
// z-index: -1;
// width: 100%;
// height: 100%;
// /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */
// /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */
// `;
interface PageHeaderProps {
backgroundColor?: string;
children?: React.ReactNode;
height?: string;
position?: string;
useOpacity?: boolean;
}
export const PageHeader = ({ height, backgroundColor, useOpacity, children }: PageHeaderProps) => {
export const PageHeader = ({
position,
height,
backgroundColor,
useOpacity,
children,
}: PageHeaderProps) => {
const ref = useRef(null);
const padRight = useShouldPadTitlebar();
@ -51,8 +80,11 @@ export const PageHeader = ({ height, backgroundColor, useOpacity, children }: Pa
transition: { duration: 1.5 },
}}
height={height}
position={position}
>
<Header $padRight={padRight}>{children}</Header>
{/* <BackgroundImage background={backgroundColor} /> */}
{/* <BackgroundImageOverlay /> */}
</Container>
);
};