farmcontrol/farmcontrol-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added scroll box for custom scroll bars.

Browse Source
This commit is contained in:
Tom Butcher 2025-11-30 00:13:52 +00:00
parent 97f0c816ad
commit d5d0040871
20 changed files with 77 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
View File

@ -18,6 +18,7 @@ import NoteIcon from '../../../Icons/NoteIcon'
import AuditLogIcon from '../../../Icons/AuditLogIcon'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder'
import DocumentPrintButton from '../../common/DocumentPrintButton'
import ScrollBox from '../../common/ScrollBox'
const FilamentStockInfo = () => {
const location = useLocation()
@ -117,7 +118,7 @@ const FilamentStockInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -199,7 +200,7 @@ const FilamentStockInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
View File

@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('DocumentJobInfo')
log.setLevel(config.logLevel)
@ -120,7 +121,7 @@ const DocumentJobInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -186,7 +187,7 @@ const DocumentJobInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
View File

@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('DocumentPrinterInfo')
log.setLevel(config.logLevel)
@ -129,7 +130,7 @@ const DocumentPrinterInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -199,7 +200,7 @@ const DocumentPrinterInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
View File

@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('DocumentSizeInfo')
log.setLevel(config.logLevel)
@ -120,7 +121,7 @@ const DocumentSizeInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -186,7 +187,7 @@ const DocumentSizeInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
View File

@ -13,6 +13,7 @@ import EditButtons from '../../common/EditButtons.jsx'
import LockIndicator from '../../common/LockIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
import TemplateEditor from '../../common/TemplateEditor.jsx'
@ -122,7 +123,7 @@ const DocumentTemplateDesign = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -164,7 +165,7 @@ const DocumentTemplateDesign = () => {
</Card>
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
)
}

5
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
View File

@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('DocumentTemplateInfo')
log.setLevel(config.logLevel)
@ -126,7 +127,7 @@ const DocumentTemplateInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -201,7 +202,7 @@ const DocumentTemplateInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
View File

@ -21,6 +21,7 @@ import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import FilamentIcon from '../../../Icons/FilamentIcon.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('FilamentInfo')
log.setLevel(config.logLevel)
@ -126,7 +127,7 @@ const FilamentInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -218,7 +219,7 @@ const FilamentInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Files/FileInfo.jsx
View File

@ -23,6 +23,7 @@ import FileIcon from '../../../Icons/FileIcon.jsx'
import FilePreview from '../../common/FilePreview.jsx'
import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
import { ApiServerContext } from '../../context/ApiServerContext.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('FileInfo')
log.setLevel(config.logLevel)
@ -130,7 +131,7 @@ const FileInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -214,7 +215,7 @@ const FileInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Hosts/HostInfo.jsx
View File

@ -23,6 +23,7 @@ import HostOTP from './HostOtp.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
import DocumentPrinterIcon from '../../../Icons/DocumentPrinterIcon.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('HostInfo')
log.setLevel(config.logLevel)
@ -132,7 +133,7 @@ const HostInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -245,7 +246,7 @@ const HostInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
<Modal

5
src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
View File

@ -16,6 +16,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const NoteTypeInfo = () => {
const location = useLocation()
@ -109,7 +110,7 @@ const NoteTypeInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -164,7 +165,7 @@ const NoteTypeInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Notes/NoteInfo.jsx
View File

@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('NoteInfo')
log.setLevel(config.logLevel)
@ -118,7 +119,7 @@ const NoteInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -183,7 +184,7 @@ const NoteInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Parts/PartInfo.jsx
View File

@ -17,6 +17,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const PartInfo = () => {
const location = useLocation()
@ -109,7 +110,7 @@ const PartInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -174,7 +175,7 @@ const PartInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Products/ProductInfo.jsx
View File

@ -18,6 +18,7 @@ import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const ProductInfo = () => {
const location = useLocation()
@ -111,7 +112,7 @@ const ProductInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -192,7 +193,7 @@ const ProductInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Users/UserInfo.jsx
View File

@ -18,6 +18,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const UserInfo = () => {
const location = useLocation()
@ -110,7 +111,7 @@ const UserInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -176,7 +177,7 @@ const UserInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Management/Vendors/VendorInfo.jsx
View File

@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('VendorInfo')
log.setLevel(config.logLevel)
@ -118,7 +119,7 @@ const VendorInfo = () => {
/>
</Space>
</Flex>
<div style={{ height: '100%', overflow: 'auto' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -183,7 +184,7 @@ const VendorInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
View File

@ -23,6 +23,7 @@ import EyeIcon from '../../../Icons/EyeIcon.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
import FilePreview from '../../common/FilePreview.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('GCodeFileInfo')
log.setLevel(config.logLevel)
@ -128,7 +129,7 @@ const GCodeFileInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -224,7 +225,7 @@ const GCodeFileInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

5
src/components/Dashboard/Production/Jobs/JobInfo.jsx
View File

@ -22,6 +22,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import JobIcon from '../../../Icons/JobIcon.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import DeployJob from './DeployJob.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('JobInfo')
log.setLevel(config.logLevel)
@ -132,7 +133,7 @@ const JobInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -214,7 +215,7 @@ const JobInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
<Modal
destroyOnHidden

5
src/components/Dashboard/Production/Printers/ControlPrinter.jsx
View File

@ -30,6 +30,7 @@ import { ApiServerContext } from '../../context/ApiServerContext.jsx'
import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('ControlPrinter')
log.setLevel(config.logLevel)
@ -263,7 +264,7 @@ const ControlPrinter = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -486,7 +487,7 @@ const ControlPrinter = () => {
</Card>
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
<Modal
open={loadFilamentStockOpen}

5
src/components/Dashboard/Production/Printers/PrinterInfo.jsx
View File

@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('PrinterInfo')
log.setLevel(config.logLevel)
@ -122,7 +123,7 @@ const PrinterInfo = () => {
</Space>
</Flex>
<div style={{ height: '100%', overflowY: 'scroll' }}>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
@ -202,7 +203,7 @@ const PrinterInfo = () => {
)}
</InfoCollapse>
</Flex>
</div>
</ScrollBox>
</Flex>
</>
)

20
src/components/Dashboard/common/ScrollBox.jsx Normal file
View File

@ -0,0 +1,20 @@
import PropTypes from 'prop-types'
import SimpleBar from 'simplebar-react'
import 'simplebar-react/dist/simplebar.min.css'
const ScrollBox = ({ children, style, ...rest }) => {
return (
<div style={{ height: '100%', minHeight: '0' }}>
<SimpleBar style={{ height: '100%', ...style }} {...rest}>
{children}
</SimpleBar>
</div>
)
}
ScrollBox.propTypes = {
children: PropTypes.node,
style: PropTypes.object
}
export default ScrollBox