diff --git a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx index dedb0a6660fa..04888923be17 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx @@ -34,8 +34,10 @@ const StyledEditableTitle = styled.span<{ canEdit: boolean; }>` &.editable-title { - display: inline-block; - width: 100%; + display: inline; + &.editable-title--editing { + width: 100%; + } input, textarea { diff --git a/superset-frontend/src/components/CopyToClipboard/index.tsx b/superset-frontend/src/components/CopyToClipboard/index.tsx index 92263d261f7f..d790fd05a8a8 100644 --- a/superset-frontend/src/components/CopyToClipboard/index.tsx +++ b/superset-frontend/src/components/CopyToClipboard/index.tsx @@ -17,7 +17,7 @@ * under the License. */ import { Component, cloneElement, ReactElement } from 'react'; -import { t } from '@superset-ui/core'; +import { t, css, SupersetTheme } from '@superset-ui/core'; import copyTextToClipboard from 'src/utils/copy'; import { Tooltip } from '@superset-ui/core/components'; import withToasts from '../MessageToasts/withToasts'; @@ -104,7 +104,14 @@ class CopyToClip extends Component { return ( {this.props.shouldShowText && this.props.text && ( - {this.props.text} + css` + margin-right: ${theme.sizeUnit}px; + `} + > + {this.props.text} + )} {this.renderTooltip('pointer')} diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx index 6c2e304c58b5..b9e7e71a6c2e 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx @@ -75,6 +75,18 @@ const HeaderStyles = styled.div` font-size: ${theme.fontSizeXXL}px; } + .anchor-link-container { + display: inline; + line-height: 0; + vertical-align: bottom; /* trick to align the anchor with text */ + opacity: 0; + transition: opacity ${theme.motionDurationMid} ease-in-out; + } + + &:hover .anchor-link-container { + opacity: 1; + } + .dashboard--editing .dashboard-grid & { &:after { border: 1px dashed transparent; diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx index e6357d04a925..900d658ccadc 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx @@ -79,10 +79,23 @@ const defaultProps = { const TabTitleContainer = styled.div` ${({ isHighlighted, theme: { sizeUnit, colorPrimaryBg } }) => ` - padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px; - margin: ${-sizeUnit}px ${sizeUnit * -2}px; + display: inline-flex; + position: relative; + align-items: center; + margin: 0 ${sizeUnit * 2}px; transition: box-shadow 0.2s ease-in-out; - ${isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};`} + ${isHighlighted ? `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};` : ''} + + .anchor-link-container { + position: absolute; + left: 100%; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + &:hover .anchor-link-container { + opacity: 1; + } `} `;