From 40457938cee98ab5a85022a77f34123727e67048 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Mon, 11 Sep 2023 21:10:00 -0400 Subject: [PATCH] feat(ags): add calendar widget --- config/ags/config.js | 2 + config/ags/js/bar/clock.js | 23 +++++- config/ags/js/date.js | 82 +++++++++++++++++++ config/ags/scss/main.scss | 1 + .../{eww/date => ags/scss/widgets}/date.scss | 5 +- .../ags/scss/widgets/notification-center.scss | 2 +- config/ags/style.css | 62 +++++++++++++- config/eww/date/date.yuck | 63 -------------- 8 files changed, 172 insertions(+), 68 deletions(-) create mode 100644 config/ags/js/date.js rename config/{eww/date => ags/scss/widgets}/date.scss (92%) delete mode 100644 config/eww/date/date.yuck diff --git a/config/ags/config.js b/config/ags/config.js index adaf961..c855f2e 100644 --- a/config/ags/config.js +++ b/config/ags/config.js @@ -4,6 +4,7 @@ import { Bar } from './js/bar/bar.js'; import { NotificationCenter } from './js/notifications/center.js'; import { NotificationsPopupList } from './js/notifications/popup.js' import { Closer } from './js/misc/closer.js'; +import { Calendar } from './js/date.js'; const scss = ags.App.configDir + '/scss/main.scss'; const css = ags.App.configDir + '/style.css'; @@ -20,5 +21,6 @@ export default { Closer, NotificationCenter, NotificationsPopupList, + Calendar, ], }; diff --git a/config/ags/js/bar/clock.js b/config/ags/js/bar/clock.js index f9fa7a9..a14d061 100644 --- a/config/ags/js/bar/clock.js +++ b/config/ags/js/bar/clock.js @@ -1,7 +1,10 @@ const { Box, Label } = ags.Widget; const { execAsync } = ags.Utils; +const { openWindow, closeWindow } = ags.App; const { DateTime } = imports.gi.GLib; +import { EventBox } from '../misc/cursorbox.js'; + const ClockModule = ({ interval = 1000, ...params @@ -16,7 +19,23 @@ const ClockModule = ({ ], }); -export const Clock = Box({ +var calendarState = false; + +export const Clock = EventBox({ 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({}), + }), }); diff --git a/config/ags/js/date.js b/config/ags/js/date.js new file mode 100644 index 0000000..0c7efef --- /dev/null +++ b/config/ags/js/date.js @@ -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(), + ], + }), +}); diff --git a/config/ags/scss/main.scss b/config/ags/scss/main.scss index f282881..0959cd7 100644 --- a/config/ags/scss/main.scss +++ b/config/ags/scss/main.scss @@ -9,3 +9,4 @@ @import "./widgets/systray.scss"; @import "./widgets/notification-center.scss"; @import "./widgets/notification.scss"; +@import "./widgets/date.scss"; diff --git a/config/eww/date/date.scss b/config/ags/scss/widgets/date.scss similarity index 92% rename from config/eww/date/date.scss rename to config/ags/scss/widgets/date.scss index 17a930d..11cc87c 100644 --- a/config/eww/date/date.scss +++ b/config/ags/scss/widgets/date.scss @@ -2,7 +2,10 @@ background-color: $bg; color: $fg; border-radius: 30px; + border-top-right-radius: 0px; border: 2px solid $contrastbg; + margin-right: 182px; + margin-top: 8px; } .timebox { @@ -27,7 +30,6 @@ .cal-box { font-family: Product Sans; - background-color: $bg; border-radius: 30px; padding: 0 1rem .2rem; color: $fg; @@ -37,6 +39,7 @@ margin: 0px 12px 18px 12px; .cal { + font-size: 20px; background-color: inherit; padding: .5rem .10rem 0rem; margin-left: 10px; diff --git a/config/ags/scss/widgets/notification-center.scss b/config/ags/scss/widgets/notification-center.scss index 605254e..90eafc7 100644 --- a/config/ags/scss/widgets/notification-center.scss +++ b/config/ags/scss/widgets/notification-center.scss @@ -1,7 +1,7 @@ .notification-center { min-height: 700px; min-width: 524px; - margin-top: 6px; + margin-top: 8px; margin-right: 60px; background: $bg; border-radius: 30px; diff --git a/config/ags/style.css b/config/ags/style.css index d9399dc..c7a76f0 100644 --- a/config/ags/style.css +++ b/config/ags/style.css @@ -182,7 +182,7 @@ tooltip { .notification-center { min-height: 700px; min-width: 524px; - margin-top: 6px; + margin-top: 8px; margin-right: 60px; background: rgba(40, 42, 54, 0.8); border-radius: 30px; @@ -394,3 +394,63 @@ tooltip { background-color: #51a4e7; } .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); } + +.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; } diff --git a/config/eww/date/date.yuck b/config/eww/date/date.yuck deleted file mode 100644 index 7bf1158..0000000 --- a/config/eww/date/date.yuck +++ /dev/null @@ -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)))