diff --git a/modules/ags/config/scss/lockscreen.scss b/modules/ags/config/scss/lockscreen.scss index 0162217..228e7d3 100644 --- a/modules/ags/config/scss/lockscreen.scss +++ b/modules/ags/config/scss/lockscreen.scss @@ -3,3 +3,8 @@ window { background-color: transparent; } + +.clock { + font-size: 80pt; + font-family: "Ubuntu Mono"; +} diff --git a/modules/ags/config/ts/lockscreen/main.ts b/modules/ags/config/ts/lockscreen/main.ts index a8c9770..a0d18b1 100644 --- a/modules/ags/config/ts/lockscreen/main.ts +++ b/modules/ags/config/ts/lockscreen/main.ts @@ -1,9 +1,11 @@ -const { Box, Entry, Label, Separator, Window } = Widget; +const { Box, Entry, Label, Window } = Widget; import Gdk from 'gi://Gdk?version=3.0'; import Gtk from 'gi://Gtk?version=3.0'; import Lock from 'gi://GtkSessionLock?version=0.1'; +import Separator from '../misc/separator.ts'; + /* Types */ import { Box as AgsBox } from 'types/widgets/box'; @@ -13,8 +15,10 @@ const windows: Gtk.Window[] = []; const blurBGs: AgsBox[] = []; const transition_duration = 1000; -const windowMargins = -2; -const bgCSS = ({ w = 1, h = 1 } = {}) =>` +const WINDOW_MARGINS = -2; +const ENTRY_SPACING = 20; +const CLOCK_SPACING = 60; +const bgCSS = ({ w = 1, h = 1 } = {}) => ` border: 2px solid rgba(189, 147, 249, 0.8); background: rgba(0, 0, 0, 0.2); min-height: ${h}px; @@ -44,6 +48,17 @@ const unlock = () => { }); }; +const Clock = () => Label({ class_name: 'clock' }) + .poll(1000, (self) => { + self.label = (new Date().toLocaleString([], { + hour: 'numeric', + minute: 'numeric', + hour12: true, + }) ?? '') + .replace('a.m.', 'AM') + .replace('p.m.', 'PM'); + }); + const PasswordPrompt = (monitor: Gdk.Monitor) => { const rev = Box({ css: bgCSS(), @@ -78,7 +93,7 @@ const PasswordPrompt = (monitor: Gdk.Monitor) => { gdkmonitor: monitor, layer: 'overlay', anchor: ['top', 'bottom', 'right', 'left'], - margins: [windowMargins], + margins: [WINDOW_MARGINS], exclusivity: 'ignore', child: Box({ @@ -93,13 +108,17 @@ const PasswordPrompt = (monitor: Gdk.Monitor) => { const label = Label('Enter password:'); return new Gtk.Window({ - child: Widget.Box({ + child: Box({ vertical: true, vpack: 'center', hpack: 'center', spacing: 16, children: [ + Clock(), + + Separator(CLOCK_SPACING, { vertical: true }), + Box({ hpack: 'center', class_name: 'avatar', @@ -111,7 +130,7 @@ const PasswordPrompt = (monitor: Gdk.Monitor) => { children: [ label, - Separator(), + Separator(ENTRY_SPACING, { vertical: true }), Entry({ hpack: 'center',