mirror of https://github.com/grafana/grafana
Torkel Ödegaard
8 years ago
parent
47f11c26c0
commit
645f49eda4
@ -1,93 +1,94 @@ |
||||
<navbar model="ctrl.navModel"></navbar> |
||||
<div class="page-header-canvas"> |
||||
<div class="page-container" ng-init="ctrl.init()"> |
||||
<navbar model="ctrl.navModel"></navbar> |
||||
|
||||
<div class="page-container" ng-init="ctrl.init()"> |
||||
<div class="page-header"> |
||||
<div class="plugin-header"> |
||||
<span class="plugin-header-logo"> |
||||
<img ng-src="{{ctrl.model.info.logos.large}}"> |
||||
</span> |
||||
<div class="page-header"> |
||||
<div class="plugin-header"> |
||||
<span class="plugin-header-logo"> |
||||
<img ng-src="{{ctrl.model.info.logos.large}}"> |
||||
</span> |
||||
|
||||
<div class="plugin-header-info-block"> |
||||
<h1 class="plugin-header-name">{{ctrl.model.name}}</h1> |
||||
<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div> |
||||
<div class="plugin-header-stamps"> |
||||
<span class="plugin-header-stamps-type"> |
||||
<i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} |
||||
</span> |
||||
<div class="plugin-header-info-block"> |
||||
<h1 class="plugin-header-name">{{ctrl.model.name}}</h1> |
||||
<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div> |
||||
<div class="plugin-header-stamps"> |
||||
<span class="plugin-header-stamps-type"> |
||||
<i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="gf-tabs"> |
||||
<li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs"> |
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}"> |
||||
{{::tab}} |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<ul class="gf-tabs"> |
||||
<li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs"> |
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}"> |
||||
{{::tab}} |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="page-body page-body--with-sidebar"> |
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'"> |
||||
<div ng-bind-html="ctrl.readmeHtml" class="markdown-html"> |
||||
</div> |
||||
<div class="page-container page-body page-body--with-sidebar"> |
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'"> |
||||
<div ng-bind-html="ctrl.readmeHtml" class="markdown-html"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'"> |
||||
<div ng-if="ctrl.model.id"> |
||||
<plugin-component type="app-config-ctrl"></plugin-component> |
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'"> |
||||
<div ng-if="ctrl.model.id"> |
||||
<plugin-component type="app-config-ctrl"></plugin-component> |
||||
|
||||
<div class="gf-form-button-row"> |
||||
<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button> |
||||
<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button> |
||||
<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button> |
||||
</div> |
||||
<div class="gf-form-button-row"> |
||||
<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button> |
||||
<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button> |
||||
<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'"> |
||||
<dashboard-import-list plugin="ctrl.model"></dashboard-import-list> |
||||
</div> |
||||
|
||||
<aside class="page-sidebar"> |
||||
<section class="page-sidebar-section"> |
||||
<h4>Version</h4> |
||||
<span>{{ctrl.model.info.version}}</span> |
||||
<div ng-show="ctrl.model.hasUpdate"> |
||||
<a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a> |
||||
</div> |
||||
</section> |
||||
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'"> |
||||
<h5>Includes</h4> |
||||
<ul class="ui-list plugin-info-list"> |
||||
<li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item"> |
||||
<i class="{{plug.icon}}"></i> |
||||
{{plug.name}} |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
<section class="page-sidebar-section"> |
||||
<h5>Dependencies</h4> |
||||
<ul class="ui-list plugin-info-list"> |
||||
<li class="plugin-info-list-item"> |
||||
<img src="public/img/grafana_icon.svg"></img> |
||||
Grafana {{ctrl.model.dependencies.grafanaVersion}} |
||||
</li> |
||||
<li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item"> |
||||
<i class="{{plugDep.icon}}"></i> |
||||
{{plugDep.name}} {{plugDep.version}} |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
<section class="page-sidebar-section"> |
||||
<h5>Links</h4> |
||||
<ul class="ui-list"> |
||||
<li ng-repeat="link in ctrl.model.info.links"> |
||||
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a> |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
</aside> |
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'"> |
||||
<dashboard-import-list plugin="ctrl.model"></dashboard-import-list> |
||||
</div> |
||||
|
||||
<aside class="page-sidebar"> |
||||
<section class="page-sidebar-section"> |
||||
<h4>Version</h4> |
||||
<span>{{ctrl.model.info.version}}</span> |
||||
<div ng-show="ctrl.model.hasUpdate"> |
||||
<a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a> |
||||
</div> |
||||
</section> |
||||
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'"> |
||||
<h5>Includes</h4> |
||||
<ul class="ui-list plugin-info-list"> |
||||
<li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item"> |
||||
<i class="{{plug.icon}}"></i> |
||||
{{plug.name}} |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
<section class="page-sidebar-section"> |
||||
<h5>Dependencies</h4> |
||||
<ul class="ui-list plugin-info-list"> |
||||
<li class="plugin-info-list-item"> |
||||
<img src="public/img/grafana_icon.svg"></img> |
||||
Grafana {{ctrl.model.dependencies.grafanaVersion}} |
||||
</li> |
||||
<li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item"> |
||||
<i class="{{plugDep.icon}}"></i> |
||||
{{plugDep.name}} {{plugDep.version}} |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
<section class="page-sidebar-section"> |
||||
<h5>Links</h4> |
||||
<ul class="ui-list"> |
||||
<li ng-repeat="link in ctrl.model.info.links"> |
||||
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a> |
||||
</li> |
||||
</ul> |
||||
</section> |
||||
</aside> |
||||
</div> |
||||
|
||||
@ -1,63 +1,68 @@ |
||||
<navbar model="ctrl.navModel"></navbar> |
||||
|
||||
<div class="page-container"> |
||||
<div class="page-header"> |
||||
<h1> |
||||
<i class="icon-gf icon-gf-apps"></i> |
||||
Plugins <span class="muted small">(currently installed)</span> |
||||
</h1> |
||||
<div class="page-header-canvas"> |
||||
<div class="page-container"> |
||||
<navbar model="ctrl.navModel"></navbar> |
||||
|
||||
<div class="page-header-tabs"> |
||||
<ul class="gf-tabs"> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> |
||||
Panels |
||||
</a> |
||||
</li> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> |
||||
Data sources |
||||
</a> |
||||
</li> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> |
||||
Apps |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
<div class="page-header"> |
||||
<page-h1 model="ctrl.navModel"></page-h1> |
||||
|
||||
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> |
||||
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com |
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="page-header-tabs"> |
||||
<ul class="gf-tabs"> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> |
||||
<i class="icon-gf icon-gf-panel"></i> |
||||
Panels |
||||
</a> |
||||
</li> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> |
||||
<i class="gicon gicon-datasources"></i> |
||||
Data sources |
||||
</a> |
||||
</li> |
||||
<li class="gf-tabs-item"> |
||||
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> |
||||
<i class="icon-gf icon-gf-apps"></i> |
||||
Apps |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<section class="card-section" layout-mode> |
||||
<layout-selector></layout-selector> |
||||
<a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> |
||||
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="page-container page-body"> |
||||
<section class="card-section" layout-mode> |
||||
<layout-selector></layout-selector> |
||||
|
||||
<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"> |
||||
<div class="card-item-type"> |
||||
<i class="icon-gf icon-gf-{{plugin.type}}"></i> |
||||
{{plugin.type}} |
||||
</div> |
||||
<div class="card-item-notice" ng-show="plugin.hasUpdate"> |
||||
<span bs-tooltip="plugin.latestVersion">Update available!</span> |
||||
</div> |
||||
</div> |
||||
<div class="card-item-body"> |
||||
<figure class="card-item-figure"> |
||||
<img ng-src="{{plugin.info.logos.small}}"> |
||||
</figure> |
||||
<div class="card-item-details"> |
||||
<div class="card-item-name">{{plugin.name}}</div> |
||||
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ol> |
||||
</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"> |
||||
<div class="card-item-type"> |
||||
<i class="icon-gf icon-gf-{{plugin.type}}"></i> |
||||
{{plugin.type}} |
||||
</div> |
||||
<div class="card-item-notice" ng-show="plugin.hasUpdate"> |
||||
<span bs-tooltip="plugin.latestVersion">Update available!</span> |
||||
</div> |
||||
</div> |
||||
<div class="card-item-body"> |
||||
<figure class="card-item-figure"> |
||||
<img ng-src="{{plugin.info.logos.small}}"> |
||||
</figure> |
||||
<div class="card-item-details"> |
||||
<div class="card-item-name">{{plugin.name}}</div> |
||||
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ol> |
||||
</section> |
||||
</div> |
||||
|
||||
@ -0,0 +1,61 @@ |
||||
|
||||
.page-header-canvas { |
||||
background: linear-gradient(90deg, #292a2d, black); |
||||
box-shadow: inset 0px -4px 14px #2d2d2d; |
||||
border-bottom: 1px solid $dark-4; |
||||
} |
||||
|
||||
.page-header { |
||||
padding: 2rem 0 0 0; |
||||
|
||||
.btn { |
||||
float: right; |
||||
margin-left: 1rem; |
||||
|
||||
// better align icons |
||||
.fa { |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.page-header__title { |
||||
font-size: $font-size-h2; |
||||
flex-grow: 1; |
||||
margin-bottom: 2.5rem; |
||||
line-height: 50px; |
||||
} |
||||
|
||||
.page-header__img { |
||||
border-radius: 50%; |
||||
margin-right: 0.5rem; |
||||
position: relative; |
||||
top: -3px; |
||||
width: 50px; |
||||
height: 50px; |
||||
} |
||||
|
||||
.page-header__icon { |
||||
font-size: 150%; |
||||
margin-right: 0.5rem; |
||||
width: 50px; |
||||
height: 50px; |
||||
position: relative; |
||||
|
||||
&.fa { |
||||
top: 3px; |
||||
} |
||||
|
||||
&.icon-gf { |
||||
top: 3px; |
||||
} |
||||
} |
||||
|
||||
.page-heading { |
||||
font-size: 1.25rem; |
||||
margin-top: 0; |
||||
margin-bottom: $spacer * 0.7; |
||||
} |
||||
|
||||
|
||||
Loading…
Reference in new issue