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

Switch to dynamic layout for Dash

Browse Source 
Instead of laying out the dash contents "manually" and having
the content items explicitly passed their height, just give them
a set width.
This commit is contained in:
Colin Walters 2009-07-03 22:32:23 -04:00 committed by Owen W. Taylor
parent e9966b4aff
commit 66ea19fbfb
4 changed files with 55 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/ui/appDisplay.js
View File

@ -168,17 +168,16 @@ Signals.addSignalMethods(MenuItem.prototype);
* their name if some search filter is applied.
*
* width - width available for the display
* height - height available for the display
*/
function AppDisplay(width, height, numberOfColumns, columnGap) {
this._init(width, height, numberOfColumns, columnGap);
function AppDisplay(width, numberOfColumns, columnGap) {
this._init(width, numberOfColumns, columnGap);
}
AppDisplay.prototype = {
__proto__: GenericDisplay.GenericDisplay.prototype,
_init : function(width, height, numberOfColumns, columnGap) {
GenericDisplay.GenericDisplay.prototype._init.call(this, width, height, numberOfColumns, columnGap);
_init : function(width, numberOfColumns, columnGap) {
GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
this._menus = [];
this._menuDisplays = [];
@ -664,6 +663,11 @@ AppWell.prototype = {
});
this._favoritesArea.redisplay(favorites);
this._runningArea.redisplay(running);
// If it's empty, we need to provide a minimum drop target
if (running.length == 0)
this._runningArea.actor.set_size(this._width, 50);
else
this._runningArea.actor.set_size(-1, -1);
}
};

9
js/ui/docDisplay.js
View File

@ -66,17 +66,16 @@ DocDisplayItem.prototype = {
* The documents are sorted by how recently they were last visited.
*
* width - width available for the display
* height - height available for the display
*/
function DocDisplay(width, height, numberOfColumns, columnGap) {
this._init(width, height, numberOfColumns, columnGap);
function DocDisplay(width, numberOfColumns, columnGap) {
this._init(width, numberOfColumns, columnGap);
}
DocDisplay.prototype = {
__proto__: GenericDisplay.GenericDisplay.prototype,
_init : function(width, height, numberOfColumns, columnGap) {
GenericDisplay.GenericDisplay.prototype._init.call(this, width, height, numberOfColumns, columnGap);
_init : function(width, numberOfColumns, columnGap) {
GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
let me = this;
this._recentManager = Gtk.RecentManager.get_default();
this._docsStale = true;

29
js/ui/genericDisplay.js
View File

@ -27,6 +27,8 @@ const DISPLAY_CONTROL_SELECTED_COLOR = new Clutter.Color();
DISPLAY_CONTROL_SELECTED_COLOR.from_pixel(0x112288ff);
const PREVIEW_BOX_BACKGROUND_COLOR = new Clutter.Color();
PREVIEW_BOX_BACKGROUND_COLOR.from_pixel(0xADADADf0);
const HOT_PINK_DEBUG = new Clutter.Color();
HOT_PINK_DEBUG.from_pixel(0xFF8888FF);
const ITEM_DISPLAY_HEIGHT = 50;
const ITEM_DISPLAY_ICON_SIZE = 48;
@ -330,18 +332,16 @@ Signals.addSignalMethods(GenericDisplayItem.prototype);
* that can be filtered with a search string.
*
* width - width available for the display
* height - height available for the display
*/
function GenericDisplay(width, height, numberOfColumns, columnGap) {
this._init(width, height, numberOfColumns, columnGap);
function GenericDisplay(width, numberOfColumns, columnGap) {
this._init(width, numberOfColumns, columnGap);
}
GenericDisplay.prototype = {
_init : function(width, height, numberOfColumns, columnGap) {
_init : function(width, numberOfColumns, columnGap) {
this._search = '';
this._expanded = false;
this._width = null;
this._height = null;
this._columnWidth = null;
this._numberOfColumns = numberOfColumns;
@ -350,9 +350,9 @@ GenericDisplay.prototype = {
this._columnGap = DEFAULT_COLUMN_GAP;
this._maxItemsPerPage = null;
this._grid = new Tidy.Grid({width: this._width, height: this._height});
this._grid = new Tidy.Grid({width: this._width });
this._setDimensionsAndMaxItems(width, 0, height);
this._setDimensionsAndMaxItems(width, 0);
this._grid.column_major = true;
this._grid.column_gap = this._columnGap;
@ -375,7 +375,6 @@ GenericDisplay.prototype = {
orientation: Big.BoxOrientation.HORIZONTAL});
this._availableWidthForItemDetails = this._columnWidth;
this._availableHeightForItemDetails = this._height;
this.selectedItemDetails = new Big.Box({});
},
@ -463,12 +462,11 @@ GenericDisplay.prototype = {
},
// Readjusts display layout and the items displayed based on the new dimensions.
setExpanded: function(expanded, baseWidth, expandWidth, height, numberOfColumns) {
setExpanded: function(expanded, baseWidth, expandWidth, numberOfColumns) {
this._expanded = expanded;
this._numberOfColumns = numberOfColumns;
this._setDimensionsAndMaxItems(baseWidth, expandWidth, height);
this._setDimensionsAndMaxItems(baseWidth, expandWidth);
this._grid.width = this._width;
this._grid.height = this._height;
this._pageDisplayed = 0;
this._displayMatchedItems(true);
let gridWidth = this._width;
@ -678,25 +676,22 @@ GenericDisplay.prototype = {
//// Private methods ////
// Sets this._width, this._height, this._columnWidth, and this._maxItemsPerPage based on the
// 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, height) {
_setDimensionsAndMaxItems: function(baseWidth, expandWidth) {
this._width = baseWidth + expandWidth;
let gridWidth;
let sideArea = this.getSideArea();
if (this._expanded && sideArea) {
gridWidth = expandWidth;
sideArea.width = baseWidth;
sideArea.height = this._height;
} else {
gridWidth = this._width;
}
this._columnWidth = (gridWidth - this._columnGap * (this._numberOfColumns - 1)) / this._numberOfColumns;
let maxItemsInColumn = Math.floor(height / ITEM_DISPLAY_HEIGHT);
let maxItemsInColumn = 5; // Math.floor(height / ITEM_DISPLAY_HEIGHT);
this._maxItemsPerPage = maxItemsInColumn * this._numberOfColumns;
this._height = maxItemsInColumn * ITEM_DISPLAY_HEIGHT;
this._grid.width = gridWidth;
this._grid.height = this._height;
},
_getSearchMatchedItems: function() {

43
js/ui/overlay.js
View File

@ -27,6 +27,7 @@ const BACKGROUND_SCALE = 2;
const LABEL_HEIGHT = 16;
const DASH_MIN_WIDTH = 250;
const DASH_OUTER_PADDING = 4;
const DASH_SECTION_PADDING = 6;
const DASH_SECTION_SPACING = 6;
const DASH_COLUMNS = 1;
@ -114,7 +115,7 @@ function SearchEntry(width) {
}
SearchEntry.prototype = {
_init : function(width) {
_init : function() {
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
y_align: Big.BoxAlignment.CENTER,
background_color: DASH_SEARCH_BG_COLOR,
@ -122,7 +123,6 @@ SearchEntry.prototype = {
spacing: 4,
padding_left: 4,
padding_right: 4,
width: width,
height: 24
});
@ -168,7 +168,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, this._displayHeight, DASH_COLUMNS, DASH_SECTION_SPACING);
this.display = new displayClass(resultsWidth, DASH_COLUMNS, DASH_SECTION_SPACING);
this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
@ -181,7 +181,7 @@ 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, displayHeight, DASH_COLUMNS);
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 +190,7 @@ ItemResults.prototype = {
_unsetSearchMode: function() {
this.actor.height = this._resultsHeight;
this.display.setExpanded(false, this._resultsWidth, 0, this._displayHeight, DASH_COLUMNS);
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);
@ -225,6 +225,7 @@ Dash.prototype = {
this.actor = new Clutter.Group({});
this.actor.height = global.screen_height;
// dashPane, as well as results and details panes need to be reactive so that the clicks in unoccupied places on them
// are not passed to the transparent background underneath them. This background is used for the workspaces area when
// the additional dash panes are being shown and it handles clicks by closing the additional panes, so that the user
@ -264,9 +265,19 @@ Dash.prototype = {
this.actor.add_actor(dashPane);
this._searchEntry = new SearchEntry(this._width - DASH_SECTION_PADDING * 2 - DASH_BORDER_WIDTH * 2);
this.actor.add_actor(this._searchEntry.actor);
this._searchEntry.actor.set_position(DASH_SECTION_PADDING + DASH_BORDER_WIDTH, dashPane.y + DASH_SECTION_PADDING + DASH_BORDER_WIDTH);
this.dashOuterContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
x: 0,
y: dashPane.y + DASH_BORDER_WIDTH,
width: this._width,
height: global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight,
padding: DASH_OUTER_PADDING
});
this.actor.add_actor(this.dashOuterContainer);
this.dashContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL });
this.dashOuterContainer.append(this.dashContainer, Big.BoxPackFlags.EXPAND);
this._searchEntry = new SearchEntry();
this.dashContainer.append(this._searchEntry.actor, Big.BoxPackFlags.NONE);
this._searchQueued = false;
this._searchEntry.entry.connect('text-changed', function (se, prop) {
@ -335,9 +346,7 @@ Dash.prototype = {
font_name: "Sans Bold 14px",
text: "Applications",
height: LABEL_HEIGHT});
this._appsSection = new Big.Box({ x: DASH_SECTION_PADDING,
y: this._searchEntry.actor.y + this._searchEntry.actor.height + DASH_SECTION_PADDING,
padding_top: DASH_SECTION_PADDING,
this._appsSection = new Big.Box({ padding_top: DASH_SECTION_PADDING,
spacing: DASH_SECTION_SPACING});
this._appsSection.append(this._appsText, Big.BoxPackFlags.EXPAND);
@ -357,22 +366,20 @@ Dash.prototype = {
moreAppsBox.append(this._moreAppsLink.actor, Big.BoxPackFlags.EXPAND);
this._appsSection.append(moreAppsBox, Big.BoxPackFlags.EXPAND);
this.actor.add_actor(this._appsSection);
this.dashContainer.append(this._appsSection, Big.BoxPackFlags.NONE);
this._appsSectionDefaultHeight = this._appsSection.height;
this._docsSection = new Big.Box({ x: DASH_SECTION_PADDING,
y: this._appsSection.y + this._appsSection.height,
padding_top: DASH_SECTION_PADDING,
this._docsSection = new Big.Box({ padding_top: DASH_SECTION_PADDING,
spacing: DASH_SECTION_SPACING});
this._docsText = new Clutter.Text({ color: DASH_TEXT_COLOR,
font_name: "Sans Bold 14px",
text: "Recent Documents",
height: LABEL_HEIGHT});
this._docsSection.append(this._docsText, Big.BoxPackFlags.EXPAND);
this._docsSection.append(this._docsText, Big.BoxPackFlags.NONE);
this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, this._itemDisplayHeight - this._appsContent.height, DASH_COLUMNS, DASH_SECTION_PADDING);
this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, DASH_COLUMNS, DASH_SECTION_PADDING);
this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END});
@ -383,7 +390,7 @@ Dash.prototype = {
moreDocsBox.append(this._moreDocsLink.actor, Big.BoxPackFlags.EXPAND);
this._docsSection.append(moreDocsBox, Big.BoxPackFlags.EXPAND);
this.actor.add_actor(this._docsSection);
this.dashContainer.append(this._docsSection, Big.BoxPackFlags.EXPAND);
this._docsSectionDefaultHeight = this._docsSection.height;