Skip to content

N
nexpie-grafana-theme
Commit d659a5d7 by Torkel Ödegaard
Options

ux: more nav work

parent 0bc226d7
Showing with 39 additions and 42 deletions
public/app/core/components/navbar/navbar.ts
...@@ -41,4 +41,21 @@ export function navbarDirective() { ...@@ -41,4 +41,21 @@ export function navbarDirective() {
}; };
} }
export function pageH1() {
return {
restrict: 'E',
template: `
<h1>
<i class="{{model.node.icon}}"></i>
{{model.node.text}}
</h1>
`,
scope: {
model: "=",
}
};
}
coreModule.directive('pageH1', pageH1);
coreModule.directive('navbar', navbarDirective); coreModule.directive('navbar', navbarDirective);
public/app/features/alerting/notification_edit_ctrl.ts
...@@ -36,12 +36,14 @@ export class AlertNotificationEditCtrl { ...@@ -36,12 +36,14 @@ export class AlertNotificationEditCtrl {
} }
if (!this.$routeParams.id) { if (!this.$routeParams.id) {
this.navModel.breadcrumbs.push({text: 'New'}); this.navModel.breadcrumbs.push({text: 'New channel'});
this.navModel.node = {text: 'New channel'};
return _.defaults(this.model, this.defaults); return _.defaults(this.model, this.defaults);
} }
return this.backendSrv.get(`/api/alert-notifications/${this.$routeParams.id}`).then(result => { return this.backendSrv.get(`/api/alert-notifications/${this.$routeParams.id}`).then(result => {
this.navModel.breadcrumbs.push({text: result.name}); this.navModel.breadcrumbs.push({text: result.name});
this.navModel.node = {text: result.name};
return result; return result;
}); });
}).then(model => { }).then(model => {
......
public/app/features/alerting/partials/alert_list.html
...@@ -2,10 +2,8 @@ ...@@ -2,10 +2,8 @@
<div class="page-container" > <div class="page-container" >
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="{{ctrl.navModel.node.icon}}"></i>
{{ctrl.navModel.node.text}}
</h1>
<a class="btn btn-inverse" ng-click="ctrl.openHowTo()"> <a class="btn btn-inverse" ng-click="ctrl.openHowTo()">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
How to add an alert How to add an alert
......
public/app/features/alerting/partials/notification_edit.html
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 ng-show="ctrl.model.id">Edit Channel</h1> <page-h1 model="ctrl.navModel"></page-h1>
<h1 ng-show="!ctrl.model.id">New Channel</h1>
</div> </div>
<form name="ctrl.theForm" ng-if="ctrl.notifiers"> <form name="ctrl.theForm" ng-if="ctrl.notifiers">
......
public/app/features/alerting/partials/notifications_list.html
...@@ -2,10 +2,7 @@ ...@@ -2,10 +2,7 @@
<div class="page-container" > <div class="page-container" >
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="{{ctrl.navModel.node.icon}}"></i>
{{ctrl.navModel.node.text}}
</h1>
<a href="alerting/notification/new" class="btn btn-success pull-right"> <a href="alerting/notification/new" class="btn btn-success pull-right">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
......
public/app/features/org/orgDetailsCtrl.js
...@@ -10,7 +10,7 @@ function (angular) { ...@@ -10,7 +10,7 @@ function (angular) {
$scope.init = function() { $scope.init = function() {
$scope.getOrgInfo(); $scope.getOrgInfo();
$scope.navModel = navModelSrv.getOrgNav(0); $scope.navModel = navModelSrv.getNav('cfg', 'org');
}; };
$scope.getOrgInfo = function() { $scope.getOrgInfo = function() {
......
public/app/features/org/partials/change_password.html
...@@ -2,10 +2,7 @@ ...@@ -2,10 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="navModel"></page-h1>
<i class="{{navModel.node.icon}}"></i>
{{navModel.node.text}}
</h1>
</div> </div>
<div ng-if="ldapEnabled || authProxyEnabled"> <div ng-if="ldapEnabled || authProxyEnabled">
......
public/app/features/org/partials/orgApiKeys.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1>API Keys</h1> <page-h1 model="navModel"></page-h1>
</div> </div>
<h3 class="page-heading">Add new</h3> <h3 class="page-heading">Add new</h3>
......
public/app/features/org/partials/orgDetails.html
...@@ -2,10 +2,7 @@ ...@@ -2,10 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="navModel"></page-h1>
<i class="{{navModel.node.icon}}"></i>
{{navModel.node.text}}
</h1>
</div> </div>
<h3 class="page-heading">General</h3> <h3 class="page-heading">General</h3>
......
public/app/features/org/partials/profile.html
...@@ -2,10 +2,7 @@ ...@@ -2,10 +2,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="{{ctrl.navModel.node.icon}}"></i>
{{ctrl.navModel.node.text}}
</h1>
</div> </div>
<form name="ctrl.userForm" class="gf-form-group"> <form name="ctrl.userForm" class="gf-form-group">
......
public/app/features/plugins/ds_edit_ctrl.ts
...@@ -59,7 +59,10 @@ export class DataSourceEditCtrl { ...@@ -59,7 +59,10 @@ export class DataSourceEditCtrl {
initNewDatasourceModel() { initNewDatasourceModel() {
this.isNew = true; this.isNew = true;
this.current = angular.copy(defaults); this.current = angular.copy(defaults);
this.navModel.breadcrumbs.push({text: 'New data source'});
// add to nav & breadcrumbs
this.navModel.node = {text: 'New data source', icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
this.navModel.breadcrumbs.push(this.navModel.node);
// We are coming from getting started // We are coming from getting started
if (this.$location.search().gettingstarted) { if (this.$location.search().gettingstarted) {
...@@ -86,7 +89,8 @@ export class DataSourceEditCtrl { ...@@ -86,7 +89,8 @@ export class DataSourceEditCtrl {
this.backendSrv.get('/api/datasources/' + id).then(ds => { this.backendSrv.get('/api/datasources/' + id).then(ds => {
this.isNew = false; this.isNew = false;
this.current = ds; this.current = ds;
this.navModel.breadcrumbs.push({text: ds.name}); this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'};
this.navModel.breadcrumbs.push(this.navModel.node);
if (datasourceCreated) { if (datasourceCreated) {
datasourceCreated = false; datasourceCreated = false;
......
public/app/features/plugins/partials/ds_edit.html
...@@ -3,16 +3,7 @@ ...@@ -3,16 +3,7 @@
<div class="scroll-canvas"> <div class="scroll-canvas">
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="icon-gf icon-gf-datasources"></i>
<span ng-show="ctrl.isNew">New data source</span>
<span ng-hide="ctrl.isNew">{{ctrl.current.name}}</span>
</h1>
<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
<i class="fa fa-plus"></i>
Add data source
</a>
<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">
......
public/app/features/plugins/partials/ds_list.html
...@@ -3,10 +3,7 @@ ...@@ -3,10 +3,7 @@
<div class="scroll-canvas"> <div class="scroll-canvas">
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <page-h1 model="ctrl.navModel"></page-h1>
<i class="icon-gf icon-gf-fw icon-gf-datasources"></i>
<span>Data Sources</span>
</h1>
<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> <i class="fa fa-plus"></i>
...@@ -15,6 +12,7 @@ ...@@ -15,6 +12,7 @@
</div> </div>
<section class="card-section" layout-mode> <section class="card-section" layout-mode>
<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">
......
public/app/features/plugins/partials/plugin_list.html
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1> <h1>
<i class="icon-gf icon-gf-apps"></i>
Plugins <span class="muted small">(currently installed)</span> Plugins <span class="muted small">(currently installed)</span>
</h1> </h1>
......
public/sass/layout/_page.scss
...@@ -67,7 +67,6 @@ ...@@ -67,7 +67,6 @@
} }
} }
.page-heading { .page-heading {
font-size: 1.25rem; font-size: 1.25rem;
margin-top: 0; margin-top: 0;
......
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