Files
gnome-shell/js/ui/messageTray.js
Marina Zhurakhinskaya 4ab513ca77 Combine notifications and the summary mode in a single message tray
We should either be showing the message tray in the notification or the summary mode.
This is best achieved if the message tray actor contains both, and either one is shown
at any given time.

Queue notifications so that each queued notification is shown when the previous one
times out or when the user is done interacting with the message tray and moves
the mouse away from it. (In the future, we will have some sort of an indication that
there are queued notifications and a way to have the next notification displayed
without moving the mouse away from the message tray.)
2010-01-06 16:27:08 -05:00

236 lines
6.8 KiB
JavaScript

/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
const Clutter = imports.gi.Clutter;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
const St = imports.gi.St;
const Signals = imports.signals;
const Tweener = imports.ui.tweener;
const Main = imports.ui.main;
const ANIMATION_TIME = 0.2;
const NOTIFICATION_TIMEOUT = 4;
const MESSAGE_TRAY_TIMEOUT = 0.2;
const ICON_SIZE = 24;
function Notification(icon, text) {
this._init(icon, text);
}
Notification.prototype = {
_init: function(icon, text) {
this.icon = icon;
this.text = text;
}
}
function NotificationBox() {
this._init();
}
NotificationBox.prototype = {
_init: function() {
this.actor = new St.BoxLayout({ name: 'notification' });
this._iconBox = new St.Bin();
this.actor.add(this._iconBox);
this._text = new St.Label();
this.actor.add(this._text, { expand: true, x_fill: false, y_fill: false, y_align: St.Align.MIDDLE });
},
setContent: function(notification) {
this._iconBox.child = notification.icon;
this._text.text = notification.text;
}
};
function Source(id, createIcon) {
this._init(id, createIcon);
}
Source.prototype = {
_init: function(id, createIcon) {
this.id = id;
if (createIcon)
this.createIcon = createIcon;
},
// This can be overridden by a subclass, or by the createIcon
// parameter to _init()
createIcon: function(size) {
throw new Error('no implementation of createIcon in ' + this);
},
notify: function(text) {
Main.messageTray.showNotification(new Notification(this.createIcon(ICON_SIZE), text));
},
clicked: function() {
this.emit('clicked');
},
destroy: function() {
this.emit('destroy');
}
};
Signals.addSignalMethods(Source.prototype);
function MessageTray() {
this._init();
}
MessageTray.prototype = {
_init: function() {
this.actor = new St.BoxLayout({ name: 'message-tray',
reactive: true });
let primary = global.get_primary_monitor();
this.actor.x = 0;
this.actor.y = primary.height - 1;
this.actor.width = primary.width;
this._summaryBin = new St.Bin({ x_align: St.Align.END });
this.actor.add(this._summaryBin, { expand: true });
this._summaryBin.hide();
this._notificationBox = new NotificationBox();
this._notificationQueue = [];
this.actor.add(this._notificationBox.actor);
this._notificationBox.actor.hide();
Main.chrome.addActor(this.actor, { affectsStruts: false });
this.actor.connect('enter-event',
Lang.bind(this, this._onMessageTrayEntered));
this.actor.connect('leave-event',
Lang.bind(this, this._onMessageTrayLeft));
this._isShowing = false;
this.actor.show();
this._summary = new St.BoxLayout({ name: 'summary-mode' });
this._summaryBin.child = this._summary;
this._sources = {};
this._icons = {};
},
contains: function(source) {
return this._sources.hasOwnProperty(source.id);
},
add: function(source) {
if (this.contains(source)) {
log('Trying to re-add source ' + source.id);
return;
}
let iconBox = new St.Bin({ reactive: true });
iconBox.child = source.createIcon(ICON_SIZE);
this._summary.insert_actor(iconBox, 0);
this._icons[source.id] = iconBox;
this._sources[source.id] = source;
iconBox.connect('button-release-event', Lang.bind(this,
function () {
source.clicked();
}));
source.connect('destroy', Lang.bind(this,
function () {
this.remove(source);
}));
},
remove: function(source) {
if (!this.contains(source))
return;
this._summary.remove_actor(this._icons[source.id]);
delete this._icons[source.id];
delete this._sources[source.id];
},
getSource: function(id) {
return this._sources[id];
},
_onMessageTrayEntered: function() {
// Don't hide the message tray after a timeout if the user has moved the mouse over it.
// We might have a timeout in place if the user moved the mouse away from the message tray for a very short period of time
// or if we are showing a notification.
if (this._hideTimeoutId > 0)
Mainloop.source_remove(this._hideTimeoutId);
if (this._isShowing)
return;
// If the message tray was not already showing, we'll show it in the summary mode.
this._summaryBin.show();
this._show();
},
_onMessageTrayLeft: function() {
if (!this._isShowing)
return;
// We wait just a little before hiding the message tray in case the user will quickly move the mouse back over it.
this._hideTimeoutId = Mainloop.timeout_add(MESSAGE_TRAY_TIMEOUT * 1000, Lang.bind(this, this._hide));
},
_show: function() {
this._isShowing = true;
let primary = global.get_primary_monitor();
Tweener.addTween(this.actor,
{ y: primary.height - this.actor.height,
time: ANIMATION_TIME,
transition: "easeOutQuad"
});
},
_hide: function() {
this._hideTimeoutId = 0;
let primary = global.get_primary_monitor();
Tweener.addTween(this.actor,
{ y: primary.height - 1,
time: ANIMATION_TIME,
transition: "easeOutQuad",
onComplete: this._hideComplete,
onCompleteScope: this
});
return false;
},
_hideComplete: function() {
this._isShowing = false;
this._summaryBin.hide();
this._notificationBox.actor.hide();
if (this._notificationQueue.length > 0)
this.showNotification(this._notificationQueue.shift());
},
showNotification: function(notification) {
if (this._isShowing) {
this._notificationQueue.push(notification);
return;
}
this._notificationBox.setContent(notification);
this._notificationBox.actor.x = Math.round((this.actor.width - this._notificationBox.actor.width) / 2);
this._notificationBox.actor.show();
// Because we set up the timeout before we do the animation, we add ANIMATION_TIME to NOTIFICATION_TIMEOUT, so that
// NOTIFICATION_TIMEOUT represents the time the notifiation is fully shown.
this._hideTimeoutId = Mainloop.timeout_add((NOTIFICATION_TIMEOUT + ANIMATION_TIME) * 1000, Lang.bind(this, this._hide));
this._show();
}
};