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

[Lightbox] Use a fade effect to smooth the transition

Browse Source 
Add show()/hide() methods to Lightbox, which (optionally) fade the
lightbox. Change all lightboxes to fade in smoothly.

https://bugzilla.gnome.org/show_bug.cgi?id=602466
This commit is contained in:
Florian Müllner 2010-03-17 15:36:57 +01:00
parent 88be8e87ac
commit 528930d0a9
4 changed files with 97 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
js/ui/lightbox.js
View File

@ -5,12 +5,17 @@ const Lang = imports.lang;
const Meta = imports.gi.Meta;
const St = imports.gi.St;
const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
/**
* Lightbox:
* @container: parent Clutter.Container
* @inhibitEvents: whether to inhibit events for @container
* @width: (optional) shade actor width
* @height: (optional) shade actor height
* @params: (optional) additional parameters:
* - inhibitEvents: whether to inhibit events for @container
* - width: shade actor width
* - height: shade actor height
* - fadeTime: seconds used to fade in/out
*
* Lightbox creates a dark translucent "shade" actor to hide the
* contents of @container, and allows you to specify particular actors
@ -24,29 +29,37 @@ const St = imports.gi.St;
*
* By default, the shade window will have the height and width of
* @container and will track any changes in its size. You can override
* this by passing an explicit width and height
* this by passing an explicit width and height in @params.
*/
function Lightbox(container, inhibitEvents, width, height) {
this._init(container, inhibitEvents, width, height);
function Lightbox(container, params) {
this._init(container, params);
}
Lightbox.prototype = {
_init : function(container, inhibitEvents, width, height) {
_init : function(container, params) {
params = Params.parse(params, { inhibitEvents: false,
width: null,
height: null,
fadeTime: null
});
this._container = container;
this._children = container.get_children();
this._fadeTime = params.fadeTime;
this.actor = new St.Bin({ x: 0,
y: 0,
style_class: 'lightbox',
reactive: inhibitEvents });
reactive: params.inhibitEvents });
container.add_actor(this.actor);
this.actor.raise_top();
this.actor.hide();
this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
if (width && height) {
this.actor.width = width;
this.actor.height = height;
if (params.width && params.height) {
this.actor.width = params.width;
this.actor.height = params.height;
this._allocationChangedSignalId = 0;
} else {
this.actor.width = container.width;
@ -92,6 +105,35 @@ Lightbox.prototype = {
}
},
show: function() {
if (this._fadeTime) {
this.actor.opacity = 0;
Tweener.addTween(this.actor,
{ opacity: 255,
time: this._fadeTime,
transition: 'easeOutQuad'
});
} else {
this.actor.opacity = 255;
}
this.actor.show();
},
hide: function() {
if (this._fadeTime) {
Tweener.addTween(this.actor,
{ opacity: 0,
time: this._fadeTime,
transition: 'easeOutQuad',
onComplete: Lang.bind(this, function() {
this.actor.hide();
})
});
} else {
this.actor.hide();
}
},
_actorRemoved : function(container, child) {
let index = this._children.indexOf(child);
if (index != -1) // paranoia

7
js/ui/overview.js
View File

@ -375,8 +375,9 @@ Overview.prototype = {
return true;
}));
if (!this._lightbox)
this._lightbox = new Lightbox.Lightbox(this._group, false);
this._lightbox.actor.show();
this._lightbox = new Lightbox.Lightbox(this._group,
{ fadeTime: PANE_FADE_TIME });
this._lightbox.show();
this._lightbox.highlight(this._paneContainer);
} else if (pane == this._activeDisplayPane) {
this._activeDisplayPane = null;
@ -386,7 +387,7 @@ Overview.prototype = {
}
this._transparentBackground.lower_bottom();
this._paneContainer.hide();
this._lightbox.actor.hide();
this._lightbox.hide();
}
}));
},

31
js/ui/runDialog.js
View File

@ -14,12 +14,15 @@ const _ = Gettext.gettext;
const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const MAX_FILE_DELETED_BEFORE_INVALID = 10;
const HISTORY_KEY = 'run_dialog/history';
const HISTORY_LIMIT = 512;
const DIALOG_FADE_TIME = 0.2;
function CommandCompleter() {
this._init();
}
@ -215,13 +218,14 @@ RunDialog.prototype = {
x: 0, y: 0 });
Main.uiGroup.add_actor(this._group);
let lightbox = new Lightbox.Lightbox(this._group, true);
this._lightbox = new Lightbox.Lightbox(this._group,
{ inhibitEvents: true });
this._box = new St.Bin({ x_align: St.Align.MIDDLE,
y_align: St.Align.MIDDLE });
this._group.add_actor(this._box);
lightbox.highlight(this._box);
this._lightbox.highlight(this._box);
let dialogBox = new St.BoxLayout({ style_class: 'run-dialog', vertical: true });
@ -413,7 +417,14 @@ RunDialog.prototype = {
this._box.set_size(monitor.width, monitor.height);
this._isOpen = true;
this._lightbox.show();
this._group.opacity = 0;
this._group.show();
Tweener.addTween(this._group,
{ opacity: 255,
time: DIALOG_FADE_TIME,
transition: 'easeOutQuad'
});
global.stage.set_key_focus(this._entryText);
},
@ -423,14 +434,20 @@ RunDialog.prototype = {
return;
this._isOpen = false;
this._errorBox.hide();
this._commandError = false;
this._group.hide();
this._entryText.set_text('');
Main.popModal(this._group);
Tweener.addTween(this._group,
{ opacity: 0,
time: DIALOG_FADE_TIME,
transition: 'easeOutQuad',
onComplete: Lang.bind(this, function() {
this._errorBox.hide();
this._group.hide();
this._entryText.set_text('');
})
});
}
};
Signals.addSignalMethods(RunDialog.prototype);

28
js/ui/workspace.js
View File

@ -28,7 +28,7 @@ FRAME_COLOR.from_pixel(0xffffffff);
const SCROLL_SCALE_AMOUNT = 100 / 5;
const ZOOM_OVERLAY_FADE_TIME = 0.15;
const LIGHTBOX_FADE_TIME = 0.2;
const DRAGGING_WINDOW_OPACITY = 100;
@ -217,7 +217,10 @@ WindowClone.prototype = {
this._zooming = true;
this.emit('zoom-start');
this._zoomLightbox = new Lightbox.Lightbox(global.stage, false);
if (!this._zoomLightbox)
this._zoomLightbox = new Lightbox.Lightbox(global.stage,
{ fadeTime: LIGHTBOX_FADE_TIME });
this._zoomLightbox.show();
this._zoomLocalOrig = new ScaledPoint(this.actor.x, this.actor.y, this.actor.scale_x, this.actor.scale_y);
this._zoomGlobalOrig = new ScaledPoint();
@ -256,7 +259,7 @@ WindowClone.prototype = {
[this.actor.x, this.actor.y] = this._zoomLocalOrig.getPosition();
[this.actor.scale_x, this.actor.scale_y] = this._zoomLocalOrig.getScale();
this._zoomLightbox.destroy();
this._zoomLightbox.hide();
this._zoomLocalPosition = undefined;
this._zoomLocalScale = undefined;
@ -264,7 +267,6 @@ WindowClone.prototype = {
this._zoomGlobalScale = undefined;
this._zoomTargetPosition = undefined;
this._zoomStep = undefined;
this._zoomLightbox = undefined;
},
_onButtonRelease : function (actor, event) {
@ -714,15 +716,17 @@ Workspace.prototype = {
* This function also resets the highlighted window state.
*/
setLightboxMode: function (showLightbox) {
if (showLightbox) {
this._lightbox = new Lightbox.Lightbox(this.actor, false);
} else {
this._lightbox.destroy();
this._lightbox = null;
}
if (this._frame) {
if (!this._lightbox)
this._lightbox = new Lightbox.Lightbox(this.actor,
{ fadeTime: LIGHTBOX_FADE_TIME });
if (showLightbox)
this._lightbox.show();
else
this._lightbox.hide();
if (this._frame)
this._frame.set_opacity(showLightbox ? 150 : 255);
}
},
/**