diff --git a/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx b/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx index 85bc7fb50d..709a216da4 100644 --- a/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx +++ b/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx @@ -9,15 +9,19 @@ const propTypes = { icon: PropTypes.string, className: PropTypes.string, onClick: PropTypes.func, + placement: PropTypes.string, }; const defaultProps = { - icon: 'question-circle-o', + icon: 'info-circle', + className: 'text-muted', + placement: 'right', }; -export default function InfoTooltipWithTrigger({ label, tooltip, icon, className, onClick }) { +export default function InfoTooltipWithTrigger({ + label, tooltip, icon, className, onClick, placement }) { return ( {tooltip}} > +
diff --git a/superset/assets/javascripts/explore/components/ControlHeader.jsx b/superset/assets/javascripts/explore/components/ControlHeader.jsx index 616092b79d..a79d287bca 100644 --- a/superset/assets/javascripts/explore/components/ControlHeader.jsx +++ b/superset/assets/javascripts/explore/components/ControlHeader.jsx @@ -10,74 +10,92 @@ const propTypes = { renderTrigger: PropTypes.bool, rightNode: PropTypes.node, leftNode: PropTypes.node, + onClick: PropTypes.func, + hovered: PropTypes.bool, }; const defaultProps = { validationErrors: [], renderTrigger: false, + hovered: false, }; -export default function ControlHeader({ - label, description, validationErrors, renderTrigger, leftNode, rightNode }) { - const hasError = (validationErrors.length > 0); - return ( -
-
- - {hasError ? - {label} : - {label} - } - {' '} - {(validationErrors.length > 0) && +export default class ControlHeader extends React.Component { + renderOptionalIcons() { + if (this.props.hovered) { + return ( + + {this.props.description && - - {validationErrors.join(' ')} - - } - > - - + {' '} } - {description && + {this.props.renderTrigger && - + {' '} } - {renderTrigger && - - - Takes effect on chart immediatly - - } - > - - - {' '} + ); + } + return null; + } + render() { + const labelClass = (this.props.validationErrors.length > 0) ? 'text-danger' : ''; + return ( +
+
+ + {this.props.leftNode && + {this.props.leftNode} + } + + {this.props.label} - } - {leftNode && - {leftNode} - } - -
- {rightNode && -
- {rightNode} + {' '} + {(this.props.validationErrors.length > 0) && + + + {this.props.validationErrors.join(' ')} + + } + > + + + {' '} + + } + {this.renderOptionalIcons()} +
- } -
-
- ); + {this.props.rightNode && +
+ {this.props.rightNode} +
+ } +
+
+ ); + } } ControlHeader.propTypes = propTypes; diff --git a/superset/assets/javascripts/explore/components/controls/CheckboxControl.jsx b/superset/assets/javascripts/explore/components/controls/CheckboxControl.jsx index bb5d2ce743..fa70c18a6f 100644 --- a/superset/assets/javascripts/explore/components/controls/CheckboxControl.jsx +++ b/superset/assets/javascripts/explore/components/controls/CheckboxControl.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Checkbox } from 'react-bootstrap'; import ControlHeader from '../ControlHeader'; const propTypes = { @@ -24,11 +23,16 @@ export default class CheckboxControl extends React.Component { return ( + + +    + } /> ); diff --git a/superset/assets/package.json b/superset/assets/package.json index d22381bec8..9cf9673ad3 100644 --- a/superset/assets/package.json +++ b/superset/assets/package.json @@ -66,7 +66,7 @@ "react-addons-css-transition-group": "^15.6.0", "react-addons-shallow-compare": "^15.4.2", "react-alert": "^1.0.14", - "react-bootstrap": "^0.31.0", + "react-bootstrap": "^0.31.2", "react-bootstrap-table": "^3.1.7", "react-dom": "^15.5.1", "react-gravatar": "^2.6.1", diff --git a/superset/assets/spec/javascripts/explore/components/CheckboxControl_spec.jsx b/superset/assets/spec/javascripts/explore/components/CheckboxControl_spec.jsx index 0b0839778a..23e58aca90 100644 --- a/superset/assets/spec/javascripts/explore/components/CheckboxControl_spec.jsx +++ b/superset/assets/spec/javascripts/explore/components/CheckboxControl_spec.jsx @@ -1,6 +1,5 @@ /* eslint-disable no-unused-expressions */ import React from 'react'; -import { Checkbox } from 'react-bootstrap'; import sinon from 'sinon'; import { expect } from 'chai'; import { describe, it, beforeEach } from 'mocha'; @@ -28,6 +27,6 @@ describe('CheckboxControl', () => { expect(controlHeader).to.have.lengthOf(1); const headerWrapper = controlHeader.shallow(); - expect(headerWrapper.find(Checkbox)).to.have.length(1); + expect(headerWrapper.find('i.fa-check')).to.have.length(1); }); }); diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index fcdece9fb0..87ba2882d9 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -329,3 +329,6 @@ iframe { border: none; width: 100%; } +.text-transparent { + color: transparent; +}