feat(ags): add calendar widget

This commit is contained in:
matt1432 2023-09-11 21:10:00 -04:00
parent 53eda996c9
commit 40457938ce
8 changed files with 172 additions and 68 deletions

View file

@ -4,6 +4,7 @@ import { Bar } from './js/bar/bar.js';
import { NotificationCenter } from './js/notifications/center.js'; import { NotificationCenter } from './js/notifications/center.js';
import { NotificationsPopupList } from './js/notifications/popup.js' import { NotificationsPopupList } from './js/notifications/popup.js'
import { Closer } from './js/misc/closer.js'; import { Closer } from './js/misc/closer.js';
import { Calendar } from './js/date.js';
const scss = ags.App.configDir + '/scss/main.scss'; const scss = ags.App.configDir + '/scss/main.scss';
const css = ags.App.configDir + '/style.css'; const css = ags.App.configDir + '/style.css';
@ -20,5 +21,6 @@ export default {
Closer, Closer,
NotificationCenter, NotificationCenter,
NotificationsPopupList, NotificationsPopupList,
Calendar,
], ],
}; };

View file

@ -1,7 +1,10 @@
const { Box, Label } = ags.Widget; const { Box, Label } = ags.Widget;
const { execAsync } = ags.Utils; const { execAsync } = ags.Utils;
const { openWindow, closeWindow } = ags.App;
const { DateTime } = imports.gi.GLib; const { DateTime } = imports.gi.GLib;
import { EventBox } from '../misc/cursorbox.js';
const ClockModule = ({ const ClockModule = ({
interval = 1000, interval = 1000,
...params ...params
@ -16,7 +19,23 @@ const ClockModule = ({
], ],
}); });
export const Clock = Box({ var calendarState = false;
export const Clock = EventBox({
className: 'toggle-off', className: 'toggle-off',
child: ClockModule({}), onPrimaryClickRelease: () => {
if (calendarState) {
Clock.toggleClassName('toggle-on', false);
closeWindow('calendar');
calendarState = false;
}
else {
Clock.toggleClassName('toggle-on', true);
openWindow('calendar');
calendarState = true;
}
},
child: Box({
child: ClockModule({}),
}),
}); });

82
config/ags/js/date.js Normal file
View file

@ -0,0 +1,82 @@
const { Box, Label, Window } = ags.Widget;
const { Gtk } = imports.gi;
const { DateTime } = imports.gi.GLib;
const Divider = () => Box({
className: 'divider',
vertical: true,
});
const Time = () => Box({
className: 'timebox',
vertical: true,
children: [
Box({
className: 'time-container',
halign: 'center',
valign: 'center',
children: [
Label({
className: 'content',
label: 'hour',
connections: [[1000, label => {
label.label = DateTime.new_now_local().format('%H');
}]],
}),
Divider(),
Label({
className: 'content',
label: 'minute',
connections: [[1000, label => {
label.label = DateTime.new_now_local().format('%M');
}]],
}),
],
}),
Box({
className: 'date-container',
halign: 'center',
child: Label({
style: 'font-size: 20px',
label: 'complete date',
connections: [[1000, label => {
var time = DateTime.new_now_local();
label.label = time.format("%A, %B ") + time.get_day_of_month() + time.format(", %Y");
}]],
}),
}),
],
});
const CalendarWidget = () => Box({
className: 'cal-box',
child: ags.Widget({
type: Gtk.Calendar,
showDayNames: true,
showHeading: true,
className: 'cal',
connections: [/* */]
}),
});
export const Calendar = Window({
name: 'calendar',
popup: true,
layer: 'overlay',
anchor: 'top right',
child: Box({
className: 'date',
vertical: true,
children: [
Time(),
CalendarWidget(),
],
}),
});

View file

@ -9,3 +9,4 @@
@import "./widgets/systray.scss"; @import "./widgets/systray.scss";
@import "./widgets/notification-center.scss"; @import "./widgets/notification-center.scss";
@import "./widgets/notification.scss"; @import "./widgets/notification.scss";
@import "./widgets/date.scss";

View file

@ -2,7 +2,10 @@
background-color: $bg; background-color: $bg;
color: $fg; color: $fg;
border-radius: 30px; border-radius: 30px;
border-top-right-radius: 0px;
border: 2px solid $contrastbg; border: 2px solid $contrastbg;
margin-right: 182px;
margin-top: 8px;
} }
.timebox { .timebox {
@ -27,7 +30,6 @@
.cal-box { .cal-box {
font-family: Product Sans; font-family: Product Sans;
background-color: $bg;
border-radius: 30px; border-radius: 30px;
padding: 0 1rem .2rem; padding: 0 1rem .2rem;
color: $fg; color: $fg;
@ -37,6 +39,7 @@
margin: 0px 12px 18px 12px; margin: 0px 12px 18px 12px;
.cal { .cal {
font-size: 20px;
background-color: inherit; background-color: inherit;
padding: .5rem .10rem 0rem; padding: .5rem .10rem 0rem;
margin-left: 10px; margin-left: 10px;

View file

@ -1,7 +1,7 @@
.notification-center { .notification-center {
min-height: 700px; min-height: 700px;
min-width: 524px; min-width: 524px;
margin-top: 6px; margin-top: 8px;
margin-right: 60px; margin-right: 60px;
background: $bg; background: $bg;
border-radius: 30px; border-radius: 30px;

View file

@ -182,7 +182,7 @@ tooltip {
.notification-center { .notification-center {
min-height: 700px; min-height: 700px;
min-width: 524px; min-width: 524px;
margin-top: 6px; margin-top: 8px;
margin-right: 60px; margin-right: 60px;
background: rgba(40, 42, 54, 0.8); background: rgba(40, 42, 54, 0.8);
border-radius: 30px; border-radius: 30px;
@ -394,3 +394,63 @@ tooltip {
background-color: #51a4e7; } background-color: #51a4e7; }
.notification button.close-button.active:hover { .notification button.close-button.active:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.date {
background-color: rgba(40, 42, 54, 0.8);
color: #a5b6cf;
border-radius: 30px;
border-top-right-radius: 0px;
border: 2px solid rgba(189, 147, 249, 0.8);
margin-right: 182px;
margin-top: 8px; }
.timebox {
margin: 30px 0px; }
.timebox .time-container .content {
font-family: Product Sans;
font-weight: bolder;
font-size: 60px; }
.timebox .time-container .divider {
margin: 8px 15px;
padding: 0px 1px;
background: linear-gradient(#dd6777, #c296eb, #86aaec, #93cee9); }
.timebox .date-container {
font-family: Product Sans;
margin-top: 2px; }
.cal-box {
font-family: Product Sans;
border-radius: 30px;
padding: 0 1rem .2rem;
color: #a5b6cf;
background-color: #282a36;
border-bottom: 2px solid rgba(189, 147, 249, 0.8);
border-top: 2px solid rgba(189, 147, 249, 0.8);
margin: 0px 12px 18px 12px; }
.cal-box .cal {
font-size: 20px;
background-color: inherit;
padding: .5rem .10rem 0rem;
margin-left: 10px;
border-radius: 30px; }
.cal-box .cal > * {
border: solid 0px transparent; }
.cal-box .cal.highlight {
padding: 10rem; }
calendar:selected {
color: #93cee9; }
calendar.header {
color: #93cee9;
font-weight: bold; }
calendar.button {
color: #93cee9; }
calendar.highlight {
color: #90ceaa;
font-weight: bold; }
calendar:indeterminate {
color: #262831; }

View file

@ -1,63 +0,0 @@
(defwidget divider []
(box :class "divider"
:orientation "v"
:space-evenly true)
)
(defwidget time []
(box :class "timebox"
:orientation "v"
:space-evenly false
(box :class "time-container"
:orientation "h"
:space-evenly false
:halign "center"
:valign "center"
(label :text "${lithour}" :class "content")
(divider)
(label :text "${litmin}" :class "content")
)
(box :class "date-container"
:orientation "h"
:space-evenly true
:halign "center"
(label :text "${completeday}")
)
)
)
(defwidget cal []
(box :class "cal-box"
:orientation "v"
:space-evenly false
(calendar :class "cal"
:day calendar_day
:month calendar_month
:year calendar_year)
)
)
(defwidget date []
(box :class "date"
:orientation "v"
:space-evenly false
(time)
(cal)
)
)
(defvar date-visible false)
(defwindow date-reveal
:monitor 0
:stacking "overlay"
:geometry (geometry :x "70px"
:y "8px"
:width "0px" ; automatically generated
:height "0px" ; automatically generated
:anchor "top right")
(revealer
:transition "crossfade"
:reveal date-visible
:duration anim_duration
(date)))