[gnome-shell/wip/fmuellner/chat-notifications: 1/4] telepathyClient: [WIP] Provide createBanner() implementations

[Florian Müllner <fmuellner src gnome org>]

commit e4544abd311c22157624e296e2fe9101b9c07362
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Feb 17 04:19:07 2015 +0100

    telepathyClient: [WIP] Provide createBanner() implementations

 data/theme/gnome-shell.css          |    5 ++-
 js/ui/components/telepathyClient.js |   91 ++++++++++++++++++++++-------------
 2 files changed, 62 insertions(+), 34 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 04055a7..dff0c4c 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1249,6 +1249,9 @@ StScrollBar {
 .secondary-icon {
   icon-size: 1.09em; }
 
+.chat-body {
+  spacing: 5px; }
+
 .chat-log-message {
   color: #d6d6d1; }
 
@@ -1277,7 +1280,7 @@ StScrollBar {
     padding-left: 0;
     padding-right: 4px; }
 
-.chat-notification-scrollview {
+.chat-scrollview {
   max-height: 22em; }
 
 .subscription-message {
diff --git a/js/ui/components/telepathyClient.js b/js/ui/components/telepathyClient.js
index 881d998..a3a6233 100644
--- a/js/ui/components/telepathyClient.js
+++ b/js/ui/components/telepathyClient.js
@@ -3,6 +3,7 @@
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 const Shell = imports.gi.Shell;
@@ -30,6 +31,8 @@ const SCROLLBACK_HISTORY_LINES = 10;
 // See Notification._onEntryChanged
 const COMPOSING_STOP_TIMEOUT = 5;
 
+const CHAT_EXPAND_LINES = 12;
+
 const CLOCK_FORMAT_KEY = 'clock-format';
 
 const NotificationDirection = {
@@ -451,14 +454,18 @@ const ChatSource = new Lang.Class({
         this._channel = channel;
         this._closedId = this._channel.connect('invalidated', Lang.bind(this, this._channelClosed));
 
-        this._notification = new ChatNotification(this);
+        this._notification = new MessageTray.Notification(this, this.title, null,
+                                                          { secondaryGIcon: this.getSecondaryIcon() });
         this._notification.connect('activated', Lang.bind(this, this.open));
         this._notification.setUrgency(MessageTray.Urgency.HIGH);
+        this._notification.setResident(true);
         this._notifyTimeoutId = 0;
 
+        this._banner = new ChatNotificationBanner(this._notification);
+
         // We ack messages when the user expands the new notification or views the summary
         // notification, in which case the notification is also expanded.
-        this._notification.connect('expanded', Lang.bind(this, this._ackMessages));
+        this._banner.connect('expanded', Lang.bind(this, this._ackMessages));
 
         this._presence = contact.get_presence_type();
 
@@ -481,6 +488,10 @@ const ChatSource = new Lang.Class({
         return new MessageTray.NotificationApplicationPolicy('empathy');
     },
 
+    createBanner: function() {
+        return this._banner;
+    },
+
     _updateAlias: function() {
         let oldAlias = this.title;
         let newAlias = this._contact.get_alias();
@@ -489,7 +500,8 @@ const ChatSource = new Lang.Class({
             return;
 
         this.setTitle(newAlias);
-        this._notification.appendAliasChange(oldAlias, newAlias);
+        this._notification.update(newAlias, null);
+        this._banner.appendAliasChange(oldAlias, newAlias);
     },
 
     getIcon: function() {
@@ -532,7 +544,7 @@ const ChatSource = new Lang.Class({
 
     _updateAvatarIcon: function() {
         this.iconUpdated();
-        this._notification.update(this._notification.title, null, { customContent: true });
+        this._notification.update(this._notification.title, null);
     },
 
     open: function() {
@@ -597,15 +609,15 @@ const ChatSource = new Lang.Class({
 
             if (!isPending) {
                 showTimestamp = true;
-                this._notification.appendMessage(logMessage, true, ['chat-log-message']);
+                this._banner.appendMessage(logMessage, true, ['chat-log-message']);
             }
         }
 
         if (showTimestamp)
-            this._notification.appendTimestamp();
+            this._banner.appendTimestamp();
 
         for (let i = 0; i < pendingMessages.length; i++)
-            this._notification.appendMessage(pendingMessages[i], true);
+            this._banner.appendMessage(pendingMessages[i], true);
 
         if (pendingMessages.length > 0)
             this.notify();
@@ -656,7 +668,7 @@ const ChatSource = new Lang.Class({
         this.countUpdated();
 
         message = makeMessageFromTpMessage(message, NotificationDirection.RECEIVED);
-        this._notification.appendMessage(message);
+        this._banner.appendMessage(message);
 
         // Wait a bit before notifying for the received message, a handler
         // could ack it in the meantime.
@@ -680,7 +692,7 @@ const ChatSource = new Lang.Class({
     // our client and other clients as well.
     _messageSent: function(channel, message, flags, token) {
         message = makeMessageFromTpMessage(message, NotificationDirection.SENT);
-        this._notification.appendMessage(message);
+        this._banner.appendMessage(message);
     },
 
     notify: function() {
@@ -720,7 +732,7 @@ const ChatSource = new Lang.Class({
 
         title = GLib.markup_escape_text(this.title, -1);
 
-        this._notification.update(this._notification.title, null, { customContent: true, secondaryGIcon: 
this.getSecondaryIcon() });
+        this._notification.update(title, null, { secondaryGIcon: this.getSecondaryIcon() });
 
         if (message)
             msg += ' <i>(' + GLib.markup_escape_text(message, -1) + ')</i>';
@@ -742,15 +754,15 @@ const ChatSource = new Lang.Class({
     }
 });
 
-const ChatNotification = new Lang.Class({
-    Name: 'ChatNotification',
-    Extends: MessageTray.Notification,
+const ChatNotificationBanner = new Lang.Class({
+    Name: 'ChatNotificationBanner',
+    Extends: MessageTray.NotificationBanner,
 
-    _init: function(source) {
-        this.parent(source, source.title, null, { customContent: true, secondaryGIcon: 
source.getSecondaryIcon() });
-        this.setResident(true);
+    _init: function(notification) {
+        this.parent(notification);
 
         this._responseEntry = new St.Entry({ style_class: 'chat-response',
+                                             x_expand: true,
                                              can_focus: true });
         this._responseEntry.clutter_text.connect('activate', Lang.bind(this, this._onEntryActivated));
         this._responseEntry.clutter_text.connect('text-changed', Lang.bind(this, this._onEntryChanged));
@@ -764,14 +776,23 @@ const ChatNotification = new Lang.Class({
             this.emit('unfocused');
         }));
 
-        this._createScrollArea();
+        this._scrollArea = new St.ScrollView({ style_class: 'chat-scrollview',
+                                               vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
+                                               hscrollbar_policy: Gtk.PolicyType.NEVER,
+                                               visible: this.expanded });
+        this._contentArea = new St.BoxLayout({ style_class: 'chat-body',
+                                               vertical: true });
+        this._scrollArea.add_actor(this._contentArea);
+
+        this.setExpandedBody(this._scrollArea);
+        this.setExpandedLines(CHAT_EXPAND_LINES);
+
         this._lastGroup = null;
 
         // Keep track of the bottom position for the current adjustment and
         // force a scroll to the bottom if things change while we were at the
         // bottom
         this._oldMaxScrollValue = this._scrollArea.vscroll.adjustment.value;
-        this._scrollArea.add_style_class_name('chat-notification-scrollview');
         this._scrollArea.vscroll.adjustment.connect('changed', Lang.bind(this, function(adjustment) {
             if (adjustment.value == this._oldMaxScrollValue)
                 this.scrollTo(St.Side.BOTTOM);
@@ -785,6 +806,14 @@ const ChatNotification = new Lang.Class({
         this._composingTimeoutId = 0;
     },
 
+    scrollTo: function(side) {
+        let adjustment = this._scrollArea.vscroll.adjustment;
+        if (side == St.Side.TOP)
+            adjustment.value = adjustment.lower;
+        else if (side == St.Side.BOTTOM)
+            adjustment.value = adjustment.upper;
+    },
+
     /**
      * appendMessage:
      * @message: An object with the properties:
@@ -809,8 +838,8 @@ const ChatNotification = new Lang.Class({
         }
 
         if (message.direction == NotificationDirection.RECEIVED) {
-            this.update(this.source.title, messageBody, { customContent: true,
-                                                          bannerMarkup: true });
+            this.notification.update(this.notification.source.title, messageBody,
+                                     { bannerMarkup: true });
         }
 
         let group = (message.direction == NotificationDirection.RECEIVED ?
@@ -872,9 +901,9 @@ const ChatNotification = new Lang.Class({
         if (this._timestampTimeoutId)
             Mainloop.source_remove(this._timestampTimeoutId);
 
-        let highlighter = new MessageTray.URLHighlighter(props.body,
-                                                         true,  // line wrap?
-                                                         true); // allow markup?
+        let highlighter = new Calendar.URLHighlighter(props.body,
+                                                      true,  // line wrap?
+                                                      true); // allow markup?
 
         let body = highlighter.actor;
 
@@ -886,18 +915,16 @@ const ChatNotification = new Lang.Class({
         if (group != this._lastGroup) {
             this._lastGroup = group;
             let emptyLine = new St.Label({ style_class: 'chat-empty-line' });
-            this.addActor(emptyLine);
+            this._contentArea.add_actor(emptyLine);
             this._history.unshift({ actor: emptyLine, time: timestamp,
                                     realMessage: false });
         }
 
         let lineBox = new St.BoxLayout({ vertical: false });
         lineBox.add(body, props.childProps);
-        this.addActor(lineBox);
+        this._contentArea.add_actor(lineBox);
         this._lastMessageBox = lineBox;
 
-        this.updated();
-
         let timestamp = props.timestamp;
         this._history.unshift({ actor: lineBox, time: timestamp,
                                 realMessage: group != 'meta' });
@@ -1031,8 +1058,6 @@ const ChatNotification = new Lang.Class({
                                    group: 'meta',
                                    styles: ['chat-meta-message'] });
 
-        this.update(newAlias, null, { customContent: true });
-
         this._filterMessages();
     },
 
@@ -1046,13 +1071,13 @@ const ChatNotification = new Lang.Class({
         // Telepathy sends out the Sent signal for us.
         // see Source._messageSent
         this._responseEntry.set_text('');
-        this.source.respond(text);
+        this.notification.source.respond(text);
     },
 
     _composingStopTimeout: function() {
         this._composingTimeoutId = 0;
 
-        this.source.setChatState(Tp.ChannelChatState.PAUSED);
+        this.notification.source.setChatState(Tp.ChannelChatState.PAUSED);
 
         return GLib.SOURCE_REMOVE;
     },
@@ -1072,14 +1097,14 @@ const ChatNotification = new Lang.Class({
         }
 
         if (text != '') {
-            this.source.setChatState(Tp.ChannelChatState.COMPOSING);
+            this.notification.source.setChatState(Tp.ChannelChatState.COMPOSING);
 
             this._composingTimeoutId = Mainloop.timeout_add_seconds(
                 COMPOSING_STOP_TIMEOUT,
                 Lang.bind(this, this._composingStopTimeout));
             GLib.Source.set_name_by_id(this._composingTimeoutId, '[gnome-shell] this._composingStopTimeout');
         } else {
-            this.source.setChatState(Tp.ChannelChatState.ACTIVE);
+            this.notification.source.setChatState(Tp.ChannelChatState.ACTIVE);
         }
     }
 });