matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags): make my own popup widget and switch windows to it

Browse source
This commit is contained in:
matt1432 2023-09-21 20:01:14 -04:00
parent 4f99d3bb96
commit 91de0cf5b5
10 changed files with 169 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
config/ags/config.js
View file

@ -20,6 +20,13 @@ exec(`bash -c "$AGS_PATH/startup.sh"`);
export default {
style: css,
notificationPopupTimeout: 5000,
cacheNotificationActions: true,
closeWindowDelay: {
'quick-settings': 500,
'notification-center': 500,
'calendar': 500,
'powermenu': 500,
},
windows: [
Powermenu,
Bar,

10
config/ags/js/bar/clock.js
View file

@ -1,5 +1,5 @@
const { Box, Label } = ags.Widget;
const { toggleWindow, openWindow } = ags.App;
const { toggleWindow } = ags.App;
const { DateTime } = imports.gi.GLib;
import { EventBox } from '../misc/cursorbox.js';
@ -24,13 +24,7 @@ export const Clock = EventBox({
connections: [
[ags.App, (box, windowName, visible) => {
if (windowName == 'calendar') {
if (visible) {
Clock.toggleClassName('toggle-on', true);
openWindow('closer');
}
else {
Clock.toggleClassName('toggle-on', false);
}
box.toggleClassName('toggle-on', visible);
}
}],
],

10
config/ags/js/bar/notif-button.js
View file

@ -1,5 +1,5 @@
const { Box, Label, Icon } = ags.Widget;
const { toggleWindow, openWindow } = ags.App;
const { toggleWindow } = ags.App;
const { Notifications } = ags.Service;
import { Separator } from '../misc/separator.js';
@ -11,13 +11,7 @@ export const NotifButton = EventBox({
connections: [
[ags.App, (box, windowName, visible) => {
if (windowName == 'notification-center') {
if (visible) {
NotifButton.toggleClassName('toggle-on', true);
openWindow('closer');
}
else {
NotifButton.toggleClassName('toggle-on', false);
}
box.toggleClassName('toggle-on', visible);
}
}],
],

10
config/ags/js/bar/quick-settings.js
View file

@ -1,5 +1,5 @@
const { Box, Label } = ags.Widget;
const { toggleWindow, openWindow } = ags.App;
const { toggleWindow } = ags.App;
import { EventBox } from '../misc/cursorbox.js';
@ -9,13 +9,7 @@ export const QsToggle = EventBox({
connections: [
[ags.App, (box, windowName, visible) => {
if (windowName == 'quick-settings') {
if (visible) {
QsToggle.toggleClassName('toggle-on', true);
openWindow('closer');
}
else {
QsToggle.toggleClassName('toggle-on', false);
}
box.toggleClassName('toggle-on', visible);
}
}],
],

20
config/ags/js/date.js
View file

@ -2,6 +2,8 @@ const { Box, Label, Window } = ags.Widget;
const { Gtk } = imports.gi;
const { DateTime } = imports.gi.GLib;
import { PopUp } from './misc/popup.js';
const Divider = () => Box({
className: 'divider',
vertical: true,
@ -68,16 +70,18 @@ const CalendarWidget = () => Box({
export const Calendar = Window({
name: 'calendar',
popup: true,
layer: 'overlay',
anchor: 'top right',
margin: [ 8, 182, 0, 0],
child: Box({
className: 'date',
vertical: true,
children: [
Time(),
CalendarWidget(),
],
child: PopUp({
name: 'calendar',
child: Box({
className: 'date',
vertical: true,
children: [
Time(),
CalendarWidget(),
],
}),
}),
});

19
config/ags/js/misc/popup.js Normal file
View file

@ -0,0 +1,19 @@
const { Revealer } = ags.Widget;
const { closeWindow, openWindow } = ags.App;
export const PopUp = ({name, child, transition = 'slide_down', ...params}) => Revealer({
...params,
// FIXME: popups don't work with revealers
setup: () => setTimeout(() => closeWindow(name), 100),
transition,
transitionDuration: 500,
connections: [[ags.App, (revealer, currentName, visible) => {
if (currentName === name) {
revealer.reveal_child = visible;
if (visible)
openWindow('closer');
}
}]],
child: child,
});

57
config/ags/js/notifications/center.js
View file

@ -4,7 +4,8 @@ const { timeout } = ags.Utils;
const { getWindow } = ags.App;
import Notification from './base.js';
import { EventBox } from '../misc/cursorbox.js'
import { EventBox } from '../misc/cursorbox.js';
import { PopUp } from '../misc/popup.js';
const ClearButton = () => EventBox({
child: Button({
@ -21,7 +22,7 @@ const ClearButton = () => EventBox({
properties: [['notifList'], ['popups']],
connections: [[Notifications, button => {
if (!button._notifList)
button._notifList = getWindow('notification-center').child.children[1].children[0].child.child.children[0];
button._notifList = NotificationList;
if (!button._popups)
button._popups = getWindow('notifications').child.children[0].child;
@ -50,7 +51,7 @@ const Header = () => Box({
],
});
const NotificationList = () => Box({
const NotificationList = Box({
vertical: true,
vexpand: true,
connections: [
@ -107,33 +108,37 @@ const Placeholder = () => Revealer({
}),
});
const NotificationCenterWidget = Box({
className: 'notification-center',
vertical: true,
children: [
Header(),
Box({
className: 'notification-wallpaper-box',
children: [Scrollable({
className: 'notification-list-box',
hscroll: 'never',
vscroll: 'automatic',
child: Box({
className: 'notification-list',
vertical: true,
children: [
NotificationList,
Placeholder(),
],
}),
})],
}),
],
});
export const NotificationCenter = Window({
name: 'notification-center',
popup: true,
layer: 'overlay',
anchor: 'top right',
margin: [ 8, 60, 0, 0 ],
child: Box({
className: 'notification-center',
vertical: true,
children: [
Header(),
Box({
className: 'notification-wallpaper-box',
children: [Scrollable({
className: 'notification-list-box',
hscroll: 'never',
vscroll: 'automatic',
child: Box({
className: 'notification-list',
vertical: true,
children: [
NotificationList(),
Placeholder(),
],
}),
})],
}),
],
child: PopUp({
name: 'notification-center',
child: NotificationCenterWidget,
}),
});

59
config/ags/js/powermenu.js
View file

@ -1,37 +1,46 @@
export const Powermenu = ags.Widget.Window({
name: 'powermenu',
popup: true,
layer: 'overlay',
const { Window, CenterBox, Label } = ags.Widget;
child: ags.Widget.CenterBox({
className: 'powermenu',
vertical: false,
import { PopUp } from './misc/popup.js';
import { Button } from './misc/cursorbox.js'
startWidget: ags.Widget.Button({
className: 'shutdown',
onPrimaryClickRelease: 'systemctl poweroff',
const PowermenuWidget = CenterBox({
className: 'powermenu',
vertical: false,
child: ags.Widget.Label({
label: '襤',
}),
startWidget: Button({
className: 'shutdown',
onPrimaryClickRelease: 'systemctl poweroff',
child: Label({
label: '襤',
}),
}),
centerWidget: ags.Widget.Button({
className: 'reboot',
onPrimaryClickRelease: 'systemctl reboot',
centerWidget: Button({
className: 'reboot',
onPrimaryClickRelease: 'systemctl reboot',
child: ags.Widget.Label({
label: '勒',
}),
child: Label({
label: '勒',
}),
}),
endWidget: ags.Widget.Button({
className: 'logout',
onPrimaryClickRelease: 'hyprctl dispatch exit',
endWidget: Button({
className: 'logout',
onPrimaryClickRelease: 'hyprctl dispatch exit',
child: ags.Widget.Label({
label: '',
}),
child: Label({
label: '',
}),
}),
});
export const Powermenu = Window({
name: 'powermenu',
layer: 'overlay',
child: PopUp({
name: 'powermenu',
transition: 'crossfade',
child: PowermenuWidget,
}),
});

112
config/ags/js/quick-settings/main.js
View file

@ -1,67 +1,73 @@
const { Window, CenterBox, Box, Label, Revealer, Icon } = ags.Widget;
const { closeWindow } = ags.App;
const { ToggleButton } = imports.gi.Gtk;
import { ButtonGrid } from './button-grid.js';
import { SliderBox } from './slider-box.js';
import Player from '../media-player/player.js';
import { EventBox } from '../misc/cursorbox.js';
import { PopUp } from '../misc/popup.js';
const QuickSettingsWidget = Box({
className: 'qs-container',
vertical: true,
children: [
Box({
className: 'quick-settings',
vertical: true,
children: [
Label({
label: 'Control Center',
className: 'title',
halign: 'start',
style: 'margin-left: 20px'
}),
ButtonGrid,
SliderBox,
EventBox({
child: ags.Widget({
type: ToggleButton,
connections: [['toggled', button => {
if (button.get_active()) {
button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
button.get_parent().get_parent().get_parent().children[1].revealChild = true;
}
else {
button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
button.get_parent().get_parent().get_parent().children[1].revealChild = false;
}
}]],
child: Icon({
icon: 'folder-download-symbolic',
className: 'arrow',
style: `-gtk-icon-transform: rotate(180deg);`,
}),
}),
}),
],
}),
Revealer({
transition: 'slide_down',
child: Player(),
})
],
});
export const QuickSettings = Window({
name: 'quick-settings',
layer: 'overlay',
popup: true,
anchor: 'top right',
margin: [ 8, 5, 0, ],
child: Box({
className: 'qs-container',
vertical: true,
children: [
Box({
className: 'quick-settings',
vertical: true,
children: [
Label({
label: 'Control Center',
className: 'title',
halign: 'start',
style: 'margin-left: 20px'
}),
ButtonGrid,
SliderBox,
EventBox({
child: ags.Widget({
type: ToggleButton,
connections: [['toggled', button => {
if (button.get_active()) {
button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
button.get_parent().get_parent().get_parent().children[1].revealChild = true;
}
else {
button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
button.get_parent().get_parent().get_parent().children[1].revealChild = false;
}
}]],
child: Icon({
icon: 'folder-download-symbolic',
className: 'arrow',
style: `-gtk-icon-transform: rotate(180deg);`,
}),
}),
}),
],
}),
Revealer({
transition: 'slide_down',
child: Player(),
})
],
margin: [ 8, 5, 0, ],
child: PopUp({
name: 'quick-settings',
child: QuickSettingsWidget,
}),
});

2
config/hypr/main.conf
View file

@ -170,7 +170,7 @@ bind = $mainMod, T, togglespecialworkspace, thunder
bind = $mainMod, C, killactive,
bind = $mainMod, L, exec, $LOCK_PATH/lock.sh
bind = $mainMod SHIFT, E, exec, ags run-js 'ags.App.openWindow("closer")'; ags run-js 'ags.App.openWindow("powermenu")'
bind = $mainMod SHIFT, E, exec, ags run-js 'ags.App.openWindow("powermenu")'
bindn =, Escape, exec, ags run-js 'ags.App.closeAll()'
bind = $mainMod SHIFT, SPACE, togglefloating,
bind = $mainMod, D, exec, wofi --show drun