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

Begin support for container queries with css modules

Browse source
This commit is contained in:
jeffvli 2023-07-23 05:18:08 -07:00
parent 84bec824f2
commit 0a13d047bb
3 changed files with 15 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,8 +10,8 @@ export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
const topMargin =
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
? '-128px'
: '-98px';
? '-130px'
: '-100px';
const isTableHeaderInView = useInView(tableHeaderRef, {
margin: `${topMargin} 0px 0px 0px`,
@ -30,21 +30,12 @@ export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
const root = document.querySelector('main .ag-root');
if (!isTableHeaderInView && isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.add('window-frame');
}
header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin');
} else if (!isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
} else if (isTableHeaderInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
}

9
src/renderer/features/shared/components/animated-page.module.scss Normal file
View file

@ -0,0 +1,9 @@
.animated-page {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}

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

@ -1,21 +1,12 @@
import type { ReactNode, Ref } from 'react';
import { forwardRef } from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
import styles from './animated-page.module.scss';
interface AnimatedPageProps {
children: ReactNode;
}
const StyledAnimatedPage = styled(motion.main)`
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
`;
const variants = {
animate: { opacity: 1 },
exit: { opacity: 0 },
@ -25,16 +16,17 @@ const variants = {
export const AnimatedPage = forwardRef(
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
return (
<StyledAnimatedPage
<motion.main
ref={ref}
animate="animate"
className={styles.animatedPage}
exit="exit"
initial="initial"
transition={{ duration: 0.3, ease: 'easeIn' }}
variants={variants}
>
{children}
</StyledAnimatedPage>
</motion.main>
);
},
);