apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: updating header design for pages

Browse Source
pull/10063/head
Torkel Ödegaard 8 years ago
parent 47f11c26c0
commit 645f49eda4
20 changed files with 373 additions and 270 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      pkg/api/index.go
  2. 6
      public/app/core/components/navbar/navbar.ts
  3. 22
      public/app/core/nav_model_srv.ts
  4. 9
      public/app/features/admin/partials/configuration_home.html
  5. 3
      public/app/features/alerting/alert_list_ctrl.ts
  6. 1
      public/app/features/alerting/notifications_list_ctrl.ts
  7. 43
      public/app/features/alerting/partials/alert_list.html
  8. 33
      public/app/features/alerting/partials/notifications_list.html
  9. 8
      public/app/features/org/partials/profile.html
  10. 9
      public/app/features/plugins/partials/ds_edit.html
  11. 15
      public/app/features/plugins/partials/ds_list.html
  12. 11
      public/app/features/plugins/partials/plugin_edit.html
  13. 19
      public/app/features/plugins/partials/plugin_list.html
  14. 1
      public/sass/_grafana.scss
  15. 2
      public/sass/_variables.scss
  16. 4
      public/sass/base/_icons.scss
  17. 2
      public/sass/components/_footer.scss
  18. 61
      public/sass/components/_page_header.scss
  19. 6
      public/sass/components/_tabs.scss
  20. 82
      public/sass/layout/_page.scss

4
pkg/api/index.go
Unescape 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) {
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{

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

@ -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: {

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

@ -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;
}

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

@ -1,9 +1,14 @@
<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">
<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">

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

@ -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;

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

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

43
public/app/features/alerting/partials/alert_list.html
Unescape 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">
<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()">
<i class="fa fa-info-circle"></i>
How to add an alert
<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>
<a class="btn btn-inverse" href="alerting/notifications" >
<i class="fa fa-bell"></i>
</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>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<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">
@ -23,7 +34,19 @@
</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&#45;inverse" href="alerting/notifications" > -->
<!-- <i class="fa fa&#45;bell"></i> -->
<!-- Notification channels -->
<!-- </a> -->
</div>
<section class="card-section card-list-layout-list">

33
public/app/features/alerting/partials/notifications_list.html
Unescape 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">
<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
</a>
</div>

8
public/app/features/org/partials/profile.html
Unescape 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">
<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>

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

@ -5,8 +5,6 @@
<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>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs">
<li class="gf-tabs-item">
@ -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">

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

@ -1,16 +1,25 @@
<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">
<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}}/">

11
public/app/features/plugins/partials/plugin_edit.html
Unescape 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="plugin-header">
<span class="plugin-header-logo">
@ -25,10 +26,11 @@
</a>
</li>
</ul>
</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 ng-bind-html="ctrl.readmeHtml" class="markdown-html">
</div>
@ -89,5 +91,4 @@
</ul>
</section>
</aside>
</div>
</div>

19
public/app/features/plugins/partials/plugin_list.html
Unescape 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">
<h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span>
</h1>
<page-h1 model="ctrl.navModel"></page-h1>
<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>
<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
</a>
</div>
</div>
</div>
</div>
<div class="page-container page-body">
<section class="card-section" layout-mode>
<layout-selector></layout-selector>

1
public/sass/_grafana.scss
Unescape View File

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

2
public/sass/_variables.scss
Unescape View File

@ -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;

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

@ -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');
}

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

@ -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
Unescape 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
Unescape View File

@ -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;
}
}

82
public/sass/layout/_page.scss
Unescape 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 {
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 {
@ -208,12 +157,11 @@
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
}
// we dont need an arrow after the last link
&:last-child:after {
// we dont need an arrow after the last link
&:last-child:after {
content: none;
}
}
}

Write Preview
Loading…
Cancel
Save