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

Add dedicated OS window bars (#22)

Browse source
This commit is contained in:
jeffvli 2023-03-28 23:59:51 -07:00
parent ececc394e2
commit 58c7370536
25 changed files with 823 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,8 @@ import { useMergedRef, useTimeout } from '@mantine/hooks';
import { motion, useScroll } from 'framer-motion';
import styled from 'styled-components';
import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/renderer/types';
interface ScrollAreaProps extends MantineScrollAreaProps {
children: React.ReactNode;
@ -26,16 +28,18 @@ const StyledScrollArea = styled(MantineScrollArea)`
}
`;
const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string }>`
const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
height: 100%;
overflow-y: overlay !important;
&::-webkit-scrollbar-track {
margin-top: ${(props) => props.scrollBarOffset || '65px'};
margin-top: ${(props) =>
props.windowBarStyle !== Platform.WEB ? '0px' : props.scrollBarOffset || '65px'};
}
&::-webkit-scrollbar-thumb {
margin-top: ${(props) => props.scrollBarOffset || '65px'};
margin-top: ${(props) =>
props.windowBarStyle !== Platform.WEB ? '0px' : props.scrollBarOffset || '65px'};
}
`;
@ -74,6 +78,7 @@ export const NativeScrollArea = forwardRef(
}: NativeScrollAreaProps,
ref: Ref<HTMLDivElement>,
) => {
const { windowBarStyle } = useGeneralSettings();
const [hideScrollbar, setHideScrollbar] = useState(false);
const [hideHeader, setHideHeader] = useState(true);
const { start, clear } = useTimeout(
@ -130,6 +135,7 @@ export const NativeScrollArea = forwardRef(
ref={mergedRef}
className={hideScrollbar ? 'hide-scrollbar' : undefined}
scrollBarOffset={scrollBarOffset}
windowBarStyle={windowBarStyle}
onMouseEnter={() => {
setHideScrollbar(false);
clear();

2
src/renderer/components/search-input/index.tsx
View file

@ -54,7 +54,7 @@ export const SearchInput = ({
padding: isOpened ? '10px' : 0,
},
}}
width={isOpened ? openedWidth || 150 : initialWidth || 50}
width={isOpened ? openedWidth || 150 : initialWidth || 35}
onChange={onChange}
onKeyDown={handleEscape}
/>

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

@ -1,12 +1,15 @@
import { useEffect, useRef } from 'react';
import { useInView } from 'framer-motion';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/renderer/types';
export const useFixedTableHeader = () => {
const intersectRef = useRef<HTMLDivElement | null>(null);
const tableContainerRef = useRef<HTMLDivElement | null>(null);
const { windowBarStyle } = useGeneralSettings();
const isNotPastTableIntersection = useInView(intersectRef, {
margin: '-68px 0px 0px 0px',
margin: windowBarStyle === Platform.WEB ? '-68px 0px 0px 0px' : '-98px 0px 0px 0px',
});
const tableInView = useInView(tableContainerRef, {
@ -18,13 +21,19 @@ export const useFixedTableHeader = () => {
const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) {
if (windowBarStyle !== Platform.WEB) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
} else {
if (windowBarStyle !== Platform.WEB) {
header?.classList.add('window-frame');
}
header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin');
}
}, [isNotPastTableIntersection, tableInView]);
}, [isNotPastTableIntersection, tableInView, windowBarStyle]);
return { intersectRef, tableContainerRef };
};