diff --git a/.config/ags/i18n/locales/Default.json b/.config/ags/i18n/locales/Default.json index 5c195e19..25a5b430 100644 --- a/.config/ags/i18n/locales/Default.json +++ b/.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", diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js index 6bb90255..1b0db2e6 100644 --- a/.config/ags/modules/.configuration/user_options.js +++ b/.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': "", diff --git a/.config/ags/modules/sideright/calendar.js b/.config/ags/modules/sideright/calendar.js index b4409049..0815e183 100644 --- a/.config/ags/modules/sideright/calendar.js +++ b/.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'; -const contentStack = Widget.Stack({ - 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; - const kids = button.get_parent().get_children(); - for (let i = 0; i < kids.length; i++) { - if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false); - else button.toggleClassName('sidebar-navrail-btn-active', true); - } - }, - child: Box({ - className: 'spacing-v-5', +export const ModuleCalendar = () => { + const defaultShown = 'calendar'; + const navrailButton = (stackItemName, icon, name) => Widget.Button({ + className: 'button-minsize sidebar-navrail-btn txt-small spacing-h-5', + onClicked: (button) => { + contentStack.shown = stackItemName; + const kids = button.get_parent().get_children(); + for (let i = 0; i < kids.length; i++) { + if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false); + else button.toggleClassName('sidebar-navrail-btn-active', true); + } + }, + child: Box({ + className: 'spacing-v-5', + vertical: true, + children: [ + Label({ + className: `txt icon-material txt-hugeass`, + label: icon, + }), + Label({ + label: name, + className: 'txt txt-smallie', + }), + ] + }), + 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({ - className: `txt icon-material txt-hugeass`, - label: icon, + navrailButton('calendar', 'calendar_month', getString('Calendar')), + navrailButton('todo', 'done_outline', getString('To Do')), + ] + }); + 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({ - label: name, - className: 'txt txt-smallie', + 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')}` + }) }), ] - }), - setup: (button) => Utils.timeout(1, () => { - setupCursorHover(button); - button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName); }) -}); -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')), - StackButton('todo', 'done_outline', getString('To Do')), - // StackButton(box, 'stars', 'star', 'GitHub'), - ] - }), false, false, 0); - box.pack_end(contentStack, false, false, 0); - } -}) + 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; +} diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 9c4a880c..d9206f9d 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.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;