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

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

Browse Source
This commit is contained in:
Johannes Schill 2019-01-09 15:36:53 +01:00
parent 2d16c29a1a
commit d8a91fa355
5 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Tooltip/Popper.tsx
View File

@ -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 = {

18
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
View File

@ -1,5 +1,13 @@
$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);
}
}

3
public/app/features/dashboard/dashgrid/PanelEditor.tsx
View File

@ -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>

1
public/sass/_variables.dark.scss
View File

@ -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';

1
public/sass/_variables.light.scss
View File

@ -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';