[gnome-shell/T27795: 122/138] screenShield: Style the clock actor and center vertical arrows

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

commit 5a60b2be8e0e2e6c3e2b0438b8ea0856d97101d1
Author: Mario Sanchez Prada <mario endlessm com>
Date:   Mon Oct 9 18:26:54 2017 +0100

    screenShield: Style the clock actor and center vertical arrows
    
    As per the design spec, we want to use the Metropolis font for
    the clock actor, tweak a bit the text's color and opacity and
    also ensure that the box for the vertical arrows gets vertically
    centered between the bottom of the clock's actor and the top of
    the task bar.
    
    https://phabricator.endlessm.com/T19165

 data/theme/gnome-shell-sass/_endless.scss | 16 +++++++++
 js/ui/screenShield.js                     | 57 +++++++++++++++++++++----------
 2 files changed, 55 insertions(+), 18 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_endless.scss b/data/theme/gnome-shell-sass/_endless.scss
index a1753f7222..082e07cad5 100644
--- a/data/theme/gnome-shell-sass/_endless.scss
+++ b/data/theme/gnome-shell-sass/_endless.scss
@@ -17,6 +17,22 @@
   background: #12282e url(resource:///org/gnome/shell/theme/noise-texture.png);
 }
 
+.screen-shield-clock-time {
+  font-family: Metropolis Medium, sans-serif;
+  font-weight: 500; /* Medium */
+  font-size: 100px;
+  text-shadow: 5px 0px 7px rgba(0, 0, 0, 0.25);
+  color: rgba(246, 246, 246, 0.7);
+}
+
+.screen-shield-clock-date {
+  font-family: Metropolis Semibold, sans-serif;
+  font-weight: 600; /* Semibold */
+  font-size: 36px;
+  text-shadow: 5px 0px 7px rgba(0, 0, 0, 0.35);
+  color: rgba(246, 246, 246, 0.7);
+}
+
 // Force Apps dialog
 
 .force-app-exit-dialog {
diff --git a/js/ui/screenShield.js b/js/ui/screenShield.js
index 7bae43622c..44dc7493d6 100644
--- a/js/ui/screenShield.js
+++ b/js/ui/screenShield.js
@@ -417,6 +417,30 @@ function clamp(value, min, max) {
     return Math.max(min, Math.min(max, value));
 }
 
+var ArrowContainerConstraint = GObject.registerClass(
+class ArrowContainerConstraint extends Clutter.Constraint {
+    _init(contentsActor, clockActor) {
+        super._init();
+
+        this._contentsActor = contentsActor;
+        this._clockActor = clockActor;
+    }
+
+    vfunc_update_allocation(actor, actorBox) {
+        let [clockActorPosX, clockActorPosY] = this._clockActor.get_transformed_position();
+        let [clockActorWidth, clockActorHeight] = this._clockActor.get_transformed_size();
+
+        let availableHeight = this._contentsActor.get_height() - Main.panel.actor.get_height();
+        let clockActorBottom = clockActorPosY + clockActorHeight;
+        let arrowsContainerHeight = availableHeight - clockActorBottom;
+        let verticalPadding = Math.max(0, arrowsContainerHeight - actorBox.get_height()) / 2.0;
+
+        // Center vertically between the clock actor and the bottom panel.
+        actorBox.init_rect(actorBox.get_x(), clockActorBottom + verticalPadding,
+                           actorBox.get_width(), actorBox.get_height());
+    }
+});
+
 /**
  * If you are setting org.gnome.desktop.session.idle-delay directly in dconf,
  * rather than through System Settings, you also need to set
@@ -459,24 +483,6 @@ var ScreenShield = class {
         this._updateBackgrounds();
         Main.layoutManager.connect('monitors-changed', this._updateBackgrounds.bind(this));
 
-        this._arrowAnimationId = 0;
-        this._arrowWatchId = 0;
-        this._arrowActiveWatchId = 0;
-        this._arrowContainer = new St.BoxLayout({ style_class: 'screen-shield-arrows',
-                                                  vertical: true,
-                                                  x_align: Clutter.ActorAlign.CENTER,
-                                                  y_align: Clutter.ActorAlign.END,
-                                                  // HACK: without these, ClutterBinLayout
-                                                  // ignores alignment properties on the actor
-                                                  x_expand: true,
-                                                  y_expand: true });
-
-        for (let i = 0; i < N_ARROWS; i++) {
-            let arrow = new Arrow({ opacity: 0 });
-            this._arrowContainer.add_actor(arrow);
-        }
-        this._lockScreenContents.add_actor(this._arrowContainer);
-
         this._dragAction = new Clutter.GestureAction();
         this._dragAction.connect('gesture-begin', this._onDragBegin.bind(this));
         this._dragAction.connect('gesture-progress', this._onDragMotion.bind(this));
@@ -1147,6 +1153,21 @@ var ScreenShield = class {
                                                                         y_fill: true,
                                                                         expand: true });
 
+        this._arrowAnimationId = 0;
+        this._arrowWatchId = 0;
+        this._arrowActiveWatchId = 0;
+        this._arrowContainer = new St.BoxLayout({ style_class: 'screen-shield-arrows',
+                                                  vertical: true,
+                                                  x_align: Clutter.ActorAlign.CENTER,
+                                                  x_expand: true});
+
+        for (let i = 0; i < N_ARROWS; i++) {
+            let arrow = new Arrow({ opacity: 0 });
+            this._arrowContainer.add_actor(arrow);
+        }
+        this._lockScreenContents.add_actor(this._arrowContainer);
+        this._arrowContainer.add_constraint(new ArrowContainerConstraint(this._lockScreenContents, 
this._clock.actor));
+
         this._hasLockScreen = true;
     }