mirror of https://github.com/grafana/grafana
Matt Toback
9 years ago
parent
d4bc92b267
commit
15e369ec02
@ -0,0 +1,2 @@ |
||||
# Plugin List Panel - Native Plugin |
||||
|
||||
@ -0,0 +1,40 @@ |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Mode</span> |
||||
<div class="gf-form-select-wrapper max-width-10"> |
||||
<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select> |
||||
</div> |
||||
</div> |
||||
<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'"> |
||||
<span class="gf-form-label"> |
||||
<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Search options</span> |
||||
<span class="gf-form-label">Query</span> |
||||
|
||||
<input type="text" class="gf-form-input" placeholder="title query" |
||||
ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur> |
||||
|
||||
</div> |
||||
|
||||
<div class="gf-form"> |
||||
<span class="gf-form-label">Tags</span> |
||||
|
||||
<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()"> |
||||
</bootstrap-tagsinput> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Limit number to</span> |
||||
<input class="gf-form-input" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
After Width: | Height: | Size: 8.8 KiB |
@ -0,0 +1,33 @@ |
||||
<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> |
||||
<ul class="progress-tracker progress-tracker--text progress-tracker--center"> |
||||
<li class="progress-step is-complete"> |
||||
<span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span> |
||||
<span class="progress-text"><span class="gettingstarted-blurb-success">Install Grafana</span></span> |
||||
</li> |
||||
<li class="progress-step is-active"> |
||||
<span class="progress-marker"><i class="icon-gf icon-gf-datasources gettingstarted-icon-active"></i></span> |
||||
<span class="progress-text"> |
||||
<a href="#" class="gettingstarted-blurb">Create your first data source.</a> |
||||
<button class="btn btn-success btn-small">Add Data Source</button> |
||||
</span> |
||||
</li> |
||||
<li class="progress-step"> |
||||
<span class="progress-marker"><i class="icon-gf icon-gf-dashboard gettingstarted-icon-upcoming"></i></span> |
||||
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Create your first dashboard.</a></span> |
||||
</li> |
||||
<li class="progress-step"> |
||||
<span class="progress-marker"><i class="icon-gf icon-gf-users gettingstarted-icon-upcoming"></i></span> |
||||
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Invite your team.</a></span> |
||||
</li> |
||||
<li class="progress-step"> |
||||
<span class="progress-marker"><i class="icon-gf icon-gf-apps gettingstarted-icon-upcoming"></i></span> |
||||
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Install apps & plugins</a></span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,15 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import {PanelCtrl} from 'app/plugins/sdk'; |
||||
|
||||
class GettingstartedPanelCtrl extends PanelCtrl { |
||||
static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html'; |
||||
|
||||
/** @ngInject */ |
||||
constructor($scope, $injector) { |
||||
super($scope, $injector); |
||||
} |
||||
|
||||
} |
||||
|
||||
export {GettingstartedPanelCtrl, GettingstartedPanelCtrl as PanelCtrl} |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"type": "panel", |
||||
"name": "Getting Started", |
||||
"id": "gettingstarted", |
||||
|
||||
"info": { |
||||
"author": { |
||||
"name": "Grafana Project", |
||||
"url": "http://grafana.org" |
||||
}, |
||||
"logos": { |
||||
"small": "img/icn-dashlist-panel.svg", |
||||
"large": "img/icn-dashlist-panel.svg" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,486 @@ |
||||
ul.gettingstarted-flex-container { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: row; |
||||
padding: 20px; |
||||
list-style-type: none; |
||||
} |
||||
|
||||
.gettingstarted-flex-item { |
||||
align-items: center; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
.gettingstarted-blurb-copy { |
||||
font-size: $font-size-base; |
||||
margin-bottom: $spacer/2; |
||||
text-align: center; |
||||
} |
||||
|
||||
a.gettingstarted-blurb{ |
||||
@extend .gettingstarted-blurb-copy; |
||||
color: $text-color; |
||||
display: block; |
||||
} |
||||
|
||||
a.gettingstarted-blurb:hover{ |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.gettingstarted-blurb-success { |
||||
@extend .gettingstarted-blurb-copy; |
||||
color: $text-color-weak; |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
a.gettingstarted-blurb-upcoming { |
||||
@extend .gettingstarted-blurb-copy; |
||||
color: $text-color-weak; |
||||
} |
||||
|
||||
.gettingstarted-icon-container { |
||||
height: 50px; |
||||
} |
||||
|
||||
.gettingstarted-icon-active { |
||||
color: $brand-primary; |
||||
-webkit-text-fill-color: transparent; |
||||
background: $brand-gradient; |
||||
-webkit-background-clip: text; |
||||
text-decoration:none; |
||||
font-size: 35px; |
||||
vertical-align: sub; |
||||
animation: iconPulse 500ms forwards 1s; |
||||
will-change: zoom; |
||||
} |
||||
|
||||
.gettingstarted-icon-upcoming { |
||||
color: $text-color-weak; |
||||
text-decoration:none; |
||||
font-size: 35px; |
||||
vertical-align: sub; |
||||
} |
||||
|
||||
.gettingstarted-icon-success { |
||||
color: $online; |
||||
font-size: 35px; |
||||
text-decoration:none; |
||||
vertical-align: sub; |
||||
} |
||||
|
||||
|
||||
.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; |
||||
} |
||||
} |
||||
|
||||
@keyframes iconPulse { |
||||
from { |
||||
zoom: 100%; |
||||
} |
||||
|
||||
50% { |
||||
zoom: 102%; |
||||
} |
||||
|
||||
to { |
||||
zoom: 100%; |
||||
} |
||||
} |
||||
|
||||
|
||||
// ----- Progress Tracker ----- |
||||
|
||||
// ----- Variables ----- |
||||
|
||||
// Colours |
||||
$progress-color-dark: $panel-bg !default; |
||||
$progress-color: $panel-bg !default; |
||||
$progress-color-light: $panel-bg !default; |
||||
$progress-color-grey-light: $body-bg !default; |
||||
$progress-color-grey: $iconContainerBackground !default; |
||||
$progress-color-grey-dark: $iconContainerBackground !default; |
||||
|
||||
// Sizing |
||||
$progress-tracker-padding: 5px !default; |
||||
|
||||
$marker-size: 60px !default; |
||||
$marker-size-half: ($marker-size / 2); |
||||
$marker-size-third: ($marker-size / 3); |
||||
$marker-size-quarter: ($marker-size / 4); |
||||
$marker-spacing: 10px !default; |
||||
|
||||
$path-height: 4px !default; |
||||
$path-position: $marker-size-half - ($path-height / 2); |
||||
|
||||
$text-padding: $marker-size-half !default; |
||||
$text-padding-X: $marker-size-third !default; |
||||
$text-padding-Y: 5px !default; |
||||
$text-padding--vertical: $marker-size + $marker-size-half !default; |
||||
|
||||
// Only needed for short text version, the word size should be the width of the widest word without padding. |
||||
$word-size: 54px !default; |
||||
$progress-tracker-word-padding: ($word-size + $text-padding-X + $marker-size-half) / 2; |
||||
|
||||
// Animations/Transitions |
||||
$animation-duration: 0.3s !default; |
||||
$ripple-color: rgba(0, 0, 0, 0.3) !default; |
||||
|
||||
// ----- Elements ----- |
||||
|
||||
// Container element |
||||
.progress-tracker { |
||||
display: flex; |
||||
margin: 20px auto; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
// Step container that creates lines between steps |
||||
.progress-step { |
||||
display: block; |
||||
position: relative; |
||||
flex: 1 1 0%; |
||||
margin: 0; |
||||
padding: 0; |
||||
min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text |
||||
|
||||
// Stops the last step growing |
||||
&:last-child { |
||||
flex-grow: 0; |
||||
} |
||||
|
||||
// Path between markers, this is not created for the last step |
||||
&:not(:last-child)::after { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
z-index: 1; |
||||
top: $path-position; |
||||
bottom: $path-position; |
||||
right: - $marker-size-half; |
||||
width: 100%; |
||||
height: $path-height; |
||||
transition: background-color $animation-duration; |
||||
} |
||||
|
||||
// Active state |
||||
&.is-active { |
||||
.progress-title { |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
|
||||
> a { |
||||
display: block; |
||||
} |
||||
|
||||
} |
||||
|
||||
// Progress marker |
||||
.progress-marker { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
z-index: 20; |
||||
width: $marker-size; |
||||
height: $marker-size; |
||||
padding-bottom: 2px; // To align text within the marker |
||||
color: #fff; |
||||
font-weight: 400; |
||||
border: 2px solid transparent; |
||||
border-radius: 50%; |
||||
transition: background-color, border-color; |
||||
transition-duration: $animation-duration; |
||||
} |
||||
|
||||
|
||||
// Progress text |
||||
.progress-text { |
||||
display: block; |
||||
padding: $text-padding-Y $text-padding-X; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.progress-title { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
|
||||
// Step state mixin - The first arugment is required and the rest are optional, if you pass in null the value will not be changed. |
||||
@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) { |
||||
.progress-marker { |
||||
color: $marker-color-text; |
||||
background-color: $marker-color-bg; |
||||
border-color: $marker-color-border; |
||||
} |
||||
|
||||
&::after { |
||||
background-color: $path-color; |
||||
} |
||||
|
||||
.progress-text, .progress-step > a .progress-text { |
||||
color: $text-color; |
||||
} |
||||
} |
||||
|
||||
|
||||
// States |
||||
.progress-step { |
||||
|
||||
// Inactive - Default state |
||||
@include progress-state($progress-color, null, #fff, $progress-color-grey-light, $progress-color-grey-dark); |
||||
|
||||
// Active state |
||||
&.is-active { |
||||
@include progress-state($progress-color); |
||||
} |
||||
|
||||
// Complete state |
||||
&.is-complete { |
||||
@include progress-state($progress-color-dark, $path-color: $progress-color-grey); |
||||
} |
||||
|
||||
// Hover state |
||||
&:hover { |
||||
@include progress-state($progress-color-light); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
// ----- Modifiers ----- |
||||
|
||||
// Center align markers and text |
||||
.progress-tracker--center { |
||||
|
||||
.progress-step { |
||||
text-align: center; |
||||
|
||||
&:last-child { |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
&::after { |
||||
right: -50%; |
||||
} |
||||
} |
||||
|
||||
.progress-marker { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Right align markers and text |
||||
.progress-tracker--right { |
||||
|
||||
.progress-step { |
||||
text-align: right; |
||||
|
||||
&:last-child { |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
&::after { |
||||
right: calc(-100% + #{$marker-size-half}); |
||||
} |
||||
} |
||||
|
||||
.progress-marker { |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Border around steps (Only for use without text) |
||||
.progress-tracker--border { |
||||
padding: $progress-tracker-padding; |
||||
border: 2px solid $progress-color-grey; |
||||
border-radius: $marker-size + ($progress-tracker-padding * 2); |
||||
} |
||||
|
||||
|
||||
// Spaces between markers |
||||
.progress-tracker--spaced { |
||||
|
||||
.progress-step { |
||||
|
||||
&::after { |
||||
width: calc(100% - #{$marker-size + ($marker-spacing * 2)}); |
||||
margin-right: ($marker-size-half + $marker-spacing); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Word below markers |
||||
.progress-tracker--word { |
||||
padding-right: $progress-tracker-word-padding; |
||||
overflow: hidden; |
||||
|
||||
.progress-text { |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.progress-title { |
||||
margin: 0; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.progress-tracker--word-center { |
||||
padding-right: $progress-tracker-word-padding; |
||||
padding-left: $progress-tracker-word-padding; |
||||
|
||||
.progress-text { |
||||
padding-right: 0; |
||||
padding-left: 0; |
||||
transform: translateX(calc(-50% + #{$marker-size-half})); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.progress-tracker--word-right { |
||||
padding-right: 0; |
||||
padding-left: $progress-tracker-word-padding; |
||||
|
||||
.progress-text { |
||||
padding-left: 0; |
||||
transform: translateX(calc(-100% + #{$marker-size})); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Text below markers |
||||
.progress-tracker--text { |
||||
|
||||
.progress-step { |
||||
|
||||
&:last-child { |
||||
flex-grow: 1; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Text above markers |
||||
.progress-tracker--text-top { |
||||
|
||||
.progress-step::after { |
||||
top: auto; |
||||
} |
||||
|
||||
.progress-text { |
||||
height: 100%; |
||||
} |
||||
|
||||
.progress-marker { |
||||
bottom: $marker-size; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Text inline with markers |
||||
.progress-tracker--text-inline { |
||||
|
||||
.progress-step { |
||||
display: flex; |
||||
} |
||||
|
||||
.progress-text { |
||||
position: relative; |
||||
z-index: 30; |
||||
max-width: 70%; |
||||
white-space: nowrap; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.progress-title { |
||||
margin: 0; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Square markers |
||||
.progress-tracker--square { |
||||
|
||||
.progress-step { |
||||
padding-top: 0; |
||||
} |
||||
|
||||
.progress-marker { |
||||
transform: scaleX(0.33) translateY(- $path-position); |
||||
border-radius: 0; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// Overflow on small screens |
||||
@media (max-width: 399px) { |
||||
.progress-tracker-mobile { |
||||
overflow-x: auto; |
||||
|
||||
.progress-tracker { |
||||
min-width: 200%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
// Vertical layout |
||||
.progress-tracker--vertical { |
||||
flex-direction: column; |
||||
|
||||
.progress-step { |
||||
flex: 1 1 auto; |
||||
|
||||
&::after { |
||||
right: auto; |
||||
top: $marker-size-half; |
||||
left: $path-position; |
||||
width: $path-height; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.progress-marker { |
||||
position: absolute; |
||||
left: 0; |
||||
} |
||||
|
||||
.progress-text { |
||||
padding-top: $marker-size-quarter; |
||||
padding-left: $text-padding--vertical; |
||||
} |
||||
|
||||
.progress-step:not(:last-child) .progress-text { |
||||
padding-bottom: $text-padding--vertical; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue