mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: updating header design for pages
This commit is contained in:
parent
47f11c26c0
commit
645f49eda4
@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
|
||||
|
||||
if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
|
||||
alertChildNavs := []*dtos.NavLink{
|
||||
{Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
|
||||
{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
|
||||
{Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
|
||||
{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"},
|
||||
}
|
||||
|
||||
data.NavTree = append(data.NavTree, &dtos.NavLink{
|
||||
|
@ -40,9 +40,9 @@ export function pageH1() {
|
||||
restrict: 'E',
|
||||
template: `
|
||||
<h1 class="page-header__title">
|
||||
<i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
|
||||
<img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
|
||||
{{model.node.text}}
|
||||
<i class="page-header__icon {{::model.header.icon}}" ng-if="::model.header.icon"></i>
|
||||
<img class="page-header__img" ng-src="{{::model.header.img}}" ng-if="::model.header.img"></i>
|
||||
{{model.header.text}}
|
||||
</h1>
|
||||
`,
|
||||
scope: {
|
||||
|
@ -5,15 +5,24 @@ import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
|
||||
export interface NavModelItem {
|
||||
title: string;
|
||||
text: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
iconUrl?: string;
|
||||
img?: string;
|
||||
}
|
||||
|
||||
export interface NavModel {
|
||||
section: NavModelItem;
|
||||
menu: NavModelItem[];
|
||||
export class NavModel {
|
||||
breadcrumbs: NavModelItem[];
|
||||
header: NavModelItem;
|
||||
node: NavModelItem;
|
||||
|
||||
constructor() {
|
||||
this.breadcrumbs = [];
|
||||
}
|
||||
|
||||
setPageHeaderIndex(index: number) {
|
||||
this.header = this.breadcrumbs[index];
|
||||
}
|
||||
}
|
||||
|
||||
export class NavModelSrv {
|
||||
@ -31,12 +40,13 @@ export class NavModelSrv {
|
||||
|
||||
getNav(...args) {
|
||||
var children = this.navItems;
|
||||
var nav = {breadcrumbs: [], node: null};
|
||||
var nav = new NavModel();
|
||||
|
||||
for (let id of args) {
|
||||
let node = _.find(children, {id: id});
|
||||
nav.breadcrumbs.push(node);
|
||||
nav.node = node;
|
||||
nav.header = node;
|
||||
children = node.children;
|
||||
}
|
||||
|
||||
|
@ -1,9 +1,14 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
</div>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
<section class="card-section card-list-layout-grid">
|
||||
<ol class="card-list">
|
||||
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
|
||||
@ -29,4 +34,4 @@
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -23,7 +23,8 @@ export class AlertListCtrl {
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private backendSrv, private $location, navModelSrv) {
|
||||
this.navModel = navModelSrv.getNav('alerting');
|
||||
this.navModel = navModelSrv.getNav('alerting', 'alert-list');
|
||||
this.navModel.setPageHeaderIndex(0);
|
||||
|
||||
var params = $location.search();
|
||||
this.filters.state = params.state || null;
|
||||
|
@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
|
||||
constructor(private backendSrv, navModelSrv) {
|
||||
this.loadNotifications();
|
||||
this.navModel = navModelSrv.getNav('alerting', 'channels');
|
||||
this.navModel.setPageHeaderIndex(0);
|
||||
}
|
||||
|
||||
loadNotifications() {
|
||||
|
@ -1,29 +1,52 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container" >
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-container" >
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
|
||||
|
||||
<a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
How to add an alert
|
||||
</a>
|
||||
<a class="btn btn-inverse" href="alerting/notifications" >
|
||||
<i class="fa fa-bell"></i>
|
||||
Notification channels
|
||||
</a>
|
||||
</div>
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link active" href="alerting">
|
||||
<i class="fa fa-fw fa-list-ul"></i>
|
||||
Alert Rules
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" href="alerting/notifications">
|
||||
<i class="gicon gicon-alert-notification-channel"></i>
|
||||
Notification channels
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">Filter by state</label>
|
||||
<div class="gf-form-select-wrapper width-13">
|
||||
<select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
|
||||
<div class="page-action-bar">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">Filter by state</label>
|
||||
<div class="gf-form-select-wrapper width-13">
|
||||
<select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-action-bar__spacer">
|
||||
</div>
|
||||
|
||||
<a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
How to add an alert
|
||||
</a>
|
||||
|
||||
<!-- <a class="btn btn-inverse" href="alerting/notifications" > -->
|
||||
<!-- <i class="fa fa-bell"></i> -->
|
||||
<!-- Notification channels -->
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<section class="card-section card-list-layout-list">
|
||||
|
@ -1,10 +1,35 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container" >
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-container" >
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
|
||||
|
||||
<a href="alerting/notification/new" class="btn btn-success pull-right">
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" href="alerting">
|
||||
<i class="fa fa-fw fa-list-ul"></i>
|
||||
Alert Rules
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link active" href="alerting/notifications">
|
||||
<i class="gicon gicon-alert-notification-channel"></i>
|
||||
Notification channels
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
<div class="page-action-bar">
|
||||
<div class="page-action-bar__spacer">
|
||||
</div>
|
||||
|
||||
<a href="alerting/notification/new" class="btn btn-success">
|
||||
<i class="fa fa-plus"></i>
|
||||
New Channel
|
||||
</a>
|
||||
</div>
|
||||
|
@ -1,10 +1,14 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
<form name="ctrl.userForm" class="gf-form-group">
|
||||
<h3 class="page-heading">Information</h3>
|
||||
|
||||
|
@ -3,9 +3,7 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
|
||||
<ul class="gf-tabs">
|
||||
@ -28,6 +26,13 @@
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
|
||||
<div class="page-action-bar">
|
||||
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">
|
||||
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.tabIndex === 0">
|
||||
<form name="ctrl.editForm" ng-if="ctrl.current">
|
||||
<div class="gf-form-group">
|
||||
|
@ -1,16 +1,25 @@
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<a class="page-header__cta btn btn-success" href="datasources/new">
|
||||
Add data source
|
||||
</a>
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container page-body">
|
||||
<div class="page-action-bar">
|
||||
<div class="page-action-bar__spacer"></div>
|
||||
<a class="page-header__cta btn btn-success" href="datasources/new">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add data source
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="card-section" layout-mode>
|
||||
<layout-selector></layout-selector>
|
||||
|
||||
<ol class="card-list">
|
||||
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
|
||||
<a class="card-item" href="datasources/edit/{{ds.id}}/">
|
||||
@ -43,4 +52,4 @@
|
||||
<div ng-if="ctrl.datasources.length === 0">
|
||||
<em>No data sources defined</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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="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>
|
||||
|
@ -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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
@ -85,6 +85,7 @@
|
||||
@import "components/code_editor";
|
||||
@import "components/dashboard_grid";
|
||||
@import "components/dashboard_list";
|
||||
@import "components/page_header";
|
||||
|
||||
|
||||
// PAGES
|
||||
|
@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
|
||||
$panel-padding: 0px 10px 5px 10px;
|
||||
|
||||
// tabs
|
||||
$tabs-padding: 8px 15px 11px;
|
||||
$tabs-padding: 10px 15px 10px;
|
||||
|
||||
|
@ -43,5 +43,9 @@
|
||||
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
|
||||
}
|
||||
|
||||
.gicon-alert-notification-channel {
|
||||
background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
.footer {
|
||||
color: $footer-link-color;
|
||||
padding: 5rem 0 1rem 0;
|
||||
font-size: $font-size-xs;
|
||||
font-size: $font-size-sm;
|
||||
width: 98%; /* was causing horiz scrollbars - need to examine */
|
||||
|
||||
a {
|
||||
|
61
public/sass/components/_page_header.scss
Normal file
61
public/sass/components/_page_header.scss
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,8 @@
|
||||
.gf-tabs {
|
||||
@include clearfix();
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.gf-tabs-item {
|
||||
@ -18,7 +20,7 @@
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -32,8 +34,6 @@
|
||||
border-color: $orange $dark-4 transparent;
|
||||
background: $page-bg;
|
||||
color: $link-color;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -42,6 +42,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-action-bar {
|
||||
margin-bottom: $spacer * 2;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-action-bar__spacer {
|
||||
width: $spacer * 2;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.page-content-with-sidebar {
|
||||
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
|
||||
}
|
||||
@ -53,68 +64,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-canvas {
|
||||
background: linear-gradient(90deg, #292a2d, black);
|
||||
box-shadow: inset 0px -4px 14px #2d2d2d;
|
||||
bottom-border: 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;
|
||||
display: inline-block;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.page-header__img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.page-header__icon {
|
||||
font-size: 150%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer * 0.7;
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
max-width: 800px;
|
||||
margin-left: 10px;
|
||||
h2 {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0px;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-color;
|
||||
i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
color: $text-color-weak;
|
||||
h4 {
|
||||
@ -207,13 +156,12 @@
|
||||
|
||||
// 5px - for rounded arrows and
|
||||
// 50px - to prevent hover glitches on the border created using shadows*/
|
||||
border-radius: 0 5px 0 50px;
|
||||
border-radius: 0 5px 0 50px;
|
||||
}
|
||||
|
||||
// we dont need an arrow after the last link
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// we dont need an arrow after the last link
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user