Skip to content

Commit 5916796

Browse files
author
Marius Conjeaud
committed
Working on TitleBar
1 parent b72f527 commit 5916796

14 files changed

+364
-186
lines changed

‎docs/modules/ROOT/pages/developer-guide/styleConfiguration.adoc

+1-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ An example configuration for NeoDash
1414
....
1515
{
1616
"DASHBOARD_HEADER_BRAND_LOGO": "logo_lightsand.png",
17-
"APPLY_CUSTOM_BRAND_LOGO": true,
1817
"DASHBOARD_HEADER_COLOR" : "#F3F3F0",
1918
"DASHBOARD_HEADER_BUTTON_COLOR" : "#009999",
2019
"DASHBOARD_HEADER_TITLE_COLOR" : "#00C1B6",
@@ -31,9 +30,7 @@ An example configuration for NeoDash
3130
[width="100%",cols="19%,17%,26%,38%",options="header",]
3231
|===
3332
|Name |Type |Default Value |Description
34-
|APPLY_CUSTOM_BRAND_LOGO |boolean |false |If enabled, a custom logo will be used on the header based on the DASHBOARD_HEADER_BRAND_LOGO variable.
35-
36-
|DASHBOARD_HEADER_BRAND_LOGO |string |undefined |If APPLY_CUSTOM_BRAND_LOGO is true, this variable defines the name of the logo file located on the public folder of the Neodash deployment.
33+
|DASHBOARD_HEADER_BRAND_LOGO |string |undefined |This variable defines the name of the logo file located on the public folder of the Neodash deployment, if you want your own logo instead of the Neo4j one.
3734

3835
|DASHBOARD_HEADER_COLOR |string |#0B297D |Determines the color of the header.
3936

‎public/neo4j-icon-color-full.png

7.17 KB
Loading

‎src/config/ApplicationConfig.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,17 @@ export const DEFAULT_SCREEN = Screens.WELCOME_SCREEN; // WELCOME_SCREEN
1111
export const DEFAULT_NEO4J_URL = 'localhost'; // localhost
1212
export const DEFAULT_DASHBOARD_TITLE = ''; // ''
1313

14-
export const DASHBOARD_BUTTON_IMAGE = 'neo4j-icon.png'; // 'neo4j-icon.png'
15-
export const DASHBOARD_BUTTON_IMAGE_SIZE = 64; // 32;
1614
export const DASHBOARD_HEADER_COLOR = styleConfig?.style?.DASHBOARD_HEADER_COLOR || '#0B297D'; // '#0B297D'
1715

18-
export const DASHBOARD_HEADER_BUTTON_COLOR = styleConfig?.style?.DASHBOARD_HEADER_BUTTON_COLOR || '#FFFFFF22'; // '#FFFFFF22'
16+
export const DASHBOARD_HEADER_BUTTON_COLOR = styleConfig?.style?.DASHBOARD_HEADER_BUTTON_COLOR || null; // '#FFFFFF22'
1917

2018
export const DASHBOARD_HEADER_TITLE_COLOR = styleConfig?.style?.DASHBOARD_HEADER_TITLE_COLOR || '#FFFFFF'; // '#FFFFFF'
2119

2220
export const DASHBOARD_PAGE_LIST_COLOR = styleConfig?.style?.DASHBOARD_PAGE_LIST_COLOR || '#f0f0f0'; // '#f0f0f0'
2321

2422
export const DASHBOARD_PAGE_LIST_ACTIVE_COLOR = styleConfig?.style?.DASHBOARD_PAGE_LIST_ACTIVE_COLOR || '#ffffff'; // '#FFFFFF'
2523

26-
export const APPLY_CUSTOM_BRAND_LOGO = styleConfig?.style?.APPLY_CUSTOM_BRAND_LOGO || false; // false
27-
export const DASHBOARD_HEADER_BRAND_LOGO = styleConfig?.style?.DASHBOARD_HEADER_BRAND_LOGO || 'logo.png';
24+
export const DASHBOARD_HEADER_BRAND_LOGO =
25+
styleConfig?.style?.DASHBOARD_HEADER_BRAND_LOGO || 'neo4j-icon-color-full.png';
2826

2927
export const CUSTOM_CONNECTION_FOOTER_TEXT = ''; // ''

‎src/config/style.config.json

-4
This file was deleted.

‎src/dashboard/Dashboard.tsx

+77-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React from 'react';
22
import NeoPage from '../page/Page';
3-
import { Container } from '@mui/material';
43
import NeoDrawer from './drawer/DashboardDrawer';
54
import NeoDashboardHeader from './header/DashboardHeader';
5+
import NeoDashboardTitle from './header/DashboardTitle';
6+
import { NeoDashboardHeaderPageList } from './header/DashboardHeaderPageList';
67
import { createDriver, Neo4jProvider } from 'use-neo4j';
78
import { applicationGetConnection, applicationGetStandaloneSettings } from '../application/ApplicationSelectors';
89
import { connect } from 'react-redux';
910
import NeoDashboardConnectionUpdateHandler from '../component/misc/DashboardConnectionUpdateHandler';
1011
import { forceRefreshPage } from '../page/PageActions';
1112
import { getPageNumber } from '../settings/SettingsSelectors';
1213
import { createNotificationThunk } from '../page/PageThunks';
14+
import { TabPanel } from '@neo4j-ndl/react';
1315

1416
const Dashboard = ({ pagenumber, connection, applicationSettings, onConnectionUpdate, onDownloadDashboardAsImage }) => {
1517
const [drawerOpen, setDrawerOpen] = React.useState(false);
@@ -57,16 +59,80 @@ const Dashboard = ({ pagenumber, connection, applicationSettings, onConnectionUp
5759

5860
{/* Main Content */}
5961
<main className='n-flex-1 n-relative n-z-0 n-overflow-y-auto n-scroll-smooth n-w-full'>
60-
<div className='n-absolute n-inset-0'>
61-
{/* The main content of the page */}
62-
{applicationSettings.standalonePassword ? (
63-
<div style={{ textAlign: 'center', color: 'red', paddingTop: 60, marginBottom: -50 }}>
64-
Warning: NeoDash is running with a plaintext password in config.json.
65-
</div>
66-
) : (
67-
<></>
68-
)}
69-
<NeoPage></NeoPage>
62+
<div className='n-absolute n-inset-0 page-spacing'>
63+
<div className='page-spacing-overflow'>
64+
{/* The main content of the page */}
65+
{applicationSettings.standalonePassword ? (
66+
<div style={{ textAlign: 'center', color: 'red', paddingTop: 60, marginBottom: -50 }}>
67+
Warning: NeoDash is running with a plaintext password in config.json.
68+
</div>
69+
) : (
70+
<></>
71+
)}
72+
<NeoDashboardTitle />
73+
<NeoDashboardHeaderPageList />
74+
{/* <div className='n-flex n-flex-row n-w-full'>
75+
<Tabs fill='underline' onChange={function Xa() {}} value={0}>
76+
<Tab tabId={0}>
77+
Main Page{' '}
78+
<IconButton
79+
id='tab-0-menu'
80+
className='n-relative n-top-1 visible-on-tab-hover'
81+
style={{ height: '1.1rem' }}
82+
onClick={handleMenuClick}
83+
size='small'
84+
clean
85+
>
86+
<EllipsisHorizontalIconOutline />
87+
</IconButton>
88+
<Menu anchorEl={anchorEl} open={menuOpen} onClose={handleMenuClose}>
89+
<MenuItems>
90+
<MenuItem icon={<PencilIconOutline />} onClick={function Xa() {}} title='Edit name' />
91+
<MenuItem
92+
className='n-text-palette-danger-text'
93+
icon={<TrashIconOutline />}
94+
onClick={function Xa() {}}
95+
title='Delete'
96+
/>
97+
</MenuItems>
98+
</Menu>
99+
</Tab>
100+
<Tab tabId={1}>
101+
Second page{' '}
102+
<IconButton
103+
id='tab-1-menu'
104+
className='n-relative n-top-1 visible-on-tab-hover'
105+
style={{ height: '1.1rem' }}
106+
onClick={handleMenuClick}
107+
size='small'
108+
clean
109+
>
110+
<EllipsisHorizontalIconOutline />
111+
</IconButton>
112+
<Menu anchorEl={anchorEl} open={menuOpen} onClose={handleMenuClose}>
113+
<MenuItems>
114+
<MenuItem icon={<PencilIconOutline />} onClick={function Xa() {}} title='Edit name' />
115+
<MenuItem
116+
className='n-text-palette-danger-text'
117+
icon={<TrashIconOutline className='n-text-palette-danger-text' />}
118+
onClick={function Xa() {}}
119+
title='Delete'
120+
/>
121+
</MenuItems>
122+
</Menu>
123+
</Tab>
124+
</Tabs>
125+
<IconButton className='n-relative -n-top-1' size='large' clean>
126+
<PlusIconOutline />
127+
</IconButton>
128+
</div> */}
129+
<TabPanel className='n-flex-1 n-min-h-0 n-flex n-flex-col' tabId={0} value={0}>
130+
<NeoPage></NeoPage>
131+
</TabPanel>
132+
<TabPanel className='n-flex-1 n-min-h-0 n-flex n-flex-col' tabId={1} value={0}>
133+
<div>John Cena</div>
134+
</TabPanel>
135+
</div>
70136
</div>
71137
</main>
72138
</div>

‎src/dashboard/header/DashboardHeader.tsx

+13-34
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
// import { AppBar } from '@mui/material';
2-
// import React, { useCallback, useEffect } from 'react';
3-
import React, { useEffect } from 'react';
1+
import React, { useCallback, useEffect } from 'react';
42
import { connect } from 'react-redux';
53
// import { setDashboardTitle, addPage, removePage } from '../DashboardActions';
64
import { setDashboardTitle } from '../DashboardActions';
@@ -14,22 +12,24 @@ import { getDashboardIsEditable, getPageNumber } from '../../settings/SettingsSe
1412
// import NeoDashboardHeaderPageList from './DashboardHeaderPageList';
1513
// import { NeoDashboardHeaderTitleBar } from './DashboardHeaderTitleBar';
1614
import { NeoDashboardHeaderLogo } from './DashboardHeaderLogo';
15+
import { NeoLogoutButton } from './DashboardHeaderLogoutButton';
16+
import { NeoDashboardHeaderDownloadImageButton } from './DashboardHeaderDownloadImageButton';
1717

1818
const drawerWidth = 240;
1919

2020
export const NeoDashboardHeader = ({
2121
// open,
22-
// standalone,
22+
standalone,
2323
dashboardTitle,
2424
// handleDrawerOpen,
2525
// setDashboardTitle,
2626
// editable,
2727
connection,
28-
// settings,
29-
// onConnectionModalOpen,
30-
// onDownloadImage,
28+
settings,
29+
onConnectionModalOpen,
30+
onDownloadImage,
3131
}) => {
32-
// const downloadImageEnabled = settings ? settings.downloadImageEnabled : false;
32+
const downloadImageEnabled = settings ? settings.downloadImageEnabled : false;
3333
const [dashboardTitleText, setDashboardTitleText] = React.useState(dashboardTitle);
3434

3535
useEffect(() => {
@@ -47,36 +47,15 @@ export const NeoDashboardHeader = ({
4747
<nav className='n-items-center n-justify-center n-flex n-flex-1 n-w-full'>
4848
{`${connection.protocol}://${connection.url}:${connection.port}`}
4949
</nav>
50-
<div className='sm:n-flex n-items-center n-justify-end md:n-flex-1 lg:n-w-0 n-gap-6'>John Cena</div>
51-
{/* <div className="hidden sm:flex items-center justify-end md:flex-1 lg:w-0 gap-6">
52-
<FeedbackButton />
53-
<div className="flex flex-row gap-x-2">
54-
<HelpButton />
55-
<GlobalSettingsButton />
56-
<LogoutButton />
50+
<div className='sm:n-flex n-items-center n-justify-end md:n-flex-1 lg:n-w-0 n-gap-6'>
51+
<div className='n-flex n-flex-row n-gap-x-2'>
52+
{downloadImageEnabled && <NeoDashboardHeaderDownloadImageButton onDownloadImage={onDownloadImage} />}
53+
<NeoLogoutButton standalone={standalone} onConnectionModalOpen={onConnectionModalOpen} />
5754
</div>
58-
</div> */}
55+
</div>
5956
</div>
6057
</div>
6158
</div>
62-
// <AppBar
63-
// position='absolute'
64-
// className='n-z-20'
65-
// style={
66-
// open
67-
// ? {
68-
// boxShadow: 'none',
69-
// marginLeft: drawerWidth,
70-
// width: `calc(100% - ${drawerWidth}px)`,
71-
// transition: 'width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
72-
// }
73-
// : {
74-
// boxShadow: 'none',
75-
// width: `calc(100%)`,
76-
// transition: 'width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
77-
// }
78-
// }
79-
// >
8059
// <NeoDashboardHeaderTitleBar
8160
// downloadImageEnabled={downloadImageEnabled}
8261
// onDownloadImage={onDownloadImage}

‎src/dashboard/header/DashboardHeaderDownloadImageButton.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { IconButton } from '@neo4j-ndl/react';
3+
import { Tooltip } from '@mui/material';
4+
import { CameraIconSolid } from '@neo4j-ndl/react/icons';
5+
6+
import { DASHBOARD_HEADER_BUTTON_COLOR } from '../../config/ApplicationConfig';
7+
import StyleConfig from '../../config/StyleConfig';
8+
9+
await StyleConfig.getInstance();
10+
11+
export const NeoDashboardHeaderDownloadImageButton = (onDownloadImage) => {
12+
const content = (
13+
<Tooltip title={'Download Dashboard as Image'} disableInteractive>
14+
<IconButton
15+
aria-label={'camera'}
16+
style={DASHBOARD_HEADER_BUTTON_COLOR ? { color: DASHBOARD_HEADER_BUTTON_COLOR } : {}}
17+
onClick={() => onDownloadImage()}
18+
size='large'
19+
clean
20+
>
21+
<CameraIconSolid aria-label={'camera icon'} />
22+
</IconButton>
23+
</Tooltip>
24+
);
25+
26+
return content;
27+
};
28+
29+
export default NeoDashboardHeaderDownloadImageButton;

‎src/dashboard/header/DashboardHeaderLogo.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
22

3-
import { APPLY_CUSTOM_BRAND_LOGO, DASHBOARD_HEADER_BRAND_LOGO } from '../../config/ApplicationConfig';
3+
import { DASHBOARD_HEADER_BRAND_LOGO } from '../../config/ApplicationConfig';
44
import StyleConfig from '../../config/StyleConfig';
55

66
await StyleConfig.getInstance();
77

88
export const NeoDashboardHeaderLogo = () => {
9-
const brandedToolbarContent = (
10-
<img className='n-justify-start n-h-6 n-w-auto n-m-2' src={DASHBOARD_HEADER_BRAND_LOGO} />
9+
const content = (
10+
<div className='n-items-center sm:n-flex md:n-flex-1 n-justify-start'>
11+
<img className='n-h-6 n-w-auto n-m-2' src={DASHBOARD_HEADER_BRAND_LOGO} />
12+
</div>
1113
);
12-
const content = <div className='n-items-center'>{APPLY_CUSTOM_BRAND_LOGO ? brandedToolbarContent : null}</div>;
1314

1415
return content;
1516
};

‎src/dashboard/header/DashboardHeaderLogoutButton.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import { IconButton } from '@neo4j-ndl/react';
4+
import { Tooltip } from '@mui/material';
5+
6+
import { DASHBOARD_HEADER_BUTTON_COLOR } from '../../config/ApplicationConfig';
7+
import StyleConfig from '../../config/StyleConfig';
8+
import { ArrowRightOnRectangleIconOutline } from '@neo4j-ndl/react/icons';
9+
10+
await StyleConfig.getInstance();
11+
12+
export const NeoLogoutButton = ({ standalone, onConnectionModalOpen }) => {
13+
return (
14+
<Tooltip title={'Log out'} disableInteractive>
15+
<IconButton
16+
className='logo-btn n-p-1'
17+
aria-label={'connection '}
18+
style={DASHBOARD_HEADER_BUTTON_COLOR ? { color: DASHBOARD_HEADER_BUTTON_COLOR } : {}}
19+
onClick={() => {
20+
if (!standalone) {
21+
onConnectionModalOpen();
22+
}
23+
}}
24+
size='large'
25+
clean
26+
>
27+
<ArrowRightOnRectangleIconOutline className='header-icon' type='outline' />
28+
</IconButton>
29+
</Tooltip>
30+
);
31+
};
32+
33+
const mapStateToProps = () => ({});
34+
35+
const mapDispatchToProps = () => ({});
36+
37+
export default connect(mapStateToProps, mapDispatchToProps)(NeoLogoutButton);

0 commit comments

Comments
 (0)