Commit 79fd8a7e by Johannes Schill

feat: Add "theme" to Tooltip

parent dadbaccf
......@@ -21,13 +21,21 @@ interface Props {
placement?: any;
content: string | ((props: any) => JSX.Element);
refClassName?: string;
theme?: string;
}
export enum Themes {
Default = 'popper__background--default',
Error = 'popper__background--error',
}
class Popper extends PureComponent<Props> {
render() {
const { children, renderContent, show, placement, refClassName } = this.props;
const { children, renderContent, show, placement, refClassName, theme } = this.props;
const { content } = this.props;
const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
return (
<Manager>
<Reference>
......@@ -53,7 +61,7 @@ class Popper extends PureComponent<Props> {
data-placement={placement}
className="popper"
>
<div className="popper__background">
<div className={popperBackgroundClassName}>
{renderContent(content)}
<div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
</div>
......
......@@ -9,6 +9,7 @@ export interface UsingPopperProps {
content: string | ((props: any) => JSX.Element);
className?: string;
refClassName?: string;
theme?: string;
}
interface Props {
......@@ -16,6 +17,7 @@ interface Props {
className?: string;
refClassName?: string;
content: string | ((props: any) => JSX.Element);
theme?: string;
}
interface State {
......@@ -71,7 +73,6 @@ export default function withPopper(WrappedComponent) {
render() {
const { show, placement } = this.state;
const className = this.props.className || '';
return (
<WrappedComponent
{...this.props}
......
......@@ -11,6 +11,7 @@ import kbn from 'app/core/utils/kbn';
// Types
import { DataQueryOptions, DataQueryResponse } from 'app/types';
import { TimeRange, TimeSeries, LoadingState } from '@grafana/ui';
import { Themes } from 'app/core/components/Tooltip/Popper';
interface RenderProps {
loading: LoadingState;
......@@ -140,7 +141,7 @@ export class DataPanel extends Component<Props, State> {
const timeSeries = response.data;
if (isFirstLoad && loading === LoadingState.Loading) {
return this.renderLoadingState();
return this.renderLoadingStates();
}
if (!queries.length) {
......@@ -153,7 +154,7 @@ export class DataPanel extends Component<Props, State> {
return (
<>
{this.renderLoadingState()}
{this.renderLoadingStates()}
{this.props.children({
timeSeries,
loading,
......@@ -162,7 +163,7 @@ export class DataPanel extends Component<Props, State> {
);
}
private renderLoadingState(): JSX.Element {
private renderLoadingStates(): JSX.Element {
const { loading } = this.state;
if (loading === LoadingState.Loading) {
return (
......@@ -177,6 +178,7 @@ export class DataPanel extends Component<Props, State> {
className="popper__manager--block"
refClassName={`panel-info-corner panel-info-corner--error`}
placement="bottom-start"
theme={Themes.Error}
>
<i className="fa" />
<span className="panel-info-corner-inner" />
......
......@@ -302,12 +302,14 @@ $popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipBackground: $popover-help-bg;
$tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $popover-help-bg;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
// images
$checkboxImageUrl: '../img/checkbox.png';
......
......@@ -307,12 +307,14 @@ $popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipBackground: $popover-help-bg;
$tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: lighten($popover-help-color, 5%);
$graph-tooltip-bg: $gray-5;
$tooltipBackground: $popover-help-bg;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
// images
$checkboxImageUrl: '../img/checkbox_white.png';
......
......@@ -8,7 +8,22 @@ $popper-margin-from-ref: 5px;
text-align: center;
}
.popper .popper__arrow {
.popper__background {
background: $tooltipBackground;
border-radius: $border-radius;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
// Themes
&.popper__background--error {
background: $tooltipBackgroundError;
.popper__arrow {
border-color: $tooltipBackgroundError;
}
}
}
.popper__arrow {
width: 0;
height: 0;
border-style: solid;
......@@ -16,17 +31,10 @@ $popper-margin-from-ref: 5px;
margin: 0px;
}
.popper .popper__arrow {
.popper__arrow {
border-color: $tooltipBackground;
}
.popper__background {
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment