Skip to content

N
nexpie-grafana-theme
Commit 79c6fdc0 by Dominik Prokop
Options

wip

parent 22c9ce7d
Showing with 46 additions and 28 deletions
packages/grafana-ui/package.json
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@torkelo/react-select": "2.1.1", "@torkelo/react-select": "2.1.1",
"@types/react-test-renderer": "^16.0.3",
"@types/react-transition-group": "^2.0.15",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"lodash": "^4.17.10", "lodash": "^4.17.10",
...@@ -23,11 +25,11 @@ ...@@ -23,11 +25,11 @@
"react-virtualized": "^9.21.0" "react-virtualized": "^9.21.0"
}, },
"devDependencies": { "devDependencies": {
"@types/classnames": "^2.2.6",
"@types/jest": "^23.3.2", "@types/jest": "^23.3.2",
"@types/jquery": "^1.10.35",
"@types/lodash": "^4.14.119", "@types/lodash": "^4.14.119",
"@types/react": "^16.7.6", "@types/react": "^16.7.6",
"@types/classnames": "^2.2.6",
"@types/jquery": "^1.10.35",
"typescript": "^3.2.2" "typescript": "^3.2.2"
} }
} }
public/app/core/components/Tooltip/Tooltip.test.tsx → packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import Tooltip from './Tooltip'; import { Tooltip } from './Tooltip';
describe('Tooltip', () => { describe('Tooltip', () => {
it('renders correctly', () => { it('renders correctly', () => {
const tree = renderer const tree = renderer
.create( .create(
<Tooltip placement="auto" content="Tooltip text"> <Tooltip placement="auto" content="Tooltip text">
<a className="test-class" href="http://www.grafana.com">Link with tooltip</a> <a className="test-class" href="http://www.grafana.com">
Link with tooltip
</a>
</Tooltip> </Tooltip>
) )
.toJSON(); .toJSON();
......
public/app/core/components/Tooltip/Tooltip.tsx → packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
import React, { createRef } from 'react'; import React, { createRef } from 'react';
import * as PopperJS from 'popper.js'; import * as PopperJS from 'popper.js';
import Popper from './Popper'; import Popper from './Popper';
import PopperController, { UsingPopperProps } from './PopperController'; import PopperController, { UsingPopperProps } from './PopperController';
const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => { export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>(); const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
return ( return (
...@@ -12,12 +11,14 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro ...@@ -12,12 +11,14 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
{(showPopper, hidePopper, popperProps) => { {(showPopper, hidePopper, popperProps) => {
return ( return (
<> <>
<Popper {tooltipTriggerRef.current && (
{...popperProps} <Popper
onMouseEnter={showPopper} {...popperProps}
onMouseLeave={hidePopper} onMouseEnter={showPopper}
referenceElement={tooltipTriggerRef.current} onMouseLeave={hidePopper}
/> referenceElement={tooltipTriggerRef.current}
/>
)}
{React.cloneElement(children, { {React.cloneElement(children, {
ref: tooltipTriggerRef, ref: tooltipTriggerRef,
onMouseEnter: showPopper, onMouseEnter: showPopper,
...@@ -29,5 +30,3 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro ...@@ -29,5 +30,3 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro
</PopperController> </PopperController>
); );
}; };
export default Tooltip;
packages/grafana-ui/src/components/index.scss
@import 'DeleteButton/DeleteButton'; @import 'DeleteButton/DeleteButton';
@import 'Tooltip/Tooltip';
packages/grafana-ui/src/components/index.ts
export { DeleteButton } from './DeleteButton/DeleteButton'; export { DeleteButton } from './DeleteButton/DeleteButton';
export { Tooltip } from './Tooltip/Tooltip';
public/app/core/components/Label/Label.tsx
import React, { SFC, ReactNode } from 'react'; import React, { SFC, ReactNode } from 'react';
import Tooltip from '../Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
interface Props { interface Props {
tooltip?: string; tooltip?: string;
......
public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
import React, { SFC, ReactNode, PureComponent } from 'react'; import React, { SFC, ReactNode, PureComponent } from 'react';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
interface ToggleButtonGroupProps { interface ToggleButtonGroupProps {
label?: string; label?: string;
......
public/app/features/dashboard/dashgrid/DataSourceOption.tsx
import React, { SFC } from 'react'; import React, { SFC } from 'react';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
interface Props { interface Props {
label: string; label: string;
......
public/app/features/dashboard/dashgrid/PanelEditor.tsx
...@@ -15,7 +15,7 @@ import { PanelModel } from '../panel_model'; ...@@ -15,7 +15,7 @@ import { PanelModel } from '../panel_model';
import { DashboardModel } from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
interface PanelEditorProps { interface PanelEditorProps {
panel: PanelModel; panel: PanelModel;
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
import React, { Component } from 'react'; import React, { Component } from 'react';
import Remarkable from 'remarkable';
import { Tooltip } from '@grafana/ui';
import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelModel } from 'app/features/dashboard/panel_model';
import Tooltip from 'app/core/components/Tooltip/Tooltip';
import templateSrv from 'app/features/templating/template_srv'; import templateSrv from 'app/features/templating/template_srv';
import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv'; import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv'; import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv';
import Remarkable from 'remarkable';
enum InfoModes { enum InfoModes {
Error = 'Error', Error = 'Error',
...@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> { ...@@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component<Props> {
{infoMode === InfoModes.Info || infoMode === InfoModes.Links ? ( {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
<Tooltip <Tooltip
content={this.getInfoContent} content={this.getInfoContent}
placement="bottom-start" placement="bottom-start"
> >
<div <div
className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`} className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
......
public/app/features/dashboard/permissions/DashboardPermissions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
import SlideDown from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import { StoreState, FolderInfo } from 'app/types'; import { StoreState, FolderInfo } from 'app/types';
import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl'; import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
......
public/app/features/folders/FolderPermissions.tsx
...@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; ...@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import PageHeader from 'app/core/components/PageHeader/PageHeader';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
import SlideDown from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { NavModel, StoreState, FolderState } from 'app/types'; import { NavModel, StoreState, FolderState } from 'app/types';
......
public/app/features/teams/TeamGroupSync.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SlideDown from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import { Tooltip } from '@grafana/ui';
import { TeamGroup } from '../../types'; import { TeamGroup } from '../../types';
import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions'; import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
import { getTeamGroups } from './state/selectors'; import { getTeamGroups } from './state/selectors';
......
public/sass/_grafana.scss
...@@ -97,7 +97,6 @@ ...@@ -97,7 +97,6 @@
@import 'components/page_header'; @import 'components/page_header';
@import 'components/dashboard_settings'; @import 'components/dashboard_settings';
@import 'components/empty_list_cta'; @import 'components/empty_list_cta';
@import 'components/popper';
@import 'components/form_select_box'; @import 'components/form_select_box';
@import 'components/panel_editor'; @import 'components/panel_editor';
@import 'components/toolbar'; @import 'components/toolbar';
......
yarn.lock
...@@ -1091,6 +1091,13 @@ ...@@ -1091,6 +1091,13 @@
"@types/react-dom" "*" "@types/react-dom" "*"
"@types/react-transition-group" "*" "@types/react-transition-group" "*"
"@types/react-test-renderer@^16.0.3":
version "16.0.3"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
dependencies:
"@types/react" "*"
"@types/react-transition-group@*": "@types/react-transition-group@*":
version "2.0.14" version "2.0.14"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.14.tgz#afd0cd785a97f070b55765e9f9d76ff568269001" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.14.tgz#afd0cd785a97f070b55765e9f9d76ff568269001"
...@@ -1098,7 +1105,14 @@ ...@@ -1098,7 +1105,14 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6": "@types/react-transition-group@^2.0.15":
version "2.0.15"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8"
integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^16.1.0", "@types/react@^16.7.6":
version "16.7.6" version "16.7.6"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA== integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
...@@ -3161,7 +3175,7 @@ caniuse-api@^1.5.2: ...@@ -3161,7 +3175,7 @@ caniuse-api@^1.5.2:
lodash.memoize "^4.1.2" lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0" lodash.uniq "^4.5.0"
caniuse-db@1.0.30000772, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000772" version "1.0.30000772"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
integrity sha1-UarokXaChureSj2DGep21qAbUSs= integrity sha1-UarokXaChureSj2DGep21qAbUSs=
......
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