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

Merge branch 'develop' of github.com:grafana/grafana into develop

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-05 11:20:25 +01:00
commit e4e408676f
3 changed files with 46 additions and 26 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" />

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

@ -1,3 +1,5 @@
$popper-margin-from-ref: 5px;
.popper { .popper {
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
@ -11,17 +13,24 @@
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'] { .popper__background {
margin-bottom: 5px; background: $tooltipBackground;
border-radius: $border-radius;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
} }
// Top
.popper[data-placement^='top'] {
padding-bottom: $popper-margin-from-ref;
}
.popper[data-placement^='top'] .popper__arrow { .popper[data-placement^='top'] .popper__arrow {
border-width: 5px 5px 0 5px; border-width: 5px 5px 0 5px;
border-left-color: transparent; border-left-color: transparent;
@ -29,34 +38,49 @@
border-bottom-color: transparent; border-bottom-color: transparent;
bottom: -5px; bottom: -5px;
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
padding-top: 5px; padding-top: 5px;
} }
// Bottom
.popper[data-placement^='bottom'] { .popper[data-placement^='bottom'] {
padding-top: 5px; padding-top: $popper-margin-from-ref;
} }
.popper__background {
background: $tooltipBackground;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
}
.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: $popper-margin-from-ref;
}
.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: $popper-margin-from-ref;
}
.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: $popper-margin-from-ref;
} }
.popper[data-placement^='right'] .popper__arrow { .popper[data-placement^='right'] .popper__arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
@ -64,15 +88,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: $popper-margin-from-ref;
} }
.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 +102,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,