valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 09:28:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create <empty-state> component.

Browse Source
This commit is contained in:
Arik Fraimovich 2018-02-20 22:29:07 +02:00
parent 9a1077d192
commit 4d44be76ac
8 changed files with 107 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/app/assets/less/redash/redash-newstyle.less
View File

@ -626,53 +626,6 @@ page-header, .page-header--new {
line-height: 31px;
}
// Empty states
.empty-state {
width: 100%;
margin: 0px auto 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
.empty-state__summary, .empty-state__steps {
width: 48%;
}
.empty-state__summary {
align-self: flex-start;
}
ol {
margin-bottom: 15px;
padding: 17px;
}
h2 {
margin: 0 0 15px;
}
h4 {
margin-top: 0;
color: #767676;
margin-bottom: 15px;
}
p {
margin-bottom: 0;
}
@media (max-width: 767px) {
flex-direction: column;
.empty-state__summary {
margin-bottom: 25px;
}
.empty-state__summary, .empty-state__steps {
width: 100%;
}
}
}
// Error state
.error-state {
display: flex;

18
client/app/components/empty-state/empty-state.html Normal file
View File

@ -0,0 +1,18 @@
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4 ng-if="$ctrl.title">{{$ctrl.title}}</h4>
<h2 ng-if="$ctrl.icon"><i ng-class="$ctrl.icon" aria-hidden="true"></i></h2>
<p>{{$ctrl.description}}</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><del><a href="/queries/new/">Create</a> your first Query</del></li>
<li ng-if="$ctrl.showAlertStep"><a href="/alerts/new/">Create</a> your first Alert</li>
<li ng-if="$ctrl.showDashboardStep"><a href="/alerts/new/">Create</a> your first Dashboard</li>
<li ng-if="$ctrl.showInviteStep"><a href="/alerts/new/">Invite</a> your team members</li>
</ol>
<p>Need more support? <a href="{{$ctrl.helpLink}}" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>

22
client/app/components/empty-state/empty-state.js Normal file
View File

@ -0,0 +1,22 @@
import './empty-state.less';
import template from './empty-state.html';
const EmptyStateComponent = {
template,
replace: true,
bindings: {
icon: '@',
title: '@',
description: '@',
helpLink: '@',
showAlertStep: '<',
showDashboardStep: '<',
showInviteStep: '<',
},
controller() {
},
};
export default function init(ngModule) {
ngModule.component('emptyState', EmptyStateComponent);
}

50
client/app/components/empty-state/empty-state.less Normal file
View File

@ -0,0 +1,50 @@
// Empty states
.empty-state {
width: 100%;
margin: 0px auto 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 35px;
font-size: 14px;
line-height: 21px;
.empty-state__summary, .empty-state__steps {
width: 48%;
}
.empty-state__summary {
align-self: flex-start;
}
ol {
margin-bottom: 15px;
padding: 17px;
}
h2 {
margin: 0 0 15px;
}
h4 {
margin-top: 0;
color: #767676;
margin-bottom: 15px;
}
p {
margin-bottom: 0;
}
@media (max-width: 767px) {
flex-direction: column;
.empty-state__summary {
margin-bottom: 25px;
}
.empty-state__summary, .empty-state__steps {
width: 100%;
}
}
}

19
client/app/pages/alerts-list/alerts-list.html
View File

@ -1,21 +1,10 @@
<div class="container">
<page-header title="Alerts"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h2><i class="fa fa-bell-o" aria-hidden="true"></i></h2>
<p>Get notified on certain events</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><del><a href="/queries/new/">Create</a> your first Query</del></li>
<li><a href="/alerts/new/">Create</a> your first Alert</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/23-alerts" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<empty-state icon="fa fa-bell-o"
description="Get notified on certain events"
show-alert-step="true"
help-link="http://help.redash.io/category/23-alerts"></empty-state>
<div class="bg-white tiled">
<table class="table table-condensed table-hover">

19
client/app/pages/dashboards/dashboard-list.html
View File

@ -1,21 +1,10 @@
<div class='container'>
<page-header title="Dashboards"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h2><i class="zmdi zmdi-view-quilt"></i></h2>
<p>See the big picture</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new/">Create</a> your first Query</li>
<li><a href="">Create</a> your first Dashboard</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/22-dashboards" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<empty-state icon="zmdi zmdi-view-quilt"
description="See the big picture"
show-dashboard-step="true"
help-link="http://help.redash.io/category/22-dashboards"></empty-state>
<div class="row">
<div class="col-lg-3">

22
client/app/pages/home/home.html
View File

@ -1,21 +1,11 @@
<div class="container">
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h4>Welcome to Redash</h4>
<p>Connect to any data source, easily visualize and share your data</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new">Create</a> your first Query</li>
<li><a href="">Create</a> your first Dashboard</li>
<li><a href="/users/new">Invite</a> your team members</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/article/32-getting-started" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<empty-state title="Welcome to Redash 👋"
description="Connect to any data source, easily visualize and share your data"
show-dashboard-step="true"
show-invite-step="true"
help-link="http://help.redash.io/article/32-getting-started"></empty-state>
<div class="tile">
<div class="t-body tb-padding">

17
client/app/pages/queries-list/queries-list.html
View File

@ -1,20 +1,9 @@
<div class="container">
<page-header title="Queries"></page-header>
<div class="empty-state bg-white tiled">
<div class="empty-state__summary">
<h2><i class="fa fa-code" aria-hidden="true"></i></h2>
<p>Getting the data out of your database</p>
</div>
<div class="empty-state__steps">
<h4>Let's get started</h4>
<ol>
<li><del><a href="/data_sources">Connect</a> a Data Source</del></li>
<li><a href="/queries/new/">Create</a> your first Query</li>
</ol>
<p>Need more support? <a href="http://help.redash.io/category/21-querying" target="_blank">See our Help <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
</div>
</div>
<empty-state icon="fa fa-code"
description="Getting the data from your datasources."
help-link="http://help.redash.io/category/21-querying"></empty-state>
<tab-nav tabs="$ctrl.tabs"></tab-nav>