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

Tooltips : Add ability to flag anchor tag as external link in a tooltip (#41014)

Browse Source 
* sass: add in the option for extneral link color to tooltip anchor tag

* variable editor: change the link in the tool tip to external styling

* fixed class name to be the same as other instances of this
This commit is contained in:
Tim Levett 2021-11-01 09:14:53 -05:00 committed by GitHub
parent 993c60d36e
commit a81ca03302
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,12 @@ $popper-margin-from-ref: 5px;
color: lighten($textColor, 20%); color: lighten($textColor, 20%);
} }
a { a {
color: $white; color: $tooltipLinkColor;
text-decoration: underline; text-decoration: underline;
} }
a.external-link {
color: $tooltipExternalLinkColor;
}
} }
.popper { .popper {

1
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -282,6 +282,7 @@ $alert-info-bg: ${theme.colors.warning.main};
// ------------------------- // -------------------------
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$tooltipExternalLinkColor: $external-link-color;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: ${theme.components.tooltip.background}; $tooltipBackground: ${theme.components.tooltip.background};

1
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -293,6 +293,7 @@ $graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%); $tooltipLinkColor: lighten($tooltipColor, 5%);
$tooltipExternalLinkColor: #6E9FFF;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground; $popover-help-bg: $tooltipBackground;

1
public/app/features/variables/query/QueryVariableEditor.tsx
View File

@ -190,6 +190,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
Optional, if you want to extract part of a series name or metric node segment. Named capture groups Optional, if you want to extract part of a series name or metric node segment. Named capture groups
can be used to separate the display text and value ( can be used to separate the display text and value (
<a <a
className="external-link"
href="https://grafana.com/docs/grafana/latest/variables/filter-variables-with-regex#filter-and-modify-using-named-text-and-value-capture-groups" href="https://grafana.com/docs/grafana/latest/variables/filter-variables-with-regex#filter-and-modify-using-named-text-and-value-capture-groups"
target="__blank" target="__blank"
> >

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

@ -285,6 +285,7 @@ $alert-info-bg: #F5B73D;
// ------------------------- // -------------------------
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$tooltipExternalLinkColor: $external-link-color;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: #22252b; $tooltipBackground: #22252b;

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

@ -295,6 +295,7 @@ $graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%); $tooltipLinkColor: lighten($tooltipColor, 5%);
$tooltipExternalLinkColor: #6E9FFF;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground; $popover-help-bg: $tooltipBackground;

4
public/sass/components/_tooltip.scss
View File

@ -111,6 +111,10 @@
a { a {
color: $tooltipLinkColor; color: $tooltipLinkColor;
} }
a.external-link {
color: $tooltipExternalLinkColor;
}
} }
.grafana-tip { .grafana-tip {