diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index a3e9d50cf..e7f15f2e2 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -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); } }; diff --git a/js/ui/docDisplay.js b/js/ui/docDisplay.js index e727de328..f72096a88 100644 --- a/js/ui/docDisplay.js +++ b/js/ui/docDisplay.js @@ -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; diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js index 9d9c328c2..60380b3f9 100644 --- a/js/ui/genericDisplay.js +++ b/js/ui/genericDisplay.js @@ -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,8 +375,7 @@ GenericDisplay.prototype = { orientation: Big.BoxOrientation.HORIZONTAL}); this._availableWidthForItemDetails = this._columnWidth; - this._availableHeightForItemDetails = this._height; - this.selectedItemDetails = new Big.Box({}); + this.selectedItemDetails = new Big.Box({}); }, //// Public methods //// @@ -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() { diff --git a/js/ui/overlay.js b/js/ui/overlay.js index e16423e2c..04865a4dc 100644 --- a/js/ui/overlay.js +++ b/js/ui/overlay.js @@ -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,8 +225,9 @@ 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 + // 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 // can interact with the workspaces. However, this behavior is not desirable when the click is actually over a pane. // @@ -261,12 +262,22 @@ Dash.prototype = { dashBackground.append(dashLeft, Big.BoxPackFlags.EXPAND); dashBackground.append(dashRight, Big.BoxPackFlags.EXPAND); dashPane.append(dashShadow, Big.BoxPackFlags.NONE); - + 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;