mirror of
https://github.com/danbulant/dots-hyprland
synced 2026-05-24 12:22:09 +00:00
ags: sidebar: allow collapsing calendar (#1070)
This commit is contained in:
end-4
parent
c02eef032d
commit
7ff0a9d298
4 changed files with 160 additions and 57 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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': "",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue