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

New styles almost ready

Browse Source
This commit is contained in:
Matt Toback 2016-04-08 18:46:45 -04:00
parent d66d25ff14
commit d2421d964a
5 changed files with 107 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/app/plugins/panel/pluginlist/module.html
View File

@ -1,18 +1,41 @@
<div class="dashlist">
<div class="dashlist-item" ng-repeat="plugin in ctrl.pluginList">
<a class="dashlist-link dashlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" style="width: 24px">
<span class="dashlist-title">
<div class="pluginlist">
<h5 class="pluginlist-section-header pluginlist-section-header--first"><i class="icon-gf icon-gf-apps pluginlist-icon"></i>Installed Apps</h5>
<div class="pluginlist-item" ng-repeat="plugin in ctrl.pluginList">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">{{plugin.name}}</span>
<span class="pluginlist-version">v{{plugin.info.version}}</span>
<span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
Update available!
</span>
<span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled">
Enable now
</span>
<span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
Up to date
</span>
</a>
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">
{{plugin.name}}
</span>
<span class="dashlist-update" ng-show="plugin.hasUpdate">
<i class="fa fa-exclamation"></i>
<span class="pluginlist-message pluginlist-message--update">
Update available
</span>
<span class="dashlist-update" ng-show="!plugin.enabled">
<i class="fa fa-exclamation"></i>
</a>
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">
{{plugin.name}}
</span>
<span class="pluginlist-message pluginlist-message--enable">
Enable now
</span>
</a>
</div>
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-panel pluginlist-icon"></i>Installed Panels</h5>
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-datasources pluginlist-icon"></i>Installed Data Sources</h5>
</div>

14
public/dashboards/home.json
View File

@ -39,7 +39,7 @@
"limit": 10,
"mode": "starred",
"query": "",
"span": 6,
"span": 3.75,
"tags": [],
"title": "Starred dashboards",
"type": "dashlist"
@ -49,10 +49,20 @@
"limit": 10,
"mode": "recently viewed",
"query": "",
"span": 6,
"span": 3.75,
"tags": [],
"title": "Recently viewed dashboards",
"type": "dashlist"
},
{
"title": "",
"error": false,
"span": 4.5,
"editable": true,
"type": "pluginlist",
"isNew": true,
"id": 4,
"links": []
}
],
"title": "Row"

1
public/sass/_grafana.scss
View File

@ -42,6 +42,7 @@
@import "components/panel_graph";
@import "components/submenu";
@import "components/panel_dashlist";
@import "components/panel_pluginlist";
@import "components/panel_singlestat";
@import "components/panel_table";
@import "components/panel_text";

9
public/sass/components/_cards.scss
View File

@ -116,6 +116,10 @@
padding: 0 1.5rem 1.5rem 0rem;
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item-figure {
margin: 0 $spacer $spacer 0;
height: 6rem;
@ -157,6 +161,10 @@
width: 100%;
}
.card-item-wrapper--clickable {
cursor: pointer;
}
.card-item {
border-bottom: .2rem solid $page-bg;
border-radius: 0;
@ -186,4 +194,3 @@
margin-right: 0;
}
}

54
public/sass/components/_panel_pluginlist.scss Normal file
View File

@ -0,0 +1,54 @@
.pluginlist-section-header {
margin: ($spacer * 2) 0 $spacer 0;
color: $text-color-weak;
}
.pluginlist-section-header--first {
margin-top: $spacer /2;
}
.pluginlist-link {
display: block;
margin: 5px;
padding: 7px;
background-color: $tight-form-bg;
&:hover {
background-color: $tight-form-func-bg;
}
}
.pluginlist-icon {
vertical-align: sub;
font-size: $font-size-h1;
margin-right: $spacer / 2;
}
.pluginlist-image {
width: 20px;
}
.pluginlist-title {
margin-right: $spacer / 3;
}
.pluginlist-version {
font-size: $font-size-sm;
color: $text-color-weak;
}
.pluginlist-message {
float: right;
font-size: $font-size-sm;
}
.pluginlist-message--enable{
color: $brand-success;
}
.pluginlist-message--no-update {
color: $text-color-weak;
}
.pluginlist-message--update {
}