Skip to content

N
nexpie-grafana-theme
Commit 7f0f0eb6 by Torkel Ödegaard
Options

ux: more nav work

parent 54057363
Showing with 113 additions and 74 deletions
pkg/api/index.go
......@@ -99,8 +99,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
dashboardChildNavs := []*dtos.NavLink{
{Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"},
{Text: "Playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
{Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"},
{Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
{Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"},
}
data.NavTree = append(data.NavTree, &dtos.NavLink{
......@@ -249,10 +249,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Icon: "fa fa-fw fa-shield",
Url: setting.AppSubUrl + "/admin",
Children: []*dtos.NavLink{
{Text: "Global Users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Global Orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Url: setting.AppSubUrl + "/admin/stats"},
{Text: "Global Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Global Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"},
{Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/admin/styleguide"},
},
})
}
......
public/app/core/components/gf_page.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
const template = `
<div class="scroll-canvas">
<navbar model="model"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
<img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
{{::model.node.text}}
</h1>
<div class="page-header__actions" ng-transclude="header"></div>
</div>
<div class="page-body" ng-transclude="body">
</div>
</div>
</div>
`;
export function gfPageDirective() {
return {
restrict: 'E',
template: template,
scope: {
"model": "=",
},
transclude: {
'header': '?gfPageHeader',
'body': 'gfPageBody',
},
link: function(scope, elem, attrs) {
console.log(scope);
}
};
}
coreModule.directive('gfPage', gfPageDirective);
public/app/core/core.ts
......@@ -52,6 +52,7 @@ import {NavModelSrv, NavModel} from './nav_model_srv';
import {userPicker} from './components/user_picker';
import {userGroupPicker} from './components/user_group_picker';
import {geminiScrollbar} from './components/scroll/scroll';
import {gfPageDirective} from './components/gf_page';
export {
arrayJoin,
......@@ -83,4 +84,5 @@ export {
userPicker,
userGroupPicker,
geminiScrollbar,
gfPageDirective
};
public/app/features/admin/admin.ts
......@@ -10,7 +10,7 @@ class AdminSettingsCtrl {
/** @ngInject **/
constructor($scope, backendSrv, navModelSrv) {
this.navModel = navModelSrv.getAdminNav();
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings');
backendSrv.get('/api/admin/settings').then(function(settings) {
$scope.settings = settings;
......@@ -34,7 +34,7 @@ export class AdminStatsCtrl {
/** @ngInject */
constructor(backendSrv: any, navModelSrv) {
this.navModel = navModelSrv.getAdminNav();
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats');
backendSrv.get('/api/admin/stats').then(stats => {
this.stats = stats;
......@@ -42,8 +42,7 @@ export class AdminStatsCtrl {
}
}
export class ConfigurationHomeCtrl {
navModel: any;
export class ConfigurationHomeCtrl { navModel: any;
/** @ngInject */
constructor(private $scope, private backendSrv, private navModelSrv) {
......
public/app/features/admin/adminEditOrgCtrl.js
......@@ -9,7 +9,7 @@ function (angular) {
module.controller('AdminEditOrgCtrl', function($scope, $routeParams, backendSrv, $location, navModelSrv) {
$scope.init = function() {
$scope.navModel = navModelSrv.getAdminNav();
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
if ($routeParams.id) {
$scope.getOrg($routeParams.id);
......
public/app/features/admin/adminEditUserCtrl.js
......@@ -11,7 +11,7 @@ function (angular, _) {
$scope.user = {};
$scope.newOrg = { name: '', role: 'Editor' };
$scope.permissions = {};
$scope.navModel = navModelSrv.getAdminNav();
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
$scope.init = function() {
if ($routeParams.id) {
......
public/app/features/admin/adminListOrgsCtrl.js
......@@ -9,7 +9,7 @@ function (angular) {
module.controller('AdminListOrgsCtrl', function($scope, backendSrv, navModelSrv) {
$scope.init = function() {
$scope.navModel = navModelSrv.getAdminNav();
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
$scope.getOrgs();
};
......
public/app/features/admin/admin_list_users_ctrl.ts
......@@ -12,7 +12,7 @@ export default class AdminListUsersCtrl {
/** @ngInject */
constructor(private $scope, private backendSrv, private navModelSrv) {
this.navModel = navModelSrv.getAdminNav();
this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
this.query = '';
this.getUsers();
}
......
public/app/features/admin/partials/admin_home.html
......@@ -2,30 +2,34 @@
<div class="page-container">
<div class="page-header">
<h1>
Server Administration
</h1>
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<a class="btn btn-inverse" href="admin/users">
Manage Users
</a>
<a class="btn btn-inverse" href="admin/orgs">
Manage Organizations
</a>
<a class="btn btn-inverse" href="admin/settings">
View Server Settings
</a>
<a class="btn btn-inverse" href="admin/stats">
View Server Stats
</a>
<a class="btn btn-inverse" href="styleguide">
Style guide
</a>
<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">
<a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header">
<div class="card-item-type">
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<i class="{{navItem.icon}}"></i>
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{navItem.text}}
</div>
<div class="card-item-sub-name">
{{navItem.description}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>
public/app/features/admin/partials/configuration_home.html
<navbar model="ctrl.navModel"></navbar>
<div class="scroll-canvas">
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="fa fa-fw fa-cogs"></i>
<span>Configuration</span>
</h1>
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<section class="card-section card-list-layout-grid">
......
public/app/features/playlist/partials/playlist.html
......@@ -2,8 +2,7 @@
<div class="page-container" ng-form="playlistEditForm">
<div class="page-header">
<h1 ng-show="ctrl.isNew()">New Playlist</h1>
<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
......
public/app/features/playlist/partials/playlists.html
......@@ -2,7 +2,7 @@
<div class="page-container">
<div class="page-header">
<h1>Saved playlists</h1>
<page-h1 model="ctrl.navModel"></page-h1>
<a class="btn btn-success pull-right" href="playlists/create">
<i class="fa fa-plus"></i>
New Playlist
......@@ -13,7 +13,7 @@
<thead>
<th><strong>Name</strong></th>
<th><strong>Start url</strong></th>
<th style="width: 68px"></th>
<th style="width: 78px"></th>
<th style="width: 78px"></th>
<th style="width: 25px"></th>
</thead>
......
public/app/features/playlist/playlist_edit_ctrl.ts
......@@ -27,19 +27,23 @@ export class PlaylistEditCtrl {
private $route,
private navModelSrv
) {
this.navModel = navModelSrv.getPlaylistsNav(0);
this.navModel = navModelSrv.getNav('dashboards', 'playlists');
if ($route.current.params.id) {
var playlistId = $route.current.params.id;
backendSrv.get('/api/playlists/' + playlistId).then(result => {
this.playlist = result;
this.navModel.node = {text: result.name, icon: this.navModel.node.icon};
this.navModel.breadcrumbs.push(this.navModel.node);
});
backendSrv.get('/api/playlists/' + playlistId + '/items').then(result => {
this.playlistItems = result;
});
} else {
this.navModel.node = {text: "New playlist", icon: this.navModel.node.icon};
this.navModel.breadcrumbs.push(this.navModel.node);
}
}
......
public/app/features/playlist/playlists_ctrl.ts
......@@ -10,7 +10,7 @@ export class PlaylistsCtrl {
/** @ngInject */
constructor(private $scope, private $location, private backendSrv, private navModelSrv) {
this.navModel = navModelSrv.getPlaylistsNav(0);
this.navModel = navModelSrv.getNav('dashboards', 'playlists');
backendSrv.get('/api/playlists').then(result => {
this.playlists = result;
......
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar>
<div class="scroll-canvas">
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
......
public/app/features/plugins/partials/ds_list.html
<navbar model="ctrl.navModel"></navbar>
<div class="scroll-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>
......@@ -48,3 +47,4 @@
</div>
</div>
</div>
public/app/features/snapshot/partials/snapshots.html
......@@ -2,20 +2,17 @@
<div class="page-container">
<div class="page-header">
<h1>Available snapshots</h1>
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<table class="filter-table" style="margin-top: 20px">
<thead>
<th><strong>Name</strong></th>
<th><strong>Snapshot url</strong></th>
<th style="width: 70px"></th>
<th style="width: 25px"></th>
</thead>
<tr ng-repeat="snapshot in ctrl.snapshots">
</thead>
<tr ng-repeat="snapshot in ctrl.snapshots">
<td>
<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
</td>
......
public/app/features/snapshot/snapshot_ctrl.ts
......@@ -8,16 +8,8 @@ export class SnapshotsCtrl {
snapshots: any;
/** @ngInject */
constructor(private $rootScope, private backendSrv) {
this.navModel = {
section: {
title: 'Snapshots',
icon: 'icon-gf icon-gf-snapshot',
url: 'dashboard/snapshots',
},
menu: [],
};
constructor(private $rootScope, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('dashboards', 'snapshots');
this.backendSrv.get('/api/dashboard/snapshots').then(result => {
this.snapshots = result;
});
......
public/app/features/styleguide/styleguide.html
......@@ -2,7 +2,7 @@
<div class="page-container">
<div class="page-header">
<h1>Style Guide</h1>
<page-h1 model="ctrl.navModel"></page-h1>
<a class="btn btn-success" ng-click="ctrl.switchTheme()">
<i class="fa fa-random"></i>
......
public/app/features/styleguide/styleguide.ts
......@@ -16,7 +16,7 @@ class StyleGuideCtrl {
/** @ngInject **/
constructor(private $http, private $routeParams, private $location, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getAdminNav();
this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide');
this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
this.page = {};
......
public/sass/components/_cards.scss
......@@ -144,7 +144,7 @@
.card-item-wrapper {
width: 100%;
padding: 0 1.5rem 1.5rem 0rem;
padding: 0 1rem 1rem 0rem;
}
.card-item-wrapper--clickable {
......
public/sass/layout/_page.scss
......@@ -25,8 +25,12 @@
.scroll-canvas {
position: absolute;
width: 100%;
height: calc(100% - 54px);
overflow: auto;
height: 100%;
&.dashboard-container {
height: calc(100% - 54px);
}
}
.page-body {
......
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