Header color on dark background (#420)

* Header color on dark background * Luma threshold as dashboard settings * style fix underline
neo4j-labs · Apr 24, 2023 · 40666d0 · 40666d0
1 parent ce736c7
commit 40666d0
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 60 deletions.
diff --git a/public/style.css b/public/style.css
@@ -7,7 +7,7 @@
     color: white !important;
 }
 
-.no-underline .MuiInput-underline::before {
+.no-underline [class*='MuiInput-underline-']::before{
     border-bottom: none;
 }
 

diff --git a/src/application/Application.tsx b/src/application/Application.tsx
@@ -3,6 +3,8 @@ import { hot } from 'react-hot-loader/root';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import NeoNotificationModal from '../modal/NotificationModal';
 import NeoWelcomeScreenModal from '../modal/WelcomeScreenModal';
+import { ThemeProvider } from '@material-ui/styles';
+import { lightTheme } from '../component/theme/Themes';
 import { connect } from 'react-redux';
 import {
   applicationGetConnection,
@@ -101,48 +103,50 @@ const Application = ({
 
   // Only render the dashboard component if we have an active Neo4j connection.
   return (
-    <div ref={ref} style={{ display: 'flex' }}>
-      <CssBaseline />
-      {/* TODO - clean this up. Only draw the placeholder if the connection is not established. */}
-      <NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
-      {connected ? <Dashboard onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}></Dashboard> : <></>}
-      {/* TODO - move all models into a pop-ups (or modals) component. */}
-      <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
-      <NeoConnectionModal
-        open={connectionModalOpen}
-        dismissable={connected}
-        connection={connection}
-        ssoSettings={ssoSettings}
-        standalone={standaloneSettings.standalone}
-        standaloneSettings={standaloneSettings}
-        createConnection={createConnection}
-        onSSOAttempt={onSSOAttempt}
-        onConnectionModalClose={onConnectionModalClose}
-      ></NeoConnectionModal>
-      <NeoWelcomeScreenModal
-        welcomeScreenOpen={welcomeScreenOpen}
-        setWelcomeScreenOpen={setWelcomeScreenOpen}
-        hasCachedDashboard={hasCachedDashboard}
-        hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
-        onConnectionModalOpen={onConnectionModalOpen}
-        createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
-        onAboutModalOpen={onAboutModalOpen}
-        resetDashboard={resetDashboard}
-      ></NeoWelcomeScreenModal>
-      <NeoUpgradeOldDashboardModal
-        open={oldDashboard}
-        text={oldDashboard}
-        loadDashboard={loadDashboard}
-        clearOldDashboard={clearOldDashboard}
-      />
-      <NeoLoadSharedDashboardModal
-        shareDetails={shareDetails}
-        onResetShareDetails={onResetShareDetails}
-        onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
-      />
-      <NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
-      <NeoNotificationModal></NeoNotificationModal>
-    </div>
+    <ThemeProvider theme={lightTheme}>
+      <div ref={ref} style={{ display: 'flex' }}>
+        <CssBaseline />
+        {/* TODO - clean this up. Only draw the placeholder if the connection is not established. */}
+        <NeoDashboardPlaceholder connected={connected}></NeoDashboardPlaceholder>
+        {connected ? <Dashboard onDownloadDashboardAsImage={(_) => downloadComponentAsImage(ref)}></Dashboard> : <></>}
+        {/* TODO - move all models into a pop-ups (or modals) component. */}
+        <NeoAboutModal open={aboutModalOpen} handleClose={onAboutModalClose} getDebugState={getDebugState} />
+        <NeoConnectionModal
+          open={connectionModalOpen}
+          dismissable={connected}
+          connection={connection}
+          ssoSettings={ssoSettings}
+          standalone={standaloneSettings.standalone}
+          standaloneSettings={standaloneSettings}
+          createConnection={createConnection}
+          onSSOAttempt={onSSOAttempt}
+          onConnectionModalClose={onConnectionModalClose}
+        ></NeoConnectionModal>
+        <NeoWelcomeScreenModal
+          welcomeScreenOpen={welcomeScreenOpen}
+          setWelcomeScreenOpen={setWelcomeScreenOpen}
+          hasCachedDashboard={hasCachedDashboard}
+          hasNeo4jDesktopConnection={hasNeo4jDesktopConnection}
+          onConnectionModalOpen={onConnectionModalOpen}
+          createConnectionFromDesktopIntegration={createConnectionFromDesktopIntegration}
+          onAboutModalOpen={onAboutModalOpen}
+          resetDashboard={resetDashboard}
+        ></NeoWelcomeScreenModal>
+        <NeoUpgradeOldDashboardModal
+          open={oldDashboard}
+          text={oldDashboard}
+          loadDashboard={loadDashboard}
+          clearOldDashboard={clearOldDashboard}
+        />
+        <NeoLoadSharedDashboardModal
+          shareDetails={shareDetails}
+          onResetShareDetails={onResetShareDetails}
+          onConfirmLoadSharedDashboard={onConfirmLoadSharedDashboard}
+        />
+        <NeoReportHelpModal open={reportHelpModalOpen} handleClose={onReportHelpModalClose} />
+        <NeoNotificationModal></NeoNotificationModal>
+      </div>
+    </ThemeProvider>
   );
 };
 

diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -11,6 +11,8 @@ import { extensionEnabled, getReportTypes } from '../../extensions/ExtensionUtil
 import NeoCodeViewerComponent from '../../component/editor/CodeViewerComponent';
 import { NeoReportWrapper } from '../../report/ReportWrapper';
 import { identifyStyleRuleParameters } from '../../extensions/styling/StyleRuleEvaluator';
+import { ThemeProvider } from '@material-ui/styles';
+import { lightTheme, darkHeaderTheme, luma } from '../../component/theme/Themes';
 
 const NeoCardView = ({
   title,
@@ -70,22 +72,30 @@ const NeoCardView = ({
 
   // @ts-ignore
   const reportHeader = (
-    <NeoCardViewHeader
-      title={title}
-      editable={editable}
-      description={settings.description}
-      fullscreenEnabled={settings.fullscreenEnabled}
-      downloadImageEnabled={settings.downloadImageEnabled}
-      refreshButtonEnabled={settings.refreshButtonEnabled}
-      onTitleUpdate={onTitleUpdate}
-      onToggleCardSettings={onToggleCardSettings}
-      onManualRefreshCard={() => setLastRunTimestamp(Date.now())}
-      settings={settings}
-      onDownloadImage={onDownloadImage}
-      onToggleCardExpand={onToggleCardExpand}
-      expanded={expanded}
-      parameters={getLocalParameters(title)}
-    ></NeoCardViewHeader>
+    <ThemeProvider
+      theme={
+        settings.backgroundColor && luma(settings.backgroundColor) < dashboardSettings.darkLuma
+          ? darkHeaderTheme
+          : lightTheme
+      }
+    >
+      <NeoCardViewHeader
+        title={title}
+        editable={editable}
+        description={settings.description}
+        fullscreenEnabled={settings.fullscreenEnabled}
+        downloadImageEnabled={settings.downloadImageEnabled}
+        refreshButtonEnabled={settings.refreshButtonEnabled}
+        onTitleUpdate={onTitleUpdate}
+        onToggleCardSettings={onToggleCardSettings}
+        onManualRefreshCard={() => setLastRunTimestamp(Date.now())}
+        settings={settings}
+        onDownloadImage={onDownloadImage}
+        onToggleCardExpand={onToggleCardExpand}
+        expanded={expanded}
+        parameters={getLocalParameters(title)}
+      ></NeoCardViewHeader>
+    </ThemeProvider>
   );
 
   // @ts-ignore
@@ -102,7 +112,7 @@ const NeoCardView = ({
   ) : (
     <></>
   );
-  
+
   const localParameters = { ...getLocalParameters(query), ...getLocalParameters(settings.drilldownLink) };
   const reportTypes = getReportTypes(extensions);
   const withoutFooter =

diff --git a/src/component/theme/Themes.tsx b/src/component/theme/Themes.tsx
@@ -0,0 +1,26 @@
+import { createTheme } from '@material-ui/core/styles';
+export const lightTheme = createTheme({
+  palette: {
+    type: 'light',
+  },
+});
+
+export const darkHeaderTheme = createTheme({
+  palette: {
+    text: {
+      primary: '#ffffff',
+    },
+  },
+});
+
+export const luma = (colorString) => {
+  let color = colorString.substring(1); // strip #
+  let rgb = parseInt(color, 16); // convert rrggbb to decimal
+  let r = (rgb >> 16) & 0xff; // extract red
+  let g = (rgb >> 8) & 0xff; // extract green
+  let b = (rgb >> 0) & 0xff; // extract blue
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+};
+
+export default lightTheme;
diff --git a/src/config/DashboardConfig.ts b/src/config/DashboardConfig.ts
@@ -37,6 +37,12 @@ export const DASHBOARD_SETTINGS = {
     default: 'bottom-right',
     helperText: 'These are the resize handle options shared across all reports. ',
   },
+  darkLuma: {
+    label: 'Luma Threshold',
+    type: SELECTION_TYPES.NUMBER,
+    default: 25,
+    helperText: 'Background colors under this threshold will be considered as dark',
+  },
   pagenumber: {
     label: 'Page Number',
     type: SELECTION_TYPES.NUMBER,