Skip to content

N
nexpie-grafana-theme
Commit dafc9553 by kay delaney Committed by GitHub
Options

Chore: Converts HelpModal from angular to react (#19474)

parent b0b306a1
Showing with 59 additions and 67 deletions
public/app/core/angular_wrappers.ts
...@@ -13,8 +13,10 @@ import { SearchField } from './components/search/SearchField'; ...@@ -13,8 +13,10 @@ import { SearchField } from './components/search/SearchField';
import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu'; import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper'; import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor'; import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';
import { HelpModal } from './components/help/HelpModal';
export function registerAngularDirectives() { export function registerAngularDirectives() {
react2AngularDirective('helpModal', HelpModal, []);
react2AngularDirective('sidemenu', SideMenu, []); react2AngularDirective('sidemenu', SideMenu, []);
react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']); react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
react2AngularDirective('appNotificationsList', AppNotificationList, []); react2AngularDirective('appNotificationsList', AppNotificationList, []);
......
public/app/core/components/help/help.ts → public/app/core/components/help/HelpModal.tsx
import coreModule from '../../core_module'; import React from 'react';
import appEvents from 'app/core/app_events'; import { appEvents } from 'app/core/core';
export class HelpCtrl { export class HelpModal extends React.PureComponent {
tabIndex: any; static tabIndex = 0;
shortcuts: any; static shortcuts = {
/** @ngInject */
constructor() {
this.tabIndex = 0;
this.shortcuts = {
Global: [ Global: [
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' }, { keys: ['g', 'h'], description: 'Go to Home Dashboard' },
{ keys: ['g', 'p'], description: 'Go to Profile' }, { keys: ['g', 'p'], description: 'Go to Profile' },
...@@ -38,32 +33,68 @@ export class HelpCtrl { ...@@ -38,32 +33,68 @@ export class HelpCtrl {
'Time Range': [ 'Time Range': [
{ keys: ['t', 'z'], description: 'Zoom out time range' }, { keys: ['t', 'z'], description: 'Zoom out time range' },
{ {
keys: ['t', '<i class="fa fa-long-arrow-left"></i>'], keys: ['t', <i className="fa fa-long-arrow-left" />],
description: 'Move time range back', description: 'Move time range back',
}, },
{ {
keys: ['t', '<i class="fa fa-long-arrow-right"></i>'], keys: ['t', <i className="fa fa-long-arrow-right" />],
description: 'Move time range forward', description: 'Move time range forward',
}, },
], ],
}; };
}
dismiss() { dismiss() {
appEvents.emit('hide-modal'); appEvents.emit('hide-modal');
} }
}
export function helpModal() { render() {
return { return (
restrict: 'E', <div className="modal-body">
templateUrl: 'public/app/core/components/help/help.html', <div className="modal-header">
controller: HelpCtrl, <h2 className="modal-header-title">
bindToController: true, <i className="fa fa-keyboard-o" />
transclude: true, <span className="p-l-1">Shortcuts</span>
controllerAs: 'ctrl', </h2>
scope: {}, <a className="modal-header-close" onClick={this.dismiss}>
}; <i className="fa fa-remove" />
} </a>
</div>
coreModule.directive('helpModal', helpModal); <div className="modal-content help-modal">
<p className="small" style={{ position: 'absolute', top: '13px', right: '44px' }}>
<span className="shortcut-table-key">mod</span> =
<span className="muted"> CTRL on windows or linux and CMD key on Mac</span>
</p>
{Object.entries(HelpModal.shortcuts).map(([category, shortcuts], i) => (
<div className="shortcut-category" key={i}>
<table className="shortcut-table">
<tbody>
<tr>
<th className="shortcut-table-category-header" colSpan={2}>
{category}
</th>
</tr>
{shortcuts.map((shortcut, j) => (
<tr key={`${i}-${j}`}>
<td className="shortcut-table-keys">
{shortcut.keys.map((key, k) => (
<span className="shortcut-table-key" key={`${i}-${j}-${k}`}>
{key}
</span>
))}
</td>
<td className="shortcut-table-description">{shortcut.description}</td>
</tr>
))}
</tbody>
</table>
</div>
))}
<div className="clearfix" />
</div>
</div>
);
}
}
public/app/core/components/help/help.html deleted 100644 → 0
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-keyboard-o"></i>
<span class="p-l-1">Shortcuts</span>
</h2>
<a class="modal-header-close" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content help-modal">
<p class="small" style="position: absolute; top: 13px; right: 44px">
<span class="shortcut-table-key">mod</span> =
<span class="muted">CTRL on windows or linux and CMD key on Mac</span>
</p>
<div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
<table class="shortcut-table">
<tbody>
<tr>
<th class="shortcut-table-category-header" colspan="2">{{category}}</th>
</tr>
<tr ng-repeat="shortcut in shortcuts">
<td class="shortcut-table-keys">
<span class="shortcut-table-key" ng-repeat="key in shortcut.keys track by $index" ng-bind-html="key">
</span>
</td>
<td class="shortcut-table-description">{{shortcut.description}}</td>
</tr>
<tbody>
</table>
</div>
<div class="clearfix"></div>
</div>
</div>
public/app/core/core.ts
...@@ -37,7 +37,6 @@ import appEvents from './app_events'; ...@@ -37,7 +37,6 @@ import appEvents from './app_events';
import { assignModelProperties } from './utils/model_utils'; import { assignModelProperties } from './utils/model_utils';
import { contextSrv } from './services/context_srv'; import { contextSrv } from './services/context_srv';
import { KeybindingSrv } from './services/keybindingSrv'; import { KeybindingSrv } from './services/keybindingSrv';
import { helpModal } from './components/help/help';
import { NavModelSrv } from './nav_model_srv'; import { NavModelSrv } from './nav_model_srv';
import { geminiScrollbar } from './components/scroll/scroll'; import { geminiScrollbar } from './components/scroll/scroll';
import { orgSwitcher } from './components/org_switcher'; import { orgSwitcher } from './components/org_switcher';
...@@ -69,7 +68,6 @@ export { ...@@ -69,7 +68,6 @@ export {
assignModelProperties, assignModelProperties,
contextSrv, contextSrv,
KeybindingSrv, KeybindingSrv,
helpModal,
JsonExplorer, JsonExplorer,
NavModelSrv, NavModelSrv,
NavModel, NavModel,
......
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