mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 15:00:57 +03:00
UI Improvements (#1935)
* Update styles for dashboard page * Fix grid in chatflows and marketplaces pages * Update styles for main routes * Create ViewHeader component and use it in chatflows and marketplace * Use viewheader in all main routes views and make the styles consistent * Update table styles for chatflow and marketplace views * Update table and grid styles in all main routes views * Make backgrounds, borders, and colors everywhere * Apply text ellipsis for titles in cards and tables * Update credentials list dialog styles * Update tools dialog styles * Update styles for inputs and dialogs * Show skeleton loaders for main routes * Apply text ellipsis to chatflow title in canvas page * Update icons for load and export buttons in tools and assistants * Fix issue where table header is shown when number of elements is zero * Add error boundary component to main routes * Capture errors from all requests in main routes * Fix id for add api key and add variable buttons * Fix missing th tag in variables table body
This commit is contained in:
Ilango
@@ -44,6 +44,7 @@ const NavGroup = ({ item }) => {
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
sx={{ py: '20px' }}
|
||||
>
|
||||
{items}
|
||||
</List>
|
||||
|
||||
@@ -11,7 +11,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
|
||||
// project imports
|
||||
import MenuList from './MenuList'
|
||||
import LogoSection from '../LogoSection'
|
||||
import { drawerWidth } from '@/store/constant'
|
||||
import { drawerWidth, headerHeight } from '@/store/constant'
|
||||
|
||||
// ==============================|| SIDEBAR DRAWER ||============================== //
|
||||
|
||||
@@ -21,7 +21,12 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
|
||||
|
||||
const drawer = (
|
||||
<>
|
||||
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
height: '80px'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
|
||||
<LogoSection />
|
||||
</Box>
|
||||
@@ -30,7 +35,7 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
|
||||
<PerfectScrollbar
|
||||
component='div'
|
||||
style={{
|
||||
height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
|
||||
height: !matchUpMd ? 'calc(100vh - 56px)' : `calc(100vh - ${headerHeight}px)`,
|
||||
paddingLeft: '16px',
|
||||
paddingRight: '16px'
|
||||
}}
|
||||
@@ -49,7 +54,14 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
|
||||
const container = window !== undefined ? () => window.document.body : undefined
|
||||
|
||||
return (
|
||||
<Box component='nav' sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label='mailbox folders'>
|
||||
<Box
|
||||
component='nav'
|
||||
sx={{
|
||||
flexShrink: { md: 0 },
|
||||
width: matchUpMd ? drawerWidth : 'auto'
|
||||
}}
|
||||
aria-label='mailbox folders'
|
||||
>
|
||||
<Drawer
|
||||
container={container}
|
||||
variant={matchUpMd ? 'persistent' : 'temporary'}
|
||||
@@ -61,10 +73,11 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
|
||||
width: drawerWidth,
|
||||
background: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
borderRight: 'none',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
top: '66px'
|
||||
}
|
||||
top: `${headerHeight}px`
|
||||
},
|
||||
borderRight: drawerOpen ? '1px solid' : 'none',
|
||||
borderColor: drawerOpen ? theme.palette.primary[200] + 75 : 'transparent'
|
||||
}
|
||||
}}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
// material-ui
|
||||
import { Box, OutlinedInput, Toolbar, Typography } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// icons
|
||||
import { IconSearch } from '@tabler/icons'
|
||||
|
||||
const ViewHeader = ({ children, filters = null, onSearchChange, search, searchPlaceholder = 'Search', title }) => {
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1, py: 1.25, width: '100%' }}>
|
||||
<Toolbar
|
||||
disableGutters={true}
|
||||
sx={{
|
||||
p: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 600
|
||||
}}
|
||||
variant='h1'
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Box sx={{ height: 40, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{search && (
|
||||
<OutlinedInput
|
||||
size='small'
|
||||
sx={{
|
||||
width: '280px',
|
||||
height: '100%',
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
borderRadius: 2,
|
||||
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderRadius: 2
|
||||
}
|
||||
}}
|
||||
variant='outlined'
|
||||
placeholder={searchPlaceholder}
|
||||
onChange={onSearchChange}
|
||||
startAdornment={
|
||||
<Box
|
||||
sx={{
|
||||
color: theme.palette.grey[400],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
mr: 1
|
||||
}}
|
||||
>
|
||||
<IconSearch style={{ color: 'inherit', width: 16, height: 16 }} />
|
||||
</Box>
|
||||
}
|
||||
type='search'
|
||||
/>
|
||||
)}
|
||||
{filters}
|
||||
{children}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
ViewHeader.propTypes = {
|
||||
children: PropTypes.node,
|
||||
filters: PropTypes.node,
|
||||
onSearchChange: PropTypes.func,
|
||||
search: PropTypes.bool,
|
||||
searchPlaceholder: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
}
|
||||
|
||||
export default ViewHeader
|
||||
@@ -9,21 +9,23 @@ import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
|
||||
// project imports
|
||||
import Header from './Header'
|
||||
import Sidebar from './Sidebar'
|
||||
import { drawerWidth } from '@/store/constant'
|
||||
import { drawerWidth, headerHeight } from '@/store/constant'
|
||||
import { SET_MENU } from '@/store/actions'
|
||||
|
||||
// styles
|
||||
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
|
||||
...theme.typography.mainContent,
|
||||
...(!open && {
|
||||
backgroundColor: 'transparent',
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
transition: theme.transitions.create('margin', {
|
||||
transition: theme.transitions.create('all', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
}),
|
||||
marginRight: 0,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginLeft: -(drawerWidth - 20),
|
||||
marginLeft: -drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`
|
||||
},
|
||||
[theme.breakpoints.down('md')]: {
|
||||
@@ -39,20 +41,16 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
|
||||
}
|
||||
}),
|
||||
...(open && {
|
||||
transition: theme.transitions.create('margin', {
|
||||
backgroundColor: 'transparent',
|
||||
transition: theme.transitions.create('all', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen
|
||||
}),
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
[theme.breakpoints.down('md')]: {
|
||||
marginLeft: '20px'
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: '10px'
|
||||
}
|
||||
width: `calc(100% - ${drawerWidth}px)`
|
||||
})
|
||||
}))
|
||||
|
||||
@@ -88,7 +86,7 @@ const MainLayout = () => {
|
||||
transition: leftDrawerOpened ? theme.transitions.create('width') : 'none'
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
<Toolbar sx={{ height: `${headerHeight}px`, borderBottom: '1px solid', borderColor: theme.palette.primary[200] + 75 }}>
|
||||
<Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
Reference in New Issue
Block a user