IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-27 03:11:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): general ux polish

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-15 14:42:59 +01:00
parent 842a59535d
commit 2bfded3c5f
13 changed files with 57 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/directives/topnav.js
View File

@ -11,7 +11,7 @@ function (coreModule) {
scope: {
title: "@",
section: "@",
titleAction: "&",
titleUrl: "@",
subnav: "=",
},
template:
@ -35,7 +35,7 @@ function (coreModule) {
'<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
'</span>' +
'<a ng-click="titleAction()" class="top-nav-title">' +
'<a ng-href="{{titleUrl}}" class="top-nav-title">' +
'{{title}}' +
'</a>' +
'<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
@ -45,7 +45,7 @@ function (coreModule) {
scope.contextSrv = contextSrv;
scope.toggle = function() {
$rootScope.appEvent('toggle-sidemenu');
contextSrv.toggleSideMenu();
};
}
};

28
public/app/core/services/context_srv.js
View File

@ -8,8 +8,7 @@ define([
function (angular, _, coreModule, store, config) {
'use strict';
coreModule.default.service('contextSrv', function($rootScope, $timeout) {
var self = this;
coreModule.default.service('contextSrv', function() {
function User() {
if (config.bootData.user) {
@ -17,30 +16,16 @@ function (angular, _, coreModule, store, config) {
}
}
// events
$rootScope.$on('toggle-sidemenu', function() {
self.toggleSideMenu();
});
this.hasRole = function(role) {
return this.user.orgRole === role;
};
this.setSideMenuState = function(state) {
this.sidemenu = state;
store.set('grafana.sidemenu', state);
};
this.toggleSideMenu = function() {
this.setSideMenuState(!this.sidemenu);
$timeout(function() {
$rootScope.$broadcast("render");
}, 50);
};
this.getSidemenuDefault = function() {
return this.hasRole('Admin');
};
this.version = config.buildInfo.version;
@ -48,17 +33,6 @@ function (angular, _, coreModule, store, config) {
this.user = new User();
this.isSignedIn = this.user.isSignedIn;
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');
});
});

9
public/app/features/datasources/partials/edit.html
View File

@ -1,8 +1,7 @@
<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">
<li><a href="datasources">Overview</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}}">Edit</a></li>
<li ng-class="{active: isNew}" ng-show="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>
</ul>
</topnav>
@ -59,7 +58,7 @@
<button type="submit" class="btn btn-inverse" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a>
<a class="btn btn-inverse" href="datasources">Cancel</a>
</div>
<br>
</form>

2
public/app/features/datasources/partials/http_settings.html
View File

@ -1,5 +1,5 @@
<br>
<h5>Http settings</h5>
<h4>Http settings</h4>
<div class="tight-form-container">
<div class="tight-form">
<ul class="tight-form-list">

18
public/app/features/datasources/partials/list.html
View File

@ -1,16 +1,18 @@
<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
<ul class="nav">
<li class="active" ><a href="datasources">Overview</a></li>
<li><a href="datasources/new">Add new</a></li>
</ul>
<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="false">
</topnav>
<div class="page-container" style="background: transparent; border: 0;">
<div class="page-container">
<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">
<em>No datasources defined</em>
<em>No data sources defined</em>
</div>
<table class="filter-table" ng-if="datasources.length > 0">

5
public/app/features/org/partials/orgUsers.html
View File

@ -7,13 +7,12 @@
<div class="page-container" style="background: transparent; border: 0;">
<div class="page-wide">
<h2>Organization users</h2>
<button class="btn btn-success pull-right" ng-click="openInviteModal()">
<button class="btn btn-inverse pull-right" ng-click="openInviteModal()">
<i class="fa fa-plus"></i>
Add or Invite
</button>
<h1>Organization users</h1>
<br>
<tabset>

31
public/app/features/playlist/partials/playlist.html
View File

@ -1,18 +1,23 @@
<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">
<h2 ng-show="isNew()">New 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>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Title</strong>
Name
</li>
<li>
<input type="text" required ng-model="playlist.title" class="input-xlarge tight-form-input">
@ -23,7 +28,7 @@
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Interval</strong>
Interval
</li>
<li>
<input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
@ -34,11 +39,14 @@
</div>
<br>
<h5>2. Add dashboards</h5>
<h4>Add dashboards</h4>
<div style="display: inline-block">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Search
</li>
<li>
<input type="text"
class="tight-form-input input-xlarge last"
@ -47,9 +55,6 @@
ng-trim="true"
ng-change="search()">
</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>
<div class="clearfix"></div>
</div>
@ -57,9 +62,9 @@
</div>
</div>
<div>
<div class="row">
<div class="span5 pull-left">
<h5>Search results ({{filteredPlaylistItems.length}})</h5>
<h5>Search results ({{filteredPlaylistItems.length}})</h5>
<table class="grafana-options-table">
<tr ng-repeat="playlistItem in filteredPlaylistItems">
<td style="white-space: nowrap;">
@ -72,7 +77,7 @@
</button>
</td>
</tr>
<tr ng-if="isSearchResultsEmpty() || isSearchQueryEmpty()">
<tr ng-if="isSearchResultsEmpty()">
<td colspan="2">
<i class="fa fa-warning"></i> Search results empty
</td>
@ -80,7 +85,7 @@
</table>
</div>
<div class="span5 pull-left">
<h5>Playlist dashboards</h5>
<h5>Added dashboards</h5>
<table class="grafana-options-table">
<tr ng-repeat="playlistItem in playlistItems">
<td style="white-space: nowrap;">
@ -111,7 +116,7 @@
ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
ng-click="savePlaylist(playlist, playlistItems)">Save</button>
<button type="button"
class="btn btn-default"
class="btn btn-inverse"
ng-click="backToList()">Cancel</button>
<!-- </div> -->
</div>

20
public/app/features/playlist/partials/playlists.html
View File

@ -2,24 +2,26 @@
<div class="page-container" style="background: transparent; border: 0;">
<div class="page-wide">
<button type="submit" class="btn btn-inverse pull-right" ng-click="createPlaylist()">
<i class="fa fa-plus"></i>
New playlist
</button>
<h2>Saved playlists</h2>
<button type="submit" class="btn btn-success pull-right" ng-click="createPlaylist()">
<i class="fa fa-plus"></i> New playlist</button>
<br />
<table class="filter-table" style="margin-top: 20px">
<table class="filter-table" style="margin-top: 20px">
<thead>
<th><strong>Title</strong></th>
<th><strong>Url</strong></th>
<th><strong>Name</strong></th>
<th><strong>Start url</strong></th>
<th style="width: 61px"></th>
<th style="width: 61px"></th>
<th style="width: 25px"></th>
</thead>
<tr ng-repeat="playlist in playlists">
<td >
{{playlist.title}}
<td>
<a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a>
</td>
<td >
<a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>

3
public/app/features/playlist/playlist_edit_ctrl.js
View File

@ -35,11 +35,10 @@ function (angular, config, _) {
};
$scope.search = function() {
var query = {starred: true, limit: 10};
var query = {limit: 10};
if ($scope.searchQuery) {
query.query = $scope.searchQuery;
query.starred = false;
}
$scope.loading = true;

5
public/app/plugins/datasource/elasticsearch/partials/edit_view.html
View File

@ -1,6 +1,6 @@
<datasource-http-settings></datasource-http-settings>
<h5>Elasticsearch details</h5>
<h4>Elasticsearch details</h4>
<div class="tight-form">
<ul class="tight-form-list">
@ -43,7 +43,8 @@
</div>
<br>
<h5>Default query settings</h5>
<h4>Default query settings</h4>
<div class="tight-form last">
<ul class="tight-form-list">

2
public/app/plugins/datasource/influxdb/partials/config.html
View File

@ -1,6 +1,6 @@
<datasource-http-settings></datasource-http-settings>
<h5>InfluxDB Details</h5>
<h4>InfluxDB Details</h4>
<div class="tight-form">
<ul class="tight-form-list">

5
public/less/gfbox.less
View File

@ -69,11 +69,8 @@
}
.page-container {
margin: 15px;
background: @grafanaPanelBackground;
position: relative;
border: @grafanaPanelBorder;
padding: 20px 20px 60px 49px;
padding: 20px 20px 60px 81px;
}
.page {

2
public/less/variables.dark.less
View File

@ -75,7 +75,7 @@
@altFontFamily: @serifFontFamily;
@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
@inputText: @black;