Skip to content

N
nexpie-grafana-theme
Commit 82eb32a7 by Torkel Ödegaard
Options

ux(): initial pass at new card / list design, #4364

parent 13376d89
Showing with 296 additions and 50 deletions
pkg/plugins/frontend_plugin.go
......@@ -24,14 +24,22 @@ func (fp *FrontendPluginBase) initFrontendPlugin() {
fp.handleModuleDefaults()
fp.Info.Logos.Small = evalRelativePluginUrlPath(fp.Info.Logos.Small, fp.BaseUrl)
fp.Info.Logos.Large = evalRelativePluginUrlPath(fp.Info.Logos.Large, fp.BaseUrl)
fp.Info.Logos.Small = getPluginLogoUrl(fp.Info.Logos.Small, fp.BaseUrl)
fp.Info.Logos.Large = getPluginLogoUrl(fp.Info.Logos.Large, fp.BaseUrl)
for i := 0; i < len(fp.Info.Screenshots); i++ {
fp.Info.Screenshots[i].Path = evalRelativePluginUrlPath(fp.Info.Screenshots[i].Path, fp.BaseUrl)
}
}
func getPluginLogoUrl(path, baseUrl string) string {
if path == "" {
return "public/img/plugin-default-logo_dark.svg"
}
return evalRelativePluginUrlPath(path, baseUrl)
}
func (fp *FrontendPluginBase) setPathsBasedOnApp(app *AppPlugin) {
appSubPath := strings.Replace(fp.PluginDir, app.StaticRootAbs, "", 1)
fp.IncludedInAppId = app.Id
......
public/app/features/plugins/partials/plugin_list.html
......@@ -26,37 +26,26 @@
</div>
</div>
<table class="filter-table">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th style="width: 60px;"></th>
<th style="width: 80px;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="plugin in ctrl.plugins">
<td>
<a href="plugins/{{plugin.id}}/edit">
{{plugin.name}}
</a>
</td>
<td>
{{plugin.type}}
</td>
<td>
<span class="label label-secondary" ng-if="plugin.enabled">Enabled</span>
<span class="label label-secondary" ng-if="plugin.pinned">Pinned</span>
</td>
<td class="text-right">
<a href="plugins/{{plugin.id}}/edit" class="btn btn-inverse btn-small">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
<section class="card-section">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
<a class="card-item" href="plugins/{{plugin.id}}/edit">
<div class="card-item-header">
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
{{plugin.type}}
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img src="{{plugin.info.logos.small}}">
</figure>
<div class="card-item-details">
<div class="card-item-name" href="plugins/{{plugin.id}}/edit">{{plugin.name}}</div>
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
public/app/plugins/datasource/cloudwatch/plugin.json
......@@ -4,5 +4,16 @@
"id": "cloudwatch",
"metrics": true,
"annotations": true
"annotations": true,
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
},
"logos": {
"small": "img/amazon-web-services.png",
"large": "img/amazon-web-services.png"
}
}
}
public/app/plugins/datasource/elasticsearch/plugin.json
......@@ -6,7 +6,7 @@
"info": {
"description": "Elasticsearch Data Source for Grafana",
"author": {
"name": "Grafana Core",
"name": "Grafana Project",
"url": "http://grafana.org"
},
"keywords": ["elasticsearch"],
......
public/app/plugins/datasource/graphite/plugin.json
......@@ -8,5 +8,12 @@
],
"metrics": true,
"annotations": true
"annotations": true,
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/app/plugins/datasource/influxdb/plugin.json
......@@ -5,5 +5,16 @@
"defaultMatchFormat": "regex values",
"metrics": true,
"annotations": true
"annotations": true,
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
},
"logos": {
"small": "img/influxdb_logo.svg",
"large": "img/influxdb_logo.svg"
}
}
}
public/app/plugins/datasource/opentsdb/plugin.json
......@@ -5,5 +5,16 @@
"metrics": true,
"defaultMatchFormat": "pipe",
"annotations": true
"annotations": true,
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
},
"logos": {
"small": "img/opentsdb_logo.png",
"large": "img/opentsdb_logo.png"
}
}
}
public/app/plugins/datasource/prometheus/img/prometheus_logo.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="115.333px" height="114px" viewBox="0 0 115.333 114" enable-background="new 0 0 115.333 114" xml:space="preserve">
<g id="Layer_2">
</g>
<g>
<path fill="#FFFFFF" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666
s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283
H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92
c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413
c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308
c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469
c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16
c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148
c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z"/>
</g>
</svg>
public/app/plugins/datasource/prometheus/plugin.json
......@@ -8,5 +8,16 @@
],
"metrics": true,
"annotations": true
"annotations": true,
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
},
"logos": {
"small": "img/prometheus_logo.svg",
"large": "img/prometheus_logo.svg"
}
}
}
public/app/plugins/panel/dashlist/plugin.json
{
"type": "panel",
"name": "Dashboard list",
"id": "dashlist"
"id": "dashlist",
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/app/plugins/panel/graph/plugin.json
{
"type": "panel",
"name": "Graph",
"id": "graph"
"id": "graph",
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/app/plugins/panel/singlestat/plugin.json
{
"type": "panel",
"name": "Singlestat",
"id": "singlestat"
"id": "singlestat",
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/app/plugins/panel/table/plugin.json
{
"type": "panel",
"name": "Table",
"id": "table"
"id": "table",
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/app/plugins/panel/text/plugin.json
{
"type": "panel",
"name": "Text",
"id": "text"
"id": "text",
"info": {
"author": {
"name": "Grafana Project",
"url": "http://grafana.org"
}
}
}
public/img/plugin-default-logo_dark.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:#040707;}
</style>
<g>
<polygon class="st0" points="44,0 150,106 150,99.9 50.1,0 "/>
<polygon class="st0" points="0,10.6 139.4,150 140.8,150 0,9.2 "/>
<polygon class="st0" points="26.6,0 150,123.4 150,119.6 30.4,0 "/>
<polygon class="st0" points="0,30.4 119.6,150 123.4,150 0,26.6 "/>
<polygon class="st0" points="9.2,0 150,140.8 150,139.4 10.6,0 "/>
<polygon class="st0" points="0,109.5 40.5,150 53.7,150 0,96.3 "/>
<polygon class="st0" points="0,129.3 20.7,150 36.3,150 0,113.7 "/>
<polygon class="st0" points="0,89.8 60.2,150 71.1,150 0,78.9 "/>
<polygon class="st0" points="0,70 80,150 88.6,150 0,61.4 "/>
<polygon class="st0" points="0,50.2 99.8,150 106,150 0,44 "/>
<polygon class="st0" points="0,150 18.9,150 0,131.1 "/>
<polygon class="st0" points="150,0 131.1,0 150,18.9 "/>
<polygon class="st0" points="129.3,0 113.6,0 150,36.4 150,20.7 "/>
<polygon class="st0" points="78.8,0 150,71.2 150,60.3 89.7,0 "/>
<polygon class="st0" points="61.4,0 150,88.6 150,80.1 69.9,0 "/>
<polygon class="st0" points="96.2,0 150,53.8 150,40.5 109.5,0 "/>
</g>
</svg>
public/img/plugin-default-logo_light.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:#666666;}
</style>
<polygon class="st0" points="44,0 150,106 150,99.9 50.1,0 "/>
<polygon class="st0" points="0,10.6 139.4,150 140.8,150 0,9.2 "/>
<polygon class="st0" points="26.6,0 150,123.4 150,119.6 30.4,0 "/>
<polygon class="st0" points="0,30.4 119.6,150 123.4,150 0,26.6 "/>
<polygon class="st0" points="9.2,0 150,140.8 150,139.4 10.6,0 "/>
<polygon class="st0" points="0,109.5 40.5,150 53.7,150 0,96.3 "/>
<polygon class="st0" points="0,129.3 20.7,150 36.3,150 0,113.7 "/>
<polygon class="st0" points="0,89.8 60.2,150 71.1,150 0,78.9 "/>
<polygon class="st0" points="0,70 80,150 88.6,150 0,61.4 "/>
<polygon class="st0" points="0,50.2 99.8,150 106,150 0,44 "/>
<polygon class="st0" points="0,150 18.9,150 0,131.1 "/>
<polygon class="st0" points="150,0 131.1,0 150,18.9 "/>
<polygon class="st0" points="129.3,0 113.6,0 150,36.4 150,20.7 "/>
<polygon class="st0" points="78.8,0 150,71.2 150,60.3 89.7,0 "/>
<polygon class="st0" points="61.4,0 150,88.6 150,80.1 69.9,0 "/>
<polygon class="st0" points="96.2,0 150,53.8 150,40.5 109.5,0 "/>
</svg>
public/sass/_grafana.scss
......@@ -30,6 +30,7 @@
@import "layout/page";
// COMPONENTS
@import "components/cards";
@import "components/buttons";
@import "components/navs";
@import "components/tabs";
......
public/sass/_variables.dark.scss
......@@ -67,9 +67,9 @@ $link-hover-color: $white;
// Typography
// -------------------------
$headings-color: darken($white,11%);
$abbr-border-color: $gray-3 !default;
$text-muted: darken($link-color,30%);
$headings-color: darken($white,11%);
$abbr-border-color: $gray-3 !default;
$text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-3 !default;
$blockquote-border-color: $gray-4 !default;
......@@ -252,3 +252,10 @@ $popover-help-color: $text-color;
// images
$checkboxImageUrl: '../img/checkbox.png';
// cards
$card-background: linear-gradient(135deg, #2f2f2f, #262626);
$card-background-hover: linear-gradient(135deg, #343434, #262626);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
public/sass/_variables.light.scss
......@@ -279,3 +279,9 @@ $popover-help-color: $gray-6;
// images
$checkboxImageUrl: '../img/checkbox_white.png';
// cards
$card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
public/sass/_variables.scss
......@@ -4,7 +4,7 @@
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-flex: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
......
public/sass/base/_fonts.scss
......@@ -176,3 +176,10 @@
content: "\e903";
}
.icon-gf-app:before {
content: "\e902";
}
.icon-gf-datasource:before {
content: "\e607";
}
public/sass/components/_cards.scss 0 → 100644
.card-section {
margin-bottom: $spacer*2;
}
.card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
}
.card-item-wrapper {
width: 100%;
padding: 0 1.5rem 1.5rem 0rem;
}
.card-item {
display: block;
height: 100%;
min-height: 12rem;
background: $card-background;
box-shadow: $card-shadow;
padding: 1rem;
border-radius: 4px;
&:hover {
background: $card-background-hover;
}
}
.card-item-figure {
margin: 0 $spacer $spacer 0;
img {
width: 6rem;
}
}
.card-item-body {
display: flex;
}
.card-item-details {
}
.card-item-header {
color: $text-color-weak;
margin-bottom: $spacer;
}
.card-item-name {
color: $headings-color;
font-size: $font-size-h3;
}
.card-item-sub-name {
color: $text-color-weak;
}
@include media-breakpoint-up(md) {
.card-item-wrapper {
width: 50%;
}
}
@include media-breakpoint-up(lg) {
.card-item-wrapper {
width: 33%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment