From e55659192af43763028739109885d305778cfdcf Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Tue, 4 Dec 2018 17:00:00 +0100 Subject: [PATCH 1/2] Small tooltip css-adjustments and add css for position "bottom-start" used by the panel header corner --- .../core/components/Tooltip/withPopper.tsx | 1 - .../PanelHeader/PanelHeaderCorner.tsx | 1 + public/sass/components/_popper.scss | 80 ++++++++++++------- 3 files changed, 50 insertions(+), 32 deletions(-) diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx index fc4c352d0f5..4ba05937531 100644 --- a/public/app/core/components/Tooltip/withPopper.tsx +++ b/public/app/core/components/Tooltip/withPopper.tsx @@ -60,7 +60,6 @@ export default function withPopper(WrappedComponent) { }; renderContent(content) { - console.log('render content'); if (typeof content === 'function') { // If it's a function we assume it's a React component const ReactComponent = content; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx index 60471cff19f..e8483ec467a 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -76,6 +76,7 @@ export class PanelHeaderCorner extends PureComponent { content={this.getInfoContent} className="popper__manager--block" refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`} + placement="bottom-start" > diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss index 79dc24f5e43..4a3c1cdc1b0 100644 --- a/public/sass/components/_popper.scss +++ b/public/sass/components/_popper.scss @@ -11,33 +11,13 @@ height: 0; border-style: solid; position: absolute; - margin: 5px; + margin: 0px; } .popper .popper__arrow { border-color: $tooltipBackground; } -.popper[data-placement^='top'] { - margin-bottom: 5px; -} - -.popper[data-placement^='top'] .popper__arrow { - border-width: 5px 5px 0 5px; - border-left-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - bottom: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; - padding-top: 5px; -} - -.popper[data-placement^='bottom'] { - padding-top: 5px; -} - .popper__background { background: $tooltipBackground; border-radius: 3px; @@ -45,16 +25,58 @@ padding: 10px; } +// Top +.popper[data-placement^='top'] { + padding-bottom: 5px; +} +.popper[data-placement^='top'] .popper__arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + bottom: -5px; + left: calc(50% - 5px); + padding-top: 5px; +} + +// Bottom +.popper[data-placement^='bottom'] { + padding-top: 5px; +} .popper[data-placement^='bottom'] .popper__arrow { border-width: 0 5px 5px 5px; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; top: 0; - left: calc(50% - 8px); - margin-top: 0; - margin-bottom: 0; + left: calc(50% - 5px); } + +.popper[data-placement^='bottom-start'] { + padding-top: 5px; +} +.popper[data-placement^='bottom-start'] .popper__arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: 0; + left: 5px; +} + +.popper[data-placement^='bottom-end'] { + padding-top: 5px; +} +.popper[data-placement^='bottom-end'] .popper__arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: 0; + left: calc(100% - 5px); +} + +// Right .popper[data-placement^='right'] { padding-left: 5px; } @@ -64,15 +86,13 @@ border-top-color: transparent; border-bottom-color: transparent; left: 0; - top: calc(50% - 8px); - margin-left: 0; - margin-right: 0; + top: calc(50% - 5px); } +// Left .popper[data-placement^='left'] { - margin-right: 5px; + padding-right: 5px; } - .popper[data-placement^='left'] .popper__arrow { border-width: 5px 0 5px 5px; border-top-color: transparent; @@ -80,8 +100,6 @@ border-bottom-color: transparent; right: -5px; top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; } .popper__target, From 0a8f23d8a6ae74701e04e81ab4d3f6a0d0b2599b Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Wed, 5 Dec 2018 09:39:03 +0100 Subject: [PATCH 2/2] Update css to use the border-radius variable and add a new variable for the popper's distance to its ref --- public/sass/components/_popper.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss index 4a3c1cdc1b0..d869d52b92f 100644 --- a/public/sass/components/_popper.scss +++ b/public/sass/components/_popper.scss @@ -1,3 +1,5 @@ +$popper-margin-from-ref: 5px; + .popper { position: absolute; z-index: $zindex-tooltip; @@ -20,14 +22,14 @@ .popper__background { background: $tooltipBackground; - border-radius: 3px; + border-radius: $border-radius; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); padding: 10px; } // Top .popper[data-placement^='top'] { - padding-bottom: 5px; + padding-bottom: $popper-margin-from-ref; } .popper[data-placement^='top'] .popper__arrow { border-width: 5px 5px 0 5px; @@ -41,7 +43,7 @@ // Bottom .popper[data-placement^='bottom'] { - padding-top: 5px; + padding-top: $popper-margin-from-ref; } .popper[data-placement^='bottom'] .popper__arrow { border-width: 0 5px 5px 5px; @@ -53,7 +55,7 @@ } .popper[data-placement^='bottom-start'] { - padding-top: 5px; + padding-top: $popper-margin-from-ref; } .popper[data-placement^='bottom-start'] .popper__arrow { border-width: 0 5px 5px 5px; @@ -65,7 +67,7 @@ } .popper[data-placement^='bottom-end'] { - padding-top: 5px; + padding-top: $popper-margin-from-ref; } .popper[data-placement^='bottom-end'] .popper__arrow { border-width: 0 5px 5px 5px; @@ -78,7 +80,7 @@ // Right .popper[data-placement^='right'] { - padding-left: 5px; + padding-left: $popper-margin-from-ref; } .popper[data-placement^='right'] .popper__arrow { border-width: 5px 5px 5px 0; @@ -91,7 +93,7 @@ // Left .popper[data-placement^='left'] { - padding-right: 5px; + padding-right: $popper-margin-from-ref; } .popper[data-placement^='left'] .popper__arrow { border-width: 5px 0 5px 5px;