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

More for applications now displays a category list

Browse Source 
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.
This commit is contained in:
Colin Walters 2009-07-04 12:46:35 -04:00
parent a15ee28177
commit db630b2945
3 changed files with 119 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
js/ui/appDisplay.js
View File

@ -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);
}
},

4
js/ui/genericDisplay.js
View File

@ -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;
},

154
js/ui/overlay.js
View File

@ -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._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;
},