Skip to content

Commit 40666d0

Browse files
BennuFireBennuFire
authored
Header color on dark background (#420)
* Header color on dark background * Luma threshold as dashboard settings * style fix underline
1 parent ce736c7 commit 40666d0

File tree

5 files changed

+106
-60
lines changed

5 files changed

+106
-60
lines changed

‎public/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
color: white !important;
88
}
99

10-
.no-underline .MuiInput-underline::before {
10+
.no-underline [class*='MuiInput-underline-']::before{
1111
border-bottom: none;
1212
}
1313

‎src/application/Application.tsx‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { hot } from 'react-hot-loader/root';
33
import CssBaseline from '@material-ui/core/CssBaseline';
44
import NeoNotificationModal from '../modal/NotificationModal';
55
import NeoWelcomeScreenModal from '../modal/WelcomeScreenModal';
6+
import { ThemeProvider } from '@material-ui/styles';
7+
import { lightTheme } from '../component/theme/Themes';
68
import { connect } from 'react-redux';
79
import {
810
applicationGetConnection,
@@ -101,48 +103,50 @@ const Application = ({
101103

102104
// Only render the dashboard component if we have an active Neo4j connection.
103105
return (
104-
<div ref={ref} style={{ display: 'flex' }}>
105-
<CssBaseline />
106-
{/* TODO - clean this up. Only draw the placeholder if the connection is not established. */}
107-
<NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
108-
{connected ? <Dashboard onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}></Dashboard> : <></>}
109-
{/* TODO - move all models into a pop-ups (or modals) component. */}
110-
<NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
111-
<NeoConnectionModal
112-
open={connectionModalOpen}
113-
dismissable={connected}
114-
connection={connection}
115-
ssoSettings={ssoSettings}
116-
standalone={standaloneSettings.standalone}
117-
standaloneSettings={standaloneSettings}
118-
createConnection={createConnection}
119-
onSSOAttempt={onSSOAttempt}
120-
onConnectionModalClose={onConnectionModalClose}
121-
></NeoConnectionModal>
122-
<NeoWelcomeScreenModal
123-
welcomeScreenOpen={welcomeScreenOpen}
124-
setWelcomeScreenOpen={setWelcomeScreenOpen}
125-
hasCachedDashboard={hasCachedDashboard}
126-
hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
127-
onConnectionModalOpen={onConnectionModalOpen}
128-
createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
129-
onAboutModalOpen={onAboutModalOpen}
130-
resetDashboard={resetDashboard}
131-
></NeoWelcomeScreenModal>
132-
<NeoUpgradeOldDashboardModal
133-
open={oldDashboard}
134-
text={oldDashboard}
135-
loadDashboard={loadDashboard}
136-
clearOldDashboard={clearOldDashboard}
137-
/>
138-
<NeoLoadSharedDashboardModal
139-
shareDetails={shareDetails}
140-
onResetShareDetails={onResetShareDetails}
141-
onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
142-
/>
143-
<NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
144-
<NeoNotificationModal></NeoNotificationModal>
145-
</div>
106+
<ThemeProvider theme={lightTheme}>
107+
<div ref={ref} style={{ display: 'flex' }}>
108+
<CssBaseline />
109+
{/* TODO - clean this up. Only draw the placeholder if the connection is not established. */}
110+
<NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
111+
{connected ? <Dashboard onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}></Dashboard> : <></>}
112+
{/* TODO - move all models into a pop-ups (or modals) component. */}
113+
<NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
114+
<NeoConnectionModal
115+
open={connectionModalOpen}
116+
dismissable={connected}
117+
connection={connection}
118+
ssoSettings={ssoSettings}
119+
standalone={standaloneSettings.standalone}
120+
standaloneSettings={standaloneSettings}
121+
createConnection={createConnection}
122+
onSSOAttempt={onSSOAttempt}
123+
onConnectionModalClose={onConnectionModalClose}
124+
></NeoConnectionModal>
125+
<NeoWelcomeScreenModal
126+
welcomeScreenOpen={welcomeScreenOpen}
127+
setWelcomeScreenOpen={setWelcomeScreenOpen}
128+
hasCachedDashboard={hasCachedDashboard}
129+
hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
130+
onConnectionModalOpen={onConnectionModalOpen}
131+
createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
132+
onAboutModalOpen={onAboutModalOpen}
133+
resetDashboard={resetDashboard}
134+
></NeoWelcomeScreenModal>
135+
<NeoUpgradeOldDashboardModal
136+
open={oldDashboard}
137+
text={oldDashboard}
138+
loadDashboard={loadDashboard}
139+
clearOldDashboard={clearOldDashboard}
140+
/>
141+
<NeoLoadSharedDashboardModal
142+
shareDetails={shareDetails}
143+
onResetShareDetails={onResetShareDetails}
144+
onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
145+
/>
146+
<NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
147+
<NeoNotificationModal></NeoNotificationModal>
148+
</div>
149+
</ThemeProvider>
146150
);
147151
};
148152

‎src/card/view/CardView.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { extensionEnabled, getReportTypes } from '../../extensions/ExtensionUtil
1111
import NeoCodeViewerComponent from '../../component/editor/CodeViewerComponent';
1212
import { NeoReportWrapper } from '../../report/ReportWrapper';
1313
import { identifyStyleRuleParameters } from '../../extensions/styling/StyleRuleEvaluator';
14+
import { ThemeProvider } from '@material-ui/styles';
15+
import { lightTheme, darkHeaderTheme, luma } from '../../component/theme/Themes';
1416

1517
const NeoCardView = ({
1618
title,
@@ -70,22 +72,30 @@ const NeoCardView = ({
7072

7173
// @ts-ignore
7274
const reportHeader = (
73-
<NeoCardViewHeader
74-
title={title}
75-
editable={editable}
76-
description={settings.description}
77-
fullscreenEnabled={settings.fullscreenEnabled}
78-
downloadImageEnabled={settings.downloadImageEnabled}
79-
refreshButtonEnabled={settings.refreshButtonEnabled}
80-
onTitleUpdate={onTitleUpdate}
81-
onToggleCardSettings={onToggleCardSettings}
82-
onManualRefreshCard={() => setLastRunTimestamp(Date.now())}
83-
settings={settings}
84-
onDownloadImage={onDownloadImage}
85-
onToggleCardExpand={onToggleCardExpand}
86-
expanded={expanded}
87-
parameters={getLocalParameters(title)}
88-
></NeoCardViewHeader>
75+
<ThemeProvider
76+
theme={
77+
settings.backgroundColor && luma(settings.backgroundColor) < dashboardSettings.darkLuma
78+
? darkHeaderTheme
79+
: lightTheme
80+
}
81+
>
82+
<NeoCardViewHeader
83+
title={title}
84+
editable={editable}
85+
description={settings.description}
86+
fullscreenEnabled={settings.fullscreenEnabled}
87+
downloadImageEnabled={settings.downloadImageEnabled}
88+
refreshButtonEnabled={settings.refreshButtonEnabled}
89+
onTitleUpdate={onTitleUpdate}
90+
onToggleCardSettings={onToggleCardSettings}
91+
onManualRefreshCard={() => setLastRunTimestamp(Date.now())}
92+
settings={settings}
93+
onDownloadImage={onDownloadImage}
94+
onToggleCardExpand={onToggleCardExpand}
95+
expanded={expanded}
96+
parameters={getLocalParameters(title)}
97+
></NeoCardViewHeader>
98+
</ThemeProvider>
8999
);
90100

91101
// @ts-ignore
@@ -102,7 +112,7 @@ const NeoCardView = ({
102112
) : (
103113
<></>
104114
);
105-
115+
106116
const localParameters = { ...getLocalParameters(query), ...getLocalParameters(settings.drilldownLink) };
107117
const reportTypes = getReportTypes(extensions);
108118
const withoutFooter =

‎src/component/theme/Themes.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createTheme } from '@material-ui/core/styles';
2+
export const lightTheme = createTheme({
3+
palette: {
4+
type: 'light',
5+
},
6+
});
7+
8+
export const darkHeaderTheme = createTheme({
9+
palette: {
10+
text: {
11+
primary: '#ffffff',
12+
},
13+
},
14+
});
15+
16+
export const luma = (colorString) => {
17+
let color = colorString.substring(1); // strip #
18+
let rgb = parseInt(color, 16); // convert rrggbb to decimal
19+
let r = (rgb >> 16) & 0xff; // extract red
20+
let g = (rgb >> 8) & 0xff; // extract green
21+
let b = (rgb >> 0) & 0xff; // extract blue
22+
23+
return 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
24+
};
25+
26+
export default lightTheme;

‎src/config/DashboardConfig.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ export const DASHBOARD_SETTINGS = {
3737
default: 'bottom-right',
3838
helperText: 'These are the resize handle options shared across all reports. ',
3939
},
40+
darkLuma: {
41+
label: 'Luma Threshold',
42+
type: SELECTION_TYPES.NUMBER,
43+
default: 25,
44+
helperText: 'Background colors under this threshold will be considered as dark',
45+
},
4046
pagenumber: {
4147
label: 'Page Number',
4248
type: SELECTION_TYPES.NUMBER,

0 commit comments

Comments
 (0)