Bug 572094 - Put sideshow sections into boxes, enable expanded item display for documents

Put sideshow sections into boxes so that we can slide them out with a single 'easeOutQuad' transition.

Handle expanding the documents section in the same fashion as we handle expanding the applications section.

Place "More..." labels inside Big Boxes with x_align set to Big.BoxAlignment.END so that we don't have to position them manually.

js/ui/overlay.js

@@ -24,10 +24,12 @@ const LABEL_HEIGHT = 16;
 // between sideshow columns.
 const SIDESHOW_PAD = 6;
 const SIDESHOW_MIN_WIDTH = 250;
-const SIDESHOW_SECTION_MARGIN = 10;
+const SIDESHOW_SECTION_PADDING_TOP = 6;
-const SIDESHOW_SECTION_LABEL_MARGIN_BOTTOM = 6;
+const SIDESHOW_SECTION_SPACING = 6;
 const SIDESHOW_COLUMNS = 1;
 const EXPANDED_SIDESHOW_COLUMNS = 2;
+// This is the height of section components other than the item display.
+const SIDESHOW_SECTION_MISC_HEIGHT = (LABEL_HEIGHT + SIDESHOW_SECTION_SPACING) * 2 + SIDESHOW_SECTION_PADDING_TOP;
 const SIDESHOW_SEARCH_BG_COLOR = new Clutter.Color();
 SIDESHOW_SEARCH_BG_COLOR.from_pixel(0xffffffff);
 const SIDESHOW_TEXT_COLOR = new Clutter.Color();
@@ -79,24 +81,29 @@ Sideshow.prototype = {
     _init : function(parent, width) {
         let me = this;
 
-        this._moreMode = false;
+        this._moreAppsMode = false;
+        this._moreDocsMode = false;
 
         this._width = width - SIDESHOW_PAD;
 
+        // this figures out the additional width we can give to the display in the 'More' mode
+        this._additionalWidth = ((this._width + SIDESHOW_PAD) / SIDESHOW_COLUMNS) * 
+                                (EXPANDED_SIDESHOW_COLUMNS - SIDESHOW_COLUMNS);
+
         let global = Shell.Global.get();
         this.actor = new Clutter.Group();
         parent.add_actor(this.actor);
         let icontheme = Gtk.IconTheme.get_default();
-        let rect = new Big.Box({ background_color: SIDESHOW_SEARCH_BG_COLOR,
+        this._searchBox = new Big.Box({ background_color: SIDESHOW_SEARCH_BG_COLOR,
                                         corner_radius: 4,
                                         x: SIDESHOW_PAD,
                                         y: Panel.PANEL_HEIGHT + SIDESHOW_PAD,
                                         width: this._width,
                                         height: 24});
-        this.actor.add_actor(rect);
+        this.actor.add_actor(this._searchBox);
 
         let searchIconTexture = new Clutter.Texture({ x: SIDESHOW_PAD + 2,
-                                                      y: rect.y + 2 });
+                                                      y: this._searchBox.y + 2 });
         let searchIconPath = icontheme.lookup_icon('gtk-find', 16, 0).get_filename();
         searchIconTexture.set_from_file(searchIconPath);
         this.actor.add_actor(searchIconTexture);
@@ -108,7 +115,7 @@ Sideshow.prototype = {
                                              x: searchIconTexture.x
                                                  + searchIconTexture.width + 4,
                                              y: searchIconTexture.y,
-                                             width: rect.width - (searchIconTexture.x),
+                                             width: this._searchBox.width - (searchIconTexture.x),
                                              height: searchIconTexture.height, 
                                              text: ""});
         this.actor.add_actor(this._searchEntry);
@@ -168,55 +175,62 @@ Sideshow.prototype = {
             return false;
         });
 
+        this._appsSection = new Big.Box({ x: SIDESHOW_PAD,
+                                          y: this._searchBox.y + this._searchBox.height,
+                                          padding_top: SIDESHOW_SECTION_PADDING_TOP,
+                                          spacing: SIDESHOW_SECTION_SPACING});
+
         this._appsText = new Clutter.Label({ color: SIDESHOW_TEXT_COLOR,
                                            font_name: "Sans Bold 14px",
                                            text: "Applications",
-                                           x: SIDESHOW_PAD,
-                                           y: this._searchEntry.y + this._searchEntry.height + SIDESHOW_SECTION_MARGIN,
                                            height: LABEL_HEIGHT});
-        this.actor.add_actor(this._appsText);
+        this._appsSection.append(this._appsText, Big.BoxPackFlags.EXPAND);
 
-        let sectionLabelHeight = LABEL_HEIGHT + SIDESHOW_SECTION_LABEL_MARGIN_BOTTOM;
-        let menuY = this._appsText.y + sectionLabelHeight;
 
         let bottomHeight = displayGridRowHeight / 2;
 
-        // extra LABEL_HEIGHT is for the More link
+        this._itemDisplayHeight = global.screen_height - this._appsSection.y - SIDESHOW_SECTION_MISC_HEIGHT * 2 - bottomHeight;
-        this._itemDisplayHeight = global.screen_height - menuY - SIDESHOW_SECTION_MARGIN - sectionLabelHeight - bottomHeight - LABEL_HEIGHT;
-        this._appDisplay = new AppDisplay.AppDisplay(this._width, this._itemDisplayHeight / 2, SIDESHOW_COLUMNS, SIDESHOW_PAD);
-        this._appDisplay.actor.x = SIDESHOW_PAD;
-        this._appDisplay.actor.y = menuY;
-        this.actor.add_actor(this._appDisplay.actor);
         
+        this._appDisplay = new AppDisplay.AppDisplay(this._width, this._itemDisplayHeight / 2, SIDESHOW_COLUMNS, SIDESHOW_PAD);
+        this._appsSection.append(this._appDisplay.actor, Big.BoxPackFlags.EXPAND);
+
+        let moreAppsBox = new Big.Box({x_align: Big.BoxAlignment.END});
         this._moreAppsText = new Clutter.Label({ color: SIDESHOW_TEXT_COLOR,
                                                  font_name: "Sans Bold 14px",
                                                  text: "More...",
-                                               y: this._appDisplay.actor.y + this._appDisplay.actor.height,
                                                  height: LABEL_HEIGHT,
                                                  reactive: true});
+        moreAppsBox.append(this._moreAppsText, Big.BoxPackFlags.EXPAND);
+        this._appsSection.append(moreAppsBox, Big.BoxPackFlags.EXPAND);
 
-        // This sets right-alignment manually.
+        this.actor.add_actor(this._appsSection);
-        this._moreAppsText.x = this._width - this._moreAppsText.width + SIDESHOW_PAD;
+  
-        this.actor.add_actor(this._moreAppsText);
+        this._appsSectionDefaultHeight = this._appsSection.height;
+    
+        this._docsSection = new Big.Box({ x: SIDESHOW_PAD,
+                                          y: this._appsSection.y + this._appsSection.height,
+                                          padding_top: SIDESHOW_SECTION_PADDING_TOP,
+                                          spacing: SIDESHOW_SECTION_SPACING});
 
         this._docsText = new Clutter.Label({ color: SIDESHOW_TEXT_COLOR,
                                            font_name: "Sans Bold 14px",
                                            text: "Recent Documents",
-                                           x: SIDESHOW_PAD,
-                                           y: this._moreAppsText.y + this._moreAppsText.height + SIDESHOW_SECTION_MARGIN,
                                            height: LABEL_HEIGHT});
-        this.actor.add_actor(this._docsText);
+        this._docsSection.append(this._docsText, Big.BoxPackFlags.EXPAND);
 
         this._docDisplay = new DocDisplay.DocDisplay(this._width, this._itemDisplayHeight - this._appDisplay.actor.height, SIDESHOW_COLUMNS, SIDESHOW_PAD);
-        this._docDisplay.actor.x = SIDESHOW_PAD;
+        this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
-        this._docDisplay.actor.y = this._docsText.y + sectionLabelHeight;
-        this.actor.add_actor(this._docDisplay.actor);
 
-        // When we are sliding out documents for the applcations 'More' mode, we need to know what fraction of the 
+        let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END});
-        // animation time we'll spend sliding out the "Recent Documents" section header, so that we can fully clip
+        this._moreDocsText = new Clutter.Label({ color: SIDESHOW_TEXT_COLOR,
-        // the document items in the remaining fraction of time. We do the animation in a linear fashion to make the
+                                                 font_name: "Sans Bold 14px",
-        // two stage tweening process look right.
+                                                 text: "More...",
-        this._docsTextAnimationTimeRatio = me._docsText.height /  me._docDisplay.actor.height;
+                                                 height: LABEL_HEIGHT,
+                                                 reactive: true});
+        moreDocsBox.append(this._moreDocsText, Big.BoxPackFlags.EXPAND);
+        this._docsSection.append(moreDocsBox, Big.BoxPackFlags.EXPAND);
+
+        this.actor.add_actor(this._docsSection);
 
         /* Proxy the activated signals */
         this._appDisplay.connect('activated', function(appDisplay) {
@@ -249,10 +263,20 @@ Sideshow.prototype = {
 
         this._moreAppsText.connect('button-press-event',
             function(o, event) {
-                if (me._moreMode) {
+                if (me._moreAppsMode) {
-                    me._unsetMoreMode();
+                    me._unsetMoreAppsMode();
                 }  else {
-                    me._setMoreMode();
+                    me._setMoreAppsMode();
+                }
+                return true;
+            });
+
+        this._moreDocsText.connect('button-press-event',
+            function(o, event) {
+                if (me._moreDocsMode) {
+                    me._unsetMoreDocsMode();
+                }  else {
+                    me._setMoreDocsMode();
                 }
                 return true;
             });
@@ -275,19 +299,20 @@ Sideshow.prototype = {
         this._appDisplay.hide(); 
         this._docDisplay.hide();
         this._searchEntry.text = '';
-        this._unsetMoreMode();
+        this._unsetMoreAppsMode();
+        this._unsetMoreDocsMode();
     },
 
     // Sets the 'More' mode for browsing applications. Slides down the documents section. Gives more space to 
     // the applications section once sliding of the documents section is completed. 
-    _setMoreMode: function() {
+    _setMoreAppsMode: function() {
-        if (this._moreMode)
+        if (this._moreAppsMode)
             return;
 
-        this._moreMode = true;
+        this._moreAppsMode = true;
 
-        if (!this._docDisplay.actor.has_clip)
+        if (!this._docsSection.has_clip)
-            this._docDisplay.actor.set_clip(0, 0, this._docDisplay.actor.width, this._docDisplay.actor.height);
+            this._docsSection.set_clip(0, 0, this._docsSection.width, this._docsSection.height);
 
         // Move the selection to the applications section if it was in the docs section.
         this._docDisplay.unsetSelected();
@@ -296,17 +321,12 @@ Sideshow.prototype = {
 
         this._moreAppsText.hide(); 
 
-        Tweener.addTween(this._docDisplay.actor,
+        Tweener.addTween(this._docsSection,
-                         { y: this._docDisplay.actor.y + this._docDisplay.actor.height,
+                         { y: this._docsSection.y + this._docsSection.height,
-                           clipHeight: 0,
+                           clipHeightBottom: 0,
-                           time: ANIMATION_TIME * (1 - this._docsTextAnimationTimeRatio),
+                           time: ANIMATION_TIME,
-                           transition: "linear"
+                           transition: "easeOutQuad",
-                         });
+                           onComplete: this._onDocsSectionRemoved,
-        Tweener.addTween(this._docsText,
-                         { y: this._docsText.y + this._docDisplay.actor.height,
-                           time: ANIMATION_TIME * (1 - this._docsTextAnimationTimeRatio),
-                           transition: "linear",
-                           onComplete: this._removeDocsSection,
                            onCompleteScope: this
                          });
                    
@@ -315,87 +335,148 @@ Sideshow.prototype = {
 
     // Unsets the 'More' mode for browsing applications. Updates applications section to have
     // smaller dimensions. Slides in the documents section. 
-    _unsetMoreMode: function() {
+    _unsetMoreAppsMode: function() {
-        if (!this._moreMode)
+        if (!this._moreAppsMode)
             return;
 
-        this._moreMode = false;
+        this._moreAppsMode = false;
 
         this._moreAppsText.hide();  
         this._updateAppsSection();
 
         this._docDisplay.show();
-        Tweener.addTween(this._docsText,
+
-                         { y: this._docsText.y - this._docsText.height,
+        Tweener.addTween(this._docsSection,
-                           clipHeight: this._docsText.height,
+                         { y: this._docsSection.y - this._docsSection.height,
-                           time: ANIMATION_TIME * this._docsTextAnimationTimeRatio,
+                           clipHeightBottom: this._docsSection.height,
-                           transition: "linear",
+                           time: ANIMATION_TIME,
-                           onComplete: this._restoreDocsSection,
+                           transition: "easeOutQuad",
+                           onComplete: this._onDocsSectionRestored,
                            onCompleteScope: this
                          });  
         this.emit('less-activated');
     },
 
-    // Completes sliding out the documents section and hides it so that it doesn't
+    // Hides the documents section so that it doesn't get updated on new searches.
-    // get updated on new searchs. Once that's completed, updates the dimensions of
+    // Updates the dimensions of the applications section.
-    // the applications section.
+    _onDocsSectionRemoved: function() {
-    _removeDocsSection: function() {
         this._docDisplay.hide();
-
+        this._updateAppsSection();
-        Tweener.addTween(this._docsText,
-                         { y: this._docsText.y + this._docsText.height,
-                           clipHeight: 0,
-                           time: ANIMATION_TIME * this._docsTextAnimationTimeRatio,
-                           transition: "linear",
-                           onComplete: this._updateAppsSection,
-                           onCompleteScope: this
-                         });        
-    },
-
-    // Completes restoring the documents section.
-    _restoreDocsSection: function() {                    
-        Tweener.addTween(this._docsText,
-                         { y: this._docsText.y - this._docDisplay.actor.height,
-                           time: ANIMATION_TIME * (1 - this._docsTextAnimationTimeRatio),
-                           transition: "linear"
-                         }); 
-        Tweener.addTween(this._docDisplay.actor,
-                         { y: this._docDisplay.actor.y - this._docDisplay.actor.height,
-                           clipHeight: this._docDisplay.actor.height,
-                           time: ANIMATION_TIME * (1 - this._docsTextAnimationTimeRatio),
-                           transition: "linear",
-                           onComplete: this._onDocsSectionRestored,
-                           onCompleteScope: this
-                         });   
     },
 
     // Selects the first item in the documents section if applications section has no items.  
+    // Removes the clip from the apps section, so that the clip does not limit the size of the 
+    // section if it is expanded later.
     _onDocsSectionRestored: function() { 
         if (!this._appDisplay.hasItems())
             this._docDisplay.selectFirstItem();
+        this._docsSection.remove_clip(); 
     },
 
     // Updates the applications section display and the 'More...' or 'Less...' control associated with it
     // depending on the current mode. This function must only be called once after the 'More' mode has been
-    // changed, which is ensured by _setMoreMode() and _unsetMoreMode() functions. 
+    // changed, which is ensured by _setMoreAppsMode() and _unsetMoreAppsMode() functions. 
     _updateAppsSection: function() {
-        let additionalWidth = ((this._width + SIDESHOW_PAD) / SIDESHOW_COLUMNS) * 
+        if (this._moreAppsMode) {
-                              (EXPANDED_SIDESHOW_COLUMNS - SIDESHOW_COLUMNS);
+            this._appDisplay.updateDimensions(this._width + this._additionalWidth, 
-        if (this._moreMode) {
+                                              this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT,
-            this._appDisplay.updateDimensions(this._width + additionalWidth, 
-                                              this._itemDisplayHeight + LABEL_HEIGHT * 2 + SIDESHOW_SECTION_LABEL_MARGIN_BOTTOM,
                                               EXPANDED_SIDESHOW_COLUMNS);
-            this._moreAppsText.x = this._moreAppsText.x + additionalWidth;
-            this._moreAppsText.y = this._appDisplay.actor.y + this._appDisplay.actor.height;
             this._moreAppsText.text = "Less...";
         } else {
             this._appDisplay.updateDimensions(this._width, this._itemDisplayHeight / 2, SIDESHOW_COLUMNS);
-            this._moreAppsText.x = this._moreAppsText.x - additionalWidth;
-            this._moreAppsText.y = this._appDisplay.actor.y + this._appDisplay.actor.height;
             this._moreAppsText.text = "More...";
         }
         this._moreAppsText.show(); 
+    },
+
+    // Sets the 'More' mode for browsing documents. Slides up the applications section. Gives more space to 
+    // the documents section once sliding of the applications section is completed. 
+    _setMoreDocsMode: function() {
+        if (this._moreDocsMode)
+            return;
+
+        this._moreDocsMode = true;
+
+        if (!this._appsSection.has_clip)
+            this._appsSection.set_clip(0, 0, this._appsSection.width, this._appsSection.height);
+
+        // Move the selection to the docs section if it was in the apps section.
+        this._appDisplay.unsetSelected();
+        if (!this._docDisplay.hasSelected())
+            this._docDisplay.selectFirstItem();
+
+        this._moreDocsText.hide(); 
+        
+        Tweener.addTween(this._appsSection,
+                         { y: this._appsSection.y - this._appsSection.height,
+                           clipHeightTop: 0,
+                           time: ANIMATION_TIME,
+                           transition: "easeOutQuad",
+                           onComplete: this._onAppsSectionRemoved,
+                           onCompleteScope: this
+                         });
+                   
+        this.emit('more-activated'); 
+    },
+
+    // Unsets the 'More' mode for browsing documents. Updates documents section to have
+    // smaller dimensions. Slides in the applications section. 
+    _unsetMoreDocsMode: function() {
+        if (!this._moreDocsMode)
+            return;
+
+        this._moreDocsMode = false;
+
+        this._moreDocsText.hide();  
+
+        this._docsSection.y = this._docsSection.y + this._appsSectionDefaultHeight;
+        this._updateDocsSection();
+
+        this._appDisplay.show();
+
+        Tweener.addTween(this._appsSection,
+                         { y: this._appsSection.y + this._appsSection.height,
+                           clipHeightTop: this._appsSection.height,
+                           time: ANIMATION_TIME,
+                           transition: "easeOutQuad",
+                           onComplete: this._onAppsSectionRestored,
+                           onCompleteScope: this
+                         });  
+        this.emit('less-activated');
+    },
+
+    // Hides the applications section so that it doesn't get updated on new searches.
+    // Updates the dimensions of the documents section.
+    _onAppsSectionRemoved: function() {
+        this._appDisplay.hide();
+        this._docsSection.y = this._searchBox.y + this._searchBox.height;
+        this._updateDocsSection();
+    },
+
+    // Selects the first item in the apps section if docs section has no items. Removes the clip from the apps section, 
+    // so that the clip does not limit the size of the section if it is expanded later.
+    _onAppsSectionRestored: function() { 
+        if (!this._docDisplay.hasItems())
+            this._appDisplay.selectFirstItem();
+        this._appsSection.remove_clip(); 
+    },
+
+    // Updates the documents section display and the 'More...' or 'Less...' control associated with it
+    // depending on the current mode. This function must only be called once after the 'More' mode has been
+    // changed, which is ensured by _setMoreDocsMode() and _unsetMoreDocsMode() functions. 
+    _updateDocsSection: function() {
+        if (this._moreDocsMode) {
+            this._docDisplay.updateDimensions(this._width + this._additionalWidth, 
+                                              this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT,
+                                              EXPANDED_SIDESHOW_COLUMNS);
+            this._moreDocsText.text = "Less...";
+        } else {
+            this._docDisplay.updateDimensions(this._width, this._itemDisplayHeight - (this._appsSectionDefaultHeight - SIDESHOW_SECTION_MISC_HEIGHT), SIDESHOW_COLUMNS);
+            this._moreDocsText.text = "More...";
         }
+        this._moreDocsText.show(); 
+    }
+
 };
 Signals.addSignalMethods(Sideshow.prototype);
 
@@ -539,13 +620,24 @@ Overlay.prototype = {
     }
 };
 
-Tweener.registerSpecialProperty("clipHeight", _clipHeightGet, _clipHeightSet);
+Tweener.registerSpecialProperty("clipHeightBottom", _clipHeightBottomGet, _clipHeightBottomSet);
 
-function _clipHeightGet(actor) {
+function _clipHeightBottomGet(actor) {
-    let [xOffset, yOffset, clipHeight, clipWidth] = actor.get_clip();
+    let [xOffset, yOffset, clipWidth, clipHeight] = actor.get_clip();
     return clipHeight;
 }
 
-function _clipHeightSet(actor, clipHeight) {
+function _clipHeightBottomSet(actor, clipHeight) {
     actor.set_clip(0, 0, actor.width, clipHeight);
 }
+
+Tweener.registerSpecialProperty("clipHeightTop", _clipHeightTopGet, _clipHeightTopSet);
+
+function _clipHeightTopGet(actor) {
+    let [xOffset, yOffset, clipWidth, clipHeight] = actor.get_clip();
+    return clipHeight;
+}
+
+function _clipHeightTopSet(actor, clipHeight) {
+    actor.set_clip(0, actor.height - clipHeight, actor.width, clipHeight);
+}