brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 570579: Redo the layout of overlay components

Browse Source 
Divide the screen into a grid and use it to determine the layout of the overlay components in a more consistent manner.

Remove the 'Add workspace' control and slide the workspaces
display to the side without scaling it when switching to the 'More' mode.
This commit is contained in:
Marina
2009-02-10 17:38:06 -05:00
parent de1c150f50
commit 2d3988c5fc
5 changed files with 149 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/ui/genericDisplay.js
View File

@ -22,10 +22,9 @@ const ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR = new Clutter.Color();
ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR.from_pixel(0x00ff0055);
const ITEM_DISPLAY_HEIGHT = 50;
const MIN_ITEM_DISPLAY_WIDTH = 230;
const ITEM_DISPLAY_ICON_SIZE = 48;
const ITEM_DISPLAY_PADDING = 1;
const COLUMN_GAP = 6;
const DEFAULT_COLUMN_GAP = 6;
/* This is a virtual class that represents a single display item containing
* a name, a description, and an icon. It allows selecting an item and represents
@ -165,22 +164,27 @@ Signals.addSignalMethods(GenericDisplayItem.prototype);
* width - width available for the display
* height - height available for the display
*/
function GenericDisplay(width, height) {
this._init(width, height);
function GenericDisplay(width, height, numberOfColumns, columnGap) {
this._init(width, height, numberOfColumns, columnGap);
}
GenericDisplay.prototype = {
_init : function(width, height) {
_init : function(width, height, numberOfColumns, columnGap) {
this._search = '';
this._width = null;
this._height = null;
this._columnWidth = null;
this._maxColumns = null;
this._numberOfColumns = numberOfColumns;
this._columnGap = columnGap;
if (this._columnGap == null)
this._columnGap = DEFAULT_COLUMN_GAP;
this._maxItems = null;
this._setDimensionsAndMaxItems(width, height);
this._grid = new Tidy.Grid({width: this._width, height: this._height});
this._grid.column_major = true;
this._grid.column_gap = COLUMN_GAP;
this._grid.column_gap = this._columnGap;
// map<itemId, Object> where Object represents the item info
this._allItems = {};
// map<itemId, GenericDisplayItem>
@ -282,7 +286,8 @@ GenericDisplay.prototype = {
},
// Readjusts display layout and the items displayed based on the new dimensions.
updateDimensions: function(width, height) {
updateDimensions: function(width, height, numberOfColumns) {
this._numberOfColumns = numberOfColumns;
this._setDimensionsAndMaxItems(width, height);
this._grid.width = this._width;
this._grid.height = this._height;
@ -405,17 +410,13 @@ GenericDisplay.prototype = {
//// Private methods ////
// Sets this._width, this._height, this._maxColumns, this._columnWidth, and
// this._maxItems based on the space available for the display and the number
// of items it can fit.
// Sets this._width, this._height, this._columnWidth, and this._maxItems based on the
// space available for the display, number of columns, and the number of items it can fit.
_setDimensionsAndMaxItems: function(width, height) {
this._width = width;
this._columnWidth = (this._width - this._columnGap * (this._numberOfColumns - 1)) / this._numberOfColumns;
let maxItemsInColumn = Math.floor(height / ITEM_DISPLAY_HEIGHT);
// we always want to try to display at lease one column, even if its
// width is less then MIN_ITEM_DISPLAY_WIDTH
this._maxColumns = Math.max(Math.floor(width / (MIN_ITEM_DISPLAY_WIDTH + COLUMN_GAP)), 1);
this._columnWidth = (width - COLUMN_GAP * (this._maxColumns - 1)) / this._maxColumns;
this._maxItems = maxItemsInColumn * this._maxColumns;
this._maxItems = maxItemsInColumn * this._numberOfColumns;
this._height = maxItemsInColumn * ITEM_DISPLAY_HEIGHT;
},