From bb61dd4b44254fd412f6b5930cad59273ccc65ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Tue, 17 Feb 2015 04:19:07 +0100 Subject: [PATCH] telepathyClient: Provide a custom banner implementation Since we stopped special-casing chat notifications to use the old notification actor, we need to provide a notification banner to maintain the inline chat functionality, so split out the UI from the existing ChatNotification class. https://bugzilla.gnome.org/show_bug.cgi?id=746343 --- data/theme/gnome-shell-high-contrast.css | 13 +- data/theme/gnome-shell-sass | 2 +- data/theme/gnome-shell.css | 13 +- js/ui/components/telepathyClient.js | 289 +++++++++++++++-------- 4 files changed, 208 insertions(+), 109 deletions(-) diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css index 4753bf9aa..87a8f312d 100644 --- a/data/theme/gnome-shell-high-contrast.css +++ b/data/theme/gnome-shell-high-contrast.css @@ -1252,11 +1252,17 @@ StScrollBar { .secondary-icon { icon-size: 1.09em; } +.chat-body { + spacing: 5px; } + +.chat-response { + margin: 5px; } + .chat-log-message { color: #e6e6e6; } -.chat-empty-line { - font-size: 4px; } +.chat-new-group { + padding-top: 1em; } .chat-received { padding-left: 4px; } @@ -1280,9 +1286,6 @@ StScrollBar { padding-left: 0; padding-right: 4px; } -.chat-notification-scrollview { - max-height: 22em; } - .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass index a84637bf5..0c60ff062 160000 --- a/data/theme/gnome-shell-sass +++ b/data/theme/gnome-shell-sass @@ -1 +1 @@ -Subproject commit a84637bf55bca3b515bc5602cf02ec48b8450dfd +Subproject commit 0c60ff062b7132f421674d2944cd0bc519ecbe95 diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index d787017bc..d8f6a1b41 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1252,11 +1252,17 @@ StScrollBar { .secondary-icon { icon-size: 1.09em; } +.chat-body { + spacing: 5px; } + +.chat-response { + margin: 5px; } + .chat-log-message { color: #d6d6d1; } -.chat-empty-line { - font-size: 4px; } +.chat-new-group { + padding-top: 1em; } .chat-received { padding-left: 4px; } @@ -1280,9 +1286,6 @@ StScrollBar { padding-left: 0; padding-right: 4px; } -.chat-notification-scrollview { - max-height: 22em; } - .hotplug-transient-box { spacing: 6px; padding: 2px 72px 2px 12px; } diff --git a/js/ui/components/telepathyClient.js b/js/ui/components/telepathyClient.js index ddcddfe4b..ba2f3b486 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; @@ -31,6 +32,8 @@ const SCROLLBACK_HISTORY_LINES = 10; // See Notification._onEntryChanged const COMPOSING_STOP_TIMEOUT = 5; +const CHAT_EXPAND_LINES = 12; + const NotificationDirection = { SENT: 'chat-sent', RECEIVED: 'chat-received' @@ -273,13 +276,13 @@ const ChatSource = new Lang.Class({ this._notification = new ChatNotification(this); this._notification.connect('activated', Lang.bind(this, this.open)); - this._notification.setUrgency(MessageTray.Urgency.HIGH); + this._notification.connect('updated', Lang.bind(this, + function() { + if (this._banner && this._banner.expanded) + this._ackMessages(); + })); this._notifyTimeoutId = 0; - // 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._presence = contact.get_presence_type(); this._sentId = this._channel.connect('message-sent', Lang.bind(this, this._messageSent)); @@ -301,6 +304,20 @@ const ChatSource = new Lang.Class({ return new MessageTray.NotificationApplicationPolicy('empathy'); }, + createBanner: function() { + this._banner = new ChatNotificationBanner(this._notification); + + // We ack messages when the user expands the new notification + let id = this._banner.connect('expanded', Lang.bind(this, this._ackMessages)); + this._banner.actor.connect('destroy', Lang.bind(this, + function() { + this._banner.disconnect(id); + this._banner = null; + })); + + return this._banner; + }, + _updateAlias: function() { let oldAlias = this.title; let newAlias = this._contact.get_alias(); @@ -354,7 +371,7 @@ const ChatSource = new Lang.Class({ this.iconUpdated(); this._notification.update(this._notification.title, this._notification.bannerBodyText, - { gicon: this.getIcon(), customContent: true }); + { gicon: this.getIcon() }); }, open: function() { @@ -550,7 +567,7 @@ const ChatSource = new Lang.Class({ _presenceChanged: function (contact, presence, status, message) { this._notification.update(this._notification.title, this._notification.bannerBodyText, - { customContent: true, secondaryGIcon: this.getSecondaryIcon() }); + { secondaryGIcon: this.getSecondaryIcon() }); }, _pendingRemoved: function(channel, message) { @@ -574,42 +591,13 @@ const ChatNotification = new Lang.Class({ Extends: MessageTray.Notification, _init: function(source) { - this.parent(source, source.title, null, { customContent: true, secondaryGIcon: source.getSecondaryIcon() }); + this.parent(source, source.title, null, + { secondaryGIcon: source.getSecondaryIcon() }); + this.setUrgency(MessageTray.Urgency.HIGH); this.setResident(true); - this._responseEntry = new St.Entry({ style_class: 'chat-response', - 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)); - this.setActionArea(this._responseEntry); - - this._responseEntry.clutter_text.connect('key-focus-in', Lang.bind(this, function() { - this.focused = true; - })); - this._responseEntry.clutter_text.connect('key-focus-out', Lang.bind(this, function() { - this.focused = false; - this.emit('unfocused'); - })); - - this._createScrollArea(); - 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); - this._oldMaxScrollValue = Math.max(adjustment.lower, adjustment.upper - adjustment.page_size); - })); - - this._inputHistory = new History.HistoryManager({ entry: this._responseEntry.clutter_text }); - - this._history = []; + this.messages = []; this._timestampTimeoutId = 0; - this._composingTimeoutId = 0; }, /** @@ -635,10 +623,8 @@ const ChatNotification = new Lang.Class({ styles.push('chat-action'); } - if (message.direction == NotificationDirection.RECEIVED) { - this.update(this.source.title, messageBody, { customContent: true, - bannerMarkup: true }); - } + if (message.direction == NotificationDirection.RECEIVED) + this.update(this.source.title, messageBody, { bannerMarkup: true }); let group = (message.direction == NotificationDirection.RECEIVED ? 'received' : 'sent'); @@ -651,10 +637,10 @@ const ChatNotification = new Lang.Class({ }, _filterMessages: function() { - if (this._history.length < 1) + if (this.messages.length < 1) return; - let lastMessageTime = this._history[0].time; + let lastMessageTime = this.messages[0].timestamp; let currentTime = (Date.now() / 1000); // Keep the scrollback from growing too long. If the most @@ -666,12 +652,12 @@ const ChatNotification = new Lang.Class({ let maxLength = (lastMessageTime < currentTime - SCROLLBACK_RECENT_TIME) ? SCROLLBACK_IDLE_LENGTH : SCROLLBACK_RECENT_LENGTH; - let filteredHistory = this._history.filter(function(item) { return item.realMessage }); + let filteredHistory = this.messages.filter(function(item) { return item.realMessage }); if (filteredHistory.length > maxLength) { let lastMessageToKeep = filteredHistory[maxLength]; - let expired = this._history.splice(this._history.indexOf(lastMessageToKeep)); + let expired = this.messages.splice(this.messages.indexOf(lastMessageToKeep)); for (let i = 0; i < expired.length; i++) - expired[i].actor.destroy(); + this.emit('message-removed', expired[i]); } }, @@ -684,7 +670,6 @@ const ChatNotification = new Lang.Class({ * styles: Style class names for the message to have. * timestamp: The timestamp of the message. * noTimestamp: suppress timestamp signal? - * childProps: props to add the actor with. */ _append: function(props) { let currentTime = (Date.now() / 1000); @@ -692,44 +677,22 @@ const ChatNotification = new Lang.Class({ group: null, styles: [], timestamp: currentTime, - noTimestamp: false, - childProps: null }); + noTimestamp: false }); // Reset the old message timeout if (this._timestampTimeoutId) Mainloop.source_remove(this._timestampTimeoutId); - let highlighter = new MessageTray.URLHighlighter(props.body, - true, // line wrap? - true); // allow markup? + let message = { realMessage: props.group != 'meta', + showTimestamp: false }; + Lang.copyProperties(props, message); + delete message.noTimestamp; - let body = highlighter.actor; - - let styles = props.styles; - for (let i = 0; i < styles.length; i++) - body.add_style_class_name(styles[i]); - - let group = props.group; - if (group != this._lastGroup) { - this._lastGroup = group; - let emptyLine = new St.Label({ style_class: 'chat-empty-line' }); - this.addActor(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._lastMessageBox = lineBox; - - this.updated(); - - let timestamp = props.timestamp; - this._history.unshift({ actor: lineBox, time: timestamp, - realMessage: group != 'meta' }); + this.messages.unshift(message); + this.emit('message-added', message); if (!props.noTimestamp) { + let timestamp = props.timestamp; if (timestamp < currentTime - SCROLLBACK_IMMEDIATE_TIME) { this.appendTimestamp(); } else { @@ -748,15 +711,8 @@ const ChatNotification = new Lang.Class({ appendTimestamp: function() { this._timestampTimeoutId = 0; - let lastMessageTime = this._history[0].time; - let lastMessageDate = new Date(lastMessageTime * 1000); - - let timeLabel = Util.createTimeLabel(lastMessageDate); - timeLabel.style_class = 'chat-meta-message'; - timeLabel.x_expand = timeLabel.y_expand = true; - timeLabel.x_align = timeLabel.y_align = Clutter.ActorAlign.END; - - this._lastMessageBox.add_actor(timeLabel); + this.messages[0].showTimestamp = true; + this.emit('timestamp-changed', this.messages[0]); this._filterMessages(); @@ -771,13 +727,150 @@ const ChatNotification = new Lang.Class({ IM name. */ let message = '' + _("%s is now known as %s").format(oldAlias, newAlias) + ''; - let label = this._append({ body: message, - group: 'meta', - styles: ['chat-meta-message'] }); - - this.update(newAlias, null, { customContent: true }); + this._append({ body: message, + group: 'meta', + styles: ['chat-meta-message'] }); this._filterMessages(); + } +}); + +const ChatLineBox = new Lang.Class({ + Name: 'ChatLineBox', + Extends: St.BoxLayout, + + vfunc_get_preferred_height: function(forWidth) { + let [, natHeight] = this.parent(forWidth); + return [natHeight, natHeight]; + } +}); + +const ChatNotificationBanner = new Lang.Class({ + Name: 'ChatNotificationBanner', + Extends: MessageTray.NotificationBanner, + + _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)); + this.setActionArea(this._responseEntry); + + this._responseEntry.clutter_text.connect('key-focus-in', Lang.bind(this, function() { + this.focused = true; + })); + this._responseEntry.clutter_text.connect('key-focus-out', Lang.bind(this, function() { + this.focused = false; + this.emit('unfocused'); + })); + + this._scrollArea = new St.ScrollView({ style_class: 'chat-scrollview vfade', + 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.vscroll.adjustment.connect('changed', Lang.bind(this, function(adjustment) { + if (adjustment.value == this._oldMaxScrollValue) + this.scrollTo(St.Side.BOTTOM); + this._oldMaxScrollValue = Math.max(adjustment.lower, adjustment.upper - adjustment.page_size); + })); + + this._inputHistory = new History.HistoryManager({ entry: this._responseEntry.clutter_text }); + + this._composingTimeoutId = 0; + + this._messageActors = new Map(); + + this._messageAddedId = this.notification.connect('message-added', + Lang.bind(this, function(n, message) { + this._addMessage(message); + })); + this._messageRemovedId = this.notification.connect('message-removed', + Lang.bind(this, function(n, message) { + let actor = this._messageActors.get(message); + if (this._messageActors.delete(message)) + actor.destroy(); + })); + this._timestampChangedId = this.notification.connect('timestamp-changed', + Lang.bind(this, function(n, message) { + this._updateTimestamp(message); + })); + + for (let i = this.notification.messages.length - 1; i >= 0; i--) + this._addMessage(this.notification.messages[i]); + }, + + _onDestroy: function() { + this.parent(); + this.notification.disconnect(this._messageAddedId); + this.notification.disconnect(this._messageRemovedId); + this.notification.disconnect(this._timestampChangedId); + }, + + 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; + }, + + _addMessage: function(message) { + let highlighter = new Calendar.URLHighlighter(message.body, true, true); + let body = highlighter.actor; + + let styles = message.styles; + for (let i = 0; i < styles.length; i++) + body.add_style_class_name(styles[i]); + + let group = message.group; + if (group != this._lastGroup) { + this._lastGroup = group; + body.add_style_class_name('chat-new-group'); + } + + let lineBox = new ChatLineBox(); + lineBox.add(body); + this._contentArea.add_actor(lineBox); + this._messageActors.set(message, lineBox); + + this._updateTimestamp(message); + }, + + _updateTimestamp: function(message) { + let actor = this._messageActors.get(message); + if (!actor) + return; + + while (actor.get_n_children() > 1) + actor.get_child_at_index(1).destroy(); + + if (message.showTimestamp) { + let lastMessageTime = message.timestamp; + let lastMessageDate = new Date(lastMessageTime * 1000); + + let timeLabel = Util.createTimeLabel(lastMessageDate); + timeLabel.style_class = 'chat-meta-message'; + timeLabel.x_expand = timeLabel.y_expand = true; + timeLabel.x_align = timeLabel.y_align = Clutter.ActorAlign.END; + + actor.add_actor(timeLabel); + } }, _onEntryActivated: function() { @@ -790,13 +883,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; }, @@ -816,14 +909,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); } } });