Bug 1141569 - Display onscreen keyboard shortcuts

This commit is contained in:
Jonathan French 2015-09-24 09:06:38 -04:00
Родитель 5af5d2e2b8
Коммит ca700dce6f
8 изменённых файлов: 133 добавлений и 53 удалений

Просмотреть файл

@ -23,6 +23,7 @@ module.exports = function (config) {
'ui/js/providers.js',
'ui/js/values.js',
'ui/js/logviewer.js',
'ui/js/userguide.js',
'ui/js/treeherder_app.js',
'ui/js/controllers/*.js',
'ui/js/directives/treeherder/**/*.js',

Просмотреть файл

@ -356,6 +356,24 @@ input:focus::-moz-placeholder {
width: 22px;
}
/*
* Onscreen help
*/
#onscreen-overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 10000; /* 1 more than .overlay wait spinners */
background: rgba(0, 0, 0, 0.4);
}
#onscreen-shortcuts {
position: relative;
top: 130px;
left: 16.5%;
}
/*
* Clipboard
*

Просмотреть файл

@ -24,8 +24,17 @@
</head>
<body ng-controller="MainCtrl" ng-keydown="processKeyboardInput($event)">
<div id="global-container">
<div id="onscreen-overlay" ng-if="onscreenOverlayShowing">
<div id="onscreen-shortcuts" ng-if="onscreenShortcutsShowing">
<div class="col-xs-8">
<ng-include src="'partials/main/thShortcutTable.html'"></ng-include>
</div>
</div>
</div>
<div id="global-navbar-container">
<ng-include id="th-global-top-nav-panel" src="'partials/main/thGlobalTopNavPanel.html'"></ng-include>
<ng-include id="th-global-top-nav-panel"
src="'partials/main/thGlobalTopNavPanel.html'">
</ng-include>
</div>
<div id="th-global-content" class="th-global-content"
ng-click="clearJobOnClick($event)">

Просмотреть файл

@ -59,7 +59,8 @@ treeherderApp.controller('MainCtrl', [
'b', // Pin selected job and add related bug
'c', // Pin selected job and add classification
'f', // Enter a quick filter
'l' // Open the logviewer for the selected job
'l', // Open the logviewer for the selected job
'?' // Display onscreen keyboard shortcuts
];
// Make the single key exclusions available
@ -216,6 +217,7 @@ treeherderApp.controller('MainCtrl', [
$scope.$evalAsync($scope.setSettingsPanelShowing(false));
$scope.$evalAsync($scope.setSheriffPanelShowing(false));
$scope.$evalAsync($scope.closeJob());
$scope.$evalAsync($scope.setOnscreenShortcutsShowing(false));
});
// Shortcut: clear the pinboard
@ -242,6 +244,11 @@ treeherderApp.controller('MainCtrl', [
}
});
// Shortcut: display onscreen keyboard shortcuts
Mousetrap.bind('?', function() {
$scope.$evalAsync($scope.setOnscreenShortcutsShowing(true));
});
};
$scope.repoModel = ThRepositoryModel;
@ -390,6 +397,14 @@ treeherderApp.controller('MainCtrl', [
$("#quick-filter").val("").focus();
};
$scope.onscreenOverlayShowing = false;
$scope.onscreenShortcutsShowing = false;
$scope.setOnscreenShortcutsShowing = function(tf) {
$scope.onscreenShortcutsShowing = tf;
$scope.onscreenOverlayShowing = tf;
};
$scope.isFilterPanelShowing = false;
$scope.setFilterPanelShowing = function(tf) {
$scope.isFilterPanelShowing = tf;

Просмотреть файл

@ -0,0 +1,6 @@
"use strict";
userguideApp.controller('UserguideCtrl', [
'$scope', '$log', function ($scope, $log) {
}
]);

8
ui/js/userguide.js Normal file
Просмотреть файл

@ -0,0 +1,8 @@
'use strict';
var userguideApp = angular.module('userguide.app', []);
userguideApp.config(function ($compileProvider) {
// Disable debug data, as recommended by https://docs.angularjs.org/guide/production
$compileProvider.debugInfoEnabled(false);
});

Просмотреть файл

@ -0,0 +1,61 @@
<div class="panel panel-default">
<div class="panel-heading">
<h3>Keyboard shortcuts
<a ng-show="onscreenShortcutsShowing"
ng-click="setOnscreenShortcutsShowing(false)"
class="pull-right" href="" title="Close this help">
<span class="fa fa-times lightgray"</span>
</a>
</h3>
</div>
<div class="panel-body panel-spacing">
<table id="shortcuts">
<!-- Expose when onscreen help is complete - bug 1141569
<tr><td class="kbd">F1</td>
<td>Display onscreen help</td></tr>
-->
<tr><td class="kbd">esc</td>
<td>Close all open job or filter panels</td></tr>
<tr><td class="kbd">f</td>
<td>Enter a quick filter</td></tr>
<tr>
<td><span class="kbd">ctrl</span><span class="kbd">shift
</span><span class="kbd">f</span></td>
<td>Clear the quick filter</td>
</tr>
<tr><td class="kbd">&larr;</td>
<td>Select previous job</td></tr>
<tr><td class="kbd">&rarr;</span></td>
<td>Select next job</td></tr>
<tr><td><span class="kbd">k</span> or <span class="kbd">p</span></td>
<td>Select previous unclassified failure</td></tr>
<tr><td><span class="kbd">j</span> or <span class="kbd">n</span></td>
<td>Select next unclassified failure</td></tr>
<tr><td class="kbd">l</td>
<td>Open the logviewer for the selected job</td></tr>
<tr><td><span class="kbd">ctrl</span> or <span class="kbd">cmd</span></td>
<td>Add job to the pinboard during click selection</td></tr>
<tr><td class="kbd">spacebar</td>
<td>Add a selected job to the pinboard</td></tr>
<tr><td class="kbd">b</td>
<td>Add a selected job to the pinboard + enter related bug</td></tr>
<tr><td class="kbd">c</td>
<td>Add a selected job to the pinboard + enter classification</td></tr>
<tr><td><span class="kbd">ctrl</span><span class="kbd">enter</span></td>
<td>Save pinboard classification and related bugs</td></tr>
<tr>
<td><span class="kbd">ctrl</span><span class="kbd">shift
</span><span class="kbd">u</span></td>
<td>Clear the pinboard</td>
</tr>
<tr><td class="kbd">r</span></td>
<td>Retrigger selected job</td></tr>
<tr><td><span class="kbd">ctrl</span><span class="kbd">backspace</span></td>
<td>Delete job classification and related bugs</td></tr>
<tr><td class="kbd">u</td>
<td>Show only unclassified failures</td></tr>
<tr ng-if="!onscreenShortcutsShowing"><td class="kbd">?</td>
<td>Display onscreen keyboard shortcuts</td></tr>
</table>
</div>
</div>

Просмотреть файл

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html ng-app="userguide.app">
<head>
<meta charset="utf-8">
<title>Treeherder User Guide</title>
@ -13,7 +13,11 @@
<link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
</head>
<body id="userguide">
<body ng-controller="UserguideCtrl" id="userguide">
<script src="vendor/angular/angular.js"></script>
<script src="js/userguide.js"></script>
<script src="js/controllers/userguide.js"></script>
<!-- Content panel -->
<div class="panel panel-default">
<!-- Header -->
@ -130,57 +134,13 @@
<!-- Shortcuts table -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Keyboard shortcuts</h3></div>
<div class="panel-body panel-spacing">
<table id="shortcuts">
<tr><td class="kbd">esc</td>
<td>Close all open job or filter panels</td></tr>
<tr><td class="kbd">f</td>
<td>Enter a quick filter</td></tr>
<tr>
<td><span class="kbd">ctrl</span><span class="kbd">shift
</span><span class="kbd">f</span></td>
<td>Clear the quick filter</td>
</tr>
<tr><td class="kbd">&larr;</td>
<td>Select previous job</td></tr>
<tr><td class="kbd">&rarr;</span></td>
<td>Select next job</td></tr>
<tr><td><span class="kbd">k</span> or <span class="kbd">p</span></td>
<td>Select previous unclassified failure</td></tr>
<tr><td><span class="kbd">j</span> or <span class="kbd">n</span></td>
<td>Select next unclassified failure</td></tr>
<tr><td class="kbd">l</td>
<td>Open the logviewer for the selected job</td></tr>
<tr><td><span class="kbd">ctrl</span> or <span class="kbd">cmd</span></td>
<td>Add job to the pinboard during click selection</td></tr>
<tr><td class="kbd">spacebar</td>
<td>Add a selected job to the pinboard</td></tr>
<tr><td class="kbd">b</td>
<td>Add a selected job to the pinboard + enter related bug</td></tr>
<tr><td class="kbd">c</td>
<td>Add a selected job to the pinboard + enter classification</td></tr>
<tr><td><span class="kbd">ctrl</span><span class="kbd">enter</span></td>
<td>Save pinboard classification and related bugs</td></tr>
<tr>
<td><span class="kbd">ctrl</span><span class="kbd">shift
</span><span class="kbd">u</span></td>
<td>Clear the pinboard</td>
</tr>
<tr><td class="kbd">r</span></td>
<td>Retrigger selected job</td></tr>
<tr><td><span class="kbd">ctrl</span><span class="kbd">backspace</span></td>
<td>Delete job classification and related bugs</td></tr>
<tr><td class="kbd">i</td>
<td>Toggle in-progress (running/pending) jobs</td></tr>
<tr><td class="kbd">u</td>
<td>Show only unclassified failures</td></tr>
</table>
</div>
<ng-include id="th-shortcut-table"
src="'partials/main/thShortcutTable.html'"></ng-include>
</div>
<!-- Copy values on hover table -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Copy values on hover</h3></div>
<div class="panel-body panel-spacing">
<table id="shortcuts">
@ -206,6 +166,8 @@
</div>
</div>
</div>
<!-- End of row -->
</div>
<div class="row">