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: wip

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-08-14 18:11:35 +02:00
parent 78ea1dc87d
commit 8d6a1cdbb4
9 changed files with 171 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/app/core/components/navbar/navbar.html
View File

@ -1,31 +1,27 @@
<div class="navbar-inner">
<div class="page-nav container">
<div ng-if="::!ctrl.hasMenu">
<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
<i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
<img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
{{::ctrl.section.title}}
</a>
</div>
<div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ::ctrl.model.items">
<a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
{{::item.title}}
<i class="page-breadcrumb__caret fa fa-caret-down"></i>
</a>
<div class="dropdown navbar-page-btn-wrapper" ng-if="::ctrl.hasMenu">
<a href="{{::ctrl.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
<i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
<img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
{{::ctrl.section.title}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.model.menu">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
<a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
{{::item.title}}
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="subItem in ::item.items">
<a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
<i class="{{::subItem.icon}}" ng-show="::subItem.icon"></i>
{{::subItem.title}}
</a>
</li>
</ul>
</div>
</div>
<div ng-transclude></div>
</div>
<dashboard-search></dashboard-search>

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

@ -8,13 +8,9 @@ import {NavModel, NavModelItem} from '../../nav_model_srv';
export class NavbarCtrl {
model: NavModel;
section: NavModelItem;
hasMenu: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope, private contextSrv) {
this.section = this.model.section;
this.hasMenu = this.model.menu.length > 0;
}
showSearch() {
@ -35,13 +31,11 @@ export function navbarDirective() {
templateUrl: 'public/app/core/components/navbar/navbar.html',
controller: NavbarCtrl,
bindToController: true,
transclude: true,
controllerAs: 'ctrl',
scope: {
model: "=",
},
link: function(scope, elem) {
elem.addClass('navbar');
}
};
}

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

@ -37,14 +37,19 @@ export class NavModelSrv {
getDatasourceNav(subPage) {
return {
section: {
title: 'Data Sources',
url: 'datasources',
icon: 'icon-gf icon-gf-datasources'
},
menu: [
{title: 'List view', active: subPage === 0, url: 'datasources', icon: 'fa fa-list-ul'},
{title: 'Add data source', active: subPage === 1, url: 'datasources/new', icon: 'fa fa-plus'},
items: [
{
title: 'Configuration',
items: [
{title: 'Data sources', active: subPage === 0, url: 'datasources', icon: 'fa fa-database'},
{title: 'Users', active: subPage === 0, url: 'users', icon: 'fa fa-fw fa-users'},
{title: 'Plugins', active: subPage === 0, url: 'plugins', icon: 'icon-gf icon-gf-apps'},
]
},
{
title: 'Data sources',
url: 'datasources',
}
]
};
}

137
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -1,64 +1,83 @@
<navbar model="ctrl.navModel">
<div class="navbar">
<div class="navbar-inner">
<div class="dropdown navbar-page-btn-wrapper">
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<a href="{{::ctrl.navModel.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
<i class="{{::ctrl.navModel.section.icon}}" ng-show="::ctrl.navModel.section.icon"></i>
<img ng-src="{{::ctrl.navModel.section.iconUrl}}" ng-show="::ctrl.navModel.section.iconUrl"></i>
{{::ctrl.navModel.section.title}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="nav pull-left dashnav-action-icons">
<li ng-show="::ctrl.dashboard.meta.canStar">
<a class="pointer" ng-click="ctrl.starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
<ul class="dropdown-menu">
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
</a>
</li>
</ul>
</li>
<li ng-show="::ctrl.dashboard.meta.canSave">
<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
</li>
</ul>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.navModel.menu">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
</div>
<ul class="nav pull-right">
<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="ctrl.exitFullscreen()">
Back to dashboard
</a>
</li>
<li>
<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
</navbar>
<ul class="nav pull-left dashnav-action-icons">
<li ng-show="::ctrl.dashboard.meta.canStar">
<a class="pointer" ng-click="ctrl.starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
<ul class="dropdown-menu">
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
</a>
</li>
</ul>
</li>
<li ng-show="::ctrl.dashboard.meta.canSave">
<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="ctrl.exitFullscreen()">
Back to dashboard
</a>
</li>
<li>
<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
</li>
</ul>
</div>
</div>

11
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -144,6 +144,17 @@ export class DashNavCtrl {
onFolderChange(folderId) {
this.dashboard.folderId = folderId;
}
showSearch() {
this.$rootScope.appEvent('show-dash-search');
}
navItemClicked(navItem, evt) {
if (navItem.clickHandler) {
navItem.clickHandler();
evt.preventDefault();
}
}
}
export function dashNavDirective() {

2
public/app/features/plugins/ds_edit_ctrl.ts
View File

@ -44,7 +44,6 @@ export class DataSourceEditCtrl {
) {
this.navModel = navModelSrv.getDatasourceNav(0);
this.isNew = true;
this.datasources = [];
this.tabIndex = 0;
@ -58,6 +57,7 @@ export class DataSourceEditCtrl {
}
initNewDatasourceModel() {
this.isNew = true;
this.current = angular.copy(defaults);
// We are coming from getting started

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

@ -1,23 +1,10 @@
<div class="page-header container">
<div class="page-header-inner">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item">
<a class="pointer">
Configuration <i class="fa fa-caret-down"></i>
</a>
</div>
<!-- <div class="page&#45;breadcrumb__item">/</div> -->
<div class="page-breadcrumb__item">
<a class="pointer">
Data sources
</a>
</div>
</div>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span ng-show="ctrl.isNew">Add data source</span>
<span ng-hide="ctrl.isNew">Settings</span>
Settings <span ng-show="ctrl.isNew" class="muted">(new)</span>
</h1>
<a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
@ -40,9 +27,7 @@
</ul>
</div>
</div>
</div>
<div class="page-container">
<div ng-if="ctrl.tabIndex === 0" class="tab-content">

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

@ -1,13 +1,7 @@
<div class="page-header container">
<div class="page-header-inner">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item">
<a class="pointer">
Configuration <i class="fa fa-caret-down"></i>
</a>
</div>
</div>
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>
<i class="icon-gf icon-gf-datasources"></i>
<span>Data Sources</span>
@ -17,12 +11,8 @@
<i class="fa fa-plus"></i>
Add data source
</a>
</div>
</div>
<div class="page-container container">
<section class="card-section" layout-mode>
<layout-selector></layout-selector>

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

@ -19,8 +19,6 @@
}
.page-header-inner {
@include brand-bottom-border();
@include clearfix();
}
.page-body {
@ -43,7 +41,10 @@
}
.page-header {
padding: 2rem 0 1rem 0;
padding: $spacer 0 0 0;
margin-bottom: 2rem;
@include brand-bottom-border();
@include clearfix();
h1 {
font-size: $font-size-h2;
@ -101,9 +102,43 @@
}
.page-breadcrumb__item {
a {
> a {
color: $text-color-weak;
display: block;
padding: 0.6rem 3rem 0.6rem 1rem;;
}
&:hover a {
.page-breadcrumb__caret {
opacity: 1;
}
}
background: black;
&::after {
content: "";
position: absolute;
top: 0;
left: 100%;
content: '';
height: 0;
width: 0;
border: 24px solid transparent;
border-right-width: 0;
border-left-width: 20px;
transform: translateX(4px);
border-left-color: #ffffff;
}
padding-right: $spacer;
}
.page-breadcrumb__caret {
opacity: 0;
position: absolute;
display: block;
width: 16px;
height: 16px;
right: 20px;
top: 14px;
}