diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 00181736119..3880be7de8d 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,10 +1,12 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { PasswordStrength } from './components/PasswordStrength'; import PageHeader from './components/PageHeader'; +import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; export function registerAngularDirectives() { react2AngularDirective('passwordStrength', PasswordStrength, ['password']); react2AngularDirective('pageHeader', PageHeader, ['model', "noTabs"]); + react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); } diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx new file mode 100644 index 00000000000..d62ae892a0a --- /dev/null +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import EmptyListCTA from './EmptyListCTA'; + +const model = { + title: 'Title', + buttonIcon: 'ga css class', + buttonLink: 'http://url/to/destination', + buttonTitle: 'Click me', + proTip: 'This is a tip', + proTipLink: 'http://url/to/tip/destination', + proTipLinkTitle: 'Learn more', + proTipTarget: '_blank' +}; + +describe('CollorPalette', () => { + + it('renders correctly', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx new file mode 100644 index 00000000000..a5a78a63bf1 --- /dev/null +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +export interface IProps { + model: any; +} + +class EmptyListCTA extends Component { + render() { + const { + title, + buttonIcon, + buttonLink, + buttonTitle, + proTip, + proTipLink, + proTipLinkTitle, + proTipTarget + } = this.props.model; + return ( +
+
{title}
+ {buttonTitle} +
+ ProTip: {proTip} + {proTipLinkTitle} +
+
+ ); + } +} + +export default EmptyListCTA; diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap new file mode 100644 index 00000000000..0598d7ecd4e --- /dev/null +++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CollorPalette renders correctly 1`] = ` +
+
+ Title +
+ + + Click me + +
+ + ProTip: + This is a tip + + Learn more + +
+
+`; diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 0669beb4129..91d156de317 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,46 +1,57 @@
-
-
- - - Add data source - -
+
- No data sources defined +
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index af4a97dc1e6..614089d3121 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -86,6 +86,7 @@ @import "components/dashboard_grid"; @import "components/dashboard_list"; @import "components/page_header"; +@import "components/empty_list_cta"; // PAGES diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index ec1460ac584..62091acdab5 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -218,8 +218,11 @@ $btn-font-weight: 500 !default; $btn-padding-x-sm: .5rem !default; $btn-padding-y-sm: .25rem !default; -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; +$btn-padding-x-lg: 21px !default; +$btn-padding-y-lg: 11px !default; + +$btn-padding-x-xl: 21px !default; +$btn-padding-y-xl: 11px !default; $btn-border-radius: 3px; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index fa6539a7175..1d2fed48830 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -48,6 +48,8 @@ a.text-success:hover, a.text-success:focus { color: darken($success-text-color, 10%); } a { cursor: pointer; } +.text-link { text-decoration: underline; } + a:focus { outline:0 none !important; } diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index cea04c28cd7..391acdc5e87 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -51,10 +51,21 @@ // Button Sizes // -------------------------------------------------- +// XLarge +.btn-xlarge { + @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $btn-border-radius); + font-weight: normal; + padding-bottom: $btn-padding-y-xl - 3; + .gicon { + font-size: 31px; + margin-right: 1rem; + } +} // Large .btn-large { @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius); + font-weight: normal; } .btn-small { diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss new file mode 100644 index 00000000000..a8c235d83db --- /dev/null +++ b/public/sass/components/_empty_list_cta.scss @@ -0,0 +1,21 @@ +.empty-list-cta { + background-color: $search-filter-box-bg; + text-align: center; +} + +.empty-list-cta__title { + padding-bottom: 30px; + font-style: italic; +} + +.empty-list-cta__button { + margin-bottom: 50px; +} + +.empty-list-cta__pro-tip { + padding-bottom: 20px; +} + +.empty-list-cta__pro-tip-link { + margin-left: 5px; +} \ No newline at end of file