farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-22 11:01:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

UX Changes: minor UI tweaks/adjustments and fixes for small screens

Browse Source
This commit is contained in:
vinodkiran
2023-11-14 20:13:24 +05:30
parent 7ef817bc99
commit 57b3113039
2 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/table/FlowListTable.js
+8 -12
View File
@@ -37,26 +37,20 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
const goToCanvas = (selectedChatflow) => {
navigate(`/canvas/${selectedChatflow.id}`)
}
let nodeCount = 0
return (
<>
<TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
<Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
<TableHead>
<TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
<StyledTableCell
component='th'
scope='row'
sx={{ fontSize: '1.1rem', fontWeight: 200 }}
style={{ width: '25%' }}
key='0'
>
<StyledTableCell component='th' scope='row' style={{ width: '25%' }} key='0'>
Name
</StyledTableCell>
<StyledTableCell style={{ width: '35%' }} key='1'>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '35%' }} key='1'>
Nodes (Showing first 5)
</StyledTableCell>
<StyledTableCell style={{ width: '30%' }} key='2'>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '30%' }} key='2'>
Last Modified Date
</StyledTableCell>
<StyledTableCell style={{ width: '10%' }} key='3'>
@@ -75,7 +69,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
</Typography>
</TableCell>
<TableCell key='1'>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='1'>
{images[row.id] && (
<div
style={{
@@ -114,7 +108,9 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
</div>
)}
</TableCell>
<TableCell key='2'>{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}</TableCell>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='2'>
{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}
</TableCell>
<TableCell key='3'>
<Button
variant='outlined'
packages/ui/src/views/chatflows/index.js
+20 -8
View File
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
// material-ui
import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, Typography, InputAdornment, TextField } from '@mui/material'
import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, InputAdornment, TextField } from '@mui/material'
import { useTheme } from '@mui/material/styles'
// project imports
@@ -123,14 +123,21 @@ const Chatflows = () => {
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='column'>
<Box sx={{ flexGrow: 1 }}>
<Toolbar style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<Typography edge='start' variant='h1' component='div' sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
Chatflows
</Typography>
<Box sx={{ flexGrow: 1 }} />
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>Chatflows</h1>
<TextField
size='small'
sx={{ width: 400 }}
sx={{ display: { xs: 'none', sm: 'block' }, marginLeft: 3 }}
variant='outlined'
placeholder='Search Chatflows'
onChange={onSearchChange}
@@ -144,7 +151,12 @@ const Chatflows = () => {
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
<ButtonGroup
sx={{ display: { xs: 'none', sm: 'block' } }}
disableElevation
variant='contained'
aria-label='outlined primary button group'
>
<ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
<ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
<ViewModuleIcon />