Skip to content

Commit 441e29f

Browse files
nielsdejongnielsdejong
authored
Improved styling of dashboard header buttons, download CSV button (#729)
1 parent 2dd0330 commit 441e29f

File tree

6 files changed

+38
-47
lines changed

6 files changed

+38
-47
lines changed

‎src/chart/table/TableChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ export const NeoTableChart = (props: ChartProps) => {
243243
downloadCSV(rows);
244244
}}
245245
aria-label='download csv'
246-
className='n-absolute n-z-10 n-bottom-4 n-left-1'
246+
className='n-absolute n-z-10 n-bottom-7 n-left-1'
247247
clean
248248
>
249249
<CloudArrowDownIconOutline />

‎src/dashboard/header/DashboardTitle.tsx‎

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -124,34 +124,10 @@ export const NeoDashboardTitle = ({
124124
{/* If the app is not running in standalone mode (i.e. in edit mode) always show dashboard settings. */}
125125
{!standaloneSettings.standalone ? (
126126
<div className='flex flex-row flex-wrap items-center gap-2'>
127-
{editable ? renderExtensionsButtons() : <></>}
127+
<NeoSettingsModal dashboardSettings={dashboardSettings} updateDashboardSetting={updateDashboardSetting} />
128+
{editable ? <NeoExportModal /> : <></>}
128129
{editable ? <NeoExtensionsModal closeMenu={handleSettingsMenuClose} /> : <></>}
129-
<IconButton aria-label='Dashboard actions' onClick={handleSettingsMenuOpen}>
130-
<EllipsisHorizontalIconOutline />
131-
</IconButton>
132-
<Menu
133-
anchorOrigin={{
134-
horizontal: 'right',
135-
vertical: 'bottom',
136-
}}
137-
transformOrigin={{
138-
horizontal: 'right',
139-
vertical: 'top',
140-
}}
141-
anchorEl={anchorEl}
142-
open={menuOpen}
143-
onClose={handleSettingsMenuClose}
144-
size='large'
145-
>
146-
<MenuItems>
147-
<NeoSettingsModal
148-
dashboardSettings={dashboardSettings}
149-
updateDashboardSetting={updateDashboardSetting}
150-
></NeoSettingsModal>
151-
152-
<NeoExportModal />
153-
</MenuItems>
154-
</Menu>
130+
{editable ? renderExtensionsButtons() : <></>}
155131
</div>
156132
) : (
157133
<></>

‎src/extensions/ExtensionsModal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { Tooltip } from '@mui/material';
32
import { EXTENSIONS } from './ExtensionConfig';
43
import { connect } from 'react-redux';
54
import { createNotificationThunk } from '../page/PageThunks';
@@ -9,6 +8,7 @@ import { setExtensionReducerEnabled } from './state/ExtensionActions';
98
import { Dialog, Label, MenuItem, TextLink, Typography, Checkbox, IconButton } from '@neo4j-ndl/react';
109
import { PuzzlePieceIconSolid } from '@neo4j-ndl/react/icons';
1110
import { Section, SectionContent } from '../modal/ModalUtils';
11+
import Tooltip from '@mui/material/Tooltip/Tooltip';
1212

1313
const NeoExtensionsModal = ({
1414
extensions,
@@ -30,9 +30,11 @@ const NeoExtensionsModal = ({
3030

3131
return (
3232
<>
33-
<IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
34-
<PuzzlePieceIconSolid />
35-
</IconButton>
33+
<Tooltip title='Extensions' aria-label='extensions' disableInteractive>
34+
<IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
35+
<PuzzlePieceIconSolid />
36+
</IconButton>
37+
</Tooltip>
3638

3739
{open ? (
3840
<Dialog size='large' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>

‎src/extensions/text2cypher/component/QueryTranslatorButton.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@ import { IconButton, MenuItem } from '@neo4j-ndl/react';
44
import QueryTranslatorSettingsModal from './QueryTranslatorSettingsModal';
55
import { ExclamationTriangleIconSolid, LanguageIconSolid } from '@neo4j-ndl/react/icons';
66
import { getModelProvider } from '../state/QueryTranslatorSelector';
7+
import Tooltip from '@mui/material/Tooltip/Tooltip';
78

89
const QueryTranslatorButton = (active) => {
910
const [open, setOpen] = React.useState(false);
1011
const button = (
11-
<IconButton className='n-mx-1' aria-label='Text2Cypher' onClick={() => setOpen(true)}>
12-
<LanguageIconSolid />
13-
{active.active == '' || active.active == undefined ? (
14-
<ExclamationTriangleIconSolid color='red' className='-n-mt-1 n-ml-3 n-w-4/5'></ExclamationTriangleIconSolid>
15-
) : (
16-
<></>
17-
)}
18-
</IconButton>
12+
<Tooltip title='Text2Cypher' aria-label='text2cypher' disableInteractive>
13+
<IconButton className='n-mx-1' aria-label='Text2Cypher' onClick={() => setOpen(true)}>
14+
<LanguageIconSolid />
15+
{active.active == '' || active.active == undefined ? (
16+
<ExclamationTriangleIconSolid color='red' className='-n-mt-1 n-ml-3 n-w-4/5'></ExclamationTriangleIconSolid>
17+
) : (
18+
<></>
19+
)}
20+
</IconButton>
21+
</Tooltip>
1922
);
2023

2124
const component = (

‎src/modal/ExportModal.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
import React from 'react';
22
import { connect } from 'react-redux';
3-
import { MenuItem } from '@neo4j-ndl/react';
3+
import { IconButton, MenuItem } from '@neo4j-ndl/react';
44
import NeoDashboardSidebarExportModal from '../dashboard/sidebar/modal/DashboardSidebarExportModal';
55
import { getDashboardJson } from './ModalSelectors';
6-
import { DocumentTextIconOutline } from '@neo4j-ndl/react/icons';
6+
import { DocumentArrowDownIconOutline, DocumentTextIconOutline } from '@neo4j-ndl/react/icons';
7+
import Tooltip from '@mui/material/Tooltip/Tooltip';
78
/**
89
* A modal to save a dashboard as a JSON text string.
910
* The button to open the modal is intended to use in a drawer at the side of the page.
1011
*/
1112
export const NeoExportModal = ({ dashboard }) => {
1213
const [open, setOpen] = React.useState(false);
1314
return (
14-
<div>
15-
<MenuItem onClick={() => setOpen(true)} icon={<DocumentTextIconOutline />} title='Export' />
15+
<>
16+
<Tooltip title='Export' aria-label='export' disableInteractive>
17+
<IconButton className='n-mx-1' onClick={() => setOpen(true)} aria-label='Export' title='Export'>
18+
<DocumentArrowDownIconOutline />
19+
</IconButton>
20+
</Tooltip>
1621
<NeoDashboardSidebarExportModal
1722
open={open}
1823
dashboard={dashboard}
1924
handleClose={() => {
2025
setOpen(false);
2126
}}
2227
/>
23-
</div>
28+
</>
2429
);
2530
};
2631

‎src/settings/SettingsModal.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import NeoSetting from '../component/field/Setting';
33
import { DASHBOARD_SETTINGS } from '../config/DashboardConfig';
4-
import { Dialog, MenuItem } from '@neo4j-ndl/react';
4+
import { Dialog, IconButton, MenuItem } from '@neo4j-ndl/react';
55
import { Cog6ToothIconOutline } from '@neo4j-ndl/react/icons';
6+
import Tooltip from '@mui/material/Tooltip/Tooltip';
67

78
export const NeoSettingsModal = ({ dashboardSettings, updateDashboardSetting }) => {
89
const [open, setOpen] = React.useState(false);
@@ -42,7 +43,11 @@ export const NeoSettingsModal = ({ dashboardSettings, updateDashboardSetting })
4243

4344
return (
4445
<>
45-
<MenuItem onClick={handleClickOpen} icon={<Cog6ToothIconOutline />} title='Dashboard settings' />
46+
<Tooltip title='Settings' aria-label='settings' disableInteractive>
47+
<IconButton className='n-mx-1' onClick={handleClickOpen} aria-label='Settings' title='Settings'>
48+
<Cog6ToothIconOutline />
49+
</IconButton>
50+
</Tooltip>
4651

4752
<Dialog size='large' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>
4853
<Dialog.Header id='form-dialog-title'>

0 commit comments

Comments
 (0)