ScreenShield: fix spacing of notifications and sources

Reduce padding around persistent sources, and ensure that spacing
around resident notifications is only applied once.
Also, add some padding to the clock.

https://bugzilla.gnome.org/show_bug.cgi?id=681143

data/theme/gnome-shell.css

@@ -1220,17 +1220,17 @@ StButton.popup-menu-item:insensitive {
     padding-bottom: 12px;
 }
 
-#summary-notification-stack-scrollview {
+.summary-notification-stack-scrollview {
     max-height: 18em;
     padding-top: 6px;
     padding-bottom: 6px;
 }
 
-#summary-notification-stack-scrollview:ltr {
+.summary-notification-stack-scrollview:ltr {
     padding-right: 8px;
 }
 
-#summary-notification-stack-scrollview:rtl {
+.summary-notification-stack-scrollview:rtl {
     padding-left: 8px;
 }
 
@@ -2216,6 +2216,7 @@ StButton.popup-menu-item:insensitive {
     text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
     font-weight: bold;
     text-align: center;
+    padding-bottom: 1.5em;
 }
 
 .screen-shield-clock-time {
@@ -2228,17 +2229,19 @@ StButton.popup-menu-item:insensitive {
 }
 
 #screenShieldNotifications {
-    border-radius: 24px;
+    border-radius: 8px;
     background-color: rgba(0.0, 0.0, 0.0, 0.9);
     border: 2px solid #868686;
+    max-height: 500px;
+    padding: 12px 0;
 }
 
-#screenShieldNotifications, .screen-shield-notifications-box {
-    spacing: 8px;
+.screen-shield-notifications-box {
+    spacing: 12px;
 }
 
 .screen-shield-notification-source {
-    padding: 24px 8px;
+    padding: 0 24px;
     spacing: 5px;
 }
 
@@ -2253,3 +2256,12 @@ StButton.popup-menu-item:insensitive {
 .screen-shield-notifications-box .notification {
     background-color: transparent;
 }
+
+/* Override padding on resident notifications, since
+   the notifications box has its own spacing
+*/
+.screen-shield-notifications-box .summary-notification-stack-scrollview {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+

js/ui/messageTray.js

@@ -1039,6 +1039,7 @@ const SourceActor = new Lang.Class({
 
     _init: function(source, size) {
         this._source = source;
+        this._size = size;
 
         this.actor = new Shell.GenericContainer();
         this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
@@ -1064,10 +1065,14 @@ const SourceActor = new Lang.Class({
 
         this._source.connect('count-changed', Lang.bind(this, this._updateCount));
         this._updateCount();
+
+        this._source.connect('icon-updated', Lang.bind(this, this._updateIcon));
+        this._updateIcon();
     },
 
     setIcon: function(icon) {
         this._iconBin.child = icon;
+        this._iconSet = true;
     },
 
     _getPreferredWidth: function (actor, forHeight, alloc) {
@@ -1105,13 +1110,21 @@ const SourceActor = new Lang.Class({
         this._counterBin.allocate(childBox, flags);
     },
 
+    _updateIcon: function() {
+        if (this._actorDestroyed)
+            return;
+
+        if (!this._iconSet)
+            this._iconBin.child = this._source.createIcon(this._size);
+    },
+
     _updateCount: function() {
         if (this._actorDestroyed)
             return;
 
         this._counterBin.visible = this._source.countVisible;
         this._counterLabel.set_text(this._source.count.toString());
-    },
+    }
 });
 
 const Source = new Lang.Class({
@@ -1133,7 +1146,6 @@ const Source = new Lang.Class({
         this.notifications = [];
 
         this.mainIcon = new SourceActor(this, this.ICON_SIZE);
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
     },
 
     _setCount: function(count, visible) {
@@ -1222,9 +1234,14 @@ const Source = new Lang.Class({
         return false;
     },
 
+    iconUpdated: function() {
+        this.emit('icon-updated');
+    },
+
     //// Protected methods ////
     _setSummaryIcon: function(icon) {
         this.mainIcon.setIcon(icon);
+        this.iconUpdated();
     },
 
     open: function(notification) {
@@ -1284,12 +1301,12 @@ const SummaryItem = new Lang.Class({
         this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
         this.actor.child = this._sourceBox;
 
-        this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview',
+        this.notificationStackView = new St.ScrollView({ style_class: source.isChat ? '' : 'summary-notification-stack-scrollview',
                                                          vscrollbar_policy: source.isChat ? Gtk.PolicyType.NEVER : Gtk.PolicyType.AUTOMATIC,
-                                                         hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                                         style_class: 'vfade' });
-        this.notificationStack = new St.BoxLayout({ name: 'summary-notification-stack',
-                                                     vertical: true });
+                                                         hscrollbar_policy: Gtk.PolicyType.NEVER });
+        this.notificationStackView.add_style_class_name('vfade');
+        this.notificationStack = new St.BoxLayout({ style_class: 'summary-notification-stack',
+                                                    vertical: true });
         this.notificationStackView.add_actor(this.notificationStack);
         this._stackedNotifications = [];
 

js/ui/notificationDaemon.js

@@ -557,7 +557,8 @@ const Source = new Lang.Class({
     processNotification: function(notification, gicon) {
         if (gicon)
             this._gicon = gicon;
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+        if (!this.trayIcon)
+            this.iconUpdated();
 
         let tracker = Shell.WindowTracker.get_default();
         if (notification.resident && this.app && tracker.focus_app == this.app)
@@ -625,7 +626,7 @@ const Source = new Lang.Class({
         // notification-based icons (ie, not a trayicon) or if it was unset before
         if (!this.trayIcon) {
             this.useNotificationIcon = false;
-            this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+            this.iconUpdated();
         }
     },
 

js/ui/screenShield.js

@@ -17,18 +17,23 @@ const Tweener = imports.ui.tweener;
 const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 const LOCK_ENABLED_KEY = 'lock-enabled';
 
-const CURTAIN_SLIDE_TIME = 1.2;
+const CURTAIN_SLIDE_TIME = 0.8;
 // fraction of screen height the arrow must reach before completing
 // the slide up automatically
 const ARROW_DRAG_TRESHOLD = 0.1;
 
+// The distance in px that the lock screen will move to when pressing
+// a key that has no effect in the lock screen (bumping it)
+const BUMP_SIZE = 25;
+const BUMP_TIME = 0.3;
+
 const SUMMARY_ICON_SIZE = 48;
 
 // Lightbox fading times
 // STANDARD_FADE_TIME is used when the session goes idle, while
 // SHORT_FADE_TIME is used when requesting lock explicitly from the user menu
 const STANDARD_FADE_TIME = 10;
-const SHORT_FADE_TIME = 2;
+const SHORT_FADE_TIME = 0.8;
 
 const Clock = new Lang.Class({
     Name: 'ScreenShieldClock',
@@ -72,17 +77,18 @@ const NotificationsBox = new Lang.Class({
 
     _init: function() {
         this.actor = new St.BoxLayout({ vertical: true,
-                                        name: 'screenShieldNotifications',
-                                        margin_top: 20
-                                      });
+                                       name: 'screenShieldNotifications',
+                                       style_class: 'screen-shield-notifications-box' });
 
         this._residentNotificationBox = new St.BoxLayout({ vertical: true,
                                                            style_class: 'screen-shield-notifications-box' });
+        let scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.MIDDLE });
         this._persistentNotificationBox = new St.BoxLayout({ vertical: true,
                                                              style_class: 'screen-shield-notifications-box' });
+        scrollView.add_actor(this._persistentNotificationBox);
 
         this.actor.add(this._residentNotificationBox, { x_fill: true });
-        this.actor.add(this._persistentNotificationBox, { x_fill: false, x_align: St.Align.MIDDLE });
+        this.actor.add(scrollView, { x_fill: true, x_align: St.Align.MIDDLE });
 
         this._items = [];
         Main.messageTray.getSummaryItems().forEach(Lang.bind(this, function(item) {
@@ -129,13 +135,11 @@ const NotificationsBox = new Lang.Class({
     _makeNotificationSource: function(source) {
         let box = new St.BoxLayout({ style_class: 'screen-shield-notification-source' });
 
-        let iconClone = source.createIcon(SUMMARY_ICON_SIZE);
         let sourceActor = new MessageTray.SourceActor(source, SUMMARY_ICON_SIZE);
-        sourceActor.setIcon(iconClone);
         box.add(sourceActor.actor, { y_fill: true });
 
         let textBox = new St.BoxLayout({ vertical: true });
-        box.add(textBox, { y_fill: true, expand: true });
+        box.add(textBox);
 
         let label = new St.Label({ text: source.title,
                                    style_class: 'screen-shield-notification-label' });
@@ -169,11 +173,12 @@ const NotificationsBox = new Lang.Class({
             this._residentNotificationBox.add(item.notificationStackView);
         } else {
             [obj.sourceBox, obj.countLabel] = this._makeNotificationSource(item.source);
-            this._persistentNotificationBox.add(obj.sourceBox);
+            this._persistentNotificationBox.add(obj.sourceBox, { x_fill: false, x_align: St.Align.MIDDLE });
         }
 
         obj.contentUpdatedId = item.connect('content-updated', Lang.bind(this, this._onItemContentUpdated));
-        obj.sourceCountChangedId = item.source.connect('count-changed', Lang.bind(this, this._onSourceCountChanged));
+        obj.sourceCountChangedId = item.source.connect('count-changed', Lang.bind(this, this._onSourceChanged));
+        obj.sourceTitleChangedId = item.source.connect('title-changed', Lang.bind(this, this._onSourceChanged));
         obj.sourceDestroyId = item.source.connect('destroy', Lang.bind(this, this._onSourceDestroy));
         this._items.push(obj);
 
@@ -194,7 +199,7 @@ const NotificationsBox = new Lang.Class({
         this._updateItem(obj);
     },
 
-    _onSourceCountChanged: function(source) {
+    _onSourceChanged: function(source) {
         let obj = this._items[this._findSource(source)];
         this._updateItem(obj);
     },
@@ -274,13 +279,12 @@ const ScreenShield = new Lang.Class({
                                                 can_focus: true,
                                                 layout_manager: new Clutter.BinLayout()
                                               });
-        this._lockScreenGroup.connect('key-release-event',
-                                      Lang.bind(this, this._onLockScreenKeyRelease));
 
         this._background = Meta.BackgroundActor.new_for_screen(global.screen);
-        this._lockScreenGroup.add_actor(this._background);
+        this._background.add_effect(new Clutter.BlurEffect());
+        this._background.add_effect(new Clutter.DesaturateEffect({ factor: 0.6 }));
 
-        // FIXME: build the rest of the lock screen here
+        this._lockScreenGroup.add_actor(this._background);
 
         this._arrow = new St.DrawingArea({ style_class: 'arrow',
                                            reactive: true,
@@ -329,13 +333,17 @@ const ScreenShield = new Lang.Class({
                                                  fadeFactor: 1 });
     },
 
-    _onLockScreenKeyRelease: function(actor, event) {
+    _onStageKeyRelease: function(actor, event) {
+        if (!this._isLocked)
+            return false;
+
         if (event.get_key_symbol() == Clutter.KEY_Escape) {
             this._showUnlockDialog(true);
             return true;
         }
 
-        return false;
+        this._bumpLockScreen();
+        return true;
     },
 
     _drawArrow: function() {
@@ -410,6 +418,21 @@ const ScreenShield = new Lang.Class({
         this._showUnlockDialog(false);
     },
 
+    _bumpLockScreen: function() {
+        Tweener.removeTweens(this._lockScreenGroup);
+        Tweener.addTween(this._lockScreenGroup,
+                         { y: -BUMP_SIZE,
+                           time: BUMP_TIME / 2,
+                           transition: 'easeOutQuad',
+                           onComplete: function() {
+                               Tweener.addTween(this,
+                                                { y: 0,
+                                                  time: BUMP_TIME / 2,
+                                                  transition: 'easeInQuad' });
+                           }
+                         });
+    },
+
     _showUnlockDialog: function(animate) {
         if (animate) {
             // Tween the lock screen out of screen
@@ -473,27 +496,30 @@ const ScreenShield = new Lang.Class({
     },
 
     _resetLockScreen: function(animate) {
+        this._lockScreenGroup.show();
+        this._arrow.show();
+
         if (animate) {
-            this.actor.opacity = 0;
-            Tweener.removeTweens(this.actor);
-            Tweener.addTween(this.actor,
-                             { opacity: 255,
+            this._lockScreenGroup.y = -global.screen_height;
+            Tweener.removeTweens(this._lockScreenGroup);
+            Tweener.addTween(this._lockScreenGroup,
+                             { y: 0,
                                time: SHORT_FADE_TIME,
-                               transition: 'easeOutQuad',
+                               transition: 'linear',
                                onComplete: function() {
+                                   this._lockScreenGroup.fixed_position_set = false;
                                    this.emit('lock-screen-shown');
                                },
                                onCompleteScope: this
                              });
         } else {
+            this._lockScreenGroup.fixed_position_set = false;
             this.emit('lock-screen-shown');
         }
 
-        this._lockScreenGroup.fixed_position_set = false;
-        this._lockScreenGroup.show();
-        this._arrow.show();
-
-        this._lockScreenGroup.grab_key_focus();
+        if (!this._stageKeyHandler)
+            this._stageKeyHandler = global.stage.connect('key-release-event',
+                                                         Lang.bind(this, this._onStageKeyRelease));
     },
 
     // Some of the actors in the lock screen are heavy in
@@ -542,6 +568,11 @@ const ScreenShield = new Lang.Class({
         if (this._hasLockScreen)
             this._clearLockScreen();
 
+        if (this._stageKeyHandler) {
+            global.stage.disconnect(this._stageKeyHandler);
+            this._stageKeyHandler = 0;
+        }
+
         if (this._keepDialog) {
             // The dialog must be kept alive,
             // so immediately go back to it

js/ui/telepathyClient.js

@@ -532,7 +532,7 @@ const ChatSource = new Lang.Class({
     },
 
     _updateAvatarIcon: function() {
-        this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+        this.iconUpdated();
         this._notification.update(this._notification.title, null, { customContent: true });
     },