QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(explore): improve UI in the control panel (#19748)

Browse Source 
* feat(explore): improve section header of control panel

* fix checkbox control color and radio button color
This commit is contained in:
Stephen Liu
2022-04-20 21:06:33 +08:00
committed by GitHub
parent 4f997cd9ac
commit e3a54aa3c1
30 changed files with 99 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
View File

@@ -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',

4
superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
View File

@@ -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',

5
superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
View File

@@ -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',
},

9
superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
View File

@@ -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',

9
superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
View File

@@ -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',

7
superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
View File

@@ -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',

2
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
View File

@@ -34,7 +34,7 @@ export default {
controlSetRows: [['metric'], ['adhoc_filters']],
},
{
label: t('Options'),
label: t('Display settings'),
expanded: true,
tabOverride: 'data',
controlSetRows: [

5
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
View File

@@ -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',

2
superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
View File

@@ -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',

8
superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
View File

@@ -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',

2
superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
View File

@@ -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',

6
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
View File

@@ -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',

4
superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
View File

@@ -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',

4
superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
View File

@@ -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',

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
View File

@@ -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'],
[
{

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
View File

@@ -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'],
[

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
View File

@@ -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'],
[
{

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
View File

@@ -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'],
[

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
View File

@@ -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'],
[
{

4
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
View File

@@ -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'],
[
{

2
superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
View File

@@ -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',

2
superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
View File

@@ -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',

4
superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
View File

@@ -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],

1
superset-frontend/src/assets/stylesheets/less/variables.less
View File

@@ -48,6 +48,7 @@
@almost-black: #263238;
@gray-dark: #484848;
@gray-light: #e0e0e0;
@gray-light5: #666666;
@gray: #879399;
@gray-bg: #f7f7f7;
@gray-heading: #a3a3a3;

2
superset-frontend/src/explore/components/Control.tsx
View File

@@ -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) {

12
superset-frontend/src/explore/components/ControlHeader.tsx
View File

@@ -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

18
superset-frontend/src/explore/components/ControlPanelsContainer.tsx
View File

@@ -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

25
superset-frontend/src/explore/components/controls/CheckboxControl.jsx
View File

@@ -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();

8
superset-frontend/src/explore/controlPanels/sections.tsx
View File

@@ -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',

13
superset-frontend/src/explore/main.less
View File

@@ -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;
}