diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx index 6861fc59f0..24028d04a4 100644 --- a/superset-frontend/src/components/Button/index.tsx +++ b/superset-frontend/src/components/Button/index.tsx @@ -22,11 +22,18 @@ import { Button as BootstrapButton, Tooltip, OverlayTrigger, + MenuItem, } from 'react-bootstrap'; import styled from '@superset-ui/style'; export type OnClickHandler = React.MouseEventHandler; +export interface DropdownItemProps { + label: string; + url: string; + icon?: string; +} + export interface ButtonProps { className?: string; tooltip?: string; @@ -38,6 +45,7 @@ export interface ButtonProps { bsSize?: BootstrapButton.ButtonProps['bsSize']; style?: BootstrapButton.ButtonProps['style']; children?: React.ReactNode; + dropdownItems?: DropdownItemProps[]; } const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' }; @@ -82,23 +90,41 @@ export default function Button(props: ButtonProps) { }; const tooltip = props.tooltip; const placement = props.placement; + const dropdownItems = props.dropdownItems; delete buttonProps.tooltip; delete buttonProps.placement; + if (tooltip && props.disabled) { + // Working around the fact that tooltips don't get triggered when buttons are disabled + // https://github.com/react-bootstrap/react-bootstrap/issues/1588 + buttonProps.style = { pointerEvents: 'none' }; + } + let button = ( {props.children} ); + + if (dropdownItems) { + button = ( +
+ + {props.children} + + +
+ ); + } + if (tooltip) { - if (props.disabled) { - // Working around the fact that tooltips don't get triggered when buttons are disabled - // https://github.com/react-bootstrap/react-bootstrap/issues/1588 - buttonProps.style = { pointerEvents: 'none' }; - button = ( -
- {props.children} -
- ); - } return ( ); } + return button; } diff --git a/superset-frontend/src/components/Menu/NewMenu.tsx b/superset-frontend/src/components/Menu/NewMenu.tsx index 197365280e..055ca2e6ee 100644 --- a/superset-frontend/src/components/Menu/NewMenu.tsx +++ b/superset-frontend/src/components/Menu/NewMenu.tsx @@ -17,44 +17,42 @@ * under the License. */ import React from 'react'; +import styled from '@superset-ui/style'; import { t } from '@superset-ui/translation'; +import Button, { DropdownItemProps } from '../Button'; -const buttonStyle = { - marginTop: '12px', - marginRight: '30px', -}; +const StyledButton = styled(Button)` + margin-top: 12px; + margin-right: 30px; +`; + +const dropdownItems: DropdownItemProps[] = [ + { + label: t('SQL Query'), + url: '/superset/sqllab', + icon: 'fa-fw fa-search', + }, + { + label: t('Chart'), + url: '/chart/add', + icon: 'fa-fw fa-bar-chart', + }, + { + label: t('Dashboard'), + url: '/dashboard/new', + icon: 'fa-fw fa-dashboard', + }, +]; export default function NewMenu() { return (
  • - - +
  • ); } diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/stylesheets/less/cosmo/bootswatch.less index 057fa7efc0..f65e95ad15 100644 --- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less +++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less @@ -70,11 +70,6 @@ text-transform: uppercase; } -.btn-default:hover { - color: @gray-dark; - background-color: @gray-bg; -} - .nav-tabs { .dropdown-toggle.btn, .btn-group.open .dropdown-toggle.btn {