From 904ceba6b255cb996f6a8bc662f99841233a9ac0 Mon Sep 17 00:00:00 2001 From: Giovanni Campagna Date: Mon, 28 May 2012 00:50:56 +0200 Subject: [PATCH] Add a clock to the lock screen Start implementing the lock screen design by adding a big white clock in the middle. https://bugzilla.gnome.org/show_bug.cgi?id=619955 --- data/theme/gnome-shell.css | 15 ++++++++ js/ui/screenShield.js | 71 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index e8c0336a5..25cddd3f4 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -2206,3 +2206,18 @@ StScrollBar StButton#vhandle:hover width: 100px; height: 50px; } + +.screen-shield-clock { + color: white; + text-shadow: black 0px 0px 0px 1px; + font-weight: bold; + text-align: center; +} + +.screen-shield-clock-time { + font-size: 86px; +} + +.screen-shield-clock-date { + font-size: 48px; +} diff --git a/js/ui/screenShield.js b/js/ui/screenShield.js index e69cc7f20..1e3d7b95d 100644 --- a/js/ui/screenShield.js +++ b/js/ui/screenShield.js @@ -2,6 +2,7 @@ const Clutter = imports.gi.Clutter; const Gio = imports.gi.Gio; +const GnomeDesktop = imports.gi.GnomeDesktop; const Lang = imports.lang; const Meta = imports.gi.Meta; const Signals = imports.signals; @@ -20,6 +21,43 @@ const CURTAIN_SLIDE_TIME = 1.2; // the slide up automatically const ARROW_DRAG_TRESHOLD = 0.4; +const Clock = new Lang.Class({ + Name: 'ScreenShieldClock', + + CLOCK_FORMAT_KEY: 'clock-format', + CLOCK_SHOW_SECONDS_KEY: 'clock-show-seconds', + + _init: function() { + this.actor = new St.BoxLayout({ style_class: 'screen-shield-clock', + vertical: true }); + + this._time = new St.Label({ style_class: 'screen-shield-clock-time' }); + this._date = new St.Label({ style_class: 'screen-shield-clock-date' }); + + this.actor.add(this._time, { x_align: St.Align.MIDDLE }); + this.actor.add(this._date, { x_align: St.Align.MIDDLE }); + + this._wallClock = new GnomeDesktop.WallClock({ time_only: true }); + this._wallClock.connect('notify::clock', Lang.bind(this, this._updateClock)); + + this._updateClock(); + }, + + _updateClock: function() { + this._time.text = this._wallClock.clock; + + let date = new Date(); + /* Translators: This is a time format for a date in + long format */ + this._date.text = date.toLocaleFormat(_("%A, %B %d")); + }, + + destroy: function() { + this.actor.destroy(); + this._wallClock.run_dispose(); + } +}); + /** * To test screen shield, make sure to kill gnome-screensaver. * @@ -89,6 +127,7 @@ const ScreenShield = new Lang.Class({ this._isModal = false; this._isLocked = false; + this._hasLockScreen = false; this._lightbox = new Lightbox.Lightbox(Main.uiGroup, { inhibitEvents: true, fadeInTime: 10, fadeFactor: 1 }); @@ -245,11 +284,40 @@ const ScreenShield = new Lang.Class({ this._lockScreenGroup.grab_key_focus(); }, + // Some of the actors in the lock screen are heavy in + // resources, so we only create them when needed + _prepareLockScreen: function() { + this._lockScreenContentsBox = new St.BoxLayout({ x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.CENTER, + x_expand: true, + y_expand: true, + vertical: true }); + this._clock = new Clock(); + this._lockScreenContentsBox.add(this._clock.actor, { x_fill: true, + y_fill: true }); + + this._lockScreenGroup.add_actor(this._lockScreenContentsBox); + + this._hasLockScreen = true; + }, + + _clearLockScreen: function() { + this._clock.destroy(); + this._clock = null; + + this._lockScreenContentsBox.destroy(); + + this._hasLockScreen = false; + }, + get locked() { return this._isLocked; }, unlock: function() { + if (this._hasLockScreen) + this._clearLockScreen(); + if (this._keepDialog) { // The dialog must be kept alive, // so immediately go back to it @@ -275,6 +343,9 @@ const ScreenShield = new Lang.Class({ }, lock: function() { + if (!this._hasLockScreen) + this._prepareLockScreen(); + if (!this._isModal) { Main.pushModal(this.actor); this._isModal = true;