diff --git a/rsconcept/frontend/src/components/select/SelectGraphFilter.tsx b/rsconcept/frontend/src/components/select/SelectGraphFilter.tsx index 7f1c7308..bf8bb90b 100644 --- a/rsconcept/frontend/src/components/select/SelectGraphFilter.tsx +++ b/rsconcept/frontend/src/components/select/SelectGraphFilter.tsx @@ -15,10 +15,11 @@ import DropdownButton from '../ui/DropdownButton'; interface SelectGraphFilterProps { value: DependencyMode; + dense?: boolean; onChange: (value: DependencyMode) => void; } -function SelectGraphFilter({ value, onChange }: SelectGraphFilterProps) { +function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) { const menu = useDropdown(); const size = useWindowSize(); @@ -39,7 +40,7 @@ function SelectGraphFilter({ value, onChange }: SelectGraphFilterProps) { hideTitle={menu.isOpen} className='h-full pr-2' icon={DependencyIcon(value, '1rem', value !== DependencyMode.ALL ? 'icon-primary' : '')} - text={size.isSmall ? undefined : labelCstSource(value)} + text={dense || size.isSmall ? undefined : labelCstSource(value)} onClick={menu.toggle} /> @@ -49,13 +50,17 @@ function SelectGraphFilter({ value, onChange }: SelectGraphFilterProps) { const source = value as DependencyMode; return ( handleChange(source)} >
{DependencyIcon(source, '1rem')} - {labelCstSource(source)}: {describeCstSource(source)} + {!dense ? ( + + {labelCstSource(source)}: {describeCstSource(source)} + + ) : null}
); diff --git a/rsconcept/frontend/src/components/select/SelectMatchMode.tsx b/rsconcept/frontend/src/components/select/SelectMatchMode.tsx index fff4951f..5b07f7cc 100644 --- a/rsconcept/frontend/src/components/select/SelectMatchMode.tsx +++ b/rsconcept/frontend/src/components/select/SelectMatchMode.tsx @@ -15,10 +15,11 @@ import DropdownButton from '../ui/DropdownButton'; interface SelectMatchModeProps { value: CstMatchMode; + dense?: boolean; onChange: (value: CstMatchMode) => void; } -function SelectMatchMode({ value, onChange }: SelectMatchModeProps) { +function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) { const menu = useDropdown(); const size = useWindowSize(); @@ -38,7 +39,7 @@ function SelectMatchMode({ value, onChange }: SelectMatchModeProps) { hideTitle={menu.isOpen} className='h-full pr-2' icon={MatchModeIcon(value, '1rem', value !== CstMatchMode.ALL ? 'icon-primary' : '')} - text={size.isSmall ? undefined : labelCstMatchMode(value)} + text={dense || size.isSmall ? undefined : labelCstMatchMode(value)} onClick={menu.toggle} /> @@ -48,13 +49,17 @@ function SelectMatchMode({ value, onChange }: SelectMatchModeProps) { const matchMode = value as CstMatchMode; return ( handleChange(matchMode)} >
{MatchModeIcon(matchMode, '1rem')} - {labelCstMatchMode(matchMode)}: {describeCstMatchMode(matchMode)} + {!dense ? ( + + {labelCstMatchMode(matchMode)}: {describeCstMatchMode(matchMode)} + + ) : null}
); diff --git a/rsconcept/frontend/src/context/OptionsContext.tsx b/rsconcept/frontend/src/context/OptionsContext.tsx index d3827a0d..94efb0c4 100644 --- a/rsconcept/frontend/src/context/OptionsContext.tsx +++ b/rsconcept/frontend/src/context/OptionsContext.tsx @@ -38,7 +38,7 @@ interface IOptionsContext { showHelp: boolean; toggleShowHelp: () => void; - calculateHeight: (offset: string) => string; + calculateHeight: (offset: string, minimum?: string) => string; } const OptionsContext = createContext(null); @@ -96,13 +96,13 @@ export const OptionsState = ({ children }: OptionsStateProps) => { }, [noNavigation]); const calculateHeight = useCallback( - (offset: string) => { + (offset: string, minimum: string = '0px') => { if (noNavigation) { - return `calc(100vh - (${offset}))`; + return `max(calc(100vh - (${offset})), ${minimum})`; } else if (noFooter) { - return `calc(100vh - 3rem - (${offset}))`; + return `max(calc(100vh - 3rem - (${offset})), ${minimum})`; } else { - return `calc(100vh - 6.75rem - (${offset}))`; + return `max(calc(100vh - 6.75rem - (${offset})), ${minimum})`; } }, [noNavigation, noFooter] diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx index 73a65c00..f9335d36 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx @@ -4,6 +4,7 @@ import clsx from 'clsx'; import { AnimatePresence } from 'framer-motion'; import { useMemo, useState } from 'react'; +import { useConceptOptions } from '@/context/OptionsContext'; import useLocalStorage from '@/hooks/useLocalStorage'; import useWindowSize from '@/hooks/useWindowSize'; import { ConstituentaID, IConstituenta } from '@/models/rsform'; @@ -15,7 +16,7 @@ import ConstituentaToolbar from './ConstituentaToolbar'; import FormConstituenta from './FormConstituenta'; // Threshold window width to switch layout. -const SIDELIST_LAYOUT_THRESHOLD = 1100; // px +const SIDELIST_LAYOUT_THRESHOLD = 1000; // px interface EditorConstituentaProps { activeCst?: IConstituenta; @@ -27,6 +28,7 @@ interface EditorConstituentaProps { function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }: EditorConstituentaProps) { const controller = useRSEdit(); const windowSize = useWindowSize(); + const { calculateHeight } = useConceptOptions(); const [showList, setShowList] = useLocalStorage(storage.rseditShowList, true); const [toggleReset, setToggleReset] = useState(false); @@ -37,6 +39,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit } ); const isNarrow = useMemo(() => !!windowSize.width && windowSize.width <= SIDELIST_LAYOUT_THRESHOLD, [windowSize]); + const panelHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]); function handleInput(event: React.KeyboardEvent) { if (disabled) { @@ -76,7 +79,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit } } return ( - <> +
{controller.isContentEditable ? (
- + ); } diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx index b47b50c8..2d6fcbed 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx @@ -15,12 +15,13 @@ import { storage } from '@/utils/constants'; interface ConstituentsSearchProps { schema?: IRSForm; + dense?: boolean; activeID?: ConstituentaID; activeExpression: string; setFiltered: React.Dispatch>; } -function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }: ConstituentsSearchProps) { +function ConstituentsSearch({ schema, activeID, activeExpression, dense, setFiltered }: ConstituentsSearchProps) { const [filterMatch, setFilterMatch] = useLocalStorage(storage.cstFilterMatch, CstMatchMode.ALL); const [filterSource, setFilterSource] = useLocalStorage(storage.cstFilterGraph, DependencyMode.ALL); const [filterText, setFilterText] = useState(''); @@ -51,13 +52,13 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }: }, [filterText, setFiltered, filterSource, activeExpression, schema?.items, schema, filterMatch, activeID]); const selectGraph = useMemo( - () => setFilterSource(newValue)} />, - [filterSource, setFilterSource] + () => setFilterSource(newValue)} dense={dense} />, + [filterSource, setFilterSource, dense] ); const selectMatchMode = useMemo( - () => setFilterMatch(newValue)} />, - [filterMatch, setFilterMatch] + () => setFilterMatch(newValue)} dense={dense} />, + [filterMatch, setFilterMatch, dense] ); return ( diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx index 8cd5073c..ee6282c4 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx @@ -5,6 +5,7 @@ import { motion } from 'framer-motion'; import { useMemo, useState } from 'react'; import { useConceptOptions } from '@/context/OptionsContext'; +import useWindowSize from '@/hooks/useWindowSize'; import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform'; import { animateSideView } from '@/styling/animations'; @@ -14,6 +15,9 @@ import ConstituentsTable from './ConstituentsTable'; // Window width cutoff for expression show const COLUMN_EXPRESSION_HIDE_THRESHOLD = 1500; +// Window width cutoff for dense search bar +const COLUMN_DENSE_SEARCH_THRESHOLD = 1100; + interface ViewConstituentsProps { expression: string; isBottom?: boolean; @@ -24,13 +28,14 @@ interface ViewConstituentsProps { function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit }: ViewConstituentsProps) { const { calculateHeight } = useConceptOptions(); + const windowSize = useWindowSize(); const [filteredData, setFilteredData] = useState(schema?.items ?? []); const table = useMemo( () => (