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 = const topMargin =
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
? '-128px' ? '-130px'
: '-98px'; : '-100px';
const isTableHeaderInView = useInView(tableHeaderRef, { const isTableHeaderInView = useInView(tableHeaderRef, {
margin: `${topMargin} 0px 0px 0px`, margin: `${topMargin} 0px 0px 0px`,
@ -30,21 +30,12 @@ export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
const root = document.querySelector('main .ag-root'); const root = document.querySelector('main .ag-root');
if (!isTableHeaderInView && isTableInView) { if (!isTableHeaderInView && isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.add('window-frame');
}
header?.classList.add('ag-header-fixed'); header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin'); root?.classList.add('ag-header-fixed-margin');
} else if (!isTableInView) { } else if (!isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed'); header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin'); root?.classList.remove('ag-header-fixed-margin');
} else if (isTableHeaderInView) { } else if (isTableHeaderInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed'); header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin'); 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 type { ReactNode, Ref } from 'react';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import styled from 'styled-components'; import styles from './animated-page.module.scss';
interface AnimatedPageProps { interface AnimatedPageProps {
children: ReactNode; children: ReactNode;
} }
const StyledAnimatedPage = styled(motion.main)`
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
`;
const variants = { const variants = {
animate: { opacity: 1 }, animate: { opacity: 1 },
exit: { opacity: 0 }, exit: { opacity: 0 },
@ -25,16 +16,17 @@ const variants = {
export const AnimatedPage = forwardRef( export const AnimatedPage = forwardRef(
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => { ({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
return ( return (
<StyledAnimatedPage <motion.main
ref={ref} ref={ref}
animate="animate" animate="animate"
className={styles.animatedPage}
exit="exit" exit="exit"
initial="initial" initial="initial"
transition={{ duration: 0.3, ease: 'easeIn' }} transition={{ duration: 0.3, ease: 'easeIn' }}
variants={variants} variants={variants}
> >
{children} {children}
</StyledAnimatedPage> </motion.main>
); );
}, },
); );