feat(ags): add clock widget

This commit is contained in:
matt1432 2023-09-05 19:22:54 -04:00
parent 7762083bb3
commit 47013dd498
4 changed files with 40 additions and 17 deletions

View file

@ -8,6 +8,7 @@ import { Heart } from './heart.js';
import { TabletToggle } from './tablet-toggle.js'; import { TabletToggle } from './tablet-toggle.js';
import { QsToggle } from './quick-settings.js'; import { QsToggle } from './quick-settings.js';
import { NotifButton } from './notif-button.js'; import { NotifButton } from './notif-button.js';
import { Clock } from './clock.js';
export const Bar = Window({ export const Bar = Window({
name: 'left-bar', name: 'left-bar',
@ -52,6 +53,10 @@ export const Bar = Window({
Box({ Box({
halign: 'end', halign: 'end',
children: [ children: [
Clock,
Separator(12),
NotifButton, NotifButton,
Separator(12), Separator(12),

View file

@ -0,0 +1,18 @@
const { Box, Label } = ags.Widget;
const { execAsync } = ags.Utils;
const { DateTime } = imports.gi.GLib;
const ClockModule = ({
format = '%a. %e %b. %H:%M',
interval = 1000,
...props
}) => Label({
...props,
className: 'clock',
connections: [[interval, label => label.label = DateTime.new_now_local().format(format)]],
});
export const Clock = Box({
className: 'toggle-off',
child: ClockModule({}),
});

View file

@ -22,15 +22,6 @@
} }
} }
.filler {
border-left: 2px solid $contrastbg;
border-right: 2px solid $contrastbg;
min-height: 14px;
min-width: 105px;
background-color: $bg;
transition: all 0.5s;
}
.quick-settings-toggle { .quick-settings-toggle {
font-size: 24px; font-size: 24px;
min-height: 40px; min-height: 40px;
@ -62,3 +53,12 @@
transition: background-color 0.5s ease-in-out, transition: background-color 0.5s ease-in-out,
border 0.5s ease-in-out; border 0.5s ease-in-out;
} }
.clock {
font-size: 20px;
padding-left: 10px;
padding-right: 10px;
min-width: 230px;
border: 2px solid rgba(#382c4a, 0.8);
border-radius: 80px;
}

View file

@ -58,14 +58,6 @@
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
border-bottom: 0px solid rgba(40, 42, 54, 0.8); } border-bottom: 0px solid rgba(40, 42, 54, 0.8); }
.filler {
border-left: 2px solid rgba(189, 147, 249, 0.8);
border-right: 2px solid rgba(189, 147, 249, 0.8);
min-height: 14px;
min-width: 105px;
background-color: rgba(40, 42, 54, 0.8);
transition: all 0.5s; }
.quick-settings-toggle { .quick-settings-toggle {
font-size: 24px; font-size: 24px;
min-height: 40px; min-height: 40px;
@ -91,6 +83,14 @@
background-color: rgba(127, 132, 156, 0.4); background-color: rgba(127, 132, 156, 0.4);
transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
.clock {
font-size: 20px;
padding-left: 10px;
padding-right: 10px;
min-width: 230px;
border: 2px solid rgba(56, 44, 74, 0.8);
border-radius: 80px; }
.workspaces { .workspaces {
background-color: rgba(40, 42, 54, 0.8); background-color: rgba(40, 42, 54, 0.8);
border-radius: 80px; border-radius: 80px;