IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Small refactor to make hover highlighting proper, added a title tag for the completed grafana step. (#6882)

Browse Source
This commit is contained in:
Matt Toback 2016-12-09 03:42:24 -05:00 committed by Torkel Ödegaard
parent f39f77692b
commit e58b6989c2
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/plugins/panel/gettingstarted/module.html
View File

@ -8,9 +8,11 @@
</h6>
<ul class="progress-tracker">
<li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
<a class="progress-marker" ng-href="{{step.href}}"><i class="{{step.icon}}"></i></a>
<a class="progress-text" ng-href="{{step.href}}">{{step.title}}</a>
<a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
<a class="progress-link" ng-href="{{step.href}}" target="{{step.target}}" title="{{step.note}}">
<span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
<span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
</a>
<a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
</li>
</ul>
</div>

3
public/app/plugins/panel/gettingstarted/module.ts
View File

@ -20,6 +20,9 @@ class GettingStartedPanelCtrl extends PanelCtrl {
this.steps.push({
title: 'Install Grafana',
icon: 'icon-gf icon-gf-check',
href: 'http://docs.grafana.org/',
target: '_blank',
note: 'Review the installation docs',
check: () => $q.when(true),
});

17
public/sass/components/_panel_gettingstarted.scss
View File

@ -142,9 +142,6 @@ $path-position: $marker-size-half - ($path-height / 2);
color: $text-color-weak;
font-size: 35px;
vertical-align: sub;
&:hover {
color: $link-hover-color;
}
}
// Progress text
@ -153,9 +150,6 @@ $path-position: $marker-size-half - ($path-height / 2);
overflow: hidden;
text-overflow: ellipsis;
color: $text-muted;
&:hover {
color: $link-hover-color;
}
}
.progress-marker {
@ -164,3 +158,14 @@ $path-position: $marker-size-half - ($path-height / 2);
font-size: 35px;
vertical-align: sub;
}
a.progress-link {
&:hover {
.progress-marker, .progress-text {
color: $link-hover-color;
}
&:hover .progress-marker.completed {
color: $online;
}
}
}