refactored dialog

src/main/resources/i18n/en.properties

@@ -126,3 +126,4 @@ about.shortcuts.star_unstar=star/unstar current entry
 about.shortcuts.mark_current_entry=mark as read/unread current entry
 about.shortcuts.mark_all_as_read=mark all entries as read
 about.shortcuts.open_in_new_tab_mark_as_read=open entry in new tab and mark as read
+about.shortcuts.feed_search=navigate to a subscription by entering the subscription name

src/main/webapp/js/controllers.js

@@ -26,6 +26,9 @@ module.run(['$rootScope', function($rootScope) {
 	$rootScope.$on('emitReload', function(event, args) {
 		$rootScope.$broadcast('reload');
 	});
+	$rootScope.$on('emitFeedSearch', function(event, args) {
+		$rootScope.$broadcast('feedSearch');
+	});
 }]);
 
 module.controller('SubscribeCtrl', ['$scope', 'FeedService', 'CategoryService', 'MobileService',
@@ -43,6 +46,10 @@ function($scope, FeedService, CategoryService, MobileService) {
 	$scope.CategoryService = CategoryService;
 	$scope.MobileService = MobileService;
 	
+	$scope.search = function() {
+		$scope.$emit('emitFeedSearch');
+	}
+
 	$scope.open = function() {
 		$scope.sub = {
 			categoryId: 'all'
@@ -556,24 +563,96 @@ function($scope, $http, $state, $stateParams, $route, $location,
 	};
 }]);
 
-module.controller('FeedCtrl', ['$scope', '$state', 'CategoryService',
+module.controller('FeedSearchCtrl', ['$scope', '$state', '$filter', '$timeout', 'CategoryService',
-function($scope, $state, CategoryService) {
+function($scope, $state, $filter, $timeout, CategoryService) {
-	$scope.CategoryService = CategoryService;
 	$scope.feedSearchModal = false;
+	$scope.filter = null;
+	$scope.focus = null;
+	$scope.CategoryService = CategoryService;
+	
+	$scope.$watch('filter', function() {
+		$timeout(function() {
+			if ($scope.filtered){
+				$scope.focus = $scope.filtered[0];
+			}
+		}, 0);
+	});
+	
+	var getCurrentIndex = function() {
+		var index = -1;
+		
+		if(!$scope.focus) {
+			return index;
+		}
+		
+		var filtered = $scope.filtered;
+		for (var i = 0; i < filtered.length; i++) {
+			if ($scope.focus.id == filtered[i].id) {
+				index = i;
+				break;
+			}
+		}
+		return index;
+	}
+	
+	$scope.focusPrevious = function(e) {
+		var index = getCurrentIndex();
+		if (index === 0) {
+			return;
+		} 
+		$scope.focus = $scope.filtered[index - 1];
+		
+		e.stopPropagation();
+		e.preventDefault();
+	};
+	
+	$scope.focusNext = function(e) {
+		var index = getCurrentIndex();
+		if (index == ($scope.filtered.length - 1)) {
+			return;
+		} 
+		$scope.focus = $scope.filtered[index + 1];
+		
+		e.stopPropagation();
+		e.preventDefault();
+	};
+	
+	$scope.openFocused = function() {
+		if (!$scope.focus) {
+			return;
+		}
+		$scope.goToFeed($scope.focus.id);
+	}
 
 	$scope.goToFeed = function(id) {		
-		$state.transitionTo('feeds.view', {_type : 'feed', _id : id});
+		$scope.close();
-		$scope.feedSearchModal=false;
+		$state.transitionTo('feeds.view', {
-		$scope.feedFilter='';
+			_type : 'feed', 
+			_id : id
+			}
+		);
+	};
+	
+	$scope.open = function() {
+		$scope.filter = null;
+		$scope.feedSearchModal = true;
+	};
+	
+	$scope.close = function() {
+		$scope.feedSearchModal = false;
 	};
 
 	Mousetrap.bind('g u', function(e) {
 		$scope.$apply(function() {
-			$scope.feedSearchModal = true;
+			$scope.open();
 		});
 		return false;
 	});
 	
+	$scope.$on('feedSearch', function() {
+		$scope.open();
+	});
+
 }]);
 
 module.controller('FeedListCtrl', ['$scope', '$stateParams', '$http', '$route', 

src/main/webapp/sass/components/_subscription-list.scss

@@ -1,8 +1,24 @@
 /* feed search dialog */
-.item-filter-dialog .modal-body {
+.feed-search-dialog .modal-body {
 	overflow: hidden;
 }
 
+.feed-search-dialog .filter-input {
+	width: 90%;
+}
+
+.feed-search-dialog .feed-link {
+	font-size: large; 
+}
+
+.feed-search-dialog a:hover {
+	text-decoration: none;
+}
+
+.feed-search-dialog .focus a {
+	color: black;
+}
+
 /* tree*/
 .sidebar-nav-fixed {
 	margin-top: 10px;

src/main/webapp/sass/generic/_misc.scss

@@ -2,6 +2,10 @@
 	cursor: pointer;
 }
 
+.block {
+	display: block;
+}
+
 .rtl {
 	direction: rtl;
 }

src/main/webapp/templates/_feedsearch.html

@@ -0,0 +1,27 @@
+<div ng-controller="FeedSearchCtrl">
+	<div modal="feedSearchModal" close="close()"
+		options="{dialogClass: 'modal feed-search-dialog'}">
+		<div class="modal-header">
+			<button type="button" class="close" ng-click="close()">&times;</button>
+			<h4>
+				<input ng-model="filter" class="filter-input" 
+					ui-keydown="{'up': 'focusPrevious($event)', 'down': 'focusNext($event)', 'enter': 'openFocused()' }"
+					placeholder="${feedsearch.hint}" focus="feedSearchModal">
+			</h4>
+			<small>${feedsearch.help}</small>
+		</div>
+		<div class="modal-body">
+			<strong>${feedsearch.result_prefix}</strong>
+			<span
+				ng-repeat="feed in (filtered = (CategoryService.feeds | filter:{name: filter} | limitTo:40))">
+				<span ng-class="{block: filter, focus: focus.id == feed.id}" class="feed-link">
+					<a class=" pointer" ng-click="goToFeed(feed.id)">
+						<favicon url="feed.iconUrl" />
+						&nbsp;{{feed.name}}
+					</a>
+					<span ng-show="!filter && !$last">&bull;</span>
+				</span>
+			</span>
+		</div>
+	</div>
+</div>

src/main/webapp/templates/_shortcuts.html

@@ -37,4 +37,7 @@
 
 	<dt>${about.shortcuts.mouse_middleclick}</dt>
 	<dd>${about.shortcuts.open_in_new_tab_mark_as_read}</dd>
+	
+	<dt>g <i class="icon-arrow-right"></i> u</dt>
+	<dd>${about.shortcuts.feed_search}</dd>
 </dl>

src/main/webapp/templates/feeds.html

@@ -1,9 +1,10 @@
-<div class="container-fluid" ng-controller="FeedCtrl">
+<div class="container-fluid">
 	<div class="row-fluid">
 		<div class="span2 left-menu">
 			<div class="sidebar-nav-fixed" mousewheel-scrolling>
 				<div ng-include="'templates/_subscribe.html'"></div>
 				<div ng-include="'templates/_tree.html'"></div>
+				<div ng-include="'templates/_feedsearch.html'"></div>
 			</div>
 		</div>
 		<div class="span10 main-content">
@@ -13,36 +14,5 @@
 			</div>
 		</div>
 	</div>
-	<div
-		modal="feedSearchModal"
-		close="feedSearchModal=false"
-		options="{dialogClass: 'modal item-filter-dialog'}"
-		>
-		<div class="modal-header">
-			<button
-				type="button"
-				class="close"
-				ng-click="feedSearchModal=false"
-				>&times;</button>
-			<h4><input
-				ng-model="feedFilter"
-				style="width: 90%"
-				placeholder="${feedsearch.hint}"
-				autofocus=""
-				></h4>
-			<small>${feedsearch.help}</small>
-		</div>
-		<div class="modal-body">
-			<strong>${feedsearch.result_prefix}</strong>
-				<span ng-repeat="feed in CategoryService.feeds | filter:feedFilter | limitTo:40">
-					<a
-						style="font-size: large; margin: 10px;"
-						ng-click="goToFeed(feed.id)"
-						>
-						<favicon url="feed.iconUrl" />&nbsp;{{feed.name}}
-					</a> &bull;
-				</span>
-		</div>
-	</div>
 	<div ng-include="'templates/_footer.html'"></div>
 </div>