Skip to content

N
nexpie-grafana-theme
Commit 6342571a by Torkel Ödegaard
Options

Trying get rid of modals, new better design for dashboard settings and modals

parent 00e5bb61
Showing with 125 additions and 122 deletions
src/app/controllers/annotationsEditorCtrl.js
......@@ -63,9 +63,13 @@ function (angular, app, _) {
});
module.controller('EditViewCtrl', function($scope) {
//$scope.editPanelSrc = 'app/partials/test.html';
$scope.editPanelSrc = 'app/partials/dasheditor.html';
$scope.onAppEvent('show-edit-panel', function(evt, payload) {
if (payload.src === $scope.editPanelSrc) {
$scope.dismiss();
return;
}
$scope.editPanelSrc = payload.src;
});
......
src/app/directives/bodyClass.js
......@@ -3,7 +3,7 @@ define([
'app',
'lodash'
],
function (angular, app, _) {
function (angular) {
'use strict';
angular
......
src/app/directives/configModal.js
......@@ -20,7 +20,7 @@ function (angular, _, $) {
scope.exitFullscreen();
scope.emitAppEvent('show-edit-panel', {src: partial});
});
return;
//return;
if ($(id).length) {
elem.attr('data-target', id).attr('data-toggle', 'modal');
......
src/app/panels/filtering/module.html deleted 100755 → 0
<div ng-controller='filtering' ng-init="init()">
<div ng-repeat="filter in filter.templateParameters" class="small filter-panel-filter">
<ul class="unstyled">
<li ng-if="filter.name" class="dropdown">
{{filter.name}} :
<a class="dropdown-toggle" data-toggle="dropdown">
{{filter.current.text}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="option in filter.options">
<a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="submenu-control-edit">
<i class="icon-cog pointer" config-modal="app/panels/filtering/editor.html" bs-tooltip="'Edit'" ></i>
</div>
</div>
<!-- <form ng&#45;show="filter.editing"> -->
<!-- <ul class="unstyled"> -->
<!-- <li> -->
<!-- <strong>name</strong>:<br/> -->
<!-- <input type='text' ng&#45;model="filter.name"> -->
<!-- </li> -->
<!-- <li> -->
<!-- <strong>filter.query</strong>:<br/> -->
<!-- <input type='text' ng&#45;model="filter.query"> -->
<!-- </li> -->
<!-- <li> -->
<!-- <label for="includeAll">Include all:</label> -->
<!-- <input id="includeAll" type='checkbox' ng&#45;model="filter.includeAll"> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div> -->
<!-- <input type="submit" value="Update" ng&#45;click="applyFilter(filter)" class="filter&#45;apply btn btn&#45;success btn&#45;mini" bs&#45;tooltip="'Update and refresh'"/> -->
<!-- <button ng&#45;click="filter.editing=undefined" class="filter&#45;apply btn btn&#45;mini" bs&#45;tooltip="'Save without refresh'">Close</button> -->
<!-- </div> -->
<!-- </form> -->
<!-- </div> -->
<!-- <i class="pointer icon&#45;plus&#45;sign add&#45;filter&#45;action" ng&#45;click="add()" bs&#45;tooltip="'Add metric filter / param'" data&#45;placement="right"></i> -->
<!-- </div> -->
</div>
src/app/panels/filtering/module.js deleted 100644 → 0
/*
## filtering
*/
define([
'angular',
'app',
'lodash'
],
function (angular, app, _) {
'use strict';
var module = angular.module('grafana.panels.filtering', []);
app.useModule(module);
module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout, $q) {
$scope.panelMeta = {
status : "Stable",
description : "graphite target filters"
};
// Set and populate defaults
var _d = {
};
_.defaults($scope.panel,_d);
$scope.init = function() {
// empty. Don't know if I need the function then.
};
$scope.remove = function(templateParameter) {
$scope.filter.removeTemplateParameter(templateParameter);
};
$scope.add = function() {
$scope.filter.addTemplateParameter({
type : 'filter',
name : 'filter name',
editing : true,
query : 'metric.path.query.*',
});
};
});
});
src/app/partials/dashboard.html
......@@ -9,7 +9,7 @@
<div class="clearfix"></div>
<div ng-controller="EditViewCtrl">
<div ng-if="editPanelSrc" ng-include="editPanelSrc">
<div class="dashboard-edit-view" ng-if="editPanelSrc" ng-include="editPanelSrc">
</div>
</div>
......
src/app/partials/dasheditor.html
<div class="modal-body">
<div class="pull-right editor-title">Dashboard settings</div>
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-cogs"></i>
Dashboard settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
......@@ -8,6 +11,10 @@
</div>
</div>
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 0">
<div class="editor-row">
<div class="section">
......@@ -64,6 +71,8 @@
<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
<br>
<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success">Create Row</button>
</div>
</div>
</div>
......@@ -91,9 +100,12 @@
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="dashboard-editor-footer">
<div class="pull-left grafana-version-footer" ng-if="editor.index == 0">
<span class="editor-option small">
Grafana version: {{grafanaVersion}}
......@@ -103,6 +115,5 @@
</div>
</div>
<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">Create Row</button>
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
<button type="button" class="btn btn-info pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
</div>
src/app/partials/import.html
<div ng-controller="GraphiteImportCtrl" ng-init="init()" style="height: 400px">
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
<h5>Import dashboards from graphite web</h5>
<div class="editor-row">
......@@ -12,7 +12,7 @@
</li>
</ul>
</div>
<button ng-click="listAll()" class="btn btn-primary">List all dashboards</button>
<button ng-click="listAll()" class="btn btn-success">List all dashboards</button>
</div>
</div>
......
src/app/partials/templating_editor.html
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="modal-body">
<div class="pull-right editor-title">Templating</div>
<div class="editor-row">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-cogs"></i>
Dashboard settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
</div>
</div>
<div class="modal-footer">
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
<button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
<button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 0">
<div class="editor-row">
<div class="section">
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
</div>
<div class="editor-option">
<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
</div>
<div class="editor-option">
<label class="small">Time correction</label>
<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="editor-option">
<label class="small">Hide controls (CTRL+H)</label>
<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<div class="editor-option">
<label class="small">Tags</label>
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput>
<tip>Press enter to a add tag</tip>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();">Close</button>
</div>
src/css/less/bootswatch.dark.less
......@@ -222,7 +222,8 @@ div.subnav {
li.active > a,
li.active > a:hover {
border-color: transparent;
background-color: @blue;
background-color: transparent;
border-bottom: 1px solid @blueDark;
color: @white;
}
......
src/css/less/grafana.less
......@@ -203,15 +203,23 @@
margin: 0;
background: @fullEditTabsBackground;
border-top: 1px solid @fullEditTabsBorder;
border-bottom: 1px solid @fullEditTabsBorder
}
.tab-content {
display: none;
}
}
.tab-content {
overflow: visible;
padding: 15px;
background-color: @grafanaPanelBackground;
border-top: 1px solid @fullEditBorder;
}
.nav-tabs > li {
margin-bottom: 0;
}
.nav-tabs > li > a {
......@@ -546,3 +554,43 @@ select.grafana-target-segment-input {
max-width: 400px;
}
.dashboard-edit-view {
padding: 20px;
background-color: @grafanaPanelBackground;
}
.dashboard-editor-body {
padding: 20px 10px;
min-height: 100px;
overflow: hidden;
}
.dashboard-editor-footer {
overflow: hidden;
}
.dashboard-editor-header {
overflow: hidden;
border-bottom: 1px solid @fullEditBorder;
.tabs {
float: left;
}
.nav {
margin: 0;
}
}
.dashboard-editor-title {
padding-right: 20px;
float: left;
color: @linkColor;
font-size: 20px;
font-weight: normal;
line-height: 34px;
margin: 0;
.icon {
padding: 0 8px 0 5px;
color: @textColor;
}
}
src/css/less/variables.dark.less
......@@ -35,9 +35,9 @@
// Tabs
@fullEditTabsBackground: @grayDark;
@fullEditBorder: @black;
@fullEditBorder: #555;
@fullEditBackground: transparent;
@fullEditTabsBorder: #555;
@fullEditTabsBorder: @black;
// Graphite Target Editor
@grafanaTargetBorder: @black;
......@@ -134,12 +134,10 @@
@btnInverseBackgroundHighlight: darken(@black, 5%);
// Forms
// -------------------------
@inputBackground: lighten(@grayDark,10%);
@inputBorder: lighten(@grayDark,20%);
@inputBackground: lighten(@grayDark,0%);
@inputBorder: lighten(@grayDark,5%);
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: #555;
@formActionsBackground: transparent;
......
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