feat(ags): add calendar widget

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,
   ],
 };

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({}),
+  }),
 });

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(),
+    ],
+  }),
+});

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";

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;

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;

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; }

config/eww/date/date.yuck

@@ -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)))