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(help): began work on new help modal

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-03 20:32:36 +01:00
parent 3e712178cc
commit 82592f0c13
8 changed files with 118 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
public/app/core/components/help/help.html Normal file
View File

@ -0,0 +1,70 @@
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-question-circle"></i>
<span class="p-l-1">Help</span>
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts']">
<a class="gf-tabs-link" ng-click="ctrl.tabindex = $index" ng-class="{active: ctrl.tabindex === $index}">
{{::tab}}
</a>
</li>
</ul>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<table class="shortcut-table">
<tr>
<th></th>
<th style="text-align: left;">Dashboard wide shortcuts</th>
</tr>
<tr>
<td style="text-align: right;"><span class="label label-info">ESC</span></td>
<td>Exit fullscreen edit/view mode, close search or any editor view</td>
</tr>
<tr>
<td><span class="label label-info">F</span></td>
<td>Open dashboard search view (also contains import/playlist controls)</td>
</tr>
<tr>
<td><span class="label label-info">R</span></td>
<td>Refresh (Fetches new data and rerenders panels)</td>
</tr>
<tr>
<td><span class="label label-info">left arrow key</span></td>
<td>Shift time backward</td>
</tr>
<tr>
<td><span class="label label-info">right arrow key</span></td>
<td>Shift time forward</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+S</span></td>
<td>Save dashboard</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+H</span></td>
<td>Hide row controls</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+Z</span></td>
<td>Zoom out</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+I</span></td>
<td>Quick snapshot</td>
</tr>
<tr>
<td><span class="label label-info">CTRL+O</span></td>
<td>Enable/Disable shared graph crosshair</td>
</tr>
</table>
</div>
</div>

31
public/app/core/components/help/help.ts Normal file
View File

@ -0,0 +1,31 @@
///<reference path="../../../headers/common.d.ts" />
import coreModule from '../../core_module';
export class HelpCtrl {
tabIndex: any;
shortcuts: any;
/** @ngInject */
constructor(private $scope) {
this.tabIndex = 0;
this.shortcuts = {
'Global': [
]
};
}
}
export function helpModal() {
return {
restrict: 'E',
templateUrl: 'public/app/core/components/help/help.html',
controller: HelpCtrl,
bindToController: true,
transclude: true,
controllerAs: 'ctrl',
scope: {},
};
}
coreModule.directive('helpModal', helpModal);

2
public/app/core/core.ts
View File

@ -45,6 +45,7 @@ import colors from './utils/colors';
import {assignModelProperties} from './utils/model_utils';
import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help';
export {
@ -68,4 +69,5 @@ export {
assignModelProperties,
contextSrv,
KeybindingSrv,
helpModal,
};

5
public/app/core/services/keybindingSrv.ts
View File

@ -59,10 +59,7 @@ export class KeybindingSrv {
}
showHelpModal() {
appEvents.emit('show-modal', {
src: 'public/app/partials/help_modal.html',
model: {}
});
appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
}
bind(keyArg, fn) {

6
public/app/core/services/util_srv.ts
View File

@ -23,13 +23,13 @@ export class UtilSrv {
this.modalScope.dismiss();
}
if (options.model) {
if (options.model || !options.scope) {
options.scope = this.modalScope = this.$rootScope.$new();
options.scope.model = options.model;
} else {
this.modalScope = options.scope;
}
this.modalScope = options.scope;
var modal = this.$modal({
modalClass: options.modalClass,
template: options.src,

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

@ -34,10 +34,7 @@ export class DashNavCtrl {
};
$scope.showHelpModal = function() {
$scope.appEvent('show-modal', {
src: 'public/app/partials/help_modal.html',
model: {}
});
$scope.appEvent('show-modal', {templateHtml: '<help-modal></help-modal>'});
};
$scope.starDashboard = function() {

2
public/app/features/dashboard/shareModalCtrl.js
View File

@ -29,7 +29,7 @@ function (angular, _, require, config) {
$scope.tabs.push({title: 'Snapshot', src: 'shareSnapshot.html'});
}
if (!$scope.dashboard.meta.isSnapshot) {
if (!$scope.dashboard.meta.isSnapshot && !$scope.modeSharePanel) {
$scope.tabs.push({title: 'Export', src: 'shareExport.html'});
}

10
public/app/partials/help_modal.html
View File

@ -2,9 +2,17 @@
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-keyboard-o"></i>
<span class="p-l-1">Keyboard shortcuts</span>
<span class="p-l-1">Help</span>
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts', 'Tips', 'Docs']">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab}}
</a>
</li>
</ul>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>