[gnome-shell] More for applications now displays a category list
- From: Colin Walters <walters src gnome org>
- To: svn-commits-list gnome org
- Subject: [gnome-shell] More for applications now displays a category list
- Date: Mon, 6 Jul 2009 20:17:33 +0000 (UTC)
commit db630b29459e0c337dd8dc15813ab523d44f23df
Author: Colin Walters <walters verbum org>
Date: Sat Jul 4 12:46:35 2009 -0400
More for applications now displays a category list
Rework the previously extant Application category code to display
in the expanded list. Add a "Frequent" category which corresponds
to the most_used_apps, and selected by default.
Instead of adding the background and shadow as expanded items to
the results/details panes as fixed, we slave the background/shadow
sizes to the results using notify::allocation.
Also clean up the code for sizing the details pane, using a common
function which adjusts its x position in one place.
js/ui/appDisplay.js | 53 +++++++++-------
js/ui/genericDisplay.js | 4 +-
js/ui/overlay.js | 154 +++++++++++++++++++++++++++--------------------
3 files changed, 119 insertions(+), 92 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 372c364..cff5282 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -216,6 +216,7 @@ AppDisplay.prototype = {
this.connect('expanded', Lang.bind(this, function (self) {
this._filterReset();
}));
+ this._filterReset();
},
moveRight: function() {
@@ -235,7 +236,7 @@ AppDisplay.prototype = {
},
// Override genericDisplay.js
- getSideArea: function() {
+ getNavigationArea: function() {
return this._menuDisplay;
},
@@ -261,11 +262,7 @@ AppDisplay.prototype = {
_filterReset: function() {
GenericDisplay.GenericDisplay.prototype._filterReset.call(this);
- if (this._activeMenu != null)
- this._activeMenu.setState(MENU_UNSELECTED);
- this._activeMenuIndex = -1;
- this._activeMenu = null;
- this._focusInMenu = true;
+ this._selectMenuIndex(0);
},
//// Private ////
@@ -280,28 +277,36 @@ AppDisplay.prototype = {
this._menuDisplays[index].setState(MENU_SELECTED);
},
+ _addMenuItem: function(name, id, icon, index) {
+ let display = new MenuItem(name, id, icon);
+ this._menuDisplays.push(display);
+ display.connect('state-changed', Lang.bind(this, function (display) {
+ let activated = display.getState() != MENU_UNSELECTED;
+ if (!activated && display == this._activeMenu) {
+ this._activeMenuIndex = -1;
+ this._activeMenu = null;
+ } else if (activated) {
+ if (display != this._activeMenu && this._activeMenu != null)
+ this._activeMenu.setState(MENU_UNSELECTED);
+ this._activeMenuIndex = index;
+ this._activeMenu = display;
+ if (id == null) {
+ this._activeMenuApps = this._appMonitor.get_most_used_apps(0, 30);
+ } else {
+ this._activeMenuApps = this._appSystem.get_applications_for_menu(id);
+ }
+ }
+ this._redisplay();
+ }));
+ this._menuDisplay.append(display.actor, 0);
+ },
+
_redisplayMenus: function() {
this._menuDisplay.remove_all();
+ this._addMenuItem('Frequent', null, 'gtk-select-all');
for (let i = 0; i < this._menus.length; i++) {
let menu = this._menus[i];
- let display = new MenuItem(menu.name, menu.id, menu.icon);
- this._menuDisplays.push(display);
- let menuIndex = i;
- display.connect('state-changed', Lang.bind(this, function (display) {
- let activated = display.getState() != MENU_UNSELECTED;
- if (!activated && display == this._activeMenu) {
- this._activeMenuIndex = -1;
- this._activeMenu = null;
- } else if (activated) {
- if (display != this._activeMenu && this._activeMenu != null)
- this._activeMenu.setState(MENU_UNSELECTED);
- this._activeMenuIndex = menuIndex;
- this._activeMenu = display;
- this._activeMenuApps = this._appSystem.get_applications_for_menu(menu.id);
- }
- this._redisplay();
- }));
- this._menuDisplay.append(display.actor, 0);
+ this._addMenuItem(menu.name, menu.id, menu.icon, i+1);
}
},
diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js
index 56dc4eb..56325c9 100644
--- a/js/ui/genericDisplay.js
+++ b/js/ui/genericDisplay.js
@@ -355,7 +355,7 @@ GenericDisplay.prototype = {
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.
+ // See also getNavigationArea.
this.actor = this._list;
this.displayControl = new Big.Box({ background_color: ITEM_DISPLAY_BACKGROUND_COLOR,
spacing: 12,
@@ -463,7 +463,7 @@ GenericDisplay.prototype = {
// Returns an actor which acts as a sidebar; this is used for
// the applications category view
- getSideArea: function () {
+ getNavigationArea: function () {
return null;
},
diff --git a/js/ui/overlay.js b/js/ui/overlay.js
index 0c17611..719f666 100644
--- a/js/ui/overlay.js
+++ b/js/ui/overlay.js
@@ -155,42 +155,55 @@ ItemResults.prototype = {
this._resultsWidth = resultsWidth;
this._resultsHeight = resultsHeight;
- this.actor = new Big.Box({ height: resultsHeight,
+ this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
+ height: resultsHeight,
padding: DASH_SECTION_PADDING + DASH_BORDER_WIDTH,
spacing: DASH_SECTION_SPACING });
this._resultsText = new Clutter.Text({ color: DASH_TEXT_COLOR,
font_name: "Sans Bold 14px",
text: labelText });
- this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
+
+ this.resultsContainer = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
+ spacing: 4 });
+ this.navContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL });
+ this.resultsContainer.append(this.navContainer, Big.BoxPackFlags.NONE);
// 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.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
+ this.navArea = this.display.getNavigationArea();
+ if (this.navArea)
+ this.navContainer.append(this.navArea, Big.BoxPackFlags.EXPAND);
+
+ this.resultsContainer.append(this.display.actor, Big.BoxPackFlags.EXPAND);
this.controlBox = new Big.Box({ x_align: Big.BoxAlignment.CENTER });
this.controlBox.append(this.display.displayControl, Big.BoxPackFlags.NONE);
- this.actor.append(this.controlBox, Big.BoxPackFlags.END);
+ this._unsetSearchMode();
},
_setSearchMode: function() {
+ if (this.navArea)
+ this.navArea.hide();
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.actor.remove_all();
this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
- this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
+ this.actor.append(this.resultsContainer, Big.BoxPackFlags.EXPAND);
this.actor.append(this.controlBox, Big.BoxPackFlags.END);
},
_unsetSearchMode: function() {
+ if (this.navArea)
+ this.navArea.show();
this.actor.height = this._resultsHeight;
this.actor.remove_all();
this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
- this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
+ this.actor.append(this.resultsContainer, Big.BoxPackFlags.EXPAND);
this.actor.append(this.controlBox, Big.BoxPackFlags.END);
}
}
@@ -209,8 +222,8 @@ Dash.prototype = {
this._width = displayGridColumnWidth;
this._displayWidth = displayGridColumnWidth - DASH_SECTION_PADDING * 2;
- this._resultsWidth = displayGridColumnWidth;
- this._detailsWidth = displayGridColumnWidth * 2;
+ this._resultsWidth = displayGridColumnWidth;
+ this._detailsWidth = displayGridColumnWidth * 2;
let bottomHeight = DASH_SECTION_PADDING;
@@ -392,24 +405,21 @@ Dash.prototype = {
this._docsSectionDefaultHeight = this._docsSection.height;
// The "More" or search results area
- this._resultsAppsSection = new ItemResults(this._displayWidth, resultsHeight, AppDisplay.AppDisplay, "Applications");
- this._resultsDocsSection = new ItemResults(this._displayWidth, resultsHeight, DocDisplay.DocDisplay, "Documents");
+ this._resultsAppsSection = new ItemResults(this._resultsWidth, resultsHeight, AppDisplay.AppDisplay, "Applications");
+ this._resultsDocsSection = new ItemResults(this._resultsWidth, resultsHeight, DocDisplay.DocDisplay, "Documents");
- this._resultsPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
+ this._resultsPane = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
x: this._width,
y: Panel.PANEL_HEIGHT + DASH_SECTION_PADDING,
- width: this._resultsWidth + SHADOW_WIDTH,
height: resultsHeight,
reactive: true });
let resultsBackground = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- width: this._resultsWidth,
height: resultsHeight,
corner_radius: DASH_CORNER_RADIUS,
border: DASH_BORDER_WIDTH,
border_color: DASH_BORDER_COLOR });
-
- this._resultsPane.append(resultsBackground, Big.BoxPackFlags.EXPAND);
+ this._resultsPane.add_actor(resultsBackground);
let resultsLeft = global.create_horizontal_gradient(PANE_LEFT_COLOR,
PANE_MIDDLE_COLOR);
@@ -418,16 +428,20 @@ Dash.prototype = {
let resultsShadow = global.create_horizontal_gradient(SHADOW_COLOR,
TRANSPARENT_COLOR);
resultsShadow.set_width(SHADOW_WIDTH);
-
+
resultsBackground.append(resultsLeft, Big.BoxPackFlags.EXPAND);
resultsBackground.append(resultsRight, Big.BoxPackFlags.EXPAND);
- this._resultsPane.append(resultsShadow, Big.BoxPackFlags.NONE);
+ this._resultsPane.add_actor(resultsShadow);
+ this._resultsPane.connect('notify::allocation', Lang.bind(this, function (b, a) {
+ let width = this._resultsPane.width;
+ resultsBackground.width = width;
+ resultsShadow.width = width;
+ }));
this.actor.add_actor(this._resultsPane);
this._resultsPane.hide();
this._detailsPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- x: this._width,
y: Panel.PANEL_HEIGHT + DASH_SECTION_PADDING,
width: this._detailsWidth + SHADOW_WIDTH,
height: detailsHeight,
@@ -481,36 +495,27 @@ Dash.prototype = {
this._resultsDocsSection.display.connect('activated', function(resultsDocsDisplay) {
me.emit('activated');
});
- this._docDisplay.connect('selected', function(docDisplay) {
- me._resultsDocsSection.display.unsetSelected();
- me._resultsAppsSection.display.unsetSelected();
- if (!me._detailsShowing()) {
- me._detailsPane.show();
- me.emit('panes-displayed');
- }
- me._detailsContent.remove_all();
- me._detailsContent.append(me._docDisplay.selectedItemDetails, Big.BoxPackFlags.NONE);
- });
- this._resultsDocsSection.display.connect('selected', function(resultsDocDisplay) {
- me._docDisplay.unsetSelected();
- me._resultsAppsSection.display.unsetSelected();
- if (!me._detailsShowing()) {
- me._detailsPane.show();
- me.emit('panes-displayed');
- }
- me._detailsContent.remove_all();
- me._detailsContent.append(me._resultsDocsSection.display.selectedItemDetails, Big.BoxPackFlags.NONE);
- });
- this._resultsAppsSection.display.connect('selected', function(resultsAppDisplay) {
- me._docDisplay.unsetSelected();
- me._resultsDocsSection.display.unsetSelected();
- if (!me._detailsShowing()) {
- me._detailsPane.show();
- me.emit('panes-displayed');
- }
- me._detailsContent.remove_all();
- me._detailsContent.append(me._resultsAppsSection.display.selectedItemDetails, Big.BoxPackFlags.NONE);
- });
+ this._docDisplay.connect('selected', Lang.bind(this, function(docDisplay) {
+ this._resultsDocsSection.display.unsetSelected();
+ this._resultsAppsSection.display.unsetSelected();
+ this._showDetails();
+ this._detailsContent.remove_all();
+ this._detailsContent.append(this._docDisplay.selectedItemDetails, Big.BoxPackFlags.NONE);
+ }));
+ this._resultsDocsSection.display.connect('selected', Lang.bind(this, function(resultsDocDisplay) {
+ this._docDisplay.unsetSelected();
+ this._resultsAppsSection.display.unsetSelected();
+ this._showDetails();
+ this._detailsContent.remove_all();
+ this._detailsContent.append(this._resultsDocsSection.display.selectedItemDetails, Big.BoxPackFlags.NONE);
+ }));
+ this._resultsAppsSection.display.connect('selected', Lang.bind(this, function(resultsAppDisplay) {
+ this._docDisplay.unsetSelected();
+ this._resultsDocsSection.display.unsetSelected();
+ this._showDetails();
+ this._detailsContent.remove_all();
+ this._detailsContent.append(this._resultsAppsSection.display.selectedItemDetails, Big.BoxPackFlags.NONE);
+ }));
this._moreAppsLink.connect('clicked',
function(o, event) {
@@ -567,12 +572,11 @@ Dash.prototype = {
this._moreAppsMode = true;
this._resultsAppsSection.display.show();
- this._resultsPane.add_actor(this._resultsAppsSection.actor);
+ this._resultsPane.append(this._resultsAppsSection.actor, Big.BoxPackFlags.EXPAND);
this._resultsPane.show();
this._moreAppsLink.setText("Less...");
-
- this._detailsPane.x = this._width + this._resultsWidth;
+ this._repositionDetails();
this.emit('panes-displayed');
},
@@ -586,11 +590,10 @@ Dash.prototype = {
this._resultsPane.remove_actor(this._resultsAppsSection.actor);
this._resultsAppsSection.display.hide();
this._resultsPane.hide();
-
- this._moreAppsLink.setText("More...");
- this._detailsPane.x = this._width;
+ this._moreAppsLink.setText("More...");
+ this._repositionDetails();
if (!this._detailsShowing()) {
this.emit('panes-removed');
}
@@ -606,12 +609,13 @@ Dash.prototype = {
this._moreDocsMode = true;
this._resultsDocsSection.display.show();
- this._resultsPane.add_actor(this._resultsDocsSection.actor);
+ this._resultsPane.append(this._resultsDocsSection.actor, Big.BoxPackFlags.EXPAND);
this._resultsPane.show();
-
+
this._moreDocsLink.setText("Less...");
-
- this._detailsPane.x = this._width + this._resultsWidth;
+
+ this._repositionDetails();
+
this.emit('panes-displayed');
},
@@ -625,10 +629,10 @@ Dash.prototype = {
this._resultsPane.hide();
this._resultsPane.remove_actor(this._resultsDocsSection.actor);
this._resultsDocsSection.display.hide();
-
+
this._moreDocsLink.setText("More...");
- this._detailsPane.x = this._width;
+ this._repositionDetails();
if (!this._detailsShowing()) {
this.emit('panes-removed');
@@ -636,25 +640,27 @@ Dash.prototype = {
},
_setSearchMode: function() {
+ this._repositionDetails();
+
if (this._resultsShowing())
return;
this._resultsAppsSection._setSearchMode();
this._resultsAppsSection.display.show();
- this._resultsPane.add_actor(this._resultsAppsSection.actor);
+ this._resultsPane.append(this._resultsAppsSection.actor, Big.BoxPackFlags.EXPAND);
- this._resultsDocsSection._setSearchMode();
+ this._resultsDocsSection._setSearchMode();
this._resultsDocsSection.display.show();
- this._resultsPane.add_actor(this._resultsDocsSection.actor);
- this._resultsDocsSection.actor.set_y(this._resultsAppsSection.actor.height);
+ this._resultsPane.append(this._resultsDocsSection.actor, Big.BoxPackFlags.EXPAND);
this._resultsPane.show();
- this._detailsPane.x = this._width + this._resultsWidth;
this.emit('panes-displayed');
},
_unsetSearchMode: function() {
+ this._repositionDetails();
+
if (this._moreDocsMode || this._moreAppsMode || !this._resultsShowing())
return;
@@ -669,13 +675,29 @@ Dash.prototype = {
this._resultsDocsSection._unsetSearchMode();
this._resultsDocsSection.actor.set_y(0);
- this._detailsPane.x = this._width;
+ this._repositionDetails();
if (!this._detailsShowing()) {
this.emit('panes-removed');
}
},
+ _repositionDetails: function () {
+ let x;
+ if (this._resultsPane.visible)
+ x = this._resultsPane.x + this._resultsPane.width;
+ else
+ x = this._width;
+ x += DASH_SECTION_PADDING;
+ this._detailsPane.x = x;
+ },
+
+ _showDetails: function () {
+ this._detailsPane.show();
+ this._repositionDetails();
+ this.emit('panes-displayed');
+ },
+
_detailsShowing: function() {
return this._detailsPane.visible;
},
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
