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

ux: Add CTA for empty lists

Browse Source
This commit is contained in:
Johannes Schill 2017-12-04 16:18:46 +01:00
parent 15f46b8534
commit ba3a81aba5
10 changed files with 183 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/angular_wrappers.ts
View File

@ -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']);
}

22
public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx Normal file
View File

@ -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(<EmptyListCTA model={model} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

34
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx Normal file
View File

@ -0,0 +1,34 @@
import React, { Component } from 'react';
export interface IProps {
model: any;
}
class EmptyListCTA extends Component<IProps, any> {
render() {
const {
title,
buttonIcon,
buttonLink,
buttonTitle,
proTip,
proTipLink,
proTipLinkTitle,
proTipTarget
} = this.props.model;
return (
<div className="empty-list-cta p-t-2 p-b-1">
<div className="empty-list-cta__title">{title}</div>
<a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
<div className="empty-list-cta__pro-tip">
<i className="fa fa-rocket" /> ProTip: {proTip}
<a className="text-link empty-list-cta__pro-tip-link"
href={proTipLink}
target={proTipTarget}>{proTipLinkTitle}</a>
</div>
</div>
);
}
}
export default EmptyListCTA;

38
public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap Normal file
View File

@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CollorPalette renders correctly 1`] = `
<div
className="empty-list-cta p-t-2 p-b-1"
>
<div
className="empty-list-cta__title"
>
Title
</div>
<a
className="empty-list-cta__button btn btn-xlarge btn-success"
href="http://url/to/destination"
>
<i
className="ga css class"
/>
Click me
</a>
<div
className="empty-list-cta__pro-tip"
>
<i
className="fa fa-rocket"
/>
ProTip:
This is a tip
<a
className="text-link empty-list-cta__pro-tip-link"
href="http://url/to/tip/destination"
target="_blank"
>
Learn more
</a>
</div>
</div>
`;

83
public/app/features/plugins/partials/ds_list.html
View File

@ -1,46 +1,57 @@
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a class="page-header__cta btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
</div>
<div ng-if="ctrl.datasources.length">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a class="page-header__cta btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
</div>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
<empty-list-cta model="{
title: 'There are no data sources defined yet',
buttonIcon: 'gicon gicon-dashboard-new',
buttonLink: '/datasources/new',
buttonTitle: 'Add data source',
proTip: 'You can also define data sources through configuration files.',
proTipLink: 'http://docs.grafana.org/administration/provisioning/#datasources',
proTipLinkTitle: 'Learn more',
proTipTarget: '_blank'
}" />
</div>
</div>

1
public/sass/_grafana.scss
View File

@ -86,6 +86,7 @@
@import "components/dashboard_grid";
@import "components/dashboard_list";
@import "components/page_header";
@import "components/empty_list_cta";
// PAGES

7
public/sass/_variables.scss
View File

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

2
public/sass/base/_type.scss
View File

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

11
public/sass/components/_buttons.scss
View File

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

21
public/sass/components/_empty_list_cta.scss Normal file
View File

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