[gnome-shell/gbsneto/new-lock-screen-part2: 1/6] unlockDialog: Add .critical CSS class to critical notifications

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit c8f630c89dc69875e50b0e8cb57b5e903f9c3c4e
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Feb 5 11:58:57 2020 -0300

    unlockDialog: Add .critical CSS class to critical notifications
    
    As per the latest lock screen mockups, critical notifications must have
    a more prominent, solid color.
    
    Add a .critical style class to critical notification bubbles, and make
    them darker.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/872

 data/theme/gnome-shell-sass/widgets/_screen-shield.scss |  2 ++
 js/ui/unlockDialog.js                                   | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss 
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index a28ef27384..2c45589aca 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -35,6 +35,8 @@
     background-color: transparentize($osd_bg_color,0.5);
     color: $osd_fg_color;
     border-radius: 4px;
+
+    &.critical { background-color: transparentize($osd_bg_color,0.1) }
   }
 }
 
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index 85d7f5448d..4e802c5439 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -145,6 +145,20 @@ var NotificationsBox = GObject.registerClass({
                source.narrowestPrivacyScope === MessageTray.PrivacyScope.SYSTEM;
     }
 
+    _updateSourceBoxStyle(source, obj, box) {
+        let hasCriticalNotification =
+            source.notifications.some(n => n.urgency === MessageTray.Urgency.CRITICAL);
+
+        if (hasCriticalNotification !== obj.hasCriticalNotification) {
+            obj.hasCriticalNotification = hasCriticalNotification;
+
+            if (hasCriticalNotification)
+                box.style_class = 'unlock-dialog-notification-source critical';
+            else
+                box.style_class = 'unlock-dialog-notification-source';
+        }
+    }
+
     _showSource(source, obj, box) {
         if (obj.detailed)
             [obj.titleLabel, obj.countLabel] = this._makeNotificationDetailedSource(source, box);
@@ -152,6 +166,8 @@ var NotificationsBox = GObject.registerClass({
             [obj.titleLabel, obj.countLabel] = this._makeNotificationSource(source, box);
 
         box.visible = obj.visible && (source.unseenCount > 0);
+
+        this._updateSourceBoxStyle(source, obj, box);
     }
 
     _sourceAdded(tray, source, initial) {
@@ -165,6 +181,7 @@ var NotificationsBox = GObject.registerClass({
             sourceBox: null,
             titleLabel: null,
             countLabel: null,
+            hasCriticalNotification: false,
         };
 
         obj.sourceBox = new St.BoxLayout({