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

Merge branch 'dash-edit-mode' of github.com:grafana/grafana into dash-edit-mode

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-10-27 22:11:08 +02:00
parent f8395666e6 b58c38a5db
commit 517ebfaf6d
2 changed files with 170 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/app/plugins/panel/dashlist/module.html
View File

@@ -1,3 +1,51 @@
<div class="dashlist">
<div class="dashlist-section">
<h6 class="dashlist-section-header">
Getting Started with Grafana
<button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
</h6>
<div class="dashlist-flex-container">
<div class="dashlist-panel-CTA-flex-container--left">
<h5 class="dashlist-next-up">Next up:</h5>
<span class="dashlist-title">Create your first data source</span>
<p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p>
<button class="btn btn-success">Add Data Source</button>
</div>
<ul class="dashlist-panel-CTA-flex-container--right">
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-check dashlist-icon-success"></i>
</div>
<span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
</li>
<li class="dashlist-panel-CTA-items dashlist-icons-container--active">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
</div>
<a href="#" class="dashlist-blurb">Add your first data source.</a>
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
</li>
<li class="dashlist-panel-CTA-items">
<div class="dashlist-icons-container">
<i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
</div>
<a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
</li>
</ul>
</div>
</div>
</div>
<div class="dashlist" ng-repeat="group in ctrl.groups">
<div class="dashlist-section" ng-if="group.show">
<h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">

122
public/sass/components/_panel_dashlist.scss
View File

@@ -24,3 +24,125 @@
background-color: $tight-form-func-bg;
}
}
.dashlist-flex-container {
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: $tight-form-bg;
padding: 20px;
}
.dashlist-panel-CTA-flex-container--left {
flex-grow: 2;
align-items: center;
}
ul.dashlist-panel-CTA-flex-container--right {
padding-left: 1rem;
border-left: solid 1px black;
list-style-type: none;
}
li.dashlist-panel-CTA-items {
text-align: left;
margin: 10px 0;
}
li.dashlist-icons-container--active::before {
content: ' ';
border-top: 1px solid black;
width: 13px;
position: absolute;
margin-left: -14px;
margin-top: 9px;
}
p.dashlist-blurb{
font-size:14px;
color: $text-color;
margin: 0;
}
a.dashlist-blurb{
font-size:14px;
color: $text-color;
margin: 0;
}
a.dashlist-blurb:hover{
text-decoration: underline;
}
.dashlist-blurb-success {
color: $text-color-weak;
text-decoration: line-through;
}
a.dashlist-blurb-upcoming {
color: $text-color-weak;
}
.dashlist-icon-active {
color: $brand-primary;
-webkit-text-fill-color: transparent;
background: $brand-gradient;
-webkit-background-clip: text;
text-decoration:none;
font-size: 20px;
vertical-align: sub;
}
.dashlist-icon-upcoming {
color: $text-color-weak;
text-decoration:none;
font-size: 20px;
vertical-align: sub;
}
.rt-dashboard-icon-warning {
color: $text-color-strong;
text-decoration:none;
font-size: 20px;
vertical-align: sub;
}
.dashlist-icon-success {
color: $online;
font-size: 24px;
text-decoration:none;
vertical-align: sub;
}
.dashlist-icons-container {
width: 30px;
display: inline-block;
margin-right: 5px;
text-align: center;
vertical-align: top;
}
h5.dashlist-next-up {
color: $text-color-weak;
font-style: italic;
}
p.dashlist-next-up-blurb {
color: $text-color-weak;
max-width: 375px;
}
.dashlist-CTA-close-btn {
float: right;
padding: 0;
margin: 0 2px 0 0;
background-color: transparent;
border: none;
i {
font-size: 80%;
}
color: $text-color-weak;
&:hover {
color: $white;
}
}