layout tweaks

apache · Jan 10, 2019 · 88c6223 · 88c6223
1 parent 21c9cc8
commit 88c6223
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/superset/assets/src/components/FormRow.jsx b/superset/assets/src/components/FormRow.jsx
@@ -5,32 +5,43 @@ import { Row, Col } from 'react-bootstrap';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 
 const STYLE_ROW = { marginTop: '5px', minHeight: '30px' };
+const STYLE_RALIGN = { textAlign: 'right' };
 
 const propTypes = {
   label: PropTypes.string.isRequired,
   tooltip: PropTypes.string,
   control: PropTypes.node.isRequired,
+  isCheckbox: PropTypes.bool,
 };
 
 const defaultProps = {
   tooltip: null,
+  isCheckbox: false,
 };
 
-export default function FormRow({ label, tooltip, control }) {
+export default function FormRow({ label, tooltip, control, isCheckbox }) {
+  const labelAndTooltip = (
+    <span>
+      {label}{' '}
+      {tooltip &&
+        <InfoTooltipWithTrigger
+          placement="top"
+          label={label}
+          tooltip={tooltip}
+        />}
+    </span>);
+  if (isCheckbox) {
+    return (
+      <Row style={STYLE_ROW}>
+        <Col md={4} style={STYLE_RALIGN}>{control}</Col>
+        <Col md={8}>{labelAndTooltip}</Col>
+      </Row>);
+  }
   return (
     <Row style={STYLE_ROW}>
-      <Col md={5}>
-        {label}{' '}
-        {tooltip &&
-          <InfoTooltipWithTrigger
-            placement="top"
-            label={label}
-            tooltip={tooltip}
-          />}
-      </Col>
-      <Col md={7}>{control}</Col>
-    </Row>
-  );
+      <Col md={4} style={STYLE_RALIGN}>{labelAndTooltip}</Col>
+      <Col md={8}>{control}</Col>
+    </Row>);
 }
 FormRow.propTypes = propTypes;
 FormRow.defaultProps = defaultProps;
diff --git a/superset/assets/src/explore/components/controls/FilterBoxItemControl.jsx b/superset/assets/src/explore/components/controls/FilterBoxItemControl.jsx
@@ -27,7 +27,7 @@ const defaultProps = {
   multiple: true,
 };
 
-const STYLE_WIDTH = { width: 450 };
+const STYLE_WIDTH = { width: 350 };
 
 export default class FilterBoxItemControl extends React.Component {
   constructor(props) {
@@ -109,6 +109,7 @@ export default class FilterBoxItemControl extends React.Component {
         <FormRow
           label={t('Sort Ascending')}
           tooltip={t('Check for sorting ascending')}
+          isCheckbox
           control={
             <CheckboxControl
               value={this.state.asc}
@@ -118,6 +119,7 @@ export default class FilterBoxItemControl extends React.Component {
         />
         <FormRow
           label={t('Allow Multiple Selections')}
+          isCheckbox
           tooltip={t(
             'Multiple selections allowed, otherwise filter ' +
             'is limited to a single value')}
@@ -131,6 +133,7 @@ export default class FilterBoxItemControl extends React.Component {
         <FormRow
           label={t('Required')}
           tooltip={t('User must select a value for this filter')}
+          isCheckbox
           control={
             <CheckboxControl
               value={!this.state.clearable}

diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.jsx b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx
@@ -6,7 +6,6 @@ import { Button } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
 import DateFilterControl from '../../explore/components/controls/DateFilterControl';
-import CheckboxControl from '../../explore/components/controls/CheckboxControl';
 import ControlRow from '../../explore/components/ControlRow';
 import Control from '../../explore/components/Control';
 import controls from '../../explore/controls';