IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Small tooltip css-adjustments and add css for position "bottom-start" used by the panel header corner

Browse Source
This commit is contained in:
Johannes Schill 2018-12-04 17:00:00 +01:00
parent c2aa64595a
commit e55659192a
3 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/Tooltip/withPopper.tsx
View File

@ -60,7 +60,6 @@ export default function withPopper(WrappedComponent) {
}; };
renderContent(content) { renderContent(content) {
console.log('render content');
if (typeof content === 'function') { if (typeof content === 'function') {
// If it's a function we assume it's a React component // If it's a function we assume it's a React component
const ReactComponent = content; const ReactComponent = content;

1
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
View File

@ -76,6 +76,7 @@ export class PanelHeaderCorner extends PureComponent<Props> {
content={this.getInfoContent} content={this.getInfoContent}
className="popper__manager--block" className="popper__manager--block"
refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`} refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
placement="bottom-start"
> >
<i className="fa" /> <i className="fa" />
<span className="panel-info-corner-inner" /> <span className="panel-info-corner-inner" />

80
public/sass/components/_popper.scss
View File

@ -11,33 +11,13 @@
height: 0; height: 0;
border-style: solid; border-style: solid;
position: absolute; position: absolute;
margin: 5px; margin: 0px;
} }
.popper .popper__arrow { .popper .popper__arrow {
border-color: $tooltipBackground; 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 { .popper__background {
background: $tooltipBackground; background: $tooltipBackground;
border-radius: 3px; border-radius: 3px;
@ -45,16 +25,58 @@
padding: 10px; 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 { .popper[data-placement^='bottom'] .popper__arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-top-color: transparent; border-top-color: transparent;
top: 0; top: 0;
left: calc(50% - 8px); left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
} }
.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'] { .popper[data-placement^='right'] {
padding-left: 5px; padding-left: 5px;
} }
@ -64,15 +86,13 @@
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
left: 0; left: 0;
top: calc(50% - 8px); top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
} }
// Left
.popper[data-placement^='left'] { .popper[data-placement^='left'] {
margin-right: 5px; padding-right: 5px;
} }
.popper[data-placement^='left'] .popper__arrow { .popper[data-placement^='left'] .popper__arrow {
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-top-color: transparent; border-top-color: transparent;
@ -80,8 +100,6 @@
border-bottom-color: transparent; border-bottom-color: transparent;
right: -5px; right: -5px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
} }
.popper__target, .popper__target,