[gnome-shell/T27795: 122/138] screenShield: Style the clock actor and center vertical arrows
- From: Georges Basile Stavracas Neto <gbsneto src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/T27795: 122/138] screenShield: Style the clock actor and center vertical arrows
- Date: Tue, 1 Oct 2019 23:39:35 +0000 (UTC)
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;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]