Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make changes to datagrid #537

Merged
merged 9 commits into from
Sep 11, 2024
Merged

Make changes to datagrid #537

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b336d5a
Change Button name to 'Errors report'
guergana Sep 3, 2024
a8e40a4
Change styling of datagrid metadata bar
guergana Sep 3, 2024
8edce4a
Make style changes to datagrid
guergana Sep 3, 2024
d37a2a9
Change red color to OKFN theme color
guergana Sep 7, 2024
f9c85e8
Remove tooltips from action buttons
guergana Sep 7, 2024
31d6fa4
Make panel fixed to bottom of the page (kind of)
guergana Sep 7, 2024
c282336
Add separation between buttons
guergana Sep 7, 2024
3b8562a
Bind table resize event to table changes and not to window
guergana Sep 8, 2024
4641443
Update red color
guergana Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 48 additions & 23 deletions client/components/Controllers/Table/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import * as menu from '../../Parts/Bars/Menu'
import * as store from '@client/store'
import Box from '@mui/material/Box'
import * as action from '../../Parts/Bars/Action'

export default function Menu() {
const panel = store.useStore((state) => state.panel)
Expand All @@ -8,30 +10,53 @@ export default function Menu() {
const source = store.useStore((state) => state.source)
const undoneHistory = store.useStore((state) => state.table?.undoneHistory)

const isTableUpdated = store.useStore(store.getIsTableOrResourceUpdated)

return (
<menu.MenuBar>
<menu.MetadataButton
active={panel === 'metadata'}
onClick={() => store.togglePanel('metadata')}
/>
<menu.ReportButton
disabled={!report || report?.valid}
active={panel === 'report'}
onClick={() => store.togglePanel('report')}
/>
<menu.SourceButton
disabled={!source?.text}
active={panel === 'source'}
onClick={() => store.togglePanel('source')}
/>
<menu.UndoButton
onClick={store.undoTableChange}
disabled={!history?.changes.length}
/>
<menu.RedoButton
onClick={store.redoTableChange}
disabled={!undoneHistory?.changes.length}
/>
<menu.MenuBar fullWidth>
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
}}
>
<menu.MetadataButton
active={panel === 'metadata'}
onClick={() => store.togglePanel('metadata')}
color="OKFNCoolGray"
/>
<menu.ReportButton
disabled={!report || report?.valid}
active={panel === 'report'}
onClick={() => store.togglePanel('report')}
color="OKFNCoolGray"
/>
<menu.SourceButton
disabled={!source?.text}
active={panel === 'source'}
onClick={() => store.togglePanel('source')}
color="OKFNCoolGray"
/>
<menu.UndoButton
onClick={store.undoTableChange}
disabled={!history?.changes.length}
color="OKFNCoolGray"
/>
<menu.RedoButton
onClick={store.redoTableChange}
disabled={!undoneHistory?.changes.length}
color="OKFNCoolGray"
/>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'row' }}>
<action.PublishButton
disabled={isTableUpdated}
onClick={() => store.openDialog('publish')}
/>
<action.SaveButton updated={isTableUpdated} onClick={store.saveTable} />
</Box>
</Box>
</menu.MenuBar>
)
}
4 changes: 1 addition & 3 deletions client/components/Controllers/Table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import Box from '@mui/material/Box'
import ScrollBox from '../../Parts/Boxes/Scroll'
import { useTheme } from '@mui/material/styles'
import Action from './Action'
import Editor from './Editor'
import Menu from './Menu'
import Panel from './Panel'

export default function Table() {
const theme = useTheme()
const contentHeight = `calc(100vh - ${theme.spacing(8 + 8)})`
const contentHeight = `calc(100vh - ${theme.spacing(8)})`

return (
<Box sx={{ height: '100%', width: '100%' }}>
Expand All @@ -17,7 +16,6 @@ export default function Table() {
<Editor />
</ScrollBox>
<Panel />
<Action />
</Box>
)
}
18 changes: 11 additions & 7 deletions client/components/Parts/Bars/Action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import * as React from 'react'
import noop from 'lodash/noop'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import IosShareIcon from '@mui/icons-material/IosShare'
import SaveAltIcon from '@mui/icons-material/SaveAlt'
import CheckIcon from '@mui/icons-material/Check'
import HistoryIcon from '@mui/icons-material/History'
import IconButton from '../../Parts/Buttons/Icon'
import Columns from '../Grids/Columns'
import LightTooltip from '../Tooltips/Light'
import { useKeyPress } from 'ahooks'
import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'

export interface ActionBarProps {}

Expand Down Expand Up @@ -50,12 +50,14 @@ export function SaveAsButton(props: ButtonProps) {
<LightTooltip title={title}>
<Box>
<IconButton
label={props.label || 'Save As'}
label={props.label || 'Save Changes'}
Icon={SaveAltIcon}
variant="outlined"
disabled={props.disabled}
onClick={() => onClick()}
sx={{ backgroundColor: 'white' }}
sx={{ backgroundColor: 'white', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
borderColor: (theme) => theme.palette.OKFNCoolGray.main
} }}
/>
</Box>
</LightTooltip>
Expand All @@ -77,11 +79,13 @@ export function PublishButton(props: ButtonProps) {
<Box>
<IconButton
label={props.label || 'Publish'}
Icon={IosShareIcon}
Icon={ElectricBoltIcon}
variant="outlined"
disabled={props.disabled}
onClick={() => onClick()}
sx={{ backgroundColor: 'white' }}
sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
borderColor: (theme) => theme.palette.OKFNCoolGray.main
} }}
/>
</Box>
</LightTooltip>
Expand Down Expand Up @@ -129,12 +133,12 @@ export function SaveButton(props: ButtonProps) {
<LightTooltip title={title}>
<Box>
<IconButton
label={props.label || 'Save'}
label={props.label || 'Save changes'}
Icon={CheckIcon}
variant={props.updated ? 'contained' : 'outlined'}
disabled={!props.updated}
onClick={() => onClick()}
sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
/>
</Box>
</LightTooltip>
Expand Down
36 changes: 30 additions & 6 deletions client/components/Parts/Bars/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function MenuBar(props: React.PropsWithChildren<MenuBarProps>) {
return (
<Toolbar
disableGutters
sx={{ borderBottom: 'solid 1px #ddd', backgroundColor: '#fafafa', paddingX: 2 }}
sx={{ borderBottom: 'solid 1px #ddd', backgroundColor: '#fafafa', paddingX: 2}}
>
<MenuBarItems {...props} />
</Toolbar>
Expand All @@ -43,7 +43,7 @@ function MenuBarItems(props: React.PropsWithChildren<MenuBarProps>) {

export interface ButtonProps {
label?: string
color?: 'success' | 'warning' | 'error' | 'info'
color?: 'success' | 'warning' | 'error' | 'info' | 'OKFNCoolGray'
active?: boolean
enabled?: boolean
disabled?: boolean
Expand All @@ -66,10 +66,14 @@ export function MetadataButton(props: ButtonProps) {
variant="text"
label={props.label || 'Metadata'}
Icon={TuneIcon}
color={props.color || props.active ? 'warning' : undefined}
color={props.color || props.active ? 'OKFNCoolGray' : undefined}
disabled={props.disabled || props.enabled}
onClick={() => onClick()}
sx={{
'& .MuiTypography-root': {
fontSize: '16px',
fontWeight: '600'
},
'&.Mui-disabled': {
color: props.enabled ? theme.palette.info.main : undefined,
},
Expand All @@ -93,12 +97,16 @@ export function ReportButton(props: ButtonProps) {
<IconButton
small
variant="text"
label={props.label || 'Report'}
label={props.label || 'Errors Report'}
Icon={RuleIcon}
color={props.color || props.active ? 'warning' : undefined}
color={props.color || props.active ? 'OKFNCoolGray' : undefined}
disabled={props.disabled || props.enabled}
onClick={() => onClick()}
sx={{
'& .MuiTypography-root': {
fontSize: '16px',
fontWeight: '600'
},
'&.Mui-disabled': {
color: props.enabled ? theme.palette.info.main : undefined,
},
Expand All @@ -124,10 +132,14 @@ export function SourceButton(props: ButtonProps) {
variant="text"
label={props.label || 'Source'}
Icon={CodeIcon}
color={props.color || props.active ? 'warning' : undefined}
color={props.color || props.active ? 'OKFNCoolGray' : undefined}
disabled={props.disabled || props.enabled}
onClick={() => onClick()}
sx={{
'& .MuiTypography-root': {
fontSize: '16px',
fontWeight: '600'
},
'&.Mui-disabled': {
color: props.enabled ? theme.palette.info.main : undefined,
},
Expand Down Expand Up @@ -178,6 +190,12 @@ export function UndoButton(props: ButtonProps) {
color={props.color}
disabled={props.disabled}
onClick={() => onClick()}
sx={{
'& .MuiTypography-root': {
fontSize: '16px',
fontWeight: '600'
},
}}
/>
</Box>
)
Expand All @@ -201,6 +219,12 @@ export function RedoButton(props: ButtonProps) {
color={props.color}
disabled={props.disabled}
onClick={() => onClick()}
sx={{
'& .MuiTypography-root': {
fontSize: '16px',
fontWeight: '600'
}
}}
/>
</Box>
)
Expand Down
Loading