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

Remove a lot of obsolete code from old Sideshow (now Dash)

Browse Source
This commit is contained in:
Colin Walters 2009-06-02 13:13:51 -04:00
parent 14bb73220b
commit 837683004d
1 changed files with 69 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

508
js/ui/overlay.js
View File

@ -26,22 +26,22 @@ ROOT_OVERLAY_COLOR.from_pixel(0x000000bb);
const BACKGROUND_SCALE = 2; const BACKGROUND_SCALE = 2;
const LABEL_HEIGHT = 16; const LABEL_HEIGHT = 16;
// We use SIDESHOW_PAD for the padding on the left side of the sideshow and as a gap // We use DASH_PAD for the padding on the left side of the sideshow and as a gap
// between sideshow columns. // between sideshow columns.
const SIDESHOW_PAD = 6; const DASH_PAD = 6;
const SIDESHOW_MIN_WIDTH = 250; const DASH_MIN_WIDTH = 250;
const SIDESHOW_SECTION_PADDING_TOP = 6; const DASH_SECTION_PADDING_TOP = 6;
const SIDESHOW_SECTION_SPACING = 6; const DASH_SECTION_SPACING = 6;
const SIDESHOW_COLUMNS = 1; const DASH_COLUMNS = 1;
const DETAILS_CORNER_RADIUS = 5; const DETAILS_CORNER_RADIUS = 5;
const DETAILS_BORDER_WIDTH = 1; const DETAILS_BORDER_WIDTH = 1;
const DETAILS_PADDING = 6; const DETAILS_PADDING = 6;
// This is the height of section components other than the item display. // This is the height of section components other than the item display.
const SIDESHOW_SECTION_MISC_HEIGHT = (LABEL_HEIGHT + SIDESHOW_SECTION_SPACING) * 2 + SIDESHOW_SECTION_PADDING_TOP; const DASH_SECTION_MISC_HEIGHT = (LABEL_HEIGHT + DASH_SECTION_SPACING) * 2 + DASH_SECTION_PADDING_TOP;
const SIDESHOW_SEARCH_BG_COLOR = new Clutter.Color(); const DASH_SEARCH_BG_COLOR = new Clutter.Color();
SIDESHOW_SEARCH_BG_COLOR.from_pixel(0xffffffff); DASH_SEARCH_BG_COLOR.from_pixel(0xffffffff);
const SIDESHOW_TEXT_COLOR = new Clutter.Color(); const DASH_TEXT_COLOR = new Clutter.Color();
SIDESHOW_TEXT_COLOR.from_pixel(0xffffffff); DASH_TEXT_COLOR.from_pixel(0xffffffff);
const DETAILS_BORDER_COLOR = new Clutter.Color(); const DETAILS_BORDER_COLOR = new Clutter.Color();
DETAILS_BORDER_COLOR.from_pixel(0xffffffff); DETAILS_BORDER_COLOR.from_pixel(0xffffffff);
@ -68,18 +68,18 @@ const ROWS_REGULAR_SCREEN = 8;
const COLUMNS_WIDE_SCREEN = 5; const COLUMNS_WIDE_SCREEN = 5;
const ROWS_WIDE_SCREEN = 10; const ROWS_WIDE_SCREEN = 10;
// Padding around workspace grid / Spacing between Sideshow and Workspaces // Padding around workspace grid / Spacing between Dash and Workspaces
const WORKSPACE_GRID_PADDING = 12; const WORKSPACE_GRID_PADDING = 12;
const COLUMNS_FOR_WORKSPACES_REGULAR_SCREEN = 3; const COLUMNS_FOR_WORKSPACES_REGULAR_SCREEN = 3;
const ROWS_FOR_WORKSPACES_REGULAR_SCREEN = 6; const ROWS_FOR_WORKSPACES_REGULAR_SCREEN = 6;
const WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN = 4 - 0.25; const WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN = 4 - 0.25;
const EXPANDED_SIDESHOW_COLUMNS_REGULAR_SCREEN = 2; const EXPANDED_DASH_COLUMNS_REGULAR_SCREEN = 2;
const COLUMNS_FOR_WORKSPACES_WIDE_SCREEN = 4; const COLUMNS_FOR_WORKSPACES_WIDE_SCREEN = 4;
const ROWS_FOR_WORKSPACES_WIDE_SCREEN = 8; const ROWS_FOR_WORKSPACES_WIDE_SCREEN = 8;
const WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN = 5 - 0.25; const WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN = 5 - 0.25;
const EXPANDED_SIDESHOW_COLUMNS_WIDE_SCREEN = 3; const EXPANDED_DASH_COLUMNS_WIDE_SCREEN = 3;
// A multi-state; PENDING is used during animations // A multi-state; PENDING is used during animations
const STATE_ACTIVE = true; const STATE_ACTIVE = true;
@ -98,7 +98,7 @@ SearchEntry.prototype = {
_init : function(width) { _init : function(width) {
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
y_align: Big.BoxAlignment.CENTER, y_align: Big.BoxAlignment.CENTER,
background_color: SIDESHOW_SEARCH_BG_COLOR, background_color: DASH_SEARCH_BG_COLOR,
corner_radius: 4, corner_radius: 4,
spacing: 4, spacing: 4,
padding_left: 4, padding_left: 4,
@ -128,160 +128,56 @@ SearchEntry.prototype = {
} }
}; };
function Sideshow() { function Dash() {
this._init(); this._init();
} }
Sideshow.prototype = { Dash.prototype = {
_init : function() { _init : function() {
let me = this; let me = this;
this._moreAppsMode = STATE_INACTIVE;
this._moreDocsMode = STATE_INACTIVE;
let asideXFactor = wideScreen ? WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN : WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN; let asideXFactor = wideScreen ? WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN : WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN;
this._expandedSideshowColumns = wideScreen ? EXPANDED_SIDESHOW_COLUMNS_WIDE_SCREEN : EXPANDED_SIDESHOW_COLUMNS_REGULAR_SCREEN; this._expandedDashColumns = wideScreen ? EXPANDED_DASH_COLUMNS_WIDE_SCREEN : EXPANDED_DASH_COLUMNS_REGULAR_SCREEN;
this._width = displayGridColumnWidth; this._width = displayGridColumnWidth;
this._displayWidth = this._width - SIDESHOW_PAD; this._displayWidth = this._width - DASH_PAD;
this._expandedWidth = displayGridColumnWidth * asideXFactor; this._expandedWidth = displayGridColumnWidth * asideXFactor;
// this figures out the additional width we can give to the display in the 'More' mode, // this figures out the additional width we can give to the display in the 'More' mode,
// assuming that we want to keep the columns the same width in both modes // assuming that we want to keep the columns the same width in both modes
this._additionalWidth = (this._width / SIDESHOW_COLUMNS) * this._additionalWidth = (this._width / DASH_COLUMNS) *
(this._expandedSideshowColumns - SIDESHOW_COLUMNS); (this._expandedDashColumns - DASH_COLUMNS);
let bottomHeight = displayGridRowHeight / 2; let bottomHeight = displayGridRowHeight / 2;
let global = Shell.Global.get(); let global = Shell.Global.get();
let previewWidth = this._expandedWidth - this._width - let previewWidth = this._expandedWidth - this._width -
this._additionalWidth - SIDESHOW_SECTION_SPACING; this._additionalWidth - DASH_SECTION_SPACING;
let previewHeight = global.screen_height - Panel.PANEL_HEIGHT - SIDESHOW_PAD - bottomHeight; let previewHeight = global.screen_height - Panel.PANEL_HEIGHT - DASH_PAD - bottomHeight;
this.actor = new Clutter.Group(); this.actor = new Clutter.Group();
this.actor.height = global.screen_height; this.actor.height = global.screen_height;
this._searchEntry = new SearchEntry(this._displayWidth);
this.actor.add_actor(this._searchEntry.actor);
this._searchEntry.actor.set_position(SIDESHOW_PAD, Panel.PANEL_HEIGHT + SIDESHOW_PAD); this._appsSection = new Big.Box({ x: DASH_PAD,
y: Panel.PANEL_HEIGHT + DASH_PAD,
padding_top: DASH_SECTION_PADDING_TOP,
spacing: DASH_SECTION_SPACING});
this._searchQueued = false; this._itemDisplayHeight = global.screen_height - this._appsSection.y - DASH_SECTION_MISC_HEIGHT * 2 - bottomHeight;
this._searchEntry.entry.connect('text-changed', function (se, prop) {
if (me._searchQueued)
return;
me._searchQueued = true;
Mainloop.timeout_add(250, function() {
// Strip leading and trailing whitespace
let text = me._searchEntry.entry.text.replace(/^\s+/g, "").replace(/\s+$/g, "");
me._searchQueued = false;
me._appDisplay.setSearch(text);
me._docDisplay.setSearch(text);
return false;
});
});
this._searchEntry.entry.connect('activate', function (se) {
// only one of the displays will have an item selected, so it's ok to
// call activateSelected() on both of them
me._appDisplay.activateSelected();
me._docDisplay.activateSelected();
return true;
});
this._searchEntry.entry.connect('key-press-event', function (se, e) {
let symbol = Shell.get_event_key_symbol(e);
if (symbol == Clutter.Escape) {
// We always want to hide the previews when the user hits Escape.
// If something that should have a preview gets displayed under
// the mouse pointer afterwards the preview will get redisplayed.
me._appDisplay.hidePreview();
me._docDisplay.hidePreview();
// Escape will keep clearing things back to the desktop. First, if
// we have active text, we remove it.
if (me._searchEntry.text != '')
me._searchEntry.text = '';
// Next, if we're in one of the "more" modes, close it
else if (me._moreAppsMode)
me._unsetMoreAppsMode();
else if (me._moreDocsMode)
me._unsetMoreDocsMode();
else
// Finally, just close the overlay entirely
me.emit('activated');
return true;
} else if (symbol == Clutter.Up) {
// selectUp and selectDown wrap around in their respective displays
// too, but there doesn't seem to be any flickering if we first select
// something in one display, but then unset the selection, and move
// it to the other display, so it's ok to do that.
if (me._moreAppsMode)
me._appDisplay.selectUp();
else if (me._moreDocsMode)
me._docDisplay.selectUp();
else if (me._appDisplay.hasSelected() && !me._appDisplay.selectUp() && me._docDisplay.hasItems()) {
me._appDisplay.unsetSelected();
me._docDisplay.selectLastItem();
} else if (me._docDisplay.hasSelected() && !me._docDisplay.selectUp() && me._appDisplay.hasItems()) {
me._docDisplay.unsetSelected();
me._appDisplay.selectLastItem();
}
return true;
} else if (symbol == Clutter.Down) {
if (me._moreAppsMode)
me._appDisplay.selectDown();
else if (me._moreDocsMode)
me._docDisplay.selectDown();
else if (me._appDisplay.hasSelected() && !me._appDisplay.selectDown() && me._docDisplay.hasItems()) {
me._appDisplay.unsetSelected();
me._docDisplay.selectFirstItem();
} else if (me._docDisplay.hasSelected() && !me._docDisplay.selectDown() && me._appDisplay.hasItems()) {
me._docDisplay.unsetSelected();
me._appDisplay.selectFirstItem();
}
return true;
} else if (me._moreAppsMode && me._searchEntry.text == '') {
if (symbol == Clutter.Right) {
me._appDisplay.moveRight();
return true;
} else if (symbol == Clutter.Left) {
me._appDisplay.moveLeft();
return true;
}
return false;
} else if (symbol == Clutter.Right && me._searchEntry.text == '') {
if (me._appDisplay.hasSelected())
me._setMoreAppsMode();
else
me._setMoreDocsMode();
return true;
}
return false;
});
this._appsSection = new Big.Box({ x: SIDESHOW_PAD,
y: this._searchEntry.actor.y + this._searchEntry.actor.height,
padding_top: SIDESHOW_SECTION_PADDING_TOP,
spacing: SIDESHOW_SECTION_SPACING});
this._appsText = new Clutter.Text({ color: SIDESHOW_TEXT_COLOR,
font_name: "Sans Bold 14px",
text: "Applications",
height: LABEL_HEIGHT});
this._appsSection.append(this._appsText, Big.BoxPackFlags.EXPAND);
this._itemDisplayHeight = global.screen_height - this._appsSection.y - SIDESHOW_SECTION_MISC_HEIGHT * 2 - bottomHeight;
this._appsContent = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL }); this._appsContent = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL });
this._appsSection.append(this._appsContent, Big.BoxPackFlags.EXPAND); this._appsSection.append(this._appsContent, Big.BoxPackFlags.EXPAND);
this._appDisplay = new AppDisplay.AppDisplay(this._displayWidth, this._itemDisplayHeight / 2, SIDESHOW_COLUMNS, SIDESHOW_PAD); this._appDisplay = new AppDisplay.AppDisplay(this._displayWidth, this._itemDisplayHeight / 2, DASH_COLUMNS, DASH_PAD);
let sideArea = this._appDisplay.getSideArea(); let sideArea = this._appDisplay.getSideArea();
sideArea.hide(); sideArea.hide();
this._appsContent.append(sideArea, Big.BoxPackFlags.NONE); this._appsContent.append(sideArea, Big.BoxPackFlags.NONE);
this._appsContent.append(this._appDisplay.actor, Big.BoxPackFlags.EXPAND); this._appsContent.append(this._appDisplay.actor, Big.BoxPackFlags.EXPAND);
let moreAppsBox = new Big.Box({x_align: Big.BoxAlignment.END}); let moreAppsBox = new Big.Box({x_align: Big.BoxAlignment.END});
this._moreAppsLink = new Link.Link({ color: SIDESHOW_TEXT_COLOR, this._moreAppsLink = new Link.Link({ color: DASH_TEXT_COLOR,
font_name: "Sans Bold 14px", font_name: "Sans Bold 14px",
text: "More...", text: "More...",
height: LABEL_HEIGHT }); height: LABEL_HEIGHT });
@ -295,22 +191,22 @@ Sideshow.prototype = {
this._appsDisplayControlBox = new Big.Box({x_align: Big.BoxAlignment.CENTER}); this._appsDisplayControlBox = new Big.Box({x_align: Big.BoxAlignment.CENTER});
this._appsDisplayControlBox.append(this._appDisplay.displayControl, Big.BoxPackFlags.NONE); this._appsDisplayControlBox.append(this._appDisplay.displayControl, Big.BoxPackFlags.NONE);
this._docsSection = new Big.Box({ x: SIDESHOW_PAD, this._docsSection = new Big.Box({ x: DASH_PAD,
y: this._appsSection.y + this._appsSection.height, y: this._appsSection.y + this._appsSection.height,
padding_top: SIDESHOW_SECTION_PADDING_TOP, padding_top: DASH_SECTION_PADDING_TOP,
spacing: SIDESHOW_SECTION_SPACING}); spacing: DASH_SECTION_SPACING});
this._docsText = new Clutter.Text({ color: SIDESHOW_TEXT_COLOR, this._docsText = new Clutter.Text({ color: DASH_TEXT_COLOR,
font_name: "Sans Bold 14px", font_name: "Sans Bold 14px",
text: "Recent Documents", text: "Recent Documents",
height: LABEL_HEIGHT}); height: LABEL_HEIGHT});
this._docsSection.append(this._docsText, Big.BoxPackFlags.EXPAND); this._docsSection.append(this._docsText, Big.BoxPackFlags.EXPAND);
this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, this._itemDisplayHeight - this._appsContent.height, SIDESHOW_COLUMNS, SIDESHOW_PAD); this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, this._itemDisplayHeight - this._appsContent.height, DASH_COLUMNS, DASH_PAD);
this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND); this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END}); let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END});
this._moreDocsLink = new Link.Link({ color: SIDESHOW_TEXT_COLOR, this._moreDocsLink = new Link.Link({ color: DASH_TEXT_COLOR,
font_name: "Sans Bold 14px", font_name: "Sans Bold 14px",
text: "More...", text: "More...",
height: LABEL_HEIGHT }); height: LABEL_HEIGHT });
@ -324,8 +220,8 @@ Sideshow.prototype = {
this._docsDisplayControlBox = new Big.Box({x_align: Big.BoxAlignment.CENTER}); this._docsDisplayControlBox = new Big.Box({x_align: Big.BoxAlignment.CENTER});
this._docsDisplayControlBox.append(this._docDisplay.displayControl, Big.BoxPackFlags.NONE); this._docsDisplayControlBox.append(this._docDisplay.displayControl, Big.BoxPackFlags.NONE);
this._details = new Big.Box({ x: this._width + this._additionalWidth + SIDESHOW_SECTION_SPACING, this._details = new Big.Box({ x: this._width + this._additionalWidth + DASH_SECTION_SPACING,
y: Panel.PANEL_HEIGHT + SIDESHOW_PAD, y: Panel.PANEL_HEIGHT + DASH_PAD,
width: previewWidth, width: previewWidth,
height: previewHeight, height: previewHeight,
corner_radius: DETAILS_CORNER_RADIUS, corner_radius: DETAILS_CORNER_RADIUS,
@ -390,20 +286,11 @@ Sideshow.prototype = {
this._appDisplay.show(); this._appDisplay.show();
this._appsContent.show(); this._appsContent.show();
this._docDisplay.show(); this._docDisplay.show();
this._appDisplay.selectFirstItem();
if (!this._appDisplay.hasSelected())
this._docDisplay.selectFirstItem();
else
this._docDisplay.unsetSelected();
global.stage.set_key_focus(this._searchEntry.entry);
}, },
hide: function() { hide: function() {
this._appsContent.hide(); this._appsContent.hide();
this._docDisplay.hide(); this._docDisplay.hide();
this._searchEntry.entry.text = '';
this._unsetMoreAppsMode();
this._unsetMoreDocsMode();
}, },
// Ensures that one of the displays has the selection if neither owns it after the // Ensures that one of the displays has the selection if neither owns it after the
@ -422,117 +309,6 @@ Sideshow.prototype = {
} }
}, },
// Sets the 'More' mode for browsing applications. Updates the applications section to have more items.
// Slides down the documents section to reveal the additional applications.
_setMoreAppsMode: function() {
if (this._moreAppsMode)
return;
// No corresponding STATE_PENDING_ACTIVE, because we call updateAppsSection
// immediately below.
this._moreAppsMode = STATE_ACTIVE;
this._docsSection.set_clip(0, 0, this._docsSection.width, this._docsSection.height);
this._moreAppsLink.actor.hide();
this._appsSection.set_clip(0, 0, this._appsSection.width, this._appsSection.height);
// Move the selection to the applications section if it was in the docs section.
this._docDisplay.unsetSelected();
// Because we have menus in applications, we want to reset the selection for applications
// as well. The default is no menu.
this._appDisplay.unsetSelected();
this._updateAppsSection();
Tweener.addTween(this._docsSection,
{ y: this._docsSection.y + this._docsSection.height,
clipHeightBottom: 0,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
// We need to expand the clip on the applications section so that the first additional
// application to be displayed does not appear abruptly.
Tweener.addTween(this._appsSection,
{ clipHeightBottom: this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT * 2 - LABEL_HEIGHT - SIDESHOW_SECTION_SPACING,
time: ANIMATION_TIME,
transition: "easeOutQuad",
onComplete: this._onAppsSectionExpanded,
onCompleteScope: this
});
this.actor.set_clip(0, 0, this.actor.width, this.actor.height);
Tweener.addTween(this.actor,
{ clipWidthRight: this._expandedWidth,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
this.emit('more-activated');
},
// Unsets the 'More' mode for browsing applications. Slides in the documents section.
_unsetMoreAppsMode: function() {
if (!this._moreAppsMode)
return;
this._moreAppsMode = STATE_PENDING_INACTIVE;
this._moreAppsLink.actor.hide();
this._appsSection.set_clip(0, 0, this._appsSection.width, this._appsSection.height);
this.actor.set_clip(0, 0, this.actor.width, this.actor.height);
this._docDisplay.show();
// We need to be reducing the clip on the applications section so that the last application to
// be removed does not disappear abruptly.
Tweener.addTween(this._appsSection,
{ clipHeightBottom: this._appsSectionDefaultHeight - LABEL_HEIGHT - SIDESHOW_SECTION_SPACING,
time: ANIMATION_TIME,
transition: "easeOutQuad",
onComplete: this._onAppsSectionReduced,
onCompleteScope: this
});
Tweener.addTween(this._docsSection,
{ y: this._docsSection.y - this._docsSection.height,
clipHeightBottom: this._docsSection.height,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
Tweener.addTween(this.actor,
{ clipWidthRight: this._width,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
this.emit('less-activated');
},
// Removes the clip from the applications section to reveal the 'Less...' text.
// Hides the documents section so that it doesn't get updated on new searches.
_onAppsSectionExpanded: function() {
this._appsSection.remove_clip();
this._docDisplay.hide();
this.actor.remove_clip();
},
// Updates the applications section to contain fewer items. Selects the first item in the
// documents section if applications section has no items.
// Removes the clip from the applications section to reveal the 'More...' text.
// Removes the clip from the documents section, so that the clip does not limit the size of
// the section if it is expanded later.
_onAppsSectionReduced: function() {
this.actor.remove_clip();
if (this._moreAppsMode != STATE_PENDING_INACTIVE)
return;
this._moreAppsMode = STATE_INACTIVE;
this._updateAppsSection();
if (!this._appDisplay.hasItems())
this._docDisplay.selectFirstItem();
this._appsSection.remove_clip();
this._docsSection.remove_clip();
},
// Updates the applications section display and the 'More...' or 'Less...' control associated with it // Updates the applications section display and the 'More...' or 'Less...' control associated with it
// depending on the current mode. This function must only be called once after the 'More' mode has been // depending on the current mode. This function must only be called once after the 'More' mode has been
// changed, which is ensured by _setMoreAppsMode() and _unsetMoreAppsMode() functions. // changed, which is ensured by _setMoreAppsMode() and _unsetMoreAppsMode() functions.
@ -540,161 +316,25 @@ Sideshow.prototype = {
if (this._moreAppsMode) { if (this._moreAppsMode) {
// Subtract one from columns since we are displaying menus // Subtract one from columns since we are displaying menus
this._appDisplay.setExpanded(true, this._displayWidth, this._additionalWidth, this._appDisplay.setExpanded(true, this._displayWidth, this._additionalWidth,
this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT, this._itemDisplayHeight + DASH_SECTION_MISC_HEIGHT,
this._expandedSideshowColumns - 1); this._expandedDashColumns - 1);
this._moreAppsLink.setText("Less..."); this._moreAppsLink.setText("Less...");
this._appsSection.insert_after(this._appsDisplayControlBox, this._appsContent, Big.BoxPackFlags.NONE); this._appsSection.insert_after(this._appsDisplayControlBox, this._appsContent, Big.BoxPackFlags.NONE);
this.actor.add_actor(this._details); this.actor.add_actor(this._details);
this._details.append(this._appDisplay.selectedItemDetails, Big.BoxPackFlags.NONE); this._details.append(this._appDisplay.selectedItemDetails, Big.BoxPackFlags.NONE);
} else { } else {
this._appDisplay.setExpanded(false, this._displayWidth, 0, this._appDisplay.setExpanded(false, this._displayWidth, 0,
this._appsSectionDefaultHeight - SIDESHOW_SECTION_MISC_HEIGHT, this._appsSectionDefaultHeight - DASH_SECTION_MISC_HEIGHT,
SIDESHOW_COLUMNS); DASH_COLUMNS);
this._moreAppsLink.setText("More..."); this._moreAppsLink.setText("More...");
this._appsSection.remove_actor(this._appsDisplayControlBox); this._appsSection.remove_actor(this._appsDisplayControlBox);
this.actor.remove_actor(this._details); this.actor.remove_actor(this._details);
this._details.remove_all(); this._details.remove_all();
} }
this._moreAppsLink.actor.show(); this._moreAppsLink.actor.show();
},
// Sets the 'More' mode for browsing documents. Updates the documents section to have more items.
// Slides up the applications section and the documents section at the same time to reveal the additional
// documents.
_setMoreDocsMode: function() {
if (this._moreDocsMode)
return;
this._moreDocsMode = true;
if (!this._appsSection.has_clip)
this._appsSection.set_clip(0, 0, this._appsSection.width, this._appsSection.height);
this._moreDocsLink.actor.hide();
this._docsSection.set_clip(0, 0, this._docsSection.width, this._docsSection.height);
this.actor.set_clip(0, 0, this.actor.width, this.actor.height);
// Move the selection to the docs section if it was in the apps section.
this._appDisplay.unsetSelected();
if (!this._docDisplay.hasSelected())
this._docDisplay.selectFirstItem();
this._updateDocsSection();
Tweener.addTween(this._appsSection,
{ y: this._appsSection.y - this._appsSection.height,
clipHeightTop: 0,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
// We do not slide in the 'Less...' text along with the documents so that the documents appear from the same
// edge where the last document was displayed, and not have that edge gradually move over to where the 'Less'
// text is displayed.
Tweener.addTween(this._docsSection,
{ y: this._searchEntry.actor.y + this._searchEntry.actor.height,
clipHeightBottom: this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT * 2 - LABEL_HEIGHT - SIDESHOW_SECTION_SPACING,
time: ANIMATION_TIME,
transition: "easeOutQuad",
onComplete: this._onDocsSectionExpanded,
onCompleteScope: this
});
Tweener.addTween(this.actor,
{ clipWidthRight: this._expandedWidth,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
this.emit('more-activated');
},
// Unsets the 'More' mode for browsing documents. Slides in the applications section
// and slides down the documents section.
_unsetMoreDocsMode: function() {
if (!this._moreDocsMode)
return;
this._moreDocsMode = false;
this._moreDocsLink.actor.hide();
this._docsSection.set_clip(0, 0, this._docsSection.width, this._docsSection.height);
this.actor.set_clip(0, 0, this.actor.width, this.actor.height);
this._appsContent.show();
Tweener.addTween(this._docsSection,
{ y: this._docsSection.y + this._appsSectionDefaultHeight,
clipHeightBottom: this._docsSectionDefaultHeight - LABEL_HEIGHT - SIDESHOW_SECTION_SPACING,
time: ANIMATION_TIME,
transition: "easeOutQuad",
onComplete: this._onDocsSectionReduced,
onCompleteScope: this
});
Tweener.addTween(this._appsSection,
{ y: this._appsSection.y + this._appsSection.height,
clipHeightTop: this._appsSection.height,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
Tweener.addTween(this.actor,
{ clipWidthRight: this._width,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
this.emit('less-activated');
},
// Removes the clip from the documents section to reveal the 'Less...' text.
// Hides the applications section so that it doesn't get updated on new searches.
_onDocsSectionExpanded: function() {
this._docsSection.remove_clip();
this._appsContent.hide();
this.actor.remove_clip();
},
// Updates the documents section to contain fewer items. Selects the first item in the
// applications section if applications section has no items.
// Removes the clip from the documents section to reveal the 'More...' text.
// Removes the clip from the applications section, so that the clip does not limit the size of
// the section if it is expanded later.
_onDocsSectionReduced: function() {
this.actor.remove_clip();
this._updateDocsSection();
if (!this._docDisplay.hasItems())
this._appDisplay.selectFirstItem();
this._docsSection.remove_clip();
this._appsSection.remove_clip();
},
// Updates the documents section display and the 'More...' or 'Less...' control associated with it
// depending on the current mode. This function must only be called once after the 'More' mode has been
// changed, which is ensured by _setMoreDocsMode() and _unsetMoreDocsMode() functions.
_updateDocsSection: function() {
if (this._moreDocsMode) {
this._docDisplay.setExpanded(true, this._displayWidth, this._additionalWidth,
this._itemDisplayHeight + SIDESHOW_SECTION_MISC_HEIGHT,
this._expandedSideshowColumns);
this._moreDocsLink.setText("Less...");
this._docsSection.insert_after(this._docsDisplayControlBox, this._docDisplay.actor, Big.BoxPackFlags.NONE);
this.actor.add_actor(this._details);
this._details.append(this._docDisplay.selectedItemDetails, Big.BoxPackFlags.NONE);
} else {
this._docDisplay.setExpanded(false, this._displayWidth, 0,
this._docsSectionDefaultHeight - SIDESHOW_SECTION_MISC_HEIGHT,
SIDESHOW_COLUMNS);
this._moreDocsLink.setText("More...");
this._docsSection.remove_actor(this._docsDisplayControlBox);
this.actor.remove_actor(this._details);
this._details.remove_all();
}
this._moreDocsLink.actor.show();
} }
}; };
Signals.addSignalMethods(Sideshow.prototype); Signals.addSignalMethods(Dash.prototype);
function Overlay() { function Overlay() {
this._init(); this._init();
@ -747,16 +387,16 @@ Overlay.prototype = {
global.overlay_group.add_actor(this._group); global.overlay_group.add_actor(this._group);
// TODO - recalculate everything when desktop size changes // TODO - recalculate everything when desktop size changes
this._sideshow = new Sideshow(); this._dash = new Dash();
this._group.add_actor(this._sideshow.actor); this._group.add_actor(this._dash.actor);
this._workspaces = null; this._workspaces = null;
this._sideshow.connect('activated', function(sideshow) { this._dash.connect('activated', function(dash) {
// TODO - have some sort of animation/effect while // TODO - have some sort of animation/effect while
// transitioning to the new app. We definitely need // transitioning to the new app. We definitely need
// startup-notification integration at least. // startup-notification integration at least.
me.hide(); me.hide();
}); });
this._sideshow.connect('more-activated', function(sideshow) { this._dash.connect('more-activated', function(dash) {
if (me._workspaces != null) { if (me._workspaces != null) {
let asideXFactor = wideScreen ? WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN : WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN; let asideXFactor = wideScreen ? WORKSPACES_X_FACTOR_ASIDE_MODE_WIDE_SCREEN : WORKSPACES_X_FACTOR_ASIDE_MODE_REGULAR_SCREEN;
@ -765,7 +405,7 @@ Overlay.prototype = {
me._workspaces.updatePosition(workspacesX, null); me._workspaces.updatePosition(workspacesX, null);
} }
}); });
this._sideshow.connect('less-activated', function(sideshow) { this._dash.connect('less-activated', function(dash) {
if (me._workspaces != null) { if (me._workspaces != null) {
let workspacesX = displayGridColumnWidth + WORKSPACE_GRID_PADDING; let workspacesX = displayGridColumnWidth + WORKSPACE_GRID_PADDING;
me._workspaces.addButton.show(); me._workspaces.addButton.show();
@ -776,17 +416,7 @@ Overlay.prototype = {
//// Draggable target interface //// //// Draggable target interface ////
// Unsets the expanded display mode if a GenericDisplayItem is being
// dragged over the overlay, i.e. as soon as it starts being dragged.
// This slides the workspaces back in and allows the user to place
// the item on any workspace.
handleDragOver : function(source, actor, x, y, time) { handleDragOver : function(source, actor, x, y, time) {
if (source instanceof GenericDisplay.GenericDisplayItem) {
this._sideshow._unsetMoreAppsMode();
this._sideshow._unsetMoreDocsMode();
return true;
}
return false; return false;
}, },
@ -804,7 +434,7 @@ Overlay.prototype = {
let screenWidth = global.screen_width; let screenWidth = global.screen_width;
let screenHeight = global.screen_height; let screenHeight = global.screen_height;
this._sideshow.show(); this._dash.show();
let columnsUsed = wideScreen ? COLUMNS_FOR_WORKSPACES_WIDE_SCREEN : COLUMNS_FOR_WORKSPACES_REGULAR_SCREEN; let columnsUsed = wideScreen ? COLUMNS_FOR_WORKSPACES_WIDE_SCREEN : COLUMNS_FOR_WORKSPACES_REGULAR_SCREEN;
let rowsUsed = wideScreen ? ROWS_FOR_WORKSPACES_WIDE_SCREEN : ROWS_FOR_WORKSPACES_REGULAR_SCREEN; let rowsUsed = wideScreen ? ROWS_FOR_WORKSPACES_WIDE_SCREEN : ROWS_FOR_WORKSPACES_REGULAR_SCREEN;
@ -837,19 +467,19 @@ Overlay.prototype = {
// Try to make the menu not too visible behind the empty space between // Try to make the menu not too visible behind the empty space between
// the workspace previews by sliding in its clipping rectangle. // the workspace previews by sliding in its clipping rectangle.
// We want to finish drawing the sideshow just before the top workspace fully // We want to finish drawing the Dash just before the top workspace fully
// slides in on the top. Which means that we have more time to wait before // slides in on the top. Which means that we have more time to wait before
// drawing the sideshow if the active workspace is displayed on the bottom of // drawing the dash if the active workspace is displayed on the bottom of
// the workspaces grid, and almost no time to wait if it is displayed in the top // the workspaces grid, and almost no time to wait if it is displayed in the top
// row of the workspaces grid. The calculations used below try to roughly // row of the workspaces grid. The calculations used below try to roughly
// capture the animation ratio for when workspaces are covering the top of the overlay // capture the animation ratio for when workspaces are covering the top of the overlay
// vs. when workspaces are already below the top of the overlay, and apply it // vs. when workspaces are already below the top of the overlay, and apply it
// to clipping the sideshow. The clipping is removed in this._showDone(). // to clipping the dash. The clipping is removed in this._showDone().
this._sideshow.actor.set_clip(0, 0, this._dash.actor.set_clip(0, 0,
this._workspaces.getFullSizeX(), this._workspaces.getFullSizeX(),
this._sideshow.actor.height); this._dash.actor.height);
Tweener.addTween(this._sideshow.actor, Tweener.addTween(this._dash.actor,
{ clipWidthRight: this._sideshow._width + WORKSPACE_GRID_PADDING + this._workspaces.getWidthToTopActiveWorkspace(), { clipWidthRight: this._dash._width + WORKSPACE_GRID_PADDING + this._workspaces.getWidthToTopActiveWorkspace(),
time: ANIMATION_TIME, time: ANIMATION_TIME,
transition: "easeOutQuad", transition: "easeOutQuad",
onComplete: this._showDone, onComplete: this._showDone,
@ -867,22 +497,22 @@ Overlay.prototype = {
let global = Shell.Global.get(); let global = Shell.Global.get();
this._hideInProgress = true; this._hideInProgress = true;
// lower the sideshow, so that workspaces display is on top and covers the sideshow while it is sliding out // lower the Dash, so that workspaces display is on top and covers the Dash while it is sliding out
this._sideshow.actor.lower(this._workspaces.actor); this._dash.actor.lower(this._workspaces.actor);
this._workspaces.hide(); this._workspaces.hide();
// Try to make the menu not too visible behind the empty space between // Try to make the menu not too visible behind the empty space between
// the workspace previews by sliding in its clipping rectangle. // the workspace previews by sliding in its clipping rectangle.
// The logic used is the same as described in this.show(). If the active workspace // The logic used is the same as described in this.show(). If the active workspace
// is displayed in the top row, than almost full animation time is needed for it // is displayed in the top row, than almost full animation time is needed for it
// to reach the top of the overlay and cover the sideshow fully, while if the // to reach the top of the overlay and cover the Dash fully, while if the
// active workspace is in the lower row, than the top left workspace reaches the // active workspace is in the lower row, than the top left workspace reaches the
// top of the overlay sooner as it is moving out of the way. // top of the overlay sooner as it is moving out of the way.
// The clipping is removed in this._hideDone(). // The clipping is removed in this._hideDone().
this._sideshow.actor.set_clip(0, 0, this._dash.actor.set_clip(0, 0,
this._sideshow.actor.width + WORKSPACE_GRID_PADDING + this._workspaces.getWidthToTopActiveWorkspace(), this._dash.actor.width + WORKSPACE_GRID_PADDING + this._workspaces.getWidthToTopActiveWorkspace(),
this._sideshow.actor.height); this._dash.actor.height);
Tweener.addTween(this._sideshow.actor, Tweener.addTween(this._dash.actor,
{ clipWidthRight: this._workspaces.getFullSizeX() + this._workspaces.getWidthToTopActiveWorkspace() - global.screen_width, { clipWidthRight: this._workspaces.getFullSizeX() + this._workspaces.getWidthToTopActiveWorkspace() - global.screen_width,
time: ANIMATION_TIME, time: ANIMATION_TIME,
transition: "easeOutQuad", transition: "easeOutQuad",
@ -902,20 +532,20 @@ Overlay.prototype = {
//// Private methods //// //// Private methods ////
// Raises the sideshow to the top, so that we can tell if the pointer is above one of its items. // Raises the Dash to the top, so that we can tell if the pointer is above one of its items.
// We need to do this once the workspaces are shown because the workspaces actor currently covers // We need to do this once the workspaces are shown because the workspaces actor currently covers
// the whole screen, regardless of where the workspaces are actually displayed. // the whole screen, regardless of where the workspaces are actually displayed.
// //
// Once we rework the workspaces actor to only cover the area it actually needs, we can // Once we rework the workspaces actor to only cover the area it actually needs, we can
// remove this workaround. Also http://bugzilla.openedhand.com/show_bug.cgi?id=1513 requests being // remove this workaround. Also http://bugzilla.openedhand.com/show_bug.cgi?id=1513 requests being
// able to pick only a reactive actor at a certain position, rather than any actor. Being able // able to pick only a reactive actor at a certain position, rather than any actor. Being able
// to do that would allow us to not have to raise the sideshow. // to do that would allow us to not have to raise the Dash.
_showDone: function() { _showDone: function() {
if (this._hideInProgress) if (this._hideInProgress)
return; return;
this._sideshow.actor.raise_top(); this._dash.actor.raise_top();
this._sideshow.actor.remove_clip(); this._dash.actor.remove_clip();
this.emit('shown'); this.emit('shown');
}, },
@ -928,8 +558,8 @@ Overlay.prototype = {
this._workspaces.destroy(); this._workspaces.destroy();
this._workspaces = null; this._workspaces = null;
this._sideshow.actor.remove_clip(); this._dash.actor.remove_clip();
this._sideshow.hide(); this._dash.hide();
this._group.hide(); this._group.hide();
this.visible = false; this.visible = false;