You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by kg...@apache.org on 2022/04/20 13:06:40 UTC
[superset] branch master updated: feat(explore): improve UI in the control panel (#19748)
This is an automated email from the ASF dual-hosted git repository.
kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new e3a54aa3c1 feat(explore): improve UI in the control panel (#19748)
e3a54aa3c1 is described below
commit e3a54aa3c15bdd0c970aa73f898288a408205c97
Author: Stephen Liu <75...@qq.com>
AuthorDate: Wed Apr 20 21:06:33 2022 +0800
feat(explore): improve UI in the control panel (#19748)
* feat(explore): improve section header of control panel
* fix checkbox control color and radio button color
---
.../src/sections/advancedAnalytics.tsx | 6 +++---
.../src/sections/chartTitle.tsx | 4 ++--
.../components/RadioButtonControl.tsx | 5 ++++-
.../src/controlPanel.tsx | 9 +++-----
.../legacy-plugin-chart-rose/src/controlPanel.tsx | 9 +++-----
.../legacy-preset-chart-nvd3/src/NVD3Controls.tsx | 7 +++---
.../src/BigNumber/BigNumberTotal/controlPanel.ts | 2 +-
.../BigNumberWithTrendline/controlPanel.tsx | 5 ++---
.../src/Funnel/controlPanel.tsx | 2 +-
.../src/Gauge/controlPanel.tsx | 8 +++----
.../src/Graph/controlPanel.tsx | 2 +-
.../src/MixedTimeseries/controlPanel.tsx | 6 +++---
.../plugin-chart-echarts/src/Pie/controlPanel.tsx | 4 ++--
.../src/Radar/controlPanel.tsx | 4 ++--
.../src/Timeseries/Area/controlPanel.tsx | 4 ++--
.../src/Timeseries/Regular/Bar/controlPanel.tsx | 4 ++--
.../Timeseries/Regular/Scatter/controlPanel.tsx | 4 ++--
.../src/Timeseries/Regular/controlPanel.tsx | 4 ++--
.../src/Timeseries/Step/controlPanel.tsx | 4 ++--
.../src/Timeseries/controlPanel.tsx | 4 ++--
.../plugin-chart-echarts/src/Tree/controlPanel.tsx | 2 +-
.../src/Treemap/controlPanel.tsx | 2 +-
.../plugins/plugin-chart-echarts/src/controls.tsx | 4 ++--
.../src/assets/stylesheets/less/variables.less | 1 +
.../src/explore/components/Control.tsx | 2 +-
.../src/explore/components/ControlHeader.tsx | 12 ++++++-----
.../explore/components/ControlPanelsContainer.tsx | 18 ++++++++++++++--
.../components/controls/CheckboxControl.jsx | 25 ++++++++++++++++------
.../src/explore/controlPanels/sections.tsx | 8 +++----
superset-frontend/src/explore/main.less | 13 +++--------
30 files changed, 99 insertions(+), 85 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
index ebd118d881..3d562309ca 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
@@ -30,7 +30,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
'of query results',
),
controlSetRows: [
- [<h1 className="section-header">{t('Rolling window')}</h1>],
+ [<div className="section-header">{t('Rolling window')}</div>],
[
{
name: 'rolling_type',
@@ -85,7 +85,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
},
},
],
- [<h1 className="section-header">{t('Time comparison')}</h1>],
+ [<div className="section-header">{t('Time comparison')}</div>],
[
{
name: 'time_compare',
@@ -136,7 +136,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
},
},
],
- [<h1 className="section-header">{t('Resample')}</h1>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
index 5e99d976c5..314e983c58 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
@@ -28,7 +28,7 @@ export const titleControls: ControlPanelSectionConfig = {
tabOverride: 'customize',
expanded: true,
controlSetRows: [
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_title',
@@ -56,7 +56,7 @@ export const titleControls: ControlPanelSectionConfig = {
},
},
],
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
[
{
name: 'y_axis_title',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
index e9f6a6f9bc..b613fed93a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
@@ -56,8 +56,11 @@ export default function RadioButtonControl({
'.control-label + .btn-group': {
marginTop: 1,
},
+ '.btn-group .btn-default': {
+ color: theme.colors.grayscale.dark1,
+ },
'.btn-group .btn.active': {
- background: theme.colors.secondary.light5,
+ background: theme.colors.grayscale.light4,
fontWeight: theme.typography.weights.bold,
boxShadow: 'none',
},
diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
index c742e6d133..93139f7ff7 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
@@ -240,7 +240,7 @@ const config: ControlPanelConfig = {
),
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Rolling Window')}</h1>],
+ [<div className="section-header">{t('Rolling Window')}</div>],
[
{
name: 'rolling_type',
@@ -292,7 +292,7 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Time Comparison')}</h1>],
+ [<div className="section-header">{t('Time Comparison')}</div>],
[
{
name: 'time_compare',
@@ -341,10 +341,7 @@ const config: ControlPanelConfig = {
},
},
],
- // eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Python Functions')}</h1>],
- // eslint-disable-next-line react/jsx-key
- [<h2 className="section-header">pandas.resample</h2>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
index fd04117e62..e43da2de72 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
@@ -123,7 +123,7 @@ const config: ControlPanelConfig = {
),
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Rolling Window')}</h1>],
+ [<div className="section-header">{t('Rolling Window')}</div>],
[
{
name: 'rolling_type',
@@ -175,7 +175,7 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Time Comparison')}</h1>],
+ [<div className="section-header">{t('Time Comparison')}</div>],
[
{
name: 'time_compare',
@@ -224,10 +224,7 @@ const config: ControlPanelConfig = {
},
},
],
- // eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Python Functions')}</h1>],
- // eslint-disable-next-line react/jsx-key
- [<h2 className="section-header">pandas.resample</h2>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
index 3b0bb92ac7..151c53e41f 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
@@ -370,7 +370,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
'of query results',
),
controlSetRows: [
- [<h1 className="section-header">{t('Rolling Window')}</h1>],
+ [<div className="section-header">{t('Rolling Window')}</div>],
[
{
name: 'rolling_type',
@@ -423,7 +423,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
},
},
],
- [<h1 className="section-header">{t('Time Comparison')}</h1>],
+ [<div className="section-header">{t('Time Comparison')}</div>],
[
{
name: 'time_compare',
@@ -474,8 +474,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
},
},
],
- [<h1 className="section-header">{t('Python Functions')}</h1>],
- [<h2 className="section-header">pandas.resample</h2>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
index e30dcbe6be..8511c3ca56 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
@@ -34,7 +34,7 @@ export default {
controlSetRows: [['metric'], ['adhoc_filters']],
},
{
- label: t('Options'),
+ label: t('Display settings'),
expanded: true,
tabOverride: 'data',
controlSetRows: [
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
index 6b99af91ce..3ba00f55ea 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -164,7 +164,7 @@ const config: ControlPanelConfig = {
expanded: false,
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Rolling Window')}</h1>],
+ [<div className="section-header">{t('Rolling Window')}</div>],
[
{
name: 'rolling_type',
@@ -217,8 +217,7 @@ const config: ControlPanelConfig = {
},
},
],
- // eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Resample')}</h1>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index e1950bf9a5..fe2269cf89 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -76,7 +76,7 @@ const config: ControlPanelConfig = {
['color_scheme'],
...funnelLegendSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Labels')}</h1>],
+ [<div className="section-header">{t('Labels')}</div>],
[
{
name: 'label_type',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 581d98c6b9..ff03da4153 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -75,7 +75,7 @@ const config: ControlPanelConfig = {
label: t('Chart Options'),
expanded: true,
controlSetRows: [
- [<h1 className="section-header">{t('General')}</h1>],
+ [<div className="section-header">{t('General')}</div>],
[
{
name: 'min_val',
@@ -197,7 +197,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<h1 className="section-header">{t('Axis')}</h1>],
+ [<div className="section-header">{t('Axis')}</div>],
[
{
name: 'show_axis_tick',
@@ -236,7 +236,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<h1 className="section-header">{t('Progress')}</h1>],
+ [<div className="section-header">{t('Progress')}</div>],
[
{
name: 'show_progress',
@@ -277,7 +277,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<h1 className="section-header">{t('Intervals')}</h1>],
+ [<div className="section-header">{t('Intervals')}</div>],
[
{
name: 'intervals',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
index cdefae16ca..cb2f586110 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -98,7 +98,7 @@ const controlPanel: ControlPanelConfig = {
controlSetRows: [
['color_scheme'],
...legendSection,
- [<h1 className="section-header">{t('Layout')}</h1>],
+ [<div className="section-header">{t('Layout')}</div>],
[
{
name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index 8cd681c5e3..97955eec35 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -126,7 +126,7 @@ function createCustomizeSection(
controlSuffix: string,
): ControlSetRow[] {
return [
- [<h1 className="section-header">{label}</h1>],
+ [<div className="section-header">{label}</div>],
[
{
name: `seriesType${controlSuffix}`,
@@ -296,7 +296,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
['x_axis_time_format'],
[
{
@@ -320,7 +320,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
[
{
name: 'minorSplitLine',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
index c195c5e221..9056446f9f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -90,7 +90,7 @@ const config: ControlPanelConfig = {
],
...legendSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Labels')}</h1>],
+ [<div className="section-header">{t('Labels')}</div>],
[
{
name: 'label_type',
@@ -196,7 +196,7 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Pie shape')}</h1>],
+ [<div className="section-header">{t('Pie shape')}</div>],
[
{
name: 'outerRadius',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
index 0f8e390802..d24497280a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -85,7 +85,7 @@ const config: ControlPanelConfig = {
controlSetRows: [
['color_scheme'],
...legendSection,
- [<h1 className="section-header">{t('Labels')}</h1>],
+ [<div className="section-header">{t('Labels')}</div>],
[
{
name: 'show_labels',
@@ -158,7 +158,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<h1 className="section-header">{t('Radar')}</h1>],
+ [<div className="section-header">{t('Radar')}</div>],
[
{
name: 'column_config',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
index 87503166b7..b973cb6782 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -178,7 +178,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_time_format',
@@ -213,7 +213,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
index bd40eeebe0..a3b74aa12f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -139,7 +139,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_time_format',
@@ -175,7 +175,7 @@ const config: ControlPanelConfig = {
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
index 4cdf16c839..abc5e9a29e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -119,7 +119,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
@@ -156,7 +156,7 @@ const config: ControlPanelConfig = {
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
index d2f3acce9e..f234df0c82 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
@@ -136,7 +136,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_time_format',
@@ -172,7 +172,7 @@ const config: ControlPanelConfig = {
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
index 1416a7db46..b8d3a31b2c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -194,7 +194,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_time_format',
@@ -229,7 +229,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
index 1f1e22b49b..8f22acadee 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
@@ -197,7 +197,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<h1 className="section-header">{t('X Axis')}</h1>],
+ [<div className="section-header">{t('X Axis')}</div>],
[
{
name: 'x_axis_time_format',
@@ -232,7 +232,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<h1 className="section-header">{t('Y Axis')}</h1>],
+ [<div className="section-header">{t('Y Axis')}</div>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
index aa4a38fca8..cd48e0f636 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
@@ -107,7 +107,7 @@ const controlPanel: ControlPanelConfig = {
label: t('Chart options'),
expanded: true,
controlSetRows: [
- [<h1 className="section-header">{t('Layout')}</h1>],
+ [<div className="section-header">{t('Layout')}</div>],
[
{
name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
index 9f6d4e297e..63ca40225f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -62,7 +62,7 @@ const config: ControlPanelConfig = {
expanded: true,
controlSetRows: [
['color_scheme'],
- [<h1 className="section-header">{t('Labels')}</h1>],
+ [<div className="section-header">{t('Labels')}</div>],
[
{
name: 'show_labels',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
index 053d0db835..df050e6dbb 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -94,7 +94,7 @@ const legendOrientationControl: ControlSetItem = {
};
export const legendSection: ControlSetRow[] = [
- [<h1 className="section-header">{t('Legend')}</h1>],
+ [<div className="section-header">{t('Legend')}</div>],
[showLegendControl],
[legendTypeControl],
[legendOrientationControl],
@@ -219,7 +219,7 @@ const tooltipSortByMetricControl: ControlSetItem = {
};
export const richTooltipSection: ControlSetRow[] = [
- [<h1 className="section-header">{t('Tooltip')}</h1>],
+ [<div className="section-header">{t('Tooltip')}</div>],
[richTooltipControl],
[tooltipSortByMetricControl],
[tooltipTimeFormatControl],
diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less
index 3f4fad5572..e997f5fb78 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less
@@ -48,6 +48,7 @@
@almost-black: #263238;
@gray-dark: #484848;
@gray-light: #e0e0e0;
+@gray-light5: #666666;
@gray: #879399;
@gray-bg: #f7f7f7;
@gray-heading: #a3a3a3;
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 804c3d6b10..4c8345d438 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -55,7 +55,7 @@ export type ControlComponentProps<ValueType extends JsonValue = JsonValue> =
Omit<ControlProps, 'value'> & BaseControlComponentProps<ValueType>;
const StyledControl = styled.div`
- padding-bottom: ${({ theme }) => theme.gridUnit}px;
+ padding-bottom: ${({ theme }) => theme.gridUnit * 4}px;
`;
export default function Control(props: ControlProps) {
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index ce240704b5..16bf93d047 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React, { FC, ReactNode } from 'react';
-import { t, css, useTheme } from '@superset-ui/core';
+import { t, css, useTheme, SupersetTheme } from '@superset-ui/core';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { Tooltip } from 'src/components/Tooltip';
import { FormLabel } from 'src/components/Form';
@@ -106,10 +106,12 @@ const ControlHeader: FC<ControlHeaderProps> = ({
<div className="ControlHeader" data-test={`${name}-header`}>
<div className="pull-left">
<FormLabel
- css={{
- marginBottom: 0,
- position: 'relative',
- }}
+ css={(theme: SupersetTheme) =>
+ css`
+ margin-bottom: ${theme.gridUnit * 0.5}px;
+ position: relative;
+ `
+ }
>
{leftNode && <span>{leftNode}</span>}
<span
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index d4ef269027..98d80275f6 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -150,6 +150,21 @@ const ControlPanelsTabs = styled(Tabs)`
.ant-tabs-content-holder {
padding-top: ${theme.gridUnit * 4}px;
}
+
+ .ant-collapse-ghost > .ant-collapse-item {
+ &:not(:last-child) {
+ border-bottom: 1px solid ${theme.colors.grayscale.light3};
+ }
+
+ & > .ant-collapse-header {
+ font-size: ${theme.typography.sizes.s}px;
+ }
+
+ & > .ant-collapse-content > .ant-collapse-content-box {
+ padding-bottom: 0;
+ font-size: ${theme.typography.sizes.s}px;
+ }
+ }
`}
`;
@@ -388,6 +403,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
&:last-child {
padding-bottom: ${theme.gridUnit * 16}px;
+ border-bottom: 0;
}
.panel-body {
@@ -515,7 +531,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
>
<Tabs.TabPane key="query" tab={dataTabTitle}>
<Collapse
- bordered
defaultActiveKey={expandedQuerySections}
expandIconPosition="right"
ghost
@@ -528,7 +543,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
{showCustomizeTab && (
<Tabs.TabPane key="display" tab={t('Customize')}>
<Collapse
- bordered
defaultActiveKey={expandedCustomizeSections}
expandIconPosition="right"
ghost
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
index 5b14f0d52f..a570bbfed6 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -18,6 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
+import { styled, css } from '@superset-ui/core';
import ControlHeader from '../ControlHeader';
import Checkbox from '../../../components/Checkbox';
@@ -32,7 +33,16 @@ const defaultProps = {
onChange: () => {},
};
-const checkboxStyle = { paddingRight: '5px' };
+const CheckBoxControlWrapper = styled.div`
+ ${({ theme }) => css`
+ .ControlHeader label {
+ color: ${theme.colors.grayscale.dark1};
+ }
+ span[role='checkbox'] {
+ padding-right: ${theme.gridUnit * 2}px;
+ }
+ `}
+`;
export default class CheckboxControl extends React.Component {
onChange() {
@@ -43,7 +53,6 @@ export default class CheckboxControl extends React.Component {
return (
<Checkbox
onChange={this.onChange.bind(this)}
- style={checkboxStyle}
checked={!!this.props.value}
/>
);
@@ -52,11 +61,13 @@ export default class CheckboxControl extends React.Component {
render() {
if (this.props.label) {
return (
- <ControlHeader
- {...this.props}
- leftNode={this.renderCheckbox()}
- onClick={this.onChange.bind(this)}
- />
+ <CheckBoxControlWrapper>
+ <ControlHeader
+ {...this.props}
+ leftNode={this.renderCheckbox()}
+ onClick={this.onChange.bind(this)}
+ />
+ </CheckBoxControlWrapper>
);
}
return this.renderCheckbox();
diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx
index a1c786a73c..a6adbf3af2 100644
--- a/superset-frontend/src/explore/controlPanels/sections.tsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@@ -132,7 +132,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
'of query results',
),
controlSetRows: [
- [<h1 className="section-header">{t('Rolling window')}</h1>],
+ [<div className="section-header">{t('Rolling window')}</div>],
[
{
name: 'rolling_type',
@@ -181,7 +181,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
},
},
],
- [<h1 className="section-header">{t('Time comparison')}</h1>],
+ [<div className="section-header">{t('Time comparison')}</div>],
[
{
name: 'time_compare',
@@ -230,9 +230,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
},
},
],
- [<h1 className="section-header">{t('Python functions')}</h1>],
- // eslint-disable-next-line jsx-a11y/heading-has-content
- [<h2 className="section-header">pandas.resample</h2>],
+ [<div className="section-header">{t('Resample')}</div>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less
index d85e855b4d..015a8a1a3b 100644
--- a/superset-frontend/src/explore/main.less
+++ b/superset-frontend/src/explore/main.less
@@ -127,18 +127,11 @@
}
}
-h1.section-header {
- font-size: @font-size-m;
- font-weight: @font-weight-bold;
- margin-bottom: 0;
- margin-top: 0;
- padding-bottom: 5px;
-}
-
-h2.section-header {
+div.section-header {
font-size: @font-size-s;
font-weight: @font-weight-bold;
+ color: @gray-light5;
margin-bottom: 0;
margin-top: 0;
- padding-bottom: 5px;
+ padding-bottom: 16px;
}