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

overview: overview as boxlayouts

Browse Source 
https://bugzilla.gnome.org/show_bug.cgi?id=682286
This commit is contained in:
Tanner Doshier 2012-08-18 19:53:36 -05:00 committed by Jasper St. Pierre
parent 9491f6bd23
commit cbaa999ced
3 changed files with 52 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
data/theme/gnome-shell.css
View File

@ -577,6 +577,10 @@ StScrollBar StButton#vhandle:active {
spacing: 40px; spacing: 40px;
} }
#overview-group {
spacing: 12px;
}
.window-caption { .window-caption {
spacing: 25px; spacing: 25px;
} }

117
js/ui/overview.js
View File

@ -23,9 +23,6 @@ const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
// Time for initial animation going into Overview mode // Time for initial animation going into Overview mode
const ANIMATION_TIME = 0.25; const ANIMATION_TIME = 0.25;
// XXX -- grab this automatically. Hard to do.
const DASH_MAX_WIDTH = 96;
const DND_WINDOW_SWITCH_TIMEOUT = 1250; const DND_WINDOW_SWITCH_TIMEOUT = 1250;
const SwipeScrollDirection = { const SwipeScrollDirection = {
@ -119,23 +116,15 @@ const Overview = new Lang.Class({
this._desktopFade = new St.Bin(); this._desktopFade = new St.Bin();
global.overlay_group.add_actor(this._desktopFade); global.overlay_group.add_actor(this._desktopFade);
this._spacing = 0;
/* Translators: This is the main view to select /* Translators: This is the main view to select
activities. See also note for "Activities" string. */ activities. See also note for "Activities" string. */
this._group = new St.Widget({ name: 'overview', this._overview = new St.BoxLayout({ name: 'overview',
accessible_name: _("Overview"), accessible_name: _("Overview"),
reactive: true }); reactive: true,
this._group._delegate = this; vertical: true });
this._group.connect('style-changed', this._overview._delegate = this;
Lang.bind(this, function() {
let node = this._group.get_theme_node(); this._group = new St.BoxLayout({ name: 'overview-group' });
let spacing = node.get_length('spacing');
if (spacing != this._spacing) {
this._spacing = spacing;
this._relayout();
}
}));
this._scrollDirection = SwipeScrollDirection.NONE; this._scrollDirection = SwipeScrollDirection.NONE;
this._scrollAdjustment = null; this._scrollAdjustment = null;
@ -154,12 +143,11 @@ const Overview = new Lang.Class({
// Dash elements, or mouseover handlers in the workspaces. // Dash elements, or mouseover handlers in the workspaces.
this._coverPane = new Clutter.Rectangle({ opacity: 0, this._coverPane = new Clutter.Rectangle({ opacity: 0,
reactive: true }); reactive: true });
this._group.add_actor(this._coverPane); this._overview.add_actor(this._coverPane);
this._coverPane.connect('event', Lang.bind(this, function (actor, event) { return true; })); this._coverPane.connect('event', Lang.bind(this, function (actor, event) { return true; }));
this._overview.hide();
this._group.hide(); global.overlay_group.add_actor(this._overview);
global.overlay_group.add_actor(this._group);
this._coverPane.hide(); this._coverPane.hide();
@ -193,6 +181,13 @@ const Overview = new Lang.Class({
this._shellInfo = new ShellInfo(); this._shellInfo = new ShellInfo();
// Add a clone of the panel to the overview so spacing and such is
// automatic
this._panelGhost = new St.Bin({ child: new Clutter.Clone({ source: Main.panel.actor }),
reactive: false,
opacity: 0 });
this._overview.add_actor(this._panelGhost);
this._searchEntry = new St.Entry({ name: 'searchEntry', this._searchEntry = new St.Entry({ name: 'searchEntry',
/* Translators: this is the text displayed /* Translators: this is the text displayed
in the search entry when no search is in the search entry when no search is
@ -201,16 +196,13 @@ const Overview = new Lang.Class({
hint_text: _("Type to search..."), hint_text: _("Type to search..."),
track_hover: true, track_hover: true,
can_focus: true }); can_focus: true });
this._group.add_actor(this._searchEntry); this._searchEntryBin = new St.Bin({ child: this._searchEntry,
x_align: St.Align.MIDDLE });
this._dash = new Dash.Dash(); this._overview.add_actor(this._searchEntryBin);
this._viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
this._dash.showAppsButton);
this._group.add_actor(this._viewSelector.actor);
this._group.add_actor(this._dash.actor);
// TODO - recalculate everything when desktop size changes // TODO - recalculate everything when desktop size changes
this._dash.actor.add_constraint(this._viewSelector.constrainHeight); this._dash = new Dash.Dash();
this._group.add_actor(this._dash.actor);
this.dashIconSize = this._dash.iconSize; this.dashIconSize = this._dash.iconSize;
this._dash.connect('icon-size-changed', this._dash.connect('icon-size-changed',
Lang.bind(this, function() { Lang.bind(this, function() {
@ -221,6 +213,19 @@ const Overview = new Lang.Class({
// the left of the overview // the left of the overview
Main.ctrlAltTabManager.addGroup(this._dash.actor, _("Dash"), 'user-bookmarks-symbolic'); Main.ctrlAltTabManager.addGroup(this._dash.actor, _("Dash"), 'user-bookmarks-symbolic');
this._viewSelector = new ViewSelector.ViewSelector(this._searchEntry,
this._dash.showAppsButton);
this._group.add_actor(this._viewSelector.actor);
// Add our same-line elements after the search entry
this._overview.add_actor(this._group);
// Then account for message tray
this._messageTrayGhost = new St.Bin({ child: new Clutter.Clone({ source: Main.messageTray.actor }),
reactive: false,
opacity: 0 });
this._overview.add_actor(this._messageTrayGhost);
Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._relayout)); Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._relayout));
this._relayout(); this._relayout();
}, },
@ -486,41 +491,15 @@ const Overview = new Lang.Class({
this.hide(); this.hide();
let primary = Main.layoutManager.primaryMonitor; let primary = Main.layoutManager.primaryMonitor;
let rtl = (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL);
let contentY = Main.panel.actor.height; let contentY = Main.panel.actor.height;
let contentHeight = primary.height - contentY - Main.messageTray.actor.height; let contentHeight = primary.height - contentY - Main.messageTray.actor.height;
this._group.set_position(primary.x, primary.y); this._overview.set_x(primary.x);
this._group.set_size(primary.width, primary.height); this._overview.set_size(primary.width, primary.height);
this._coverPane.set_position(0, contentY); this._coverPane.set_position(0, contentY);
this._coverPane.set_size(primary.width, contentHeight); this._coverPane.set_size(primary.width, contentHeight);
let searchWidth = this._searchEntry.get_width();
let searchHeight = this._searchEntry.get_height();
let searchX = (primary.width - searchWidth) / 2;
let searchY = contentY + this._spacing;
let dashWidth = DASH_MAX_WIDTH;
let dashY = searchY + searchHeight + this._spacing;
let dashX;
if (rtl) {
this._dash.actor.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
dashX = primary.width;
} else {
dashX = 0;
}
let viewX = rtl ? 0 : dashWidth + this._spacing;
let viewY = searchY + searchHeight + this._spacing;
let viewWidth = primary.width - dashWidth - this._spacing;
let viewHeight = contentHeight - this._spacing - viewY;
this._searchEntry.set_position(searchX, searchY);
this._dash.actor.set_position(dashX, dashY);
this._viewSelector.actor.set_position(viewX, viewY);
this._viewSelector.actor.set_size(viewWidth, viewHeight);
}, },
//// Public methods //// //// Public methods ////
@ -558,13 +537,13 @@ const Overview = new Lang.Class({
if (this._shown) if (this._shown)
return; return;
// Do this manually instead of using _syncInputMode, to handle failure // Do this manually instead of using _syncInputMode, to handle failure
if (!Main.pushModal(this._group)) if (!Main.pushModal(this._overview))
return; return;
this._modal = true; this._modal = true;
this._animateVisible(); this._animateVisible();
this._shown = true; this._shown = true;
this._buttonPressId = this._group.connect('button-press-event', this._buttonPressId = this._overview.connect('button-press-event',
Lang.bind(this, this._onButtonPress)); Lang.bind(this, this._onButtonPress));
}, },
@ -608,12 +587,12 @@ const Overview = new Lang.Class({
// Disable unredirection while in the overview // Disable unredirection while in the overview
Meta.disable_unredirect_for_screen(global.screen); Meta.disable_unredirect_for_screen(global.screen);
global.window_group.hide(); global.window_group.hide();
this._group.show(); this._overview.show();
this._background.show(); this._background.show();
this._viewSelector.show(); this._viewSelector.show();
this._group.opacity = 0; this._overview.opacity = 0;
Tweener.addTween(this._group, Tweener.addTween(this._overview,
{ opacity: 255, { opacity: 255,
transition: 'easeOutQuad', transition: 'easeOutQuad',
time: ANIMATION_TIME, time: ANIMATION_TIME,
@ -667,7 +646,7 @@ const Overview = new Lang.Class({
this._syncInputMode(); this._syncInputMode();
if (this._buttonPressId > 0) if (this._buttonPressId > 0)
this._group.disconnect(this._buttonPressId); this._overview.disconnect(this._buttonPressId);
this._buttonPressId = 0; this._buttonPressId = 0;
}, },
@ -709,20 +688,20 @@ const Overview = new Lang.Class({
if (this._shown) { if (this._shown) {
if (!this._modal) { if (!this._modal) {
if (Main.pushModal(this._group)) if (Main.pushModal(this._overview))
this._modal = true; this._modal = true;
else else
this.hide(); this.hide();
} }
} else if (this._shownTemporarily) { } else if (this._shownTemporarily) {
if (this._modal) { if (this._modal) {
Main.popModal(this._group); Main.popModal(this._overview);
this._modal = false; this._modal = false;
} }
global.stage_input_mode = Shell.StageInputMode.FULLSCREEN; global.stage_input_mode = Shell.StageInputMode.FULLSCREEN;
} else { } else {
if (this._modal) { if (this._modal) {
Main.popModal(this._group); Main.popModal(this._overview);
this._modal = false; this._modal = false;
} }
else if (global.stage_input_mode == Shell.StageInputMode.FULLSCREEN) else if (global.stage_input_mode == Shell.StageInputMode.FULLSCREEN)
@ -740,7 +719,7 @@ const Overview = new Lang.Class({
this._viewSelector.zoomFromOverview(); this._viewSelector.zoomFromOverview();
// Make other elements fade out. // Make other elements fade out.
Tweener.addTween(this._group, Tweener.addTween(this._overview,
{ opacity: 0, { opacity: 0,
transition: 'easeOutQuad', transition: 'easeOutQuad',
time: ANIMATION_TIME, time: ANIMATION_TIME,
@ -782,7 +761,7 @@ const Overview = new Lang.Class({
this._viewSelector.hide(); this._viewSelector.hide();
this._desktopFade.hide(); this._desktopFade.hide();
this._background.hide(); this._background.hide();
this._group.hide(); this._overview.hide();
this.visible = false; this.visible = false;
this.animationInProgress = false; this.animationInProgress = false;

11
js/ui/viewSelector.js
View File

@ -133,17 +133,6 @@ const ViewSelector = new Lang.Class({
} }
})); }));
// Public constraints which may be used to tie actors' height or
// vertical position to the current tab's content; as the content's
// height and position depend on the view selector's style properties
// (e.g. font size, padding, spacing, ...) it would be extremely hard
// and ugly to get these from the outside. While it would be possible
// to use position and height properties directly, outside code would
// need to ensure that the content is properly allocated before
// accessing the properties.
this.constrainHeight = new Clutter.BindConstraint({ source: this._pageArea,
coordinate: Clutter.BindCoordinate.HEIGHT });
global.display.add_keybinding('toggle-application-view', global.display.add_keybinding('toggle-application-view',
new Gio.Settings({ schema: SHELL_KEYBINDINGS_SCHEMA }), new Gio.Settings({ schema: SHELL_KEYBINDINGS_SCHEMA }),
Meta.KeyBindingFlags.NONE, Meta.KeyBindingFlags.NONE,