diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx index 40883d2b..16e822c5 100644 --- a/rsconcept/frontend/src/context/ThemeContext.tsx +++ b/rsconcept/frontend/src/context/ThemeContext.tsx @@ -27,6 +27,8 @@ interface IThemeContext { showScroll: boolean; setShowScroll: (value: boolean) => void; + + calculateHeight: (offset: string) => string; } const ThemeContext = createContext(null); @@ -78,12 +80,25 @@ export const ThemeState = ({ children }: ThemeStateProps) => { } }, [noNavigation]); + const calculateHeight = useCallback( + (offset: string) => { + if (noNavigation) { + return `calc(100vh - (${offset}))`; + } else if (noFooter) { + return `calc(100vh - 3rem - (${offset}))`; + } else { + return `calc(100vh - 6.75rem - (${offset}))`; + } + }, + [noNavigation, noFooter] + ); + const mainHeight = useMemo(() => { - return !noNavigation ? 'calc(100vh - 7rem - 2px)' : '100vh'; + return !noNavigation ? 'calc(100vh - 6.75rem)' : '100vh'; }, [noNavigation]); const viewportHeight = useMemo(() => { - return !noNavigation ? 'calc(100vh - 3rem - 2px)' : '100vh'; + return !noNavigation ? 'calc(100vh - 3rem)' : '100vh'; }, [noNavigation]); return ( @@ -100,7 +115,8 @@ export const ThemeState = ({ children }: ThemeStateProps) => { setNoFooter, setShowScroll, viewportHeight, - mainHeight + mainHeight, + calculateHeight }} > <> diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx index 6f507651..7d0f57b9 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx @@ -30,7 +30,7 @@ const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800; const columnHelper = createColumnHelper(); function RSTable({ items, enableSelection, selected, setSelected, onEdit, onCreateNew }: RSTableProps) { - const { colors, noNavigation } = useConceptTheme(); + const { colors, calculateHeight } = useConceptTheme(); const windowSize = useWindowSize(); const [columnVisibility, setColumnVisibility] = useState({}); @@ -115,9 +115,7 @@ function RSTable({ items, enableSelection, selected, setSelected, onEdit, onCrea [colors] ); - const tableHeight = useMemo(() => { - return !noNavigation ? 'calc(100vh - 7.2rem - 4px)' : 'calc(100vh - 4.4rem - 4px)'; - }, [noNavigation]); + const tableHeight = useMemo(() => calculateHeight('4.05rem + 5px'), [calculateHeight]); return ( (null); const { selections, actives, setSelections, onCanvasClick, onNodePointerOver, onNodePointerOut } = useSelection({ @@ -101,9 +101,7 @@ function TermGraph({ return 'calc(100vw - 1rem)'; }, []); - const canvasHeight = useMemo(() => { - return !noNavigation ? 'calc(100vh - 9.8rem - 4px)' : 'calc(100vh - 3rem - 4px)'; - }, [noNavigation]); + const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]); return (
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx index 876429de..63a82976 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx @@ -37,9 +37,9 @@ function RSTabs() { const version = Number(query.get('v')) ?? undefined; const cstQuery = query.get('active'); + const { setNoFooter, calculateHeight } = useConceptTheme(); const { schema, loading } = useRSForm(); const { destroyItem } = useLibrary(); - const { setNoFooter } = useConceptTheme(); const [isModified, setIsModified] = useState(false); useBlockNavigation(isModified); @@ -155,6 +155,8 @@ function RSTabs() { }); }, [schema, destroyItem, router]); + const panelHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]); + return ( - +