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

ux: updating header design for pages

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-30 11:31:38 +01:00
parent 47f11c26c0
commit 645f49eda4
20 changed files with 383 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/api/index.go
View File

@ -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) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
alertChildNavs := []*dtos.NavLink{ alertChildNavs := []*dtos.NavLink{
{Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, {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: "fa fa-fw fa-bell-o"}, {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"},
} }
data.NavTree = append(data.NavTree, &dtos.NavLink{ data.NavTree = append(data.NavTree, &dtos.NavLink{

6
public/app/core/components/navbar/navbar.ts
View File

@ -40,9 +40,9 @@ export function pageH1() {
restrict: 'E', restrict: 'E',
template: ` template: `
<h1 class="page-header__title"> <h1 class="page-header__title">
<i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i> <i class="page-header__icon {{::model.header.icon}}" ng-if="::model.header.icon"></i>
<img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i> <img class="page-header__img" ng-src="{{::model.header.img}}" ng-if="::model.header.img"></i>
{{model.node.text}} {{model.header.text}}
</h1> </h1>
`, `,
scope: { scope: {

22
public/app/core/nav_model_srv.ts
View File

@ -5,15 +5,24 @@ import config from 'app/core/config';
import _ from 'lodash'; import _ from 'lodash';
export interface NavModelItem { export interface NavModelItem {
title: string; text: string;
url: string; url: string;
icon?: string; icon?: string;
iconUrl?: string; img?: string;
} }
export interface NavModel { export class NavModel {
section: NavModelItem; breadcrumbs: NavModelItem[];
menu: NavModelItem[]; header: NavModelItem;
node: NavModelItem;
constructor() {
this.breadcrumbs = [];
}
setPageHeaderIndex(index: number) {
this.header = this.breadcrumbs[index];
}
} }
export class NavModelSrv { export class NavModelSrv {
@ -31,12 +40,13 @@ export class NavModelSrv {
getNav(...args) { getNav(...args) {
var children = this.navItems; var children = this.navItems;
var nav = {breadcrumbs: [], node: null}; var nav = new NavModel();
for (let id of args) { for (let id of args) {
let node = _.find(children, {id: id}); let node = _.find(children, {id: id});
nav.breadcrumbs.push(node); nav.breadcrumbs.push(node);
nav.node = node; nav.node = node;
nav.header = node;
children = node.children; children = node.children;
} }

9
public/app/features/admin/partials/configuration_home.html
View File

@ -1,9 +1,14 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container"> <div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <page-h1 model="ctrl.navModel"></page-h1>
</div> </div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section card-list-layout-grid"> <section class="card-section card-list-layout-grid">
<ol class="card-list"> <ol class="card-list">
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children"> <li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">

3
public/app/features/alerting/alert_list_ctrl.ts
View File

@ -23,7 +23,8 @@ export class AlertListCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $location, navModelSrv) { 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(); var params = $location.search();
this.filters.state = params.state || null; this.filters.state = params.state || null;

1
public/app/features/alerting/notifications_list_ctrl.ts
View File

@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
constructor(private backendSrv, navModelSrv) { constructor(private backendSrv, navModelSrv) {
this.loadNotifications(); this.loadNotifications();
this.navModel = navModelSrv.getNav('alerting', 'channels'); this.navModel = navModelSrv.getNav('alerting', 'channels');
this.navModel.setPageHeaderIndex(0);
} }
loadNotifications() { loadNotifications() {

45
public/app/features/alerting/partials/alert_list.html
View File

@ -1,21 +1,32 @@
<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"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
<a class="btn btn-secondary" ng-click="ctrl.openHowTo()"> <ul class="gf-tabs">
<i class="fa fa-info-circle"></i> <li class="gf-tabs-item">
How to add an alert <a class="gf-tabs-link active" href="alerting">
<i class="fa fa-fw fa-list-ul"></i>
Alert Rules
</a> </a>
<a class="btn btn-inverse" href="alerting/notifications" > </li>
<i class="fa fa-bell"></i> <li class="gf-tabs-item">
<a class="gf-tabs-link" href="alerting/notifications">
<i class="gicon gicon-alert-notification-channel"></i>
Notification channels Notification channels
</a> </a>
</div> </li>
</ul>
<div class="gf-form-group"> </div>
<div class="gf-form-inline"> </div>
</div>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label">Filter by state</label> <label class="gf-form-label">Filter by state</label>
<div class="gf-form-select-wrapper width-13"> <div class="gf-form-select-wrapper width-13">
@ -23,7 +34,19 @@
</select> </select>
</div> </div>
</div> </div>
<div class="page-action-bar__spacer">
</div> </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&#45;inverse" href="alerting/notifications" > -->
<!-- <i class="fa fa&#45;bell"></i> -->
<!-- Notification channels -->
<!-- </a> -->
</div> </div>
<section class="card-section card-list-layout-list"> <section class="card-section card-list-layout-list">

33
public/app/features/alerting/partials/notifications_list.html
View File

@ -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"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <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 New Channel
</a> </a>
</div> </div>

8
public/app/features/org/partials/profile.html
View File

@ -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"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <page-h1 model="ctrl.navModel"></page-h1>
</div> </div>
</div>
</div>
<div class="page-container page-body">
<form name="ctrl.userForm" class="gf-form-group"> <form name="ctrl.userForm" class="gf-form-group">
<h3 class="page-heading">Information</h3> <h3 class="page-heading">Information</h3>

9
public/app/features/plugins/partials/ds_edit.html
View File

@ -5,8 +5,6 @@
<div class="page-header"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <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>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards"> <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs"> <ul class="gf-tabs">
<li class="gf-tabs-item"> <li class="gf-tabs-item">
@ -28,6 +26,13 @@
</div> </div>
<div class="page-container page-body"> <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"> <div ng-if="ctrl.tabIndex === 0">
<form name="ctrl.editForm" ng-if="ctrl.current"> <form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group"> <div class="gf-form-group">

15
public/app/features/plugins/partials/ds_list.html
View File

@ -1,16 +1,25 @@
<navbar model="ctrl.navModel"></navbar> <div class="page-header-canvas">
<div class="page-container"> <div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header"> <div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1> <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"> <a class="page-header__cta btn btn-success" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source Add data source
</a> </a>
</div> </div>
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<layout-selector></layout-selector> <layout-selector></layout-selector>
<ol class="card-list"> <ol class="card-list">
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources"> <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/"> <a class="card-item" href="datasources/edit/{{ds.id}}/">

11
public/app/features/plugins/partials/plugin_edit.html
View File

@ -1,6 +1,7 @@
<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="page-header">
<div class="plugin-header"> <div class="plugin-header">
<span class="plugin-header-logo"> <span class="plugin-header-logo">
@ -25,10 +26,11 @@
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div>
<div class="page-body page-body--with-sidebar"> <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 class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
<div ng-bind-html="ctrl.readmeHtml" class="markdown-html"> <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
</div> </div>
@ -89,5 +91,4 @@
</ul> </ul>
</section> </section>
</aside> </aside>
</div>
</div> </div>

19
public/app/features/plugins/partials/plugin_list.html
View File

@ -1,37 +1,42 @@
<navbar model="ctrl.navModel"></navbar>
<div class="page-container"> <div class="page-header-canvas">
<div class="page-container">
<navbar model="ctrl.navModel"></navbar>
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<div class="page-header-tabs"> <div class="page-header-tabs">
<ul class="gf-tabs"> <ul class="gf-tabs">
<li class="gf-tabs-item"> <li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
<i class="icon-gf icon-gf-panel"></i>
Panels Panels
</a> </a>
</li> </li>
<li class="gf-tabs-item"> <li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
<i class="gicon gicon-datasources"></i>
Data sources Data sources
</a> </a>
</li> </li>
<li class="gf-tabs-item"> <li class="gf-tabs-item">
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
<i class="icon-gf icon-gf-apps"></i>
Apps Apps
</a> </a>
</li> </li>
</ul> </ul>
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> <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 Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
</a> </a>
</div> </div>
</div> </div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<layout-selector></layout-selector> <layout-selector></layout-selector>

1
public/sass/_grafana.scss
View File

@ -85,6 +85,7 @@
@import "components/code_editor"; @import "components/code_editor";
@import "components/dashboard_grid"; @import "components/dashboard_grid";
@import "components/dashboard_list"; @import "components/dashboard_list";
@import "components/page_header";
// PAGES // PAGES

2
public/sass/_variables.scss
View File

@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px; $panel-padding: 0px 10px 5px 10px;
// tabs // tabs
$tabs-padding: 8px 15px 11px; $tabs-padding: 10px 15px 10px;

4
public/sass/base/_icons.scss
View File

@ -43,5 +43,9 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); 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');
}

2
public/sass/components/_footer.scss
View File

@ -5,7 +5,7 @@
.footer { .footer {
color: $footer-link-color; color: $footer-link-color;
padding: 5rem 0 1rem 0; padding: 5rem 0 1rem 0;
font-size: $font-size-xs; font-size: $font-size-sm;
width: 98%; /* was causing horiz scrollbars - need to examine */ width: 98%; /* was causing horiz scrollbars - need to examine */
a { a {

61
public/sass/components/_page_header.scss Normal file
View 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;
}

6
public/sass/components/_tabs.scss
View File

@ -1,6 +1,8 @@
.gf-tabs { .gf-tabs {
@include clearfix(); @include clearfix();
float: left; float: left;
position: relative;
top: 1px;
} }
.gf-tabs-item { .gf-tabs-item {
@ -18,7 +20,7 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
i { i {
padding-right: 5px; margin-right: 5px;
} }
&:hover, &:hover,
@ -32,8 +34,6 @@
border-color: $orange $dark-4 transparent; border-color: $orange $dark-4 transparent;
background: $page-bg; background: $page-bg;
color: $link-color; color: $link-color;
position: relative;
top: 1px;
} }
} }

82
public/sass/layout/_page.scss
View File

@ -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 { .page-content-with-sidebar {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin 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 { .page-sidebar {
color: $text-color-weak; color: $text-color-weak;
h4 { h4 {
@ -208,12 +157,11 @@
// 5px - for rounded arrows and // 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/ // 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 // we dont need an arrow after the last link
&:last-child:after { &:last-child:after {
content: none; content: none;
} }
} }