diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js index 298a6561d..8c6937745 100644 --- a/js/ui/lightbox.js +++ b/js/ui/lightbox.js @@ -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 diff --git a/js/ui/overview.js b/js/ui/overview.js index 10826963d..ff5c4c51f 100644 --- a/js/ui/overview.js +++ b/js/ui/overview.js @@ -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(); } })); }, diff --git a/js/ui/runDialog.js b/js/ui/runDialog.js index f2cab461c..02c84d964 100644 --- a/js/ui/runDialog.js +++ b/js/ui/runDialog.js @@ -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); diff --git a/js/ui/workspace.js b/js/ui/workspace.js index 060d2a07d..1f14c1b3b 100644 --- a/js/ui/workspace.js +++ b/js/ui/workspace.js @@ -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); - } }, /**