Commit d8a91fa3 by Johannes Schill

feat: Add brand as tooltip theme and use it on panel edit tabs #14271

parent 2d16c29a
......@@ -7,6 +7,7 @@ import Transition from 'react-transition-group/Transition';
export enum Themes {
Default = 'popper__background--default',
Error = 'popper__background--error',
Brand = 'popper__background--brand',
}
const defaultTransitionStyles = {
......
$popper-margin-from-ref: 5px;
@mixin popper-theme($backgroundColor, $arrowColor) {
background: $backgroundColor;
.popper__arrow {
border-color: $arrowColor;
}
}
.popper {
position: absolute;
z-index: $zindex-tooltip;
......@@ -16,10 +24,12 @@ $popper-margin-from-ref: 5px;
// Themes
&.popper__background--error {
background: $tooltipBackgroundError;
.popper__arrow {
border-color: $tooltipBackgroundError;
}
@include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
}
&.popper__background--brand {
@include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
@include gradient-vertical($red, $orange);
}
}
......
......@@ -16,6 +16,7 @@ import { DashboardModel } from '../dashboard_model';
import { PanelPlugin } from 'app/types/plugins';
import { Tooltip } from '@grafana/ui';
import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
interface PanelEditorProps {
panel: PanelModel;
......@@ -138,7 +139,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
return (
<div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
<a className={tabClasses}>
<Tooltip content={`${tab.text}`} placement="auto">
<Tooltip content={`${tab.text}`} placement="auto" theme={Themes.Brand}>
<i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
</Tooltip>
</a>
......
......@@ -310,6 +310,7 @@ $graph-tooltip-bg: $dark-1;
$tooltipBackground: $popover-help-bg;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
$tooltipBackgroundBrand: $brand-primary;
// images
$checkboxImageUrl: '../img/checkbox.png';
......
......@@ -314,6 +314,7 @@ $graph-tooltip-bg: $gray-5;
$tooltipBackground: $popover-help-bg;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$tooltipBackgroundBrand: $brand-primary;
// images
$checkboxImageUrl: '../img/checkbox_white.png';
......
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