From d858236861f939719f2a258ca12349de601029d4 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Thu, 21 Jul 2022 22:08:51 +0100
Subject: [PATCH] White background in pivot tables (#23624)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
---
.../dashboard/components/DashCard.jsx | 1 +
.../visualizations/PivotTable.jsx | 42 +++++++++++++++----
2 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/frontend/src/metabase/dashboard/components/DashCard.jsx b/frontend/src/metabase/dashboard/components/DashCard.jsx
index afdf4ccf937..18d95764771 100644
--- a/frontend/src/metabase/dashboard/components/DashCard.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCard.jsx
@@ -231,6 +231,7 @@ export default class DashCard extends Component {
rawSeries={series}
showTitle
isFullscreen={isFullscreen}
+ isNightMode={isNightMode}
isDashboard
dispatch={this.props.dispatch}
dashboard={dashboard}
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx b/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
index fd6a5b9ef91..a938375ddea 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
@@ -28,10 +28,21 @@ import { findDOMNode } from "react-dom";
import { connect } from "react-redux";
import { PLUGIN_SELECTORS } from "metabase/plugins";
-const getBgLightColor = hasCustomColors =>
- hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
-const getBgDarkColor = hasCustomColors =>
- hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
+const getBgLightColor = (hasCustomColors, isNightMode) => {
+ if (isNightMode) {
+ return lighten("bg-black", 0.3);
+ }
+
+ return hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
+};
+
+const getBgDarkColor = (hasCustomColors, isNightMode) => {
+ if (isNightMode) {
+ return lighten("bg-black", 0.1);
+ }
+
+ return hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
+};
const partitions = [
{
@@ -244,6 +255,7 @@ class PivotTable extends Component {
width,
hasCustomColors,
onUpdateVisualizationSettings,
+ isNightMode,
} = this.props;
if (data == null || !data.cols.some(isPivotGroupColumn)) {
return null;
@@ -302,7 +314,7 @@ class PivotTable extends Component {
key={key}
style={{
...style,
- backgroundColor: getBgLightColor(hasCustomColors),
+ backgroundColor: getBgLightColor(hasCustomColors, isNightMode),
}}
className={cx("overflow-hidden", {
"border-right border-medium": !hasChildren,
@@ -315,6 +327,7 @@ class PivotTable extends Component {
isGrandTotal={isGrandTotal}
hasCustomColors={hasCustomColors}
onClick={this.getCellClickHander(clicked)}
+ isNightMode={isNightMode}
icon={
(isSubtotal || hasSubtotal) && (
<RowToggleIcon
@@ -323,6 +336,7 @@ class PivotTable extends Component {
updateSettings={onUpdateVisualizationSettings}
hideUnlessCollapsed={isSubtotal}
rowIndex={rowIndex} // used to get a list of "other" paths when open one item in a collapsed column
+ isNightMode={isNightMode}
/>
)
}
@@ -397,6 +411,7 @@ class PivotTable extends Component {
isSubtotal={isSubtotal}
isGrandTotal={isGrandTotal}
hasCustomColors={hasCustomColors}
+ isNightMode={isNightMode}
isBody
onClick={this.getCellClickHander(clicked)}
/>
@@ -417,7 +432,10 @@ class PivotTable extends Component {
"border-right border-bottom border-medium": leftHeaderWidth,
})}
style={{
- backgroundColor: getBgLightColor(hasCustomColors),
+ backgroundColor: getBgLightColor(
+ hasCustomColors,
+ isNightMode,
+ ),
// add left spacing unless the header width is 0
paddingLeft: leftHeaderWidth && LEFT_HEADER_LEFT_SPACING,
width: leftHeaderWidth,
@@ -430,6 +448,7 @@ class PivotTable extends Component {
value={this.getColumnTitle(rowIndex)}
style={{ width: LEFT_HEADER_CELL_WIDTH }}
hasCustomColors={hasCustomColors}
+ isNightMode={isNightMode}
icon={
// you can only collapse before the last column
index < rowIndexes.length - 1 &&
@@ -439,6 +458,7 @@ class PivotTable extends Component {
settings={settings}
updateSettings={onUpdateVisualizationSettings}
hasCustomColors={hasCustomColors}
+ isNightMode={isNightMode}
/>
)
}
@@ -532,6 +552,7 @@ function RowToggleIcon({
hideUnlessCollapsed,
rowIndex,
hasCustomColors,
+ isNightMode,
}) {
if (value == null) {
return null;
@@ -590,8 +611,8 @@ function RowToggleIcon({
padding: "4px",
borderRadius: "4px",
backgroundColor: isCollapsed
- ? getBgLightColor(hasCustomColors)
- : getBgDarkColor(hasCustomColors),
+ ? getBgLightColor(hasCustomColors, isNightMode)
+ : getBgDarkColor(hasCustomColors, isNightMode),
}}
onClick={e => {
e.stopPropagation();
@@ -615,6 +636,7 @@ function Cell({
className,
icon,
hasCustomColors,
+ isNightMode,
}) {
return (
<div
@@ -623,7 +645,9 @@ function Cell({
...(isGrandTotal ? { borderTop: "1px solid white" } : {}),
...style,
...(isSubtotal
- ? { backgroundColor: getBgDarkColor(hasCustomColors) }
+ ? {
+ backgroundColor: getBgDarkColor(hasCustomColors, isNightMode),
+ }
: {}),
}}
className={cx(
--
GitLab