Initial implementation of the message tray and notification daemon
From the message-tray branch. Most of the UI parts were written by Marina, and most of the D-Bus parts by me.
This commit is contained in:
Dan Winship
239
js/ui/messageTray.js
Normal file
239
js/ui/messageTray.js
Normal file
@ -0,0 +1,239 @@
|
||||
/* -*- 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;
|
||||
|
||||
// Support <b>, <i>, and <u>, escape anything else
|
||||
// so it displays as raw markup.
|
||||
let markup = notification.text.replace(/<(\/?[^biu]>|[^>\/][^>])/g, "<$1");
|
||||
this._text.clutter_text.set_markup(markup);
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user