[gnome-shell] Switch GenericDisplay to ShellOverflowList for dynamic height



commit 15e862f974ee7eeae1fd0f7cb012023c2efff119
Author: Colin Walters <walters verbum org>
Date:   Sat Jul 4 15:30:12 2009 -0400

    Switch GenericDisplay to ShellOverflowList for dynamic height
    
    This converts GenericDisplay to totally dynamic layout, where
    we display as many items as we can, and the rest cleanly overflow
    into pages.
    
    For now, remove multi-column; to readd this, we can pack multiple
    display items into a single ShellOverflowList item.

 js/ui/appDisplay.js     |   12 ++--
 js/ui/docDisplay.js     |   14 +++---
 js/ui/genericDisplay.js |  136 ++++++++++++++++-------------------------------
 js/ui/overlay.js        |    7 +--
 4 files changed, 61 insertions(+), 108 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 41dfe7a..0fbad13 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -169,15 +169,15 @@ Signals.addSignalMethods(MenuItem.prototype);
  *
  * width - width available for the display
  */
-function AppDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function AppDisplay(width) {
+    this._init(width);
 }
 
 AppDisplay.prototype = {
     __proto__:  GenericDisplay.GenericDisplay.prototype,
 
-    _init : function(width, numberOfColumns, columnGap) {
-        GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
+    _init : function(width) {
+        GenericDisplay.GenericDisplay.prototype._init.call(this, width);
 
         this._menus = [];
         this._menuDisplays = [];
@@ -429,8 +429,8 @@ AppDisplay.prototype = {
     },
 
     // Creates an AppDisplayItem based on itemInfo, which is expected be an AppInfo object.
-    _createDisplayItem: function(itemInfo) {
-        return new AppDisplayItem(itemInfo, this._columnWidth);
+    _createDisplayItem: function(itemInfo, width) {
+        return new AppDisplayItem(itemInfo, width);
     }
 };
 
diff --git a/js/ui/docDisplay.js b/js/ui/docDisplay.js
index f72096a..5dd10fa 100644
--- a/js/ui/docDisplay.js
+++ b/js/ui/docDisplay.js
@@ -67,15 +67,15 @@ DocDisplayItem.prototype = {
  *
  * width - width available for the display
  */
-function DocDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function DocDisplay(width) {
+    this._init(width);
 }
 
 DocDisplay.prototype = {
     __proto__:  GenericDisplay.GenericDisplay.prototype,
 
-    _init : function(width, numberOfColumns, columnGap) {
-        GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
+    _init : function(width) {
+        GenericDisplay.GenericDisplay.prototype._init.call(this, width);
         let me = this;
         this._recentManager = Gtk.RecentManager.get_default();
         this._docsStale = true;
@@ -170,9 +170,9 @@ DocDisplay.prototype = {
     },
 
     // Creates a DocDisplayItem based on itemInfo, which is expected to be a DocInfo object.
-    _createDisplayItem: function(itemInfo) {
-        return new DocDisplayItem(itemInfo, this._columnWidth);
-    } 
+    _createDisplayItem: function(itemInfo, width) {
+        return new DocDisplayItem(itemInfo, width);
+    }
 };
 
 Signals.addSignalMethods(DocDisplay.prototype);
diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js
index 60380b3..e6285f7 100644
--- a/js/ui/genericDisplay.js
+++ b/js/ui/genericDisplay.js
@@ -333,48 +333,46 @@ Signals.addSignalMethods(GenericDisplayItem.prototype);
  *
  * width - width available for the display
  */
-function GenericDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function GenericDisplay(width) {
+    this._init(width);
 }
 
 GenericDisplay.prototype = {
-    _init : function(width, numberOfColumns, columnGap) {
+    _init : function(width) {
         this._search = '';
         this._expanded = false;
-        this._width = null;
-        this._columnWidth = null;
-
-        this._numberOfColumns = numberOfColumns;
-        this._columnGap = columnGap;
-        if (this._columnGap == null)
-            this._columnGap = DEFAULT_COLUMN_GAP;
+        this._width = width;
 
         this._maxItemsPerPage = null;
-        this._grid = new Tidy.Grid({width: this._width });
+        this._list = new Shell.OverflowList({ width: this._width,
+                                              spacing: 6.0,
+                                              item_height: ITEM_DISPLAY_HEIGHT });
 
-        this._setDimensionsAndMaxItems(width, 0);
+        this._list.connect('notify::n-pages', Lang.bind(this, function (grid, alloc) {
+            this._updateDisplayControl(true);
+        }));
+        this._list.connect('notify::page', Lang.bind(this, function (grid, alloc) {
+            this._updateDisplayControl(false);
+        }));
 
-        this._grid.column_major = true;
-        this._grid.column_gap = this._columnGap;
         // map<itemId, Object> where Object represents the item info
-        this._allItems = {}; 
-        // an array of itemIds of items that match the current request 
+        this._allItems = {};
+        // an array of itemIds of items that match the current request
         // in the order in which the items should be displayed
         this._matchedItems = [];
         // map<itemId, GenericDisplayItem>
-        this._displayedItems = {};  
+        this._displayedItems = {};
         this._displayedItemsCount = 0;
-        this._pageDisplayed = 0;
         this._selectedIndex = -1;
         // These two are public - .actor is the normal "actor subclass" property,
         // but we also expose a .displayControl actor which is separate.
         // See also getSideArea.
-        this.actor = this._grid;
+        this.actor = this._list;
         this.displayControl = new Big.Box({ background_color: ITEM_DISPLAY_BACKGROUND_COLOR,
                                             spacing: 12,
                                             orientation: Big.BoxOrientation.HORIZONTAL});
 
-        this._availableWidthForItemDetails = this._columnWidth;
+        this._availableWidthForItemDetails = width;
         this.selectedItemDetails = new Big.Box({});
     },
 
@@ -461,34 +459,15 @@ GenericDisplay.prototype = {
         return this._displayedItemsCount > 0;
     },
 
-    // Readjusts display layout and the items displayed based on the new dimensions.
-    setExpanded: function(expanded, baseWidth, expandWidth, numberOfColumns) {
-        this._expanded = expanded;
-        this._numberOfColumns = numberOfColumns;
-        this._setDimensionsAndMaxItems(baseWidth, expandWidth);
-        this._grid.width = this._width;
-        this._pageDisplayed = 0;
-        this._displayMatchedItems(true);
-        let gridWidth = this._width;
-        let sideArea = this.getSideArea();
-        if (sideArea) {
-            if (expanded)
-                sideArea.show();
-            else
-                sideArea.hide();
-        }
-        this.emit('expanded');
-    },
-
     // Updates the displayed items and makes the display actor visible.
     show: function() {
-        this._grid.show();
+        this._list.show();
         this._redisplay(true);
     },
 
     // Hides the display actor.
     hide: function() {
-        this._grid.hide();
+        this._list.hide();
         this._filterReset();
         this._removeAllDisplayItems();
     },
@@ -517,9 +496,7 @@ GenericDisplay.prototype = {
         let hadSelected = this.hasSelected();
 
         this._removeAllDisplayItems();
-
-        for (let i = this._maxItemsPerPage * this._pageDisplayed; i < this._matchedItems.length && i < this._maxItemsPerPage * (this._pageDisplayed + 1); i++) {
-            
+        for (let i = 0; i < this._matchedItems.length; i++) {
             this._addDisplayItem(this._matchedItems[i]);
         }
 
@@ -528,11 +505,9 @@ GenericDisplay.prototype = {
             this.selectFirstItem();
         }
 
-        this._updateDisplayControl(resetDisplayControl);
-
         // We currently redisplay matching items and raise the sideshow as part of two different callbacks.
-        // Checking what is under the pointer after a timeout allows us to not merge these callbacks into one, at least for now.  
-        Mainloop.timeout_add(5, 
+        // Checking what is under the pointer after a timeout allows us to not merge these callbacks into one, at least for now.
+        Mainloop.timeout_add(5,
                              Lang.bind(this,
                                        function() {
                                            // Check if the pointer is over one of the items and display the information button if it is.
@@ -559,9 +534,9 @@ GenericDisplay.prototype = {
         }
 
         let itemInfo = this._allItems[itemId];
-        let displayItem = this._createDisplayItem(itemInfo);
+        let displayItem = this._createDisplayItem(itemInfo, this._width);
 
-        displayItem.connect('activate', 
+        displayItem.connect('activate',
                             Lang.bind(this,
                                       function() {
                                           // update the selection
@@ -575,7 +550,7 @@ GenericDisplay.prototype = {
                                           // update the selection
                                           this._selectIndex(this._getIndexOfDisplayedActor(displayItem.actor));
                                       }));
-        this._grid.add_actor(displayItem.actor);
+        this._list.add_actor(displayItem.actor);
         this._displayedItems[itemId] = displayItem;
         this._displayedItemsCount++;
     },
@@ -585,7 +560,7 @@ GenericDisplay.prototype = {
         let displayItem = this._displayedItems[itemId];
         let displayItemIndex = this._getIndexOfDisplayedActor(displayItem.actor);
 
-        if (this.hasSelected() && (this._displayedItemsCount == 1 || !this._grid.visible)) { 
+        if (this.hasSelected() && (this._displayedItemsCount == 1 || !this._list.visible)) {
             this.unsetSelected();
         } else if (this.hasSelected() && displayItemIndex < this._selectedIndex) {
             this.selectUp();
@@ -625,9 +600,9 @@ GenericDisplay.prototype = {
      *             their own while the user was browsing through the result pages.
      */
     _redisplay: function(resetPage) {
-        if (!this._grid.visible)
+        if (!this._list.visible)
             return;
-        
+
         this._refreshCache();
         if (!this._filterActive())
             this._setDefaultList();
@@ -635,7 +610,7 @@ GenericDisplay.prototype = {
             this._doSearchFilter();
 
         if (resetPage)
-            this._pageDisplayed = 0;
+            this._list.page = 0;
 
         this._displayMatchedItems(true);
 
@@ -676,24 +651,6 @@ GenericDisplay.prototype = {
 
     //// Private methods ////
 
-    // Sets this._width, this._columnWidth, and this._maxItemsPerPage based on the
-    // space available for the display, number of columns, and the number of items it can fit.
-    _setDimensionsAndMaxItems: function(baseWidth, expandWidth) {
-        this._width = baseWidth + expandWidth;
-        let gridWidth;
-        let sideArea = this.getSideArea();
-        if (this._expanded && sideArea) {
-            gridWidth = expandWidth;
-            sideArea.width = baseWidth;
-        } else {
-            gridWidth = this._width;
-        }
-        this._columnWidth = (gridWidth - this._columnGap * (this._numberOfColumns - 1)) / this._numberOfColumns;
-        let maxItemsInColumn = 5; // Math.floor(height / ITEM_DISPLAY_HEIGHT);
-        this._maxItemsPerPage =  maxItemsInColumn * this._numberOfColumns;
-        this._grid.width = gridWidth;
-    },
-
     _getSearchMatchedItems: function() {
         let matchedItemsForSearch = {};
         // Break the search up into terms, and search for each
@@ -743,13 +700,12 @@ GenericDisplay.prototype = {
                 return 1;
             else
                 return this._compareItems(a, b);
-        }));        
+        }));
     },
 
-    // Displays the page specified by the pageNumber argument. The pageNumber is 0-based.
+    // Displays the page specified by the pageNumber argument.
     _displayPage: function(pageNumber) {
-        this._pageDisplayed = pageNumber;
-        this._displayMatchedItems(false);
+        this._list.page = pageNumber;
     },
 
     /*
@@ -763,29 +719,29 @@ GenericDisplay.prototype = {
     _updateDisplayControl: function(resetDisplayControl) {
         if (resetDisplayControl) {
             this.displayControl.remove_all();
-            let pageNumber = 0;
-            for (let i = 0; i < this._matchedItems.length; i = i + this._maxItemsPerPage) {
-                let pageControl = new Link.Link({ color: (pageNumber == this._pageDisplayed) ? DISPLAY_CONTROL_SELECTED_COLOR : ITEM_DISPLAY_DESCRIPTION_COLOR,
+            let nPages = this._list.n_pages;
+            let pageNumber = this._list.page;
+            for (let i = 0; i < nPages; i++) {
+                let pageControl = new Link.Link({ color: (i == pageNumber) ? DISPLAY_CONTROL_SELECTED_COLOR : ITEM_DISPLAY_DESCRIPTION_COLOR,
                                                   font_name: "Sans Bold 16px",
-                                                  text: (pageNumber + 1) + "",
+                                                  text: (i+1) + "",
                                                   height: LABEL_HEIGHT,
-                                                  reactive: (pageNumber == this._pageDisplayed) ? false : true});
+                                                  reactive: (i == pageNumber) ? false : true});
                 this.displayControl.append(pageControl.actor, Big.BoxPackFlags.NONE);
 
                 // we use pageNumberLocalScope to get the page number right in the callback function
-                let pageNumberLocalScope = pageNumber;         
+                let pageNumberLocalScope = i;
                 pageControl.connect('clicked',
                                     Lang.bind(this,
                                               function(o, event) {
                                                   this._displayPage(pageNumberLocalScope);
                                               }));
-                pageNumber ++; 
             }
         } else {
             let pageControlActors = this.displayControl.get_children();
-            for (let i = 0; i < pageControlActors.length; i++) { 
+            for (let i = 0; i < pageControlActors.length; i++) {
                 let pageControlActor = pageControlActors[i];
-                if (i == this._pageDisplayed) {
+                if (i == this._list.page) {
                     pageControlActor.color =  DISPLAY_CONTROL_SELECTED_COLOR;
                     pageControlActor.reactive = false;
                 } else {
@@ -796,10 +752,10 @@ GenericDisplay.prototype = {
         }
     },
 
-    // Returns a display item based on its index in the ordering of the 
+    // Returns a display item based on its index in the ordering of the
     // display children.
     _findDisplayedByIndex: function(index) {
-        let displayedActors = this._grid.get_children();
+        let displayedActors = this._list.get_children();
         let actor = displayedActors[index];
         return this._findDisplayedByActor(actor);
     },
@@ -819,9 +775,9 @@ GenericDisplay.prototype = {
     // Returns and index that the actor has in the ordering of the display's
     // children.
     _getIndexOfDisplayedActor: function(actor) {
-        let children = this._grid.get_children();
+        let children = this._list.get_children();
         for (let i = 0; i < children.length; i++) {
-            if (children[i] == actor) 
+            if (children[i] == actor)
                 return i;
         }
         return -1;
diff --git a/js/ui/overlay.js b/js/ui/overlay.js
index 2ee8de8..0c17611 100644
--- a/js/ui/overlay.js
+++ b/js/ui/overlay.js
@@ -30,7 +30,6 @@ const DASH_MIN_WIDTH = 250;
 const DASH_OUTER_PADDING = 4;
 const DASH_SECTION_PADDING = 6;
 const DASH_SECTION_SPACING = 6;
-const DASH_COLUMNS = 1;
 const DASH_CORNER_RADIUS = 5;
 // This is the height of section components other than the item display.
 const DASH_SECTION_MISC_HEIGHT = (LABEL_HEIGHT + DASH_SECTION_SPACING) * 2 + DASH_SECTION_PADDING;
@@ -168,7 +167,7 @@ ItemResults.prototype = {
         // LABEL_HEIGHT is the height of this._resultsText and GenericDisplay.LABEL_HEIGHT is the height
         // of the display controls.
         this._displayHeight = resultsHeight - LABEL_HEIGHT - GenericDisplay.LABEL_HEIGHT - DASH_SECTION_SPACING * 2;
-        this.display = new displayClass(resultsWidth, DASH_COLUMNS, DASH_SECTION_SPACING);
+        this.display = new displayClass(resultsWidth);
 
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
 
@@ -181,7 +180,6 @@ ItemResults.prototype = {
     _setSearchMode: function() {
         this.actor.height = this._resultsHeight /  NUMBER_OF_SECTIONS_IN_SEARCH;
         let displayHeight = this._displayHeight - this._resultsHeight * (NUMBER_OF_SECTIONS_IN_SEARCH - 1) /  NUMBER_OF_SECTIONS_IN_SEARCH;
-        this.display.setExpanded(false, this._resultsWidth, 0, DASH_COLUMNS);
         this.actor.remove_all();
         this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
@@ -190,7 +188,6 @@ ItemResults.prototype = {
 
     _unsetSearchMode: function() {
         this.actor.height = this._resultsHeight;
-        this.display.setExpanded(false, this._resultsWidth, 0, DASH_COLUMNS);
         this.actor.remove_all();
         this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
@@ -379,7 +376,7 @@ Dash.prototype = {
                                             height: LABEL_HEIGHT});
         this._docsSection.append(this._docsText, Big.BoxPackFlags.NONE);
 
-        this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, DASH_COLUMNS, DASH_SECTION_PADDING);
+        this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth);
         this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
 
         let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END});



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]