Display a pane with item details

Display a pane with item details, such as a full image previews, when an item is single clicked.

Add a placeholder information link that shows up when an item is moused over.

2 files changed, 110 insertions, 29 deletions

diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js
index 1e09b6c1f..c22848f6e 100644
--- a/js/ui/genericDisplay.js
+++ b/js/ui/genericDisplay.js
@@ -81,6 +81,16 @@ GenericDisplayItem.prototype = {
                                  x: 0, y: 0,
                                  width: availableWidth, height: ITEM_DISPLAY_HEIGHT });
         this.actor.add_actor(this._bg);
+
+        this._informationLink = new Link.Link({ color: ITEM_DISPLAY_NAME_COLOR,
+                                                font_name: "Sans Bold 14px",
+                                                text: "(i)",
+                                                height: LABEL_HEIGHT,
+                                                y: ITEM_DISPLAY_HEIGHT / 2 - LABEL_HEIGHT / 2});
+        this._informationLink.actor.x = availableWidth - ITEM_DISPLAY_PADDING - this._informationLink.actor.width;
+
+        this._informationLink.actor.hide();
+        this.actor.add_actor(this._informationLink.actor);
         
         this._name = null;
         this._description = null;
@@ -393,6 +403,7 @@ GenericDisplayItem.prototype = {
 
     // Performs actions on mouse enter event for the item. Currently, shows the preview for the item.
     _onEnter: function(actor, event) {
+        this._informationLink.actor.show();
         this._havePointer = true;
         let tooltipTimeout = Gtk.Settings.get_default().gtk_tooltip_timeout;
         this._previewEventSourceId = Mainloop.timeout_add(tooltipTimeout, 
@@ -408,6 +419,7 @@ GenericDisplayItem.prototype = {
 
     // Performs actions on mouse leave event for the item. Currently, hides the preview for the item.
     _onLeave: function(actor, event) {
+        this._informationLink.actor.hide();
         this._havePointer = false;
         this.hidePreview();
     },
diff --git a/js/ui/overlay.js b/js/ui/overlay.js
index cf92b29fd..04f9113c6 100644
--- a/js/ui/overlay.js
+++ b/js/ui/overlay.js
@@ -88,18 +88,18 @@ DASH_MIDDLE_COLOR.from_pixel(0x324c6fbb);
 const DASH_RIGHT_COLOR = new Clutter.Color();
 DASH_RIGHT_COLOR.from_pixel(0x324c6fcc);
 
-// The results pane has a somewhat transparent blue background with a gradient.
-const RESULTS_LEFT_COLOR = new Clutter.Color();
-RESULTS_LEFT_COLOR.from_pixel(0x324c6ff0);
-const RESULTS_MIDDLE_COLOR = new Clutter.Color();
-RESULTS_MIDDLE_COLOR.from_pixel(0x324c6ff4);
-const RESULTS_RIGHT_COLOR = new Clutter.Color();
-RESULTS_RIGHT_COLOR.from_pixel(0x324c6ff8);
+const DASH_BORDER_COLOR = new Clutter.Color();
+DASH_BORDER_COLOR.from_pixel(0x213b5dff);
 
-const RESULTS_BORDER_COLOR = new Clutter.Color();
-RESULTS_BORDER_COLOR.from_pixel(0x213b5dff);
+const DASH_BORDER_WIDTH = 2;
 
-const RESULTS_BORDER_WIDTH = 2;
+// The results and details panes have a somewhat transparent blue background with a gradient.
+const PANE_LEFT_COLOR = new Clutter.Color();
+PANE_LEFT_COLOR.from_pixel(0x324c6ff0);
+const PANE_MIDDLE_COLOR = new Clutter.Color();
+PANE_MIDDLE_COLOR.from_pixel(0x324c6ff4);
+const PANE_RIGHT_COLOR = new Clutter.Color();
+PANE_RIGHT_COLOR.from_pixel(0x324c6ff8);
 
 const SHADOW_COLOR = new Clutter.Color();
 SHADOW_COLOR.from_pixel(0x00000033);
@@ -164,12 +164,14 @@ Dash.prototype = {
 
         this._displayWidth = displayGridColumnWidth - DASH_PAD * 2;
         this._resultsWidth = displayGridColumnWidth;  
+        this._detailsWidth = displayGridColumnWidth * 2;  
 
         let bottomHeight = DASH_PAD;
 
         let global = Shell.Global.get();
 
         let resultsHeight = global.screen_height - Panel.PANEL_HEIGHT - DASH_PAD - bottomHeight;
+        let detailsHeight = global.screen_height - Panel.PANEL_HEIGHT - DASH_PAD - bottomHeight;
 
         // The whole dash group needs to be reactive so that the clicks are not passed to the transparent background underneath it.
         // This background is used in the workspaces area when the additional dash panes are being shown. It handles clicks in the
@@ -187,8 +189,8 @@ Dash.prototype = {
                                            width: this._width,
                                            height: global.screen_height - Panel.PANEL_HEIGHT - DASH_PAD - bottomHeight,
                                            corner_radius: DASH_CORNER_RADIUS,
-                                           border: RESULTS_BORDER_WIDTH,
-                                           border_color: RESULTS_BORDER_COLOR });
+                                           border: DASH_BORDER_WIDTH,
+                                           border_color: DASH_BORDER_COLOR });
 
         dashPane.append(dashBackground, Big.BoxPackFlags.EXPAND);
         
@@ -261,7 +263,7 @@ Dash.prototype = {
 
         // Prepare docs display for the results pane.
         this._resultsDocsSection = new Big.Box({ height: resultsHeight,
-                                                 padding: DASH_SECTION_PADDING,
+                                                 padding: DASH_SECTION_PADDING + DASH_BORDER_WIDTH,
                                                  spacing: DASH_SECTION_SPACING });
 
         this._resultsDocsText = new Clutter.Text({ color: DASH_TEXT_COLOR,
@@ -290,15 +292,15 @@ Dash.prototype = {
                                               width: this._resultsWidth,
                                               height: resultsHeight,
                                               corner_radius: DASH_CORNER_RADIUS,
-                                              border: RESULTS_BORDER_WIDTH,
-                                              border_color: RESULTS_BORDER_COLOR });
+                                              border: DASH_BORDER_WIDTH,
+                                              border_color: DASH_BORDER_COLOR });
 
         this._resultsPane.append(resultsBackground, Big.BoxPackFlags.EXPAND);
 
-        let resultsLeft = global.create_horizontal_gradient(RESULTS_LEFT_COLOR,
-                                                            RESULTS_MIDDLE_COLOR);
-        let resultsRight = global.create_horizontal_gradient(RESULTS_MIDDLE_COLOR,
-                                                             RESULTS_RIGHT_COLOR);
+        let resultsLeft = global.create_horizontal_gradient(PANE_LEFT_COLOR,
+                                                            PANE_MIDDLE_COLOR);
+        let resultsRight = global.create_horizontal_gradient(PANE_MIDDLE_COLOR,
+                                                             PANE_RIGHT_COLOR);
         let resultsShadow = global.create_horizontal_gradient(SHADOW_COLOR,
                                                               TRANSPARENT_COLOR);
         resultsShadow.set_width(SHADOW_WIDTH);
@@ -313,6 +315,42 @@ Dash.prototype = {
                                                y: DASH_SECTION_PADDING });
         this._resultsPane.add_actor(this._resultsText);
 
+        this._detailsPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
+                                          x: this._width,
+                                          y: Panel.PANEL_HEIGHT + DASH_PAD,
+                                          width: this._detailsWidth + SHADOW_WIDTH,
+                                          height: detailsHeight });
+
+        let detailsBackground = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
+                                              width: this._detailsWidth,
+                                              height: detailsHeight,
+                                              corner_radius: DASH_CORNER_RADIUS,
+                                              border: DASH_BORDER_WIDTH,
+                                              border_color: DASH_BORDER_COLOR });
+
+        this._detailsPane.append(detailsBackground, Big.BoxPackFlags.EXPAND);
+
+        let detailsLeft = global.create_horizontal_gradient(PANE_LEFT_COLOR,
+                                                            PANE_MIDDLE_COLOR);
+        let detailsRight = global.create_horizontal_gradient(PANE_MIDDLE_COLOR,
+                                                             PANE_RIGHT_COLOR);
+        let detailsShadow = global.create_horizontal_gradient(SHADOW_COLOR,
+                                                              TRANSPARENT_COLOR);
+        detailsShadow.set_width(SHADOW_WIDTH);
+        
+        detailsBackground.append(detailsLeft, Big.BoxPackFlags.EXPAND);
+        detailsBackground.append(detailsRight, Big.BoxPackFlags.EXPAND);
+        this._detailsPane.append(detailsShadow, Big.BoxPackFlags.NONE);
+
+        this._detailsContent = new Big.Box({ padding: DASH_SECTION_PADDING + DASH_BORDER_WIDTH });
+        this._detailsPane.add_actor(this._detailsContent);
+
+        let itemDetailsAvailableWidth = this._detailsWidth - DASH_SECTION_PADDING * 2 - DASH_BORDER_WIDTH * 2;
+        let itemDetailsAvailableHeight = detailsHeight - DASH_SECTION_PADDING * 2 - DASH_BORDER_WIDTH * 2;
+
+        this._docDisplay.setAvailableDimensionsForItemDetails(itemDetailsAvailableWidth, itemDetailsAvailableHeight);
+        this._resultsDocDisplay.setAvailableDimensionsForItemDetails(itemDetailsAvailableWidth, itemDetailsAvailableHeight);
+
         /* Proxy the activated signals */
         this._appDisplay.connect('activated', function(appDisplay) {
             me.emit('activated');
@@ -332,7 +370,21 @@ Dash.prototype = {
             // item in the doc display is selected, we need to make sure that
             // no item in the app display has the selection.
             me._appDisplay.unsetSelected(); 
-            me._appDisplay.hidePreview(); 
+            me._appDisplay.hidePreview();
+            if (me._detailsPane.get_parent() == null) { 
+                me.actor.add_actor(me._detailsPane);
+                me.emit('panes-displayed');
+            }
+            me._detailsContent.remove_all();
+            me._detailsContent.append(me._docDisplay.selectedItemDetails, Big.BoxPackFlags.NONE); 
+        });
+        this._resultsDocDisplay.connect('selected', function(resultsDocDisplay) {
+            if (me._detailsPane.get_parent() == null) { 
+                me.actor.add_actor(me._detailsPane);
+                me.emit('panes-displayed');
+            }
+            me._detailsContent.remove_all();
+            me._detailsContent.append(me._resultsDocDisplay.selectedItemDetails, Big.BoxPackFlags.NONE); 
         });
         this._appDisplay.connect('redisplayed', function(appDisplay) {
             me._ensureItemSelected();
@@ -377,6 +429,10 @@ Dash.prototype = {
     unsetMoreMode: function() {
         this._unsetMoreAppsMode();
         this._unsetMoreDocsMode();
+        if (this._detailsPane.get_parent() != null) { 
+             this.actor.remove_actor(this._detailsPane);
+             this.emit('panes-removed');
+        }
     },
 
     // Ensures that one of the displays has the selection if neither owns it after the
@@ -409,7 +465,8 @@ Dash.prototype = {
 
         this._resultsText.text = "Applications";
  
-        this.emit('more-activated');
+        this._detailsPane.x = this._width + this._resultsWidth;;
+        this.emit('panes-displayed');
     },
 
     // Unsets the 'More' mode for browsing applications.
@@ -424,7 +481,12 @@ Dash.prototype = {
        
         this._moreAppsLink.setText("More...");
 
-        this.emit('less-activated');
+        this._detailsPane.x = this._width;
+
+
+        if (this._detailsPane.get_parent() == null) {
+            this.emit('panes-removed');
+        }
     },   
  
     // Sets the 'More' mode for browsing documents.
@@ -440,8 +502,9 @@ Dash.prototype = {
         this.actor.add_actor(this._resultsPane);
          
         this._moreDocsLink.setText("Less..."); 
-
-        this.emit('more-activated');
+        
+        this._detailsPane.x = this._width + this._resultsWidth; 
+        this.emit('panes-displayed');
     },
 
     // Unsets the 'More' mode for browsing documents. 
@@ -456,7 +519,12 @@ Dash.prototype = {
         this._resultsDocDisplay.hide();
  
         this._moreDocsLink.setText("More...");
-        this.emit('less-activated');
+
+        this._detailsPane.x = this._width;
+
+        if (this._detailsPane.get_parent() == null) {
+            this.emit('panes-removed');
+        }
     }   
 };
 
@@ -530,8 +598,8 @@ Overlay.prototype = {
             // startup-notification integration at least.
             me.hide();
         });
-        this._dash.connect('more-activated', function(dash) {
-            if (me._workspaces != null) {
+        this._dash.connect('panes-displayed', function(dash) {
+            if (me._buttonEventHandlerId == null) {
                 me._transparentBackground.raise_top();
                 me._dash.actor.raise_top();
                 me._buttonEventHandlerId = me._transparentBackground.connect('button-release-event', function(background) {
@@ -540,10 +608,11 @@ Overlay.prototype = {
                 }); 
             }    
         });
-        this._dash.connect('less-activated', function(dash) {
-            if (me._workspaces != null) {
+        this._dash.connect('panes-removed', function(dash) {
+            if (me._buttonEventHandlerId != null) {
                 me._transparentBackground.lower_bottom();  
                 me._transparentBackground.disconnect(me._buttonEventHandlerId);  
+                me._buttonEventHandlerId = null;
             }
         });
     },