Merge pull request #10 from secondsun/keyboard_navigation

Added styling and support for navigating items via keyboard

extension.js

@@ -22,6 +22,7 @@ const IconGrid      = imports.ui.iconGrid;
 const Util          = imports.misc.util;
 const Tracker       = imports.gi.Tracker;
 const St            = imports.gi.St;
+const Atk 	    = imports.gi.Atk;
 
 /* let xdg-open pick the appropriate program to open/execute the file */
 const DEFAULT_EXEC = 'xdg-open';
@@ -43,7 +44,11 @@ function TrackerResult(result) {
 // Overwriting layout to display search results.
 TrackerResult.prototype = {
     _init: function(resultMeta) {
-        this.actor = new St.Bin({ reactive: true});
+        this.actor = new St.Bin({ style_class: 'result',
+			          reactive: true,
+			          can_focus: true,
+                                  track_hover: true,
+                                  accessible_role: Atk.Role.PUSH_BUTTON});
         var MainBox = new St.BoxLayout( { style_class: 'result-content', vertical: true });
         this.actor.set_child(MainBox);
         var icon = resultMeta.createIcon(ICON_SIZE);      

stylesheet.css

@@ -31,6 +31,16 @@
     background-color: rgba(0.0, 0.0, 0.0, 0.55);
     color: white;
 }
+
+.result {
+    width: 272px; /* Same width as two normal results + spacing */
+    height: 118px; /* Aspect ratio = 1.75. Normal US business card ratio */
+    border-radius: 4px;
+    padding: 3px;
+    border: 1px rgba(0,0,0,0);
+    transition-duration: 100;
+}
+
 .result-content {
     border-radius: 7px;
     padding: 4px;
@@ -40,7 +50,19 @@
     color: white;
 }
 
+.result:hover {
+    background-color: rgba(255,255,255,0.1);
+    transition-duration: 100;
+}
 
+.result:focus,
+.app-well-app:focus > .overview-icon,
+.search-result-content:focus > .overview-icon,
+.result:selected,
+.app-well-app:selected > .overview-icon,
+.search-result-content:selected > .overview-icon {
+    background-color: rgba(255,255,255,0.33);
+}
 
 .tracker-grid {
     border-radius: 7px;