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,66 +140,129 @@ const CalendarWidget = () => {
     });
 };
 
-const defaultShown = 'calendar';
+export const ModuleCalendar = () => {
-const contentStack = Widget.Stack({
+    const defaultShown = 'calendar';
-    hexpand: true,
+    const navrailButton = (stackItemName, icon, name) => Widget.Button({
-    children: {
+        className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5',
-        'calendar': CalendarWidget(),
+        onClicked: (button) => {
-        'todo': TodoWidget(),
+            contentStack.shown = stackItemName;
-        // 'stars': Widget.Label({ label: 'GitHub feed will be here' }),
+            const kids = button.get_parent().get_children();
-    },
+            for (let i = 0; i < kids.length; i++) {
-    transition: 'slide_up_down',
+                if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false);
-    transitionDuration: userOptions.animations.durationLarge,
+                else button.toggleClassName('sidebar-navrail-btn-active', true);
-    setup: (stack) => Utils.timeout(1, () => {
+            }
-        stack.shown = defaultShown;
+        },
-    })
+        child: Box({
-})
+            className: 'spacing-v-5',
-
+            vertical: true,
-const StackButton = (stackItemName, icon, name) => Widget.Button({
+            children: [
-    className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5',
+                Label({
-    onClicked: (button) => {
+                    className: `txt icon-material txt-hugeass`,
-        contentStack.shown = stackItemName;
+                    label: icon,
-        const kids = button.get_parent().get_children();
+                }),
-        for (let i = 0; i < kids.length; i++) {
+                Label({
-            if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false);
+                    label: name,
-            else button.toggleClassName('sidebar-navrail-btn-active', true);
+                    className: 'txt txt-smallie',
-        }
+                }),
-    },
+            ]
-    child: Box({
+        }),
-        className: 'spacing-v-5',
+        setup: (button) => Utils.timeout(1, () => {
+            setupCursorHover(button);
+            button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName);
+        })
+    });
+    const navrail = Box({
+        vpack: 'center',
+        homogeneous: true,
         vertical: true,
+        className: 'sidebar-navrail spacing-v-10',
         children: [
-            Label({
+            navrailButton('calendar', 'calendar_month', getString('Calendar')),
-                className: `txt icon-material txt-hugeass`,
+            navrailButton('todo', 'done_outline', getString('To Do')),
-                label: icon,
+        ]
+    });
+    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],
             }),
-            Label({
+            tooltipText: collapse ? getString('Collapse calendar') : getString('Expand calendar'),
-                label: name,
+        })
-                className: 'txt txt-smallie',
+    }
+    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')}`
+                })
             }),
         ]
-    }),
-    setup: (button) => Utils.timeout(1, () => {
-        setupCursorHover(button);
-        button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName);
     })
-});
 
-export const ModuleCalendar = () => Box({
+    const mainStack = Widget.Stack({
-    className: 'sidebar-group spacing-h-5',
+        className: 'sidebar-group',
-    setup: (box) => {
+        homogeneous: false,
-        box.pack_start(Box({
+        children: {
-            vpack: 'center',
+            'collapsed': collapsedWidget,
-            homogeneous: true,
+            'expanded': Box({
-            vertical: true,
+                className: 'spacing-h-5',
-            className: 'sidebar-navrail spacing-v-10',
+                children: [
-            children: [
+                    Overlay({
-                StackButton('calendar', 'calendar_month', getString('Calendar')),
+                        child: navrail,
-                StackButton('todo', 'done_outline', getString('To Do')),
+                        overlays: [CollapseButton(true)],
-                // StackButton(box, 'stars', 'star', 'GitHub'),
+                    }),
-            ]
+                    contentStack
-        }), false, false, 0);
+                ]
-        box.pack_end(contentStack, false, false, 0);
+            }),
-    }
+        },
-})
+        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;