ags: sidebar: allow collapsing calendar (#1070)

.config/ags/i18n/locales/Default.json

@@ -134,6 +134,9 @@
     "Nothing here!": "Nothing here!",
     "+ New task": "+ New task",
     "Add a task...": "Add a task...",
+    "Collapse calendar": "Collapse calendar",
+    "Expand calendar": "Expand calendar",
+    "To do tasks": "To do tasks",
     "Color scheme": "Color scheme",
     "Options": "Options",
     "Dark Mode": "Dark Mode",

.config/ags/modules/.configuration/user_options.js

@@ -140,6 +140,7 @@ let configOptions = {
         'dateFormatLong': "%A, %d/%m", // On bar
         'dateInterval': 5000,
         'dateFormat': "%d/%m", // On notif time
+        'calendarDateFormat': "%d %B %Y"
     },
     'weather': {
         'city': "",

.config/ags/modules/sideright/calendar.js

@@ -1,10 +1,12 @@
-const { Gio } = imports.gi;
+import GLib from 'gi://GLib';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { Box, Button, Label } = Widget;
+const { Box, Button, Label, Overlay } = Widget;
+
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
 
+import Todo from "../../services/todo.js";
 import { TodoWidget } from "./todolist.js";
 import { getCalendarLayout } from "./calendar_layout.js";
 
@@ -138,22 +140,9 @@ const CalendarWidget = () => {
     });
 };
 
+export const ModuleCalendar = () => {
     const defaultShown = 'calendar';
-const contentStack = Widget.Stack({
+    const navrailButton = (stackItemName, icon, name) => Widget.Button({
-    hexpand: true,
-    children: {
-        'calendar': CalendarWidget(),
-        'todo': TodoWidget(),
-        // 'stars': Widget.Label({ label: 'GitHub feed will be here' }),
-    },
-    transition: 'slide_up_down',
-    transitionDuration: userOptions.animations.durationLarge,
-    setup: (stack) => Utils.timeout(1, () => {
-        stack.shown = defaultShown;
-    })
-})
-
-const StackButton = (stackItemName, icon, name) => Widget.Button({
         className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5',
         onClicked: (button) => {
             contentStack.shown = stackItemName;
@@ -182,22 +171,98 @@ const StackButton = (stackItemName, icon, name) => Widget.Button({
             button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName);
         })
     });
-
+    const navrail = Box({
-export const ModuleCalendar = () => Box({
-    className: 'sidebar-group spacing-h-5',
-    setup: (box) => {
-        box.pack_start(Box({
         vpack: 'center',
         homogeneous: true,
         vertical: true,
         className: 'sidebar-navrail spacing-v-10',
         children: [
-                StackButton('calendar', 'calendar_month', getString('Calendar')),
+            navrailButton('calendar', 'calendar_month', getString('Calendar')),
-                StackButton('todo', 'done_outline', getString('To Do')),
+            navrailButton('todo', 'done_outline', getString('To Do')),
-                // StackButton(box, 'stars', 'star', 'GitHub'),
         ]
-        }), false, false, 0);
+    });
-        box.pack_end(contentStack, false, false, 0);
+    const contentStack = Widget.Stack({
-    }
+        hexpand: true,
+        children: {
+            'calendar': CalendarWidget(),
+            'todo': TodoWidget(),
+        },
+        transition: 'slide_up_down',
+        transitionDuration: userOptions.animations.durationLarge,
+        setup: (stack) => Utils.timeout(1, () => {
+            stack.shown = defaultShown;
+        })
     })
 
+    const CollapseButtonIcon = (collapse) => MaterialIcon(collapse ? 'expand_more' : 'expand_less', 'norm');
+    const CollapseButton = (collapse) => {
+        const collapseButtonIcon = CollapseButtonIcon(collapse);
+        return Button({
+            hpack: 'start',
+            vpack: 'start',
+            className: 'margin-top-5 margin-left-5 margin-bottom-5',
+            onClicked: () => {
+                mainStack.shown = (mainStack.shown == 'expanded') ? 'collapsed' : 'expanded';
+            },
+            setup: setupCursorHover,
+            child: Box({
+                className: 'sidebar-calendar-btn-arrow txt',
+                homogeneous: true,
+                children: [collapseButtonIcon],
+            }),
+            tooltipText: collapse ? getString('Collapse calendar') : getString('Expand calendar'),
+        })
+    }
+    const date = Variable('', {
+        poll: [
+            userOptions.time.interval,
+            () => GLib.DateTime.new_now_local().format(userOptions.time.calendarDateFormat),
+        ],
+    })
+
+    const collapsedWidget = Box({
+        className: 'spacing-h-5',
+        children: [
+            CollapseButton(false),
+            Widget.Label({
+                vpack: 'center',
+                className: 'txt txt-small sidebar-calendar-collapsed-pill',
+                label: date.bind(),
+            }),
+            Widget.Label({
+                vpack: 'center',
+                className: 'txt txt-small sidebar-calendar-collapsed-pill',
+                label: `${Todo.todo_json.length} ${getString('To do tasks')}`,
+                setup: self => self.hook(Todo, (self) => {
+                    self.label = `${Todo.todo_json.length} ${getString('To do tasks')}`
+                })
+            }),
+        ]
+    })
+
+    const mainStack = Widget.Stack({
+        className: 'sidebar-group',
+        homogeneous: false,
+        children: {
+            'collapsed': collapsedWidget,
+            'expanded': Box({
+                className: 'spacing-h-5',
+                children: [
+                    Overlay({
+                        child: navrail,
+                        overlays: [CollapseButton(true)],
+                    }),
+                    contentStack
+                ]
+            }),
+        },
+        transition: 'slide_up_down',
+        transitionDuration: userOptions.animations.durationLarge,
+        setup: (stack) => Utils.timeout(1, () => {
+            stack.shown = 'expanded';
+        })
+    })
+
+    return mainStack;
+}
+

.config/ags/scss/_sidebars.scss

@@ -175,6 +175,22 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
     }
 }
 
+.sidebar-calendar-btn-arrow {
+    @include full-rounding;
+    background-color: $layer2;
+    min-width: 1.705rem;
+    min-height: 1.705rem;
+
+    &:hover,
+    &:focus {
+        background-color: $layer2Hover;
+    }
+
+    &:active {
+        background-color: $layer2Active;
+    }
+}
+
 .sidebar-calendar-btn {
     @include full-rounding;
     @include element_decel;
@@ -253,6 +269,24 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
     background-color: $activecolor;
 }
 
+.sidebar-calendar-collapsed-pill {
+    @include full-rounding;
+    background-color: $layer2;
+    min-width: 1.705rem;
+    min-height: 1.705rem;
+    padding-left: 0.341rem;
+    padding-right: 0.341rem;
+
+    &:hover,
+    &:focus {
+        background-color: $layer2Hover;
+    }
+
+    &:active {
+        background-color: $layer2Active;
+    }
+}
+
 .sidebar-todo-item {
     @include small-rounding;
     margin-right: 0.545rem;