- UI feedback fixes: text cutoffs, misformatting fixes, etc

- Add hotkey support for searching and creating repositories
- Make search animations significantly faster
This commit is contained in:
Joseph Schorr 2015-04-08 14:39:52 -04:00
parent 7bdd7c5f82
commit af468a8c6a
13 changed files with 99 additions and 46 deletions

View file

@ -35,7 +35,7 @@ quayPages.constant('pages', {
}
});
quayDependencies = ['ngRoute', 'chieffancypants.loadingBar', 'angular-tour', 'restangular', 'angularMoment',
quayDependencies = ['ngRoute', 'chieffancypants.loadingBar', 'cfp.hotkeys', 'angular-tour', 'restangular', 'angularMoment',
'mgcrea.ngStrap', 'ngCookies', 'ngSanitize', 'angular-md5', 'pasvaz.bindonce', 'ansiToHtml',
'core-ui', 'core-config-setup', 'quayPages'];

View file

@ -12,7 +12,28 @@ angular.module('quay').directive('headerBar', function () {
restrict: 'C',
scope: {
},
controller: function($rootScope, $scope, $element, $location, $timeout, UserService, PlanService, ApiService, NotificationService, Config, CreateService) {
controller: function($rootScope, $scope, $element, $location, $timeout, hotkeys, UserService, PlanService, ApiService, NotificationService, Config, CreateService) {
// Register hotkeys:
hotkeys.add({
combo: '/',
description: 'Show search',
callback: function(e) {
e.preventDefault();
e.stopPropagation();
$scope.toggleSearch();
}
});
hotkeys.add({
combo: 'alt+c',
description: 'Create new repository',
callback: function(e) {
e.preventDefault();
e.stopPropagation();
$location.url('/new');
}
});
$scope.notificationService = NotificationService;
$scope.searchVisible = false;
$scope.currentSearchQuery = null;
@ -94,6 +115,7 @@ angular.module('quay').directive('headerBar', function () {
conductSearch($scope.currentSearchQuery);
}
} else {
$('#search-box-input').blur()
$scope.searchResultState = null;
}
};
@ -112,35 +134,34 @@ angular.module('quay').directive('headerBar', function () {
return;
}
if (!$scope.searchResultState) { return; }
var state = $scope.searchResultState;
if (!state || !state['results']) { return; }
if (e.keyCode == 40) {
$scope.searchResultState['current']++;
state['current']++;
e.preventDefault();
} else if (e.keyCode == 38) {
$scope.searchResultState['current']--;
state['current']--;
e.preventDefault();
} else if (e.keyCode == 13) {
var current = $scope.searchResultState['current'];
if (current >= 0 &&
current < $scope.searchResultState['results'].length) {
$scope.showResult($scope.searchResultState['results'][current]);
var current = state['current'];
if (current >= 0 && current < state['results'].length) {
$scope.showResult(state['results'][current]);
}
e.preventDefault();
}
if (!$scope.searchResultState) { return; }
if ($scope.searchResultState['current'] < -1) {
$scope.searchResultState['current'] = $scope.searchResultState['results'].length - 1;
} else if ($scope.searchResultState['current'] >= $scope.searchResultState['results'].length) {
$scope.searchResultState['current'] = 0;
if (state['current'] < -1) {
state['current'] = state['results'].length - 1;
} else if (state['current'] >= state['results'].length) {
state['current'] = 0;
}
};
$scope.showResult = function(result) {
$scope.toggleSearch();
$timeout(function() {
$scope.currentSearchQuery = '';
$location.url(result['href'])
}, 500);
};