Skip to content

N
nexpie-grafana-theme
Commit 2bfded3c by Torkel Ödegaard
Options

ux(): general ux polish

parent 842a5953
Showing with 55 additions and 77 deletions
public/app/core/directives/topnav.js
...@@ -11,7 +11,7 @@ function (coreModule) { ...@@ -11,7 +11,7 @@ function (coreModule) {
scope: { scope: {
title: "@", title: "@",
section: "@", section: "@",
titleAction: "&", titleUrl: "@",
subnav: "=", subnav: "=",
}, },
template: template:
...@@ -35,7 +35,7 @@ function (coreModule) { ...@@ -35,7 +35,7 @@ function (coreModule) {
'<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' + '<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
'</span>' + '</span>' +
'<a ng-click="titleAction()" class="top-nav-title">' + '<a ng-href="{{titleUrl}}" class="top-nav-title">' +
'{{title}}' + '{{title}}' +
'</a>' + '</a>' +
'<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' + '<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
...@@ -45,7 +45,7 @@ function (coreModule) { ...@@ -45,7 +45,7 @@ function (coreModule) {
scope.contextSrv = contextSrv; scope.contextSrv = contextSrv;
scope.toggle = function() { scope.toggle = function() {
$rootScope.appEvent('toggle-sidemenu'); contextSrv.toggleSideMenu();
}; };
} }
}; };
......
public/app/core/services/context_srv.js
...@@ -8,8 +8,7 @@ define([ ...@@ -8,8 +8,7 @@ define([
function (angular, _, coreModule, store, config) { function (angular, _, coreModule, store, config) {
'use strict'; 'use strict';
coreModule.default.service('contextSrv', function($rootScope, $timeout) { coreModule.default.service('contextSrv', function() {
var self = this;
function User() { function User() {
if (config.bootData.user) { if (config.bootData.user) {
...@@ -17,30 +16,16 @@ function (angular, _, coreModule, store, config) { ...@@ -17,30 +16,16 @@ function (angular, _, coreModule, store, config) {
} }
} }
// events
$rootScope.$on('toggle-sidemenu', function() {
self.toggleSideMenu();
});
this.hasRole = function(role) { this.hasRole = function(role) {
return this.user.orgRole === role; return this.user.orgRole === role;
}; };
this.setSideMenuState = function(state) { this.setSideMenuState = function(state) {
this.sidemenu = state; this.sidemenu = state;
store.set('grafana.sidemenu', state);
}; };
this.toggleSideMenu = function() { this.toggleSideMenu = function() {
this.setSideMenuState(!this.sidemenu); this.setSideMenuState(!this.sidemenu);
$timeout(function() {
$rootScope.$broadcast("render");
}, 50);
};
this.getSidemenuDefault = function() {
return this.hasRole('Admin');
}; };
this.version = config.buildInfo.version; this.version = config.buildInfo.version;
...@@ -48,17 +33,6 @@ function (angular, _, coreModule, store, config) { ...@@ -48,17 +33,6 @@ function (angular, _, coreModule, store, config) {
this.user = new User(); this.user = new User();
this.isSignedIn = this.user.isSignedIn; this.isSignedIn = this.user.isSignedIn;
this.isGrafanaAdmin = this.user.isGrafanaAdmin; this.isGrafanaAdmin = this.user.isGrafanaAdmin;
this.sidemenu = store.getBool('grafana.sidemenu', this.getSidemenuDefault());
if (this.isSignedIn && !store.exists('grafana.sidemenu')) {
// If the sidemenu has never been set before, set it to false.
// This will result in this.sidemenu and the localStorage grafana.sidemenu
// to be out of sync if the user has an admin role. But this is
// intentional and results in the user seeing the sidemenu only on
// their first login.
store.set('grafana.sidemenu', false);
}
this.isEditor = this.hasRole('Editor') || this.hasRole('Admin'); this.isEditor = this.hasRole('Editor') || this.hasRole('Admin');
}); });
}); });
public/app/features/datasources/partials/edit.html
<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true"> <topnav title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
<ul class="nav"> <ul class="nav">
<li><a href="datasources">Overview</a></li> <li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
<li ng-class="{active: isNew}"><a href="datasources/new">Add new</a></li> <li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">Edit</a></li>
</ul> </ul>
</topnav> </topnav>
...@@ -59,7 +58,7 @@ ...@@ -59,7 +58,7 @@
<button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)"> <button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection Test Connection
</button> </button>
<a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a> <a class="btn btn-inverse" href="datasources">Cancel</a>
</div> </div>
<br> <br>
</form> </form>
......
public/app/features/datasources/partials/http_settings.html
<br> <br>
<h5>Http settings</h5> <h4>Http settings</h4>
<div class="tight-form-container"> <div class="tight-form-container">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
......
public/app/features/datasources/partials/list.html
<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true"> <topnav title="Data sources" icon="fa fa-fw fa-database" subnav="false">
<ul class="nav">
<li class="active" ><a href="datasources">Overview</a></li>
<li><a href="datasources/new">Add new</a></li>
</ul>
</topnav> </topnav>
<div class="page-container" style="background: transparent; border: 0;"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
<h2>Data sources</h2>
<a type="submit" class="btn btn-inverse pull-right" href="datasources/new">
<i class="fa fa-plus"></i>
Add data source
</a>
<h1>Data sources</h1>
<div ng-if="datasources.length === 0"> <div ng-if="datasources.length === 0">
<em>No datasources defined</em> <em>No data sources defined</em>
</div> </div>
<table class="filter-table" ng-if="datasources.length > 0"> <table class="filter-table" ng-if="datasources.length > 0">
......
public/app/features/org/partials/orgUsers.html
...@@ -7,13 +7,12 @@ ...@@ -7,13 +7,12 @@
<div class="page-container" style="background: transparent; border: 0;"> <div class="page-container" style="background: transparent; border: 0;">
<div class="page-wide"> <div class="page-wide">
<h2>Organization users</h2> <button class="btn btn-inverse pull-right" ng-click="openInviteModal()">
<button class="btn btn-success pull-right" ng-click="openInviteModal()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add or Invite Add or Invite
</button> </button>
<h1>Organization users</h1>
<br> <br>
<tabset> <tabset>
......
public/app/features/playlist/partials/playlist.html
<topnav icon="fa fa-fw fa-list" title="Playlists"></topnav> <topnav icon="fa fa-fw fa-list" title="Playlists" title-url="playlists" subnav="true">
<ul class="nav">
<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li>
</ul>
</topnav>
<div class="page-container" ng-form="playlistEditForm"> <div class="page-container" ng-form="playlistEditForm">
<div class="page"> <div class="page">
<h2 ng-show="isNew()">New playlist</h2> <h2 ng-show="isNew()">New playlist</h2>
<h2 ng-show="!isNew()">Edit playlist</h2> <h2 ng-show="!isNew()">Edit playlist</h2>
<h5>1. Name and interval</h5> <h4>Name and interval</h4>
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
<div> <div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 100px">
<strong>Title</strong> Name
</li> </li>
<li> <li>
<input type="text" required ng-model="playlist.title" class="input-xlarge tight-form-input"> <input type="text" required ng-model="playlist.title" class="input-xlarge tight-form-input">
...@@ -23,7 +28,7 @@ ...@@ -23,7 +28,7 @@
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 100px">
<strong>Interval</strong> Interval
</li> </li>
<li> <li>
<input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input"> <input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
...@@ -34,11 +39,14 @@ ...@@ -34,11 +39,14 @@
</div> </div>
<br> <br>
<h5>2. Add dashboards</h5> <h4>Add dashboards</h4>
<div style="display: inline-block"> <div style="display: inline-block">
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item">
Search
</li>
<li> <li>
<input type="text" <input type="text"
class="tight-form-input input-xlarge last" class="tight-form-input input-xlarge last"
...@@ -47,9 +55,6 @@ ...@@ -47,9 +55,6 @@
ng-trim="true" ng-trim="true"
ng-change="search()"> ng-change="search()">
</li> </li>
<li class="tight-form-item last" style="padding: 5px 4px">
<button ng-click="search()" class="btn btn-mini btn-inverse">Search</button>
</li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
...@@ -57,7 +62,7 @@ ...@@ -57,7 +62,7 @@
</div> </div>
</div> </div>
<div> <div class="row">
<div class="span5 pull-left"> <div class="span5 pull-left">
<h5>Search results ({{filteredPlaylistItems.length}})</h5> <h5>Search results ({{filteredPlaylistItems.length}})</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
...@@ -72,7 +77,7 @@ ...@@ -72,7 +77,7 @@
</button> </button>
</td> </td>
</tr> </tr>
<tr ng-if="isSearchResultsEmpty() || isSearchQueryEmpty()"> <tr ng-if="isSearchResultsEmpty()">
<td colspan="2"> <td colspan="2">
<i class="fa fa-warning"></i> Search results empty <i class="fa fa-warning"></i> Search results empty
</td> </td>
...@@ -80,7 +85,7 @@ ...@@ -80,7 +85,7 @@
</table> </table>
</div> </div>
<div class="span5 pull-left"> <div class="span5 pull-left">
<h5>Playlist dashboards</h5> <h5>Added dashboards</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="playlistItem in playlistItems"> <tr ng-repeat="playlistItem in playlistItems">
<td style="white-space: nowrap;"> <td style="white-space: nowrap;">
...@@ -111,7 +116,7 @@ ...@@ -111,7 +116,7 @@
ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()" ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
ng-click="savePlaylist(playlist, playlistItems)">Save</button> ng-click="savePlaylist(playlist, playlistItems)">Save</button>
<button type="button" <button type="button"
class="btn btn-default" class="btn btn-inverse"
ng-click="backToList()">Cancel</button> ng-click="backToList()">Cancel</button>
<!-- </div> --> <!-- </div> -->
</div> </div>
......
public/app/features/playlist/partials/playlists.html
...@@ -2,24 +2,26 @@ ...@@ -2,24 +2,26 @@
<div class="page-container" style="background: transparent; border: 0;"> <div class="page-container" style="background: transparent; border: 0;">
<div class="page-wide"> <div class="page-wide">
<h2>Saved playlists</h2>
<button type="submit" class="btn btn-success pull-right" ng-click="createPlaylist()"> <button type="submit" class="btn btn-inverse pull-right" ng-click="createPlaylist()">
<i class="fa fa-plus"></i> New playlist</button> <i class="fa fa-plus"></i>
<br /> New playlist
</button>
<h2>Saved playlists</h2>
<table class="filter-table" style="margin-top: 20px"> <table class="filter-table" style="margin-top: 20px">
<thead> <thead>
<th><strong>Title</strong></th> <th><strong>Name</strong></th>
<th><strong>Url</strong></th> <th><strong>Start url</strong></th>
<th style="width: 61px"></th> <th style="width: 61px"></th>
<th style="width: 61px"></th> <th style="width: 61px"></th>
<th style="width: 25px"></th> <th style="width: 25px"></th>
</thead> </thead>
<tr ng-repeat="playlist in playlists"> <tr ng-repeat="playlist in playlists">
<td > <td>
{{playlist.title}} <a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a>
</td> </td>
<td > <td >
<a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a> <a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>
......
public/app/features/playlist/playlist_edit_ctrl.js
...@@ -35,11 +35,10 @@ function (angular, config, _) { ...@@ -35,11 +35,10 @@ function (angular, config, _) {
}; };
$scope.search = function() { $scope.search = function() {
var query = {starred: true, limit: 10}; var query = {limit: 10};
if ($scope.searchQuery) { if ($scope.searchQuery) {
query.query = $scope.searchQuery; query.query = $scope.searchQuery;
query.starred = false;
} }
$scope.loading = true; $scope.loading = true;
......
public/app/plugins/datasource/elasticsearch/partials/edit_view.html
<datasource-http-settings></datasource-http-settings> <datasource-http-settings></datasource-http-settings>
<h5>Elasticsearch details</h5> <h4>Elasticsearch details</h4>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
...@@ -43,7 +43,8 @@ ...@@ -43,7 +43,8 @@
</div> </div>
<br> <br>
<h5>Default query settings</h5>
<h4>Default query settings</h4>
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
......
public/app/plugins/datasource/influxdb/partials/config.html
<datasource-http-settings></datasource-http-settings> <datasource-http-settings></datasource-http-settings>
<h5>InfluxDB Details</h5> <h4>InfluxDB Details</h4>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
......
public/less/gfbox.less
...@@ -69,11 +69,8 @@ ...@@ -69,11 +69,8 @@
} }
.page-container { .page-container {
margin: 15px;
background: @grafanaPanelBackground;
position: relative; position: relative;
border: @grafanaPanelBorder; padding: 20px 20px 60px 81px;
padding: 20px 20px 60px 49px;
} }
.page { .page {
......
public/less/variables.dark.less
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold @headingsFontWeight: normal; // instead of browser default, bold
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor @headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black; @inputText: @black;
......
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