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

a lot of work on sidemenu, and encoding dash edit view in url

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-21 19:45:23 +01:00
parent cd4fc78aec
commit 1fb9bbba91
9 changed files with 85 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/controllers/sidemenuCtrl.js
View File

@ -20,7 +20,8 @@ function (angular, _, $) {
{ text: 'Settings', editview: 'settings', icon: "fa fa-cogs" },
{ text: 'Templating', editview: 'templating', icon: "fa fa-cogs" },
{ text: 'Annotations', editview: 'annotations', icon: "fa fa-bolt" },
{ text: 'More', href:"asd", icon: "fa fa-bolt" },
{ text: 'Export', href:"", icon: "fa fa-bolt" },
{ text: 'JSON', href:"", icon: "fa fa-bolt" },
]
},
{
@ -63,6 +64,7 @@ function (angular, _, $) {
if (item.startsWith) {
if (currentPath.indexOf(item.startsWith) === 0) {
item.active = true;
item.href = currentPath;
}
}

22
src/app/directives/dashEditLink.js
View File

@ -54,12 +54,8 @@ function (angular, $) {
if (editorScope) { editorScope.dismiss(); }
}
scope.onAppEvent('hide-dash-editor', hideEditorPane);
scope.onAppEvent('show-dash-editor', function(evt, payload) {
if (payload.editview) {
payload.src = editViewMap[payload.editview];
}
function showEditorPane(evt, payload, editview) {
if (editview) { payload.src = editViewMap[editview]; }
if (lastEditor === payload.src) {
hideEditorPane();
@ -80,9 +76,9 @@ function (angular, $) {
editorScope = null;
hideScrollbars(false);
if (payload.editview) {
if (editview) {
var urlParams = $location.search();
if (payload.editview === urlParams.editview) {
if (editview === urlParams.editview) {
delete urlParams.editview;
$location.search(urlParams);
}
@ -96,8 +92,18 @@ function (angular, $) {
var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
elem.append(view);
$compile(elem.contents())(editorScope);
}
scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) {
if (newValue) {
showEditorPane(null, {}, newValue);
} else if (oldValue) {
hideEditorPane();
}
});
scope.onAppEvent('hide-dash-editor', hideEditorPane);
scope.onAppEvent('show-dash-editor', showEditorPane);
}
};
});

16
src/app/features/account/partials/account.html
View File

@ -1,3 +1,19 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-shield"></i>
Account info
</div>
</div>
<div class="dashboard-editor-body">
<h3>TODO</h3>
</div>
</div>

8
src/app/features/dashboard/viewStateSrv.js
View File

@ -53,12 +53,13 @@ function (angular, _, $) {
state.panelId = parseInt(state.panelId) || null;
state.fullscreen = state.fullscreen ? true : null;
state.edit = (state.edit === "true" || state.edit === true) || null;
state.editview = state.editview || null;
return state;
};
DashboardViewState.prototype.serializeToUrl = function() {
var urlState = _.clone(this.state);
urlState.fullscreen = this.state.fullscreen ? true : null,
urlState.fullscreen = this.state.fullscreen ? true : null;
urlState.edit = this.state.edit ? true : null;
return urlState;
};
@ -81,11 +82,6 @@ function (angular, _, $) {
};
DashboardViewState.prototype.syncState = function() {
if (this.state.editview) {
this.$scope.appEvent('show-dash-editor', { scope: this.$scope, editview: this.state.editview });
return;
}
if (this.panelScopes.length === 0) { return; }
if (this.fullscreen) {

57
src/app/partials/dashboard_topnav.html
View File

@ -1,4 +1,4 @@
<div class="navbar navbar-static-top">
<div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
<div class="navbar-inner">
<div class="container-fluid">
<span class="hamburger">
@ -8,11 +8,15 @@
</span>
<span class="brand">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="page-title">{{dashboard.title}}</span>
<a ng-click="openSearch()" class="page-title">
{{dashboard.title}}
<span class="small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</span>
<ul class="nav pull-right" ng-controller='DashboardNavCtrl' ng-init="init()">
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
<a ng-click="exitFullscreen()">
Back to dashboard
@ -25,53 +29,12 @@
</li>
<li class="dropdown grafana-menu-save">
<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="openSaveDropdown()">
<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()">
<i class='fa fa-save'></i>
</a>
<ul class="save-dashboard-dropdown dropdown-menu" ng-if="saveDropdownOpened">
<li>
<form class="input-prepend nomargin save-dashboard-dropdown-save-form">
<input class='input-medium' ng-model="dashboard.title" type="text" />
<button class="btn" ng-click="saveDashboard()"><i class="fa fa-save"></i></button>
</form>
</li>
<li>
<a class="link" ng-click="set_default()">Save as Home</a>
</li>
<li>
<a class="link" ng-click="purge_default()">Reset Home</a>
</li>
<li ng-show="!isFavorite">
<a class="link" ng-click="markAsFavorite()">Mark as favorite</a>
</li>
<li ng-show="isFavorite">
<a class="link" ng-click="removeAsFavorite()">Remove as favorite</a>
</li>
<li>
<a class="link" ng-click="editJson()">Dashboard JSON</a>
</li>
<li>
<a class="link" ng-click="exportDashboard()">Export dashboard</a>
</li>
<li ng-show="db.saveTemp">
<a bs-tooltip="'Share'" data-placement="bottom" ng-click="saveForSharing()" config-modal="app/partials/dashLoaderShare.html">
Share temp copy
</a>
</li>
</ul>
</li>
<li class="dropdown grafana-menu-load">
<a ng-click="openSearch()" bs-tooltip="'Search'" data-placement="bottom">
<i class='fa fa-folder-open'></i>
</a>
</li>
<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/'><i class='fa fa-home'></i></a></li>
<li class="grafana-menu-edit" ng-show="dashboard.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" dash-editor-link="app/partials/dasheditor.html"><i class='fa fa-cog pointer'></i></a></li>
<!-- <li class="grafana&#45;menu&#45;home"><a bs&#45;tooltip="'Goto saved default'" data&#45;placement="bottom" href='#/'><i class='fa fa&#45;home'></i></a></li> -->
<li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>

9
src/app/partials/navbar.html
View File

@ -1,10 +1,13 @@
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="brand">
<a ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="hamburger">
<a class="pointer" ng-click="toggleSideMenu()">
<i class="fa fa-bars"></i>
</a>
</span>
<span class="brand">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="page-title">{{pageTitle}}</span>
</span>
</div>

38
src/app/partials/sidemenu.html
View File

@ -1,13 +1,16 @@
<div ng-controller="SideMenuCtrl" ng-init="init()">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<span class="brand">
<span class="page-title">Grafana</span>
</span>
</div>
</div>
<ul class="sidemenu">
<li class="dropdown">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
<span class="gravatar-email small">{{grafana.user.login}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="/login?logout">Logout</a></li>
</ul>
</li>
<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
</li>
@ -20,24 +23,3 @@
</li>
</ul>
</div>
<section class="pro-sidemenu-items" style="position: fixed; bottom: 0; width 200px; left: 0;">
<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
<i class="fa fa-institution"></i>Admin
</a>
<div class="dropdown">
<a class="pro-sidemenu-link pointer gravatar" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35"> <span class="gravatar-email small">{{grafana.user.login}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="/login?logout">Logout</a></li>
</ul>
</div>
<a class="pro-sidemenu-link" href="login?logout">
<i class="fa fa-sign-out"></i>Sign out
</a>
</section>
</div>

1
src/app/routes/backend/dashboard.js
View File

@ -21,6 +21,7 @@ function (angular, store) {
// do we have a previous dash
if (prevDashPath) {
$location.path(prevDashPath);
return;
}
var savedRoute = store.get('grafanaDashboardDefault');

67
src/css/less/p_pro.less
View File

@ -4,14 +4,14 @@
.sidemenu {
list-style: none;
background: @bodyBackground;
background: @grafanaPanelBackground;
margin: 0;
padding: 0;
}
.sidemenu-links {
margin: 0;
padding: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
@ -20,19 +20,38 @@
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
display: block;
i {
padding-right: 15px;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
img {
width: 35px;
padding-right: 10px;
}
border-bottom: 1px solid black;
}
.sidemenu-item {
font-size: 17px;
padding: 14px 10px 14px 20px;
display: block;
background: @grafanaPanelBackground;
i {
padding-right: 15px;
}
@ -66,46 +85,6 @@
}
}
.pro-sidemenu-items {
}
.pro-sidemenu-link {
font-size: 1.0rem;
padding: 14px 10px 14px 20px;
display: block;
background: @grafanaPanelBackground;
color: @grayLight;
i {
padding-right: 15px;
}
border-bottom: 1px solid black;
}
.pro-sidemenu-link:first-child {
// border-top: 1px solid black;
}
.pro-side-menu-user {
padding-left: 5px;
img {
width: 49px;
padding-right: 10px;
}
}
.gravatar {
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
}
.login-inner-box {
background: @grafanaPanelBackground;
h1 {