mirror of https://github.com/grafana/grafana
Chore: Converts HelpModal from angular to react (#19474)
kay delaney
6 years ago
committed by
GitHub
parent
b0b306a1f4
commit
dafc955338
@ -0,0 +1,100 @@ |
||||
import React from 'react'; |
||||
import { appEvents } from 'app/core/core'; |
||||
|
||||
export class HelpModal extends React.PureComponent { |
||||
static tabIndex = 0; |
||||
static shortcuts = { |
||||
Global: [ |
||||
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' }, |
||||
{ keys: ['g', 'p'], description: 'Go to Profile' }, |
||||
{ keys: ['s', 'o'], description: 'Open search' }, |
||||
{ keys: ['esc'], description: 'Exit edit/setting views' }, |
||||
], |
||||
Dashboard: [ |
||||
{ keys: ['mod+s'], description: 'Save dashboard' }, |
||||
{ keys: ['d', 'r'], description: 'Refresh all panels' }, |
||||
{ keys: ['d', 's'], description: 'Dashboard settings' }, |
||||
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' }, |
||||
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' }, |
||||
{ keys: ['d', 'E'], description: 'Expand all rows' }, |
||||
{ keys: ['d', 'C'], description: 'Collapse all rows' }, |
||||
{ keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' }, |
||||
{ keys: ['mod+o'], description: 'Toggle shared graph crosshair' }, |
||||
{ keys: ['d', 'l'], description: 'Toggle all panel legends' }, |
||||
], |
||||
'Focused Panel': [ |
||||
{ keys: ['e'], description: 'Toggle panel edit view' }, |
||||
{ keys: ['v'], description: 'Toggle panel fullscreen view' }, |
||||
{ keys: ['p', 's'], description: 'Open Panel Share Modal' }, |
||||
{ keys: ['p', 'd'], description: 'Duplicate Panel' }, |
||||
{ keys: ['p', 'r'], description: 'Remove Panel' }, |
||||
{ keys: ['p', 'l'], description: 'Toggle panel legend' }, |
||||
], |
||||
'Time Range': [ |
||||
{ keys: ['t', 'z'], description: 'Zoom out time range' }, |
||||
{ |
||||
keys: ['t', <i className="fa fa-long-arrow-left" />], |
||||
description: 'Move time range back', |
||||
}, |
||||
{ |
||||
keys: ['t', <i className="fa fa-long-arrow-right" />], |
||||
description: 'Move time range forward', |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
dismiss() { |
||||
appEvents.emit('hide-modal'); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="modal-body"> |
||||
<div className="modal-header"> |
||||
<h2 className="modal-header-title"> |
||||
<i className="fa fa-keyboard-o" /> |
||||
<span className="p-l-1">Shortcuts</span> |
||||
</h2> |
||||
<a className="modal-header-close" onClick={this.dismiss}> |
||||
<i className="fa fa-remove" /> |
||||
</a> |
||||
</div> |
||||
|
||||
<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> |
||||
); |
||||
} |
||||
} |
||||
@ -1,39 +0,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> |
||||
@ -1,69 +0,0 @@ |
||||
import coreModule from '../../core_module'; |
||||
import appEvents from 'app/core/app_events'; |
||||
|
||||
export class HelpCtrl { |
||||
tabIndex: any; |
||||
shortcuts: any; |
||||
|
||||
/** @ngInject */ |
||||
constructor() { |
||||
this.tabIndex = 0; |
||||
this.shortcuts = { |
||||
Global: [ |
||||
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' }, |
||||
{ keys: ['g', 'p'], description: 'Go to Profile' }, |
||||
{ keys: ['s', 'o'], description: 'Open search' }, |
||||
{ keys: ['esc'], description: 'Exit edit/setting views' }, |
||||
], |
||||
Dashboard: [ |
||||
{ keys: ['mod+s'], description: 'Save dashboard' }, |
||||
{ keys: ['d', 'r'], description: 'Refresh all panels' }, |
||||
{ keys: ['d', 's'], description: 'Dashboard settings' }, |
||||
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' }, |
||||
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' }, |
||||
{ keys: ['d', 'E'], description: 'Expand all rows' }, |
||||
{ keys: ['d', 'C'], description: 'Collapse all rows' }, |
||||
{ keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' }, |
||||
{ keys: ['mod+o'], description: 'Toggle shared graph crosshair' }, |
||||
{ keys: ['d', 'l'], description: 'Toggle all panel legends' }, |
||||
], |
||||
'Focused Panel': [ |
||||
{ keys: ['e'], description: 'Toggle panel edit view' }, |
||||
{ keys: ['v'], description: 'Toggle panel fullscreen view' }, |
||||
{ keys: ['p', 's'], description: 'Open Panel Share Modal' }, |
||||
{ keys: ['p', 'd'], description: 'Duplicate Panel' }, |
||||
{ keys: ['p', 'r'], description: 'Remove Panel' }, |
||||
{ keys: ['p', 'l'], description: 'Toggle panel legend' }, |
||||
], |
||||
'Time Range': [ |
||||
{ keys: ['t', 'z'], description: 'Zoom out time range' }, |
||||
{ |
||||
keys: ['t', '<i class="fa fa-long-arrow-left"></i>'], |
||||
description: 'Move time range back', |
||||
}, |
||||
{ |
||||
keys: ['t', '<i class="fa fa-long-arrow-right"></i>'], |
||||
description: 'Move time range forward', |
||||
}, |
||||
], |
||||
}; |
||||
} |
||||
|
||||
dismiss() { |
||||
appEvents.emit('hide-modal'); |
||||
} |
||||
} |
||||
|
||||
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); |
||||
Loading…
Reference in new issue