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

refactor(ags): use aylur's lint settings

Browse source
This commit is contained in:
matt1432 2023-10-20 23:11:21 -04:00
parent afe7f10128
commit 127974d0c2
46 changed files with 2732 additions and 2748 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
hosts/wim/config/ags/config.js
View file

@ -4,7 +4,7 @@ import Closer from './js/misc/closer.js';
import Powermenu from './js/powermenu.js';
import { Bar } from './js/bar/main.js';
import NotifCenter from './js/notifications/center.js';
import NotifPopups from './js/notifications/popup.js'
import NotifPopups from './js/notifications/popup.js';
import Calendar from './js/date.js';
import QuickSettings from './js/quick-settings/main.js';
import Overview from './js/overview/main.js';
@ -21,28 +21,28 @@ Utils.execAsync(['bash', '-c', '$AGS_PATH/startup.sh']).catch(print);
export default {
style: css,
notificationPopupTimeout: 5000,
cacheNotificationActions: true,
closeWindowDelay: {
'quick-settings': 500,
'notification-center': 500,
'calendar': 500,
'powermenu': 500,
'overview': 500,
'applauncher': 500,
},
windows: [
Powermenu(),
Bar(),
Closer(),
NotifCenter(),
NotifPopups(),
Calendar(),
QuickSettings(),
Overview(),
AppLauncher(),
Corners.Bottomleft(),
Corners.Bottomright(),
],
style: css,
notificationPopupTimeout: 5000,
cacheNotificationActions: true,
closeWindowDelay: {
'quick-settings': 500,
'notification-center': 500,
'calendar': 500,
'powermenu': 500,
'overview': 500,
'applauncher': 500,
},
windows: [
Powermenu(),
Bar(),
Closer(),
NotifCenter(),
NotifPopups(),
Calendar(),
QuickSettings(),
Overview(),
AppLauncher(),
Corners.Bottomleft(),
Corners.Bottomright(),
],
};

194
hosts/wim/config/ags/js/applauncher/main.js
View file

@ -5,118 +5,118 @@ import Separator from '../misc/separator.js';
import PopupWindow from '../misc/popup.js';
const icons = {
apps: {
apps: 'view-app-grid-symbolic',
search: 'preferences-system-search-symbolic',
}
apps: {
apps: 'view-app-grid-symbolic',
search: 'preferences-system-search-symbolic',
},
};
const AppItem = (app, window) => {
if (app.app.get_string('Icon') == 'Nextcloud')
return;
if (app.app.get_string('Icon') == 'Nextcloud')
return;
return Button({
className: 'app',
connections: [['clicked', () => {
App.closeWindow(window);
Utils.exec(`hyprctl dispatch exec ${app.executable}`);
// TODO: focus on new client. Is this only needed after launch?
++app.frequency;
}]],
child: Box({
children: [
Icon({
icon: app.app.get_string('Icon'),
size: 42,
return Button({
className: 'app',
connections: [['clicked', () => {
App.closeWindow(window);
Utils.exec(`hyprctl dispatch exec ${app.executable}`);
// TODO: focus on new client. Is this only needed after launch?
++app.frequency;
}]],
child: Box({
children: [
Icon({
icon: app.app.get_string('Icon'),
size: 42,
}),
Box({
vertical: true,
children: [
Label({
className: 'title',
label: app.name,
xalign: 0,
valign: 'center',
ellipsize: 3,
}),
Label({
className: 'description',
label: app.description || '',
wrap: true,
xalign: 0,
justification: 'left',
valign: 'center',
}),
],
}),
],
}),
Box({
vertical: true,
children: [
Label({
className: 'title',
label: app.name,
xalign: 0,
valign: 'center',
ellipsize: 3,
}),
Label({
className: 'description',
label: app.description || '',
wrap: true,
xalign: 0,
justification: 'left',
valign: 'center',
}),
],
}),
],
}),
});
});
};
const Applauncher = ({ windowName = 'applauncher' } = {}) => {
const list = Box({ vertical: true });
const placeholder = Label({
label: " Couldn't find a match",
className: 'placeholder',
});
const entry = Entry({
hexpand: true,
placeholderText: 'Search',
onAccept: ({ text }) => {
const list = Applications.query(text);
if (list[0]) {
App.toggleWindow(windowName);
list[0].launch();
}
},
onChange: ({ text }) => {
list.children = Applications.query(text).map(app => [
Separator(4),
AppItem(app, windowName),
]).flat();
list.add(Separator(4));
list.show_all();
const list = Box({ vertical: true });
const placeholder = Label({
label: " Couldn't find a match",
className: 'placeholder',
});
const entry = Entry({
hexpand: true,
placeholderText: 'Search',
onAccept: ({ text }) => {
const list = Applications.query(text);
if (list[0]) {
App.toggleWindow(windowName);
list[0].launch();
}
},
onChange: ({ text }) => {
list.children = Applications.query(text).map(app => [
Separator(4),
AppItem(app, windowName),
]).flat();
list.add(Separator(4));
list.show_all();
placeholder.visible = list.children.length === 1;
},
});
placeholder.visible = list.children.length === 1;
},
});
return Box({
className: 'applauncher',
properties: [['list', list]],
vertical: true,
children: [
Box({
className: 'header',
return Box({
className: 'applauncher',
properties: [['list', list]],
vertical: true,
children: [
Icon(icons.apps.search),
entry,
Box({
className: 'header',
children: [
Icon(icons.apps.search),
entry,
],
}),
Scrollable({
hscroll: 'never',
child: Box({
vertical: true,
children: [list, placeholder],
}),
}),
],
}),
Scrollable({
hscroll: 'never',
child: Box({
vertical: true,
children: [list, placeholder],
}),
}),
],
connections: [[App, (_b, name, visible) => {
if (name !== windowName)
return;
connections: [[App, (_b, name, visible) => {
if (name !== windowName)
return;
entry.set_text('-'); // force onChange
entry.set_text('');
if (visible)
entry.grab_focus();
}]],
});
entry.set_text('-'); // force onChange
entry.set_text('');
if (visible)
entry.grab_focus();
}]],
});
};
export default () => PopupWindow({
name: 'applauncher',
focusable: true,
child: Applauncher(),
name: 'applauncher',
focusable: true,
child: Applauncher(),
});

72
hosts/wim/config/ags/js/bar/audio.js
View file

@ -5,52 +5,52 @@ import Separator from '../misc/separator.js';
import EventBox from '../misc/cursorbox.js';
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const SpeakerIndicator = props => Icon({
...props,
icon: '',
connections: [[Audio, self => {
if (!Audio.speaker)
return;
...props,
icon: '',
connections: [[Audio, self => {
if (!Audio.speaker)
return;
if (Audio.speaker.stream.isMuted) {
self.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
if (Audio.speaker.stream.isMuted) {
self.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
self.icon = items[threshold + 1];
}
}
}, 'speaker-changed']],
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
self.icon = items[threshold + 1];
}
}
}, 'speaker-changed']],
});
const SpeakerPercentLabel = props => Label({
...props,
connections: [[Audio, label => {
if (Audio.speaker)
label.label = Math.round(Audio.speaker.volume * 100) + '%';
}, 'speaker-changed']],
...props,
connections: [[Audio, label => {
if (Audio.speaker)
label.label = Math.round(Audio.speaker.volume * 100) + '%';
}, 'speaker-changed']],
});
export default () => EventBox({
onPrimaryClickRelease: 'pavucontrol',
className: 'toggle-off',
child: Box({
className: 'audio',
children: [
SpeakerIndicator(),
Separator(5),
SpeakerPercentLabel(),
],
}),
onPrimaryClickRelease: 'pavucontrol',
className: 'toggle-off',
child: Box({
className: 'audio',
children: [
SpeakerIndicator(),
Separator(5),
SpeakerPercentLabel(),
],
}),
});

76
hosts/wim/config/ags/js/bar/battery.js
View file

@ -4,56 +4,56 @@ const { Label, Icon, Stack, Box } = Widget;
import Separator from '../misc/separator.js';
const icons = charging => ([
...Array.from({ length: 10 }, (_, i) => i * 10).map(i => ([
`${i}`, Icon({
className: `${i} ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-${i}${charging ? '-charging' : ''}-symbolic`,
}),
])),
['100', Icon({
className: `100 ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-100${charging ? '-charged' : ''}-symbolic`,
})],
...Array.from({ length: 10 }, (_, i) => i * 10).map(i => ([
`${i}`, Icon({
className: `${i} ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-${i}${charging ? '-charging' : ''}-symbolic`,
}),
])),
['100', Icon({
className: `100 ${charging ? 'charging' : 'discharging'}`,
icon: `battery-level-100${charging ? '-charged' : ''}-symbolic`,
})],
]);
const Indicators = charging => Stack({
items: icons(charging),
connections: [[Battery, stack => {
stack.shown = `${Math.floor(Battery.percent / 10) * 10}`;
}]],
items: icons(charging),
connections: [[Battery, stack => {
stack.shown = `${Math.floor(Battery.percent / 10) * 10}`;
}]],
});
const Indicator = ({
charging = Indicators(true),
discharging = Indicators(false),
...props
charging = Indicators(true),
discharging = Indicators(false),
...props
} = {}) => Stack({
...props,
className: 'battery-indicator',
items: [
['true', charging],
['false', discharging],
],
connections: [[Battery, stack => {
stack.shown = `${Battery.charging || Battery.charged}`;
stack.toggleClassName('charging', Battery.charging);
stack.toggleClassName('charged', Battery.charged);
stack.toggleClassName('low', Battery.percent < 20);
}]],
...props,
className: 'battery-indicator',
items: [
['true', charging],
['false', discharging],
],
connections: [[Battery, stack => {
stack.shown = `${Battery.charging || Battery.charged}`;
stack.toggleClassName('charging', Battery.charging);
stack.toggleClassName('charged', Battery.charged);
stack.toggleClassName('low', Battery.percent < 20);
}]],
});
const LevelLabel = props => Label({
...props,
className: 'label',
connections: [[Battery, self => self.label = `${Battery.percent}%`]],
...props,
className: 'label',
connections: [[Battery, self => self.label = `${Battery.percent}%`]],
});
export default () => Box({
className: 'toggle-off battery',
children: [
Indicator(),
Separator(5),
LevelLabel(),
],
className: 'toggle-off battery',
children: [
Indicator(),
Separator(5),
LevelLabel(),
],
});

48
hosts/wim/config/ags/js/bar/brightness.js
View file

@ -6,30 +6,28 @@ import Heart from './heart.js';
export default () => Overlay({
tooltipText: 'Brightness',
child: ProgressBar({
className: 'toggle-off brightness',
connections: [
[200, self => {
Utils.execAsync('brightnessctl get').then(out => {
let br = out / 255;
if (br > 0.33) {
self.value = br;
}
else {
self.value = 0.33;
}
}).catch(print);
}],
],
}),
overlays: [
Box({
style: 'color: #CBA6F7;',
children: [
Separator(25),
Heart(),
],
tooltipText: 'Brightness',
child: ProgressBar({
className: 'toggle-off brightness',
connections: [
[200, self => {
Utils.execAsync('brightnessctl get').then(out => {
const br = out / 255;
if (br > 0.33)
self.value = br;
else
self.value = 0.33;
}).catch(print);
}],
],
}),
],
overlays: [
Box({
style: 'color: #CBA6F7;',
children: [
Separator(25),
Heart(),
],
}),
],
});

31
hosts/wim/config/ags/js/bar/clock.js
View file

@ -14,26 +14,25 @@ const ClockModule = ({
...props,
className: 'clock',
connections: [
[interval, self => {
var time = DateTime.new_now_local();
self.label = time.format('%a. ') +
[interval, self => {
var time = DateTime.new_now_local();
self.label = time.format('%a. ') +
time.get_day_of_month() +
time.format(' %b. %H:%M');
}],
}],
],
});
export default () => EventBox({
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('calendar'),
connections: [
[App, (self, windowName, visible) => {
if (windowName == 'calendar') {
self.toggleClassName('toggle-on', visible);
}
}],
],
child: Box({
child: ClockModule({}),
}),
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('calendar'),
connections: [
[App, (self, windowName, visible) => {
if (windowName == 'calendar')
self.toggleClassName('toggle-on', visible);
}],
],
child: Box({
child: ClockModule({}),
}),
});

6
hosts/wim/config/ags/js/bar/current-window.js
View file

@ -3,7 +3,7 @@ const { Label } = Widget;
export default () => Label({
style: 'color: #CBA6F7; font-size: 18px',
truncate: 'end',
binds: [['label', Hyprland.active.client, 'title']],
style: 'color: #CBA6F7; font-size: 18px',
truncate: 'end',
binds: [['label', Hyprland.active.client, 'title']],
});

154
hosts/wim/config/ags/js/bar/fullscreen.js
View file

@ -14,82 +14,82 @@ import Gesture from './gesture.js';
// with hyprctl if in fullscreen or not until fullscreen
// status changes again
export default (props) => Overlay({
overlays: [
RoundedCorner('topleft', { className: 'corner' }),
RoundedCorner('topright', { className: 'corner' }),
],
child: Box({
style: 'min-height: 1px',
hexpand: true,
vertical: true,
children: [
Widget.Revealer({
transition: 'slide_down',
setup: self => self.revealChild = true,
properties: [['timeouts', []]],
connections: [[Hyprland, self => {
Utils.execAsync('hyprctl activewindow -j').then(out => {
let client = JSON.parse(out);
if (client.fullscreen === Revealed.value)
return;
Revealed.value = client.fullscreen;
if (Revealed.value) {
setTimeout(() => {
if (Revealed.value)
self.revealChild = false
}, 2000);
}
else {
self.revealChild = true;
}
}).catch(print);
}]],
child: Gesture({
onHover: () => Hovering.value = true,
onHoverLost: self => {
Hovering.value = false;
if (Revealed.value) {
setTimeout(() => {
if (!Hovering.value) {
self.get_parent().get_parent().children[1].revealChild = true;
self.get_parent().revealChild = false;
}
}, 2000);
}
},
...props,
}),
}),
Widget.Revealer({
connections: [[Revealed, self => {
if (Revealed.value) {
setTimeout(() => {
if (Revealed.value)
self.revealChild = true;
}, 2000);
}
else {
self.revealChild = false;
}
}]],
child: EventBox({
onHover: self => {
Hovering.value = true;
self.get_parent().get_parent().children[0].revealChild = true;
self.get_parent().revealChild = false;
},
child: Box({
style: 'min-height: 50px;',
}),
}),
}),
export default props => Overlay({
overlays: [
RoundedCorner('topleft', { className: 'corner' }),
RoundedCorner('topright', { className: 'corner' }),
],
}),
child: Box({
style: 'min-height: 1px',
hexpand: true,
vertical: true,
children: [
Widget.Revealer({
transition: 'slide_down',
setup: self => self.revealChild = true,
properties: [['timeouts', []]],
connections: [[Hyprland, self => {
Utils.execAsync('hyprctl activewindow -j').then(out => {
const client = JSON.parse(out);
if (client.fullscreen === Revealed.value)
return;
Revealed.value = client.fullscreen;
if (Revealed.value) {
Utils.timeout(2000, () => {
if (Revealed.value)
self.revealChild = false;
});
}
else {
self.revealChild = true;
}
}).catch(print);
}]],
child: Gesture({
onHover: () => Hovering.value = true,
onHoverLost: self => {
Hovering.value = false;
if (Revealed.value) {
Utils.timeout(2000, () => {
if (!Hovering.value) {
self.get_parent().get_parent().children[1].revealChild = true;
self.get_parent().revealChild = false;
}
});
}
},
...props,
}),
}),
Widget.Revealer({
connections: [[Revealed, self => {
if (Revealed.value) {
Utils.timeout(2000, () => {
if (Revealed.value)
self.revealChild = true;
});
}
else {
self.revealChild = false;
}
}]],
child: EventBox({
onHover: self => {
Hovering.value = true;
self.get_parent().get_parent().children[0].revealChild = true;
self.get_parent().revealChild = false;
},
child: Box({
style: 'min-height: 50px;',
}),
}),
}),
],
}),
});

31
hosts/wim/config/ags/js/bar/gesture.js
View file

@ -5,24 +5,23 @@ import Gtk from 'gi://Gtk';
export default ({
child,
...props
child,
...props
}) => {
let widget = EventBox({
...props,
});
const widget = EventBox({
...props,
});
let gesture = Gtk.GestureSwipe.new(widget);
const gesture = Gtk.GestureSwipe.new(widget);
widget.add(CenterBox({
children: [ child ],
connections: [[gesture, () => {
const velocity = gesture.get_velocity()[1];
if (velocity < -100)
App.openWindow('quick-settings');
widget.add(CenterBox({
children: [child],
connections: [[gesture, () => {
const velocity = gesture.get_velocity()[1];
if (velocity < -100)
App.openWindow('quick-settings');
}, 'update']],
}));
}, 'update']],
}));
return widget;
return widget;
};

32
hosts/wim/config/ags/js/bar/heart.js
View file

@ -6,24 +6,24 @@ import EventBox from '../misc/cursorbox.js';
export default () => EventBox({
halign: 'center',
halign: 'center',
onPrimaryClickRelease: () => {
execAsync(['bash', '-c', '$AGS_PATH/heart.sh toggle']).catch(print);
},
onPrimaryClickRelease: () => {
execAsync(['bash', '-c', '$AGS_PATH/heart.sh toggle']).catch(print);
},
child: Box({
className: 'heart-toggle',
vertical: false,
child: Box({
className: 'heart-toggle',
vertical: false,
child: Label({
label: '',
setup: self => {
subprocess(
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
(output) => self.label = ' ' + output,
);
},
child: Label({
label: '',
setup: self => {
subprocess(
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
output => self.label = ' ' + output,
);
},
}),
}),
}),
});

44
hosts/wim/config/ags/js/bar/keyboard-layout.js
View file

@ -1,30 +1,30 @@
import { Hyprland, Utils, Widget } from '../../imports.js';
const { Label, Box, Icon } = Widget;
const DEFAULT_KB = "at-translated-set-2-keyboard";
const DEFAULT_KB = 'at-translated-set-2-keyboard';
export default () => Box({
className: 'toggle-off',
children: [
Icon({
icon: 'input-keyboard-symbolic',
style: 'margin-right: 4px;',
}),
Label({
connections: [[Hyprland, (self, _n, layout) => {
if (!layout) {
let obj = Utils.exec('hyprctl devices -j')
let keyboards = JSON.parse(obj)['keyboards'];
let kb = keyboards.find(val => val.name === DEFAULT_KB);
className: 'toggle-off',
children: [
Icon({
icon: 'input-keyboard-symbolic',
style: 'margin-right: 4px;',
}),
Label({
connections: [[Hyprland, (self, _n, layout) => {
if (!layout) {
const obj = Utils.exec('hyprctl devices -j');
const keyboards = JSON.parse(obj)['keyboards'];
const kb = keyboards.find(val => val.name === DEFAULT_KB);
layout = kb['active_keymap'];
layout = kb['active_keymap'];
self.label = layout;
}
else {
self.label = layout;
}
}, 'keyboard-layout']],
}),
],
self.label = layout;
}
else {
self.label = layout;
}
}, 'keyboard-layout']],
}),
],
});

86
hosts/wim/config/ags/js/bar/main.js
View file

@ -18,70 +18,70 @@ import Revealer from './fullscreen.js';
export const Bar = () => Window({
name: 'bar',
layer: 'overlay',
anchor: [ 'top', 'left', 'right' ],
exclusive: true,
child: Revealer({
child: CenterBox({
className: 'bar',
vertical: false,
name: 'bar',
layer: 'overlay',
anchor: ['top', 'left', 'right'],
exclusive: true,
child: Revealer({
child: CenterBox({
className: 'bar',
vertical: false,
startWidget: Box({
halign: 'start',
children: [
startWidget: Box({
halign: 'start',
children: [
OskToggle(),
OskToggle(),
Separator(12),
Separator(12),
TabletToggle(),
TabletToggle(),
Separator(12),
Separator(12),
SysTray(),
SysTray(),
Audio(),
Audio(),
Separator(12),
Separator(12),
Brightness(),
Brightness(),
Separator(12),
Separator(12),
Workspaces(),
Workspaces(),
],
}),
],
}),
centerWidget: Box({
children: [
CurrentWindow(),
],
}),
centerWidget: Box({
children: [
CurrentWindow(),
],
}),
endWidget: Box({
halign: 'end',
children: [
Battery(),
endWidget: Box({
halign: 'end',
children: [
Battery(),
Separator(12),
Separator(12),
//KeyboardLayout(),
//KeyboardLayout(),
//Separator(12),
//Separator(12),
Clock(),
Clock(),
Separator(12),
Separator(12),
NotifButton(),
NotifButton(),
Separator(12),
Separator(12),
QsToggle(),
],
}),
QsToggle(),
],
}),
}),
}),
}),
});

66
hosts/wim/config/ags/js/bar/notif-button.js
View file

@ -6,42 +6,40 @@ import EventBox from '../misc/cursorbox.js';
export default () => EventBox({
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('notification-center'),
connections: [[App, (self, windowName, visible) => {
if (windowName == 'notification-center')
self.toggleClassName('toggle-on', visible);
}]],
child: Box({
className: 'notif-panel',
vertical: false,
children: [
Separator(28),
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('notification-center'),
connections: [[App, (self, windowName, visible) => {
if (windowName == 'notification-center')
self.toggleClassName('toggle-on', visible);
}]],
child: Box({
className: 'notif-panel',
vertical: false,
children: [
Separator(28),
Icon({
connections: [[Notifications, self => {
if (Notifications.dnd) {
self.icon = 'notification-disabled-symbolic'
}
else {
if (Notifications.notifications.length > 0) {
self.icon = 'notification-new-symbolic'
}
else {
self.icon = 'notification-symbolic'
}
}
}]],
}),
Icon({
connections: [[Notifications, self => {
if (Notifications.dnd) {
self.icon = 'notification-disabled-symbolic';
}
else {
if (Notifications.notifications.length > 0)
self.icon = 'notification-new-symbolic';
else
self.icon = 'notification-symbolic';
}
}]],
}),
Separator(8),
Separator(8),
Label({
binds: [
['label', Notifications, 'notifications', n => String(n.length)],
],
}),
Label({
binds: [
['label', Notifications, 'notifications', n => String(n.length)],
],
}),
],
}),
}),
});

44
hosts/wim/config/ags/js/bar/osk-toggle.js
View file

@ -6,29 +6,29 @@ import EventBox from '../misc/cursorbox.js';
export default () => EventBox({
className: 'toggle-off',
setup: self => {
subprocess(
['bash', '-c', '$AGS_PATH/osk-toggle.sh getState'],
(output) => self.toggleClassName('toggle-on', output === 'Running'),
);
},
className: 'toggle-off',
setup: self => {
subprocess(
['bash', '-c', '$AGS_PATH/osk-toggle.sh getState'],
output => self.toggleClassName('toggle-on', output === 'Running'),
);
},
onPrimaryClickRelease: self => {
subprocess(
['bash', '-c', '$AGS_PATH/osk-toggle.sh toggle'],
(output) => self.toggleClassName('toggle-on', output !== 'Running'),
);
},
onPrimaryClickRelease: self => {
subprocess(
['bash', '-c', '$AGS_PATH/osk-toggle.sh toggle'],
output => self.toggleClassName('toggle-on', output !== 'Running'),
);
},
child: Box({
className: 'osk-toggle',
vertical: false,
child: Box({
className: 'osk-toggle',
vertical: false,
children: [
Label({
label: " 󰌌 ",
}),
],
}),
children: [
Label({
label: ' 󰌌 ',
}),
],
}),
});

24
hosts/wim/config/ags/js/bar/quick-settings.js
View file

@ -5,17 +5,17 @@ import EventBox from '../misc/cursorbox.js';
export default () => EventBox({
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('quick-settings'),
connections: [[App, (self, windowName, visible) => {
if (windowName == 'quick-settings')
self.toggleClassName('toggle-on', visible);
}]],
child: Box({
className: 'quick-settings-toggle',
vertical: false,
child: Label({
label: "  ",
className: 'toggle-off',
onPrimaryClickRelease: () => App.toggleWindow('quick-settings'),
connections: [[App, (self, windowName, visible) => {
if (windowName == 'quick-settings')
self.toggleClassName('toggle-on', visible);
}]],
child: Box({
className: 'quick-settings-toggle',
vertical: false,
child: Label({
label: '  ',
}),
}),
}),
});

104
hosts/wim/config/ags/js/bar/systray.js
View file

@ -1,4 +1,4 @@
import { SystemTray, Widget } from '../../imports.js';
import { SystemTray, Utils, Widget } from '../../imports.js';
const { Box, Revealer, Icon, MenuItem } = Widget;
import Gtk from 'gi://Gtk';
@ -7,70 +7,70 @@ import Separator from '../misc/separator.js';
const SysTrayItem = item => MenuItem({
className: 'tray-item',
child: Revealer({
transition: 'slide_right',
child: Icon({
size: 24,
className: 'tray-item',
child: Revealer({
transition: 'slide_right',
child: Icon({
size: 24,
}),
}),
}),
submenu: item.menu,
connections: [[item, btn => {
btn.child.child.icon = item.icon;
btn.tooltipMarkup = item.tooltipMarkup;
}]]
submenu: item.menu,
connections: [[item, btn => {
btn.child.child.icon = item.icon;
btn.tooltipMarkup = item.tooltipMarkup;
}]],
});
const SysTray = () => {
let widget = Gtk.MenuBar.new();
const widget = Gtk.MenuBar.new();
// Properties
widget._items = new Map();
// Properties
widget._items = new Map();
widget._onAdded = (id) => {
const item = SystemTray.getItem(id);
if (widget._items.has(id) || !item)
return;
widget._onAdded = id => {
const item = SystemTray.getItem(id);
if (widget._items.has(id) || !item)
return;
const w = SysTrayItem(item);
widget._items.set(id, w);
widget.add(w);
widget.show_all();
w.child.revealChild = true;
};
const w = SysTrayItem(item);
widget._items.set(id, w);
widget.add(w);
widget.show_all();
w.child.revealChild = true;
};
widget._onRemoved = (id) => {
if (!widget._items.has(id))
return;
widget._onRemoved = id => {
if (!widget._items.has(id))
return;
widget._items.get(id).child.revealChild = false;
setTimeout(() => {
widget._items.get(id).destroy();
widget._items.delete(id);
}, 400);
};
widget._items.get(id).child.revealChild = false;
Utils.timeout(400, () => {
widget._items.get(id).destroy();
widget._items.delete(id);
});
};
// Connections
SystemTray.connect('added', (_, id) => widget._onAdded(id));
SystemTray.connect('removed', (_, id) => widget._onRemoved(id));
// Connections
SystemTray.connect('added', (_, id) => widget._onAdded(id));
SystemTray.connect('removed', (_, id) => widget._onRemoved(id));
return widget;
}
return widget;
};
export default () => Revealer({
transition: 'slide_right',
connections: [[SystemTray, rev => {
rev.revealChild = rev.child.children[0].get_children().length > 0;
}]],
child: Box({
children: [
Box({
className: 'sys-tray',
transition: 'slide_right',
connections: [[SystemTray, rev => {
rev.revealChild = rev.child.children[0].get_children().length > 0;
}]],
child: Box({
children: [
SysTray(),
Box({
className: 'sys-tray',
children: [
SysTray(),
],
}),
Separator(12),
],
}),
Separator(12),
],
}),
}),
});

26
hosts/wim/config/ags/js/bar/tablet-toggle.js
View file

@ -6,18 +6,18 @@ import EventBox from '../misc/cursorbox.js';
export default () => EventBox({
className: 'toggle-off',
onPrimaryClickRelease: self => {
subprocess(
['bash', '-c', '$AGS_PATH/tablet-toggle.sh toggle'],
(output) => self.toggleClassName('toggle-on', output == 'Tablet'),
);
},
child: Box({
className: 'tablet-toggle',
vertical: false,
child: Label({
label: " 󰦧 ",
className: 'toggle-off',
onPrimaryClickRelease: self => {
subprocess(
['bash', '-c', '$AGS_PATH/tablet-toggle.sh toggle'],
output => self.toggleClassName('toggle-on', output == 'Tablet'),
);
},
child: Box({
className: 'tablet-toggle',
vertical: false,
child: Label({
label: ' 󰦧 ',
}),
}),
}),
});

107
hosts/wim/config/ags/js/bar/workspaces.js
View file

@ -6,65 +6,64 @@ import EventBox from '../misc/cursorbox.js';
const Workspace = ({ i } = {}) =>
Revealer({
transition: "slide_right",
properties: [['id', i]],
Revealer({
transition: 'slide_right',
properties: [['id', i]],
child: EventBox({
tooltipText: `${i}`,
onPrimaryClickRelease: () => {
execAsync(`hyprctl dispatch workspace ${i}`)
.catch(print);
},
child: Box({
className: 'button',
connections: [[Hyprland, self => {
const occupied = Hyprland.getWorkspace(i)?.windows > 0;
self.toggleClassName('active', Hyprland.active.workspace.id === i);
self.toggleClassName('occupied', occupied);
self.toggleClassName('empty', !occupied);
}]],
}),
}),
});
child: EventBox({
tooltipText: `${i}`,
onPrimaryClickRelease: () => {
execAsync(`hyprctl dispatch workspace ${i}`)
.catch(print);
},
child: Box({
className: 'button',
connections: [[Hyprland, self => {
const occupied = Hyprland.getWorkspace(i)?.windows > 0;
self.toggleClassName('active', Hyprland.active.workspace.id === i);
self.toggleClassName('occupied', occupied);
self.toggleClassName('empty', !occupied);
}]],
}),
}),
});
export default () => Box({
className: 'workspaces',
children: [EventBox({
child: Box({
properties: [
['workspaces'],
className: 'workspaces',
children: [EventBox({
child: Box({
properties: [
['workspaces'],
['refresh', self => {
self.children.forEach(rev => rev.reveal_child = false);
self._workspaces.forEach(ws => {
ws.revealChild = true;
});
}],
['refresh', self => {
self.children.forEach(rev => rev.reveal_child = false);
self._workspaces.forEach(ws => {
ws.revealChild = true;
});
}],
['updateWs', self => {
Hyprland.workspaces.forEach(ws => {
let currentWs = self.children.find(ch => ch._id == ws.id);
if (!currentWs && ws.id > 0) {
self.add(Workspace({ i: ws.id}));
}
});
self.show_all();
['updateWs', self => {
Hyprland.workspaces.forEach(ws => {
const currentWs = self.children.find(ch => ch._id == ws.id);
if (!currentWs && ws.id > 0)
self.add(Workspace({ i: ws.id }));
});
self.show_all();
// Make sure the order is correct
self._workspaces.forEach((workspace, i) => {
workspace.get_parent().reorder_child(workspace, i);
});
}],
],
connections: [[Hyprland, self => {
self._workspaces = self.children.filter(ch => {
return Hyprland.workspaces.find(ws => ws.id == ch._id)
}).sort((a, b) => a._id - b._id);
// Make sure the order is correct
self._workspaces.forEach((workspace, i) => {
workspace.get_parent().reorder_child(workspace, i);
});
}],
],
connections: [[Hyprland, self => {
self._workspaces = self.children.filter(ch => {
return Hyprland.workspaces.find(ws => ws.id == ch._id);
}).sort((a, b) => a._id - b._id);
self._updateWs(self);
self._refresh(self);
}]],
}),
})],
self._updateWs(self);
self._refresh(self);
}]],
}),
})],
});

124
hosts/wim/config/ags/js/date.js
View file

@ -1,7 +1,7 @@
import { Widget } from '../imports.js';
const { Box, Label } = Widget;
import Gtk from 'gi://Gtk';
import Gtk from 'gi://Gtk';
import GLib from 'gi://GLib';
const { DateTime } = GLib;
@ -9,80 +9,80 @@ import PopupWindow from './misc/popup.js';
const Divider = () => Box({
className: 'divider',
vertical: true,
className: 'divider',
vertical: true,
});
const Time = () => Box({
className: 'timebox',
vertical: true,
children: [
className: 'timebox',
vertical: true,
children: [
Box({
className: 'time-container',
halign: 'center',
valign: 'center',
children: [
Box({
className: 'time-container',
halign: 'center',
valign: 'center',
children: [
Label({
className: 'content',
label: 'hour',
connections: [[1000, self => {
self.label = DateTime.new_now_local().format('%H');
}]],
Label({
className: 'content',
label: 'hour',
connections: [[1000, self => {
self.label = DateTime.new_now_local().format('%H');
}]],
}),
Divider(),
Label({
className: 'content',
label: 'minute',
connections: [[1000, self => {
self.label = DateTime.new_now_local().format('%M');
}]],
}),
],
}),
Divider(),
Label({
className: 'content',
label: 'minute',
connections: [[1000, self => {
self.label = DateTime.new_now_local().format('%M');
}]],
Box({
className: 'date-container',
halign: 'center',
child: Label({
style: 'font-size: 20px',
label: 'complete date',
connections: [[1000, self => {
var time = DateTime.new_now_local();
self.label = time.format('%A, %B ') +
time.get_day_of_month() +
time.format(', %Y');
}]],
}),
}),
],
}),
Box({
className: 'date-container',
halign: 'center',
child: Label({
style: 'font-size: 20px',
label: 'complete date',
connections: [[1000, self => {
var time = DateTime.new_now_local();
self.label = time.format("%A, %B ") +
time.get_day_of_month() +
time.format(", %Y");
}]],
}),
}),
],
],
});
const CalendarWidget = () => Box({
className: 'cal-box',
child: Widget({
type: Gtk.Calendar,
showDayNames: true,
showHeading: true,
className: 'cal',
}),
className: 'cal-box',
child: Widget({
type: Gtk.Calendar,
showDayNames: true,
showHeading: true,
className: 'cal',
}),
});
export default () => PopupWindow({
anchor: [ 'top', 'right' ],
margin: [ 8, 182, 0, 0],
name: 'calendar',
child: Box({
className: 'date',
vertical: true,
children: [
Time(),
CalendarWidget(),
],
}),
anchor: ['top', 'right'],
margin: [8, 182, 0, 0],
name: 'calendar',
child: Box({
className: 'date',
vertical: true,
children: [
Time(),
CalendarWidget(),
],
}),
});

138
hosts/wim/config/ags/js/media-player/gesture.js
View file

@ -1,4 +1,4 @@
import { Widget } from '../../imports.js';
import { Utils, Widget } from '../../imports.js';
const { Box, Overlay, EventBox } = Widget;
import Gtk from 'gi://Gtk';
@ -8,80 +8,84 @@ const OFFSCREEN = 500;
const TRANSITION = 'transition: margin 0.5s ease, opacity 3s ease;';
export default ({ properties, connections, props } = {}) => {
let widget = EventBox({});
let gesture = Gtk.GestureDrag.new(widget)
export default ({
properties,
connections,
props,
} = {}) => {
const widget = EventBox({});
const gesture = Gtk.GestureDrag.new(widget);
widget.add(Overlay({
...props,
properties: [
...properties,
['dragging', false],
],
child: Box({className: 'player'}),
connections: [
...connections,
widget.add(Overlay({
...props,
properties: [
...properties,
['dragging', false],
],
child: Box({ className: 'player' }),
connections: [
...connections,
[gesture, overlay => {
if (overlay.list().length <= 1)
return;
[gesture, overlay => {
if (overlay.list().length <= 1)
return;
overlay._dragging = true;
const offset = gesture.get_offset()[1];
overlay._dragging = true;
const offset = gesture.get_offset()[1];
let playerBox = overlay.list().at(-1);
const playerBox = overlay.list().at(-1);
if (offset >= 0) {
playerBox.setStyle(`margin-left: ${offset}px;
margin-right: -${offset}px;
${playerBox._bgStyle}`);
}
else {
let newOffset = Math.abs(offset);
playerBox.setStyle(`margin-left: -${newOffset}px;
margin-right: ${newOffset}px;
${playerBox._bgStyle}`);
}
overlay._selected = playerBox;
}, 'drag-update'],
if (offset >= 0) {
playerBox.setStyle(`margin-left: ${offset}px;
margin-right: -${offset}px;
${playerBox._bgStyle}`);
}
else {
const newOffset = Math.abs(offset);
playerBox.setStyle(`margin-left: -${newOffset}px;
margin-right: ${newOffset}px;
${playerBox._bgStyle}`);
}
overlay._selected = playerBox;
}, 'drag-update'],
[gesture, overlay => {
if (overlay.list().length <= 1)
return;
[gesture, overlay => {
if (overlay.list().length <= 1)
return;
overlay._dragging = false;
const offset = gesture.get_offset()[1];
overlay._dragging = false;
const offset = gesture.get_offset()[1];
let playerBox = overlay.list().at(-1);
const playerBox = overlay.list().at(-1);
if (Math.abs(offset) > MAX_OFFSET) {
if (offset >= 0) {
playerBox.setStyle(`${TRANSITION}
margin-left: ${OFFSCREEN}px;
margin-right: -${OFFSCREEN}px;
opacity: 0;
${playerBox._bgStyle}`);
}
else {
playerBox.setStyle(`${TRANSITION}
margin-left: -${OFFSCREEN}px;
margin-right: ${OFFSCREEN}px;
opacity: 0;
${playerBox._bgStyle}`);
}
setTimeout(() => {
overlay.reorder_overlay(playerBox, 0);
playerBox.setStyle(playerBox._bgStyle);
overlay._selected = overlay.list().at(-1);
}, 500);
}
else
playerBox.setStyle(`${TRANSITION} ${playerBox._bgStyle}`);
if (Math.abs(offset) > MAX_OFFSET) {
if (offset >= 0) {
playerBox.setStyle(`${TRANSITION}
margin-left: ${OFFSCREEN}px;
margin-right: -${OFFSCREEN}px;
opacity: 0;
${playerBox._bgStyle}`);
}
else {
playerBox.setStyle(`${TRANSITION}
margin-left: -${OFFSCREEN}px;
margin-right: ${OFFSCREEN}px;
opacity: 0;
${playerBox._bgStyle}`);
}
Utils.timeout(500, () => {
overlay.reorder_overlay(playerBox, 0);
playerBox.setStyle(playerBox._bgStyle);
overlay._selected = overlay.list().at(-1);
});
}
else {
playerBox.setStyle(`${TRANSITION} ${playerBox._bgStyle}`);
}
}, 'drag-end'],
],
}));
widget.child.list = () => widget.child.get_children().filter(ch => ch._bgStyle !== undefined);
}, 'drag-end'],
],
}));
widget.child.list = () => widget.child.get_children().filter(ch => ch._bgStyle !== undefined);
return widget;
return widget;
};

546
hosts/wim/config/ags/js/media-player/mpris.js
View file

@ -9,341 +9,343 @@ import Separator from '../misc/separator.js';
import EventBox from '../misc/cursorbox.js';
const icons = {
mpris: {
fallback: 'audio-x-generic-symbolic',
shuffle: {
enabled: '󰒝',
disabled: '󰒞',
mpris: {
fallback: 'audio-x-generic-symbolic',
shuffle: {
enabled: '󰒝',
disabled: '󰒞',
},
loop: {
none: '󰑗',
track: '󰑘',
playlist: '󰑖',
},
playing: ' ',
paused: ' ',
stopped: ' ',
prev: '󰒮',
next: '󰒭',
},
loop: {
none: '󰑗',
track: '󰑘',
playlist: '󰑖',
},
playing: ' ',
paused: ' ',
stopped: ' ',
prev: '󰒮',
next: '󰒭',
},
}
};
export const CoverArt = (player, props) => CenterBox({
...props,
vertical: true,
properties: [['bgStyle', '']],
connections: [[player, self => {
execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] &&
...props,
vertical: true,
properties: [['bgStyle', '']],
connections: [[player, self => {
execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] &&
coloryou "${player.coverPath}" | grep -v Warning`])
.then(out => {
if (!Mpris.players.find(p => player === p))
return;
.then(out => {
if (!Mpris.players.find(p => player === p))
return;
player.colors.value = JSON.parse(out);
player.colors.value = JSON.parse(out);
self._bgStyle = `background: radial-gradient(circle,
rgba(0, 0, 0, 0.4) 30%,
${player.colors.value.imageAccent}),
url("${player.coverPath}");
background-size: cover;
background-position: center;`;
self._bgStyle = `background: radial-gradient(circle,
rgba(0, 0, 0, 0.4) 30%,
${player.colors.value.imageAccent}),
url("${player.coverPath}");
background-size: cover;
background-position: center;`;
if (!self.get_parent()._dragging)
self.setStyle(self._bgStyle);
}).catch(err => {if (err !== "") print(err)});
}]],
if (!self.get_parent()._dragging)
self.setStyle(self._bgStyle);
}).catch(err => {
if (err !== '')
print(err);
});
}]],
});
export const TitleLabel = (player, props) => Label({
...props,
xalign: 0,
maxWidthChars: 40,
truncate: 'end',
justification: 'left',
className: 'title',
binds: [['label', player, 'track-title']],
...props,
xalign: 0,
maxWidthChars: 40,
truncate: 'end',
justification: 'left',
className: 'title',
binds: [['label', player, 'track-title']],
});
export const ArtistLabel = (player, props) => Label({
...props,
xalign: 0,
maxWidthChars: 40,
truncate: 'end',
justification: 'left',
className: 'artist',
binds: [['label', player, 'track-artists', a => a.join(', ') || '']],
...props,
xalign: 0,
maxWidthChars: 40,
truncate: 'end',
justification: 'left',
className: 'artist',
binds: [['label', player, 'track-artists', a => a.join(', ') || '']],
});
export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
let MainIcon = Icon({
...props,
className: 'player-icon',
size: 32,
tooltipText: player.identity || '',
connections: [[player, self => {
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
lookUpIcon(name) ? self.icon = name
: self.icon = icons.mpris.fallback;
}]],
});
const MainIcon = Icon({
...props,
className: 'player-icon',
size: 32,
tooltipText: player.identity || '',
connections: [[player, self => {
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
lookUpIcon(name) ? self.icon = name
: self.icon = icons.mpris.fallback;
}]],
});
return Box({
connections: [[Mpris, self => {
let overlays = self.get_parent().get_parent()
.get_parent().list();
return Box({
connections: [[Mpris, self => {
const overlays = self.get_parent().get_parent()
.get_parent().list();
let player = overlays.find(overlay => {
overlay === self.get_parent().get_parent();
});
const player = overlays.find(overlay => {
overlay === self.get_parent().get_parent();
});
let index = overlays.indexOf(player);
const index = overlays.indexOf(player);
let children = [];
for (let i = 0; i < overlays.length; ++i) {
if (i === index) {
children.push(MainIcon);
children.push(Separator(2));
}
else {
children.push(Box({className: 'position-indicator'}));
children.push(Separator(2));
}
}
self.children = children;
}]],
});
}
const children = [];
for (let i = 0; i < overlays.length; ++i) {
if (i === index) {
children.push(MainIcon);
children.push(Separator(2));
}
else {
children.push(Box({ className: 'position-indicator' }));
children.push(Separator(2));
}
}
self.children = children;
}]],
});
};
// FIXME: get the cursors right or just don't display when disabled
export const PositionSlider = (player, props) => EventBox({
child: Slider({
...props,
className: 'position-slider',
hexpand: true,
drawValue: false,
onChange: ({ value }) => {
player.position = player.length * value;
},
properties: [['update', slider => {
if (slider.dragging) {
slider.get_parent().window.set_cursor(Gdk.Cursor
.new_from_name(display, 'grabbing'));
}
else {
if (slider.get_parent() && slider.get_parent().window) {
slider.get_parent().window.set_cursor(Gdk.Cursor
.new_from_name(display, 'pointer'));
}
child: Slider({
...props,
className: 'position-slider',
hexpand: true,
drawValue: false,
onChange: ({ value }) => {
player.position = player.length * value;
},
properties: [['update', slider => {
if (slider.dragging) {
slider.get_parent().window.set_cursor(Gdk.Cursor
.new_from_name(display, 'grabbing'));
}
else {
if (slider.get_parent() && slider.get_parent().window) {
slider.get_parent().window.set_cursor(Gdk.Cursor
.new_from_name(display, 'pointer'));
}
slider.sensitive = player.length > 0;
if (player.length > 0) {
slider.value = player.position / player.length;
}
}
}]],
connections: [
[player, s => s._update(s), 'position'],
[1000, s => s._update(s)],
[player.colors, s => {
let c = player.colors.value;
if (c)
s.setCss(`highlight { background-color: ${c.buttonAccent}; }
slider { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }`);
}],
],
}),
slider.sensitive = player.length > 0;
if (player.length > 0)
slider.value = player.position / player.length;
}
}]],
connections: [
[player, s => s._update(s), 'position'],
[1000, s => s._update(s)],
[player.colors, s => {
const c = player.colors.value;
if (c) {
s.setCss(`highlight { background-color: ${c.buttonAccent}; }
slider { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }`);
}
}],
],
}),
});
function lengthStr(length) {
const min = Math.floor(length / 60);
const sec0 = Math.floor(length % 60) < 10 ? '0' : '';
const sec = Math.floor(length % 60);
return `${min}:${sec0}${sec}`;
const min = Math.floor(length / 60);
const sec0 = Math.floor(length % 60) < 10 ? '0' : '';
const sec = Math.floor(length % 60);
return `${min}:${sec0}${sec}`;
}
export const PositionLabel = player => Label({
properties: [['update', self => {
player.length > 0 ? self.label = lengthStr(player.position)
: self.visible = !!player;
}]],
connections: [
[player, l => l._update(l), 'position'],
[1000, l => l._update(l)],
],
properties: [['update', self => {
player.length > 0 ? self.label = lengthStr(player.position)
: self.visible = !!player;
}]],
connections: [
[player, l => l._update(l), 'position'],
[1000, l => l._update(l)],
],
});
export const LengthLabel = player => Label({
connections: [[player, self => {
player.length > 0 ? self.label = lengthStr(player.length)
: self.visible = !!player;
}]],
connections: [[player, self => {
player.length > 0 ? self.label = lengthStr(player.length)
: self.visible = !!player;
}]],
});
export const Slash = player => Label({
label: '/',
connections: [[player, self => {
self.visible = player.length > 0;
}]],
label: '/',
connections: [[player, self => {
self.visible = player.length > 0;
}]],
});
// TODO: use label instead of stack to fix UI issues
const PlayerButton = ({ player, items, onClick, prop }) => Button({
child: Stack({ items }),
onPrimaryClickRelease: () => player[onClick](),
properties: [['hovered', false]],
onHover: self => {
self._hovered = true;
if (! self.child.sensitive || ! self.sensitive) {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
}
else {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
}
child: Stack({ items }),
onPrimaryClickRelease: () => player[onClick](),
properties: [['hovered', false]],
onHover: self => {
self._hovered = true;
if (! self.child.sensitive || ! self.sensitive)
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
});
}
},
onHoverLost: self => {
self._hovered = false;
self.window.set_cursor(null);
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
});
}
},
connections: [
[player, button => {
button.child.shown = `${player[prop]}`;
}],
else
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
[player.colors, button => {
if (!Mpris.players.find(p => player === p))
return;
if (player.colors.value) {
if (prop == 'playBackStatus') {
if (button._hovered) {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
});
}
else {
}
},
onHoverLost: self => {
self._hovered = false;
self.window.set_cursor(null);
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
});
}
}
else {
button.setCss(`* { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; }`);
}
}
}],
],
},
connections: [
[player, button => {
button.child.shown = `${player[prop]}`;
}],
[player.colors, button => {
if (!Mpris.players.find(p => player === p))
return;
if (player.colors.value) {
if (prop == 'playBackStatus') {
if (button._hovered) {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
});
}
else {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
});
}
}
else {
button.setCss(`* { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; }`);
}
}
}],
],
});
export const ShuffleButton = player => PlayerButton({
player,
items: [
['true', Label({
className: 'shuffle enabled',
label: icons.mpris.shuffle.enabled,
})],
['false', Label({
className: 'shuffle disabled',
label: icons.mpris.shuffle.disabled,
})],
],
onClick: 'shuffle',
prop: 'shuffleStatus',
player,
items: [
['true', Label({
className: 'shuffle enabled',
label: icons.mpris.shuffle.enabled,
})],
['false', Label({
className: 'shuffle disabled',
label: icons.mpris.shuffle.disabled,
})],
],
onClick: 'shuffle',
prop: 'shuffleStatus',
});
export const LoopButton = player => PlayerButton({
player,
items: [
['None', Label({
className: 'loop none',
label: icons.mpris.loop.none,
})],
['Track', Label({
className: 'loop track',
label: icons.mpris.loop.track,
})],
['Playlist', Label({
className: 'loop playlist',
label: icons.mpris.loop.playlist,
})],
],
onClick: 'loop',
prop: 'loopStatus',
player,
items: [
['None', Label({
className: 'loop none',
label: icons.mpris.loop.none,
})],
['Track', Label({
className: 'loop track',
label: icons.mpris.loop.track,
})],
['Playlist', Label({
className: 'loop playlist',
label: icons.mpris.loop.playlist,
})],
],
onClick: 'loop',
prop: 'loopStatus',
});
export const PlayPauseButton = player => PlayerButton({
player,
items: [
['Playing', Label({
className: 'pausebutton playing',
label: icons.mpris.playing,
})],
['Paused', Label({
className: 'pausebutton paused',
label: icons.mpris.paused,
})],
['Stopped', Label({
className: 'pausebutton stopped paused',
label: icons.mpris.stopped,
})],
],
onClick: 'playPause',
prop: 'playBackStatus',
player,
items: [
['Playing', Label({
className: 'pausebutton playing',
label: icons.mpris.playing,
})],
['Paused', Label({
className: 'pausebutton paused',
label: icons.mpris.paused,
})],
['Stopped', Label({
className: 'pausebutton stopped paused',
label: icons.mpris.stopped,
})],
],
onClick: 'playPause',
prop: 'playBackStatus',
});
export const PreviousButton = player => PlayerButton({
player,
items: [
['true', Label({
className: 'previous',
label: icons.mpris.prev,
})],
['false', Label({
className: 'previous',
label: icons.mpris.prev,
})],
],
onClick: 'previous',
prop: 'canGoPrev',
player,
items: [
['true', Label({
className: 'previous',
label: icons.mpris.prev,
})],
['false', Label({
className: 'previous',
label: icons.mpris.prev,
})],
],
onClick: 'previous',
prop: 'canGoPrev',
});
export const NextButton = player => PlayerButton({
player,
items: [
['true', Label({
className: 'next',
label: icons.mpris.next,
})],
['false', Label({
className: 'next',
label: icons.mpris.next,
})],
],
onClick: 'next',
prop: 'canGoNext',
player,
items: [
['true', Label({
className: 'next',
label: icons.mpris.next,
})],
['false', Label({
className: 'next',
label: icons.mpris.next,
})],
],
onClick: 'next',
prop: 'canGoNext',
});

222
hosts/wim/config/ags/js/media-player/player.js
View file

@ -1,5 +1,5 @@
import { Mpris, Variable, Widget } from '../../imports.js';
const { Box, CenterBox, Label } = Widget;
const { Box, CenterBox } = Widget;
import * as mpris from './mpris.js';
import PlayerGesture from './gesture.js';
@ -9,148 +9,144 @@ const FAVE_PLAYER = 'org.mpris.MediaPlayer2.spotify';
const Top = player => Box({
className: 'top',
halign: 'start',
valign: 'start',
children: [
mpris.PlayerIcon(player, {
symbolic: false,
}),
],
className: 'top',
halign: 'start',
valign: 'start',
children: [
mpris.PlayerIcon(player, {
symbolic: false,
}),
],
});
const Center = player => Box({
className: 'center',
children: [
className: 'center',
children: [
CenterBox({
vertical: true,
children: [
Box({
className: 'metadata',
vertical: true,
halign: 'start',
valign: 'center',
hexpand: true,
children: [
mpris.TitleLabel(player),
mpris.ArtistLabel(player),
],
CenterBox({
vertical: true,
children: [
Box({
className: 'metadata',
vertical: true,
halign: 'start',
valign: 'center',
hexpand: true,
children: [
mpris.TitleLabel(player),
mpris.ArtistLabel(player),
],
}),
null,
null,
],
}),
null,
null,
],
}),
CenterBox({
vertical: true,
children: [
null,
mpris.PlayPauseButton(player),
null,
],
}),
CenterBox({
vertical: true,
children: [
null,
mpris.PlayPauseButton(player),
null,
],
}),
],
],
});
const Bottom = player => Box({
className: 'bottom',
children: [
mpris.PreviousButton(player, {
valign: 'end',
halign: 'start',
}),
Separator(8),
className: 'bottom',
children: [
mpris.PreviousButton(player, {
valign: 'end',
halign: 'start',
}),
Separator(8),
mpris.PositionSlider(player),
Separator(8),
mpris.PositionSlider(player),
Separator(8),
mpris.NextButton(player),
Separator(8),
mpris.NextButton(player),
Separator(8),
mpris.ShuffleButton(player),
Separator(8),
mpris.ShuffleButton(player),
Separator(8),
mpris.LoopButton(player),
],
mpris.LoopButton(player),
],
});
const PlayerBox = player => mpris.CoverArt(player, {
className: `player ${player.name}`,
hexpand: true,
children: [
Top(player),
Center(player),
Bottom(player),
],
className: `player ${player.name}`,
hexpand: true,
children: [
Top(player),
Center(player),
Bottom(player),
],
});
export default () => Box({
className: 'media',
child: PlayerGesture({
properties: [
['players', new Map()],
['setup', false],
['selected'],
],
connections: [
[Mpris, (overlay, busName) => {
if (overlay._players.has(busName))
return;
className: 'media',
child: PlayerGesture({
properties: [
['players', new Map()],
['setup', false],
['selected'],
],
connections: [
[Mpris, (overlay, busName) => {
if (overlay._players.has(busName))
return;
if (!busName) {
let player = Mpris.players.find(p => !overlay._players.has(p.busName));
if (player) {
busName = player.busName;
}
else {
return;
}
}
if (!busName) {
const player = Mpris.players.find(p => !overlay._players.has(p.busName));
if (player)
busName = player.busName;
else
return;
}
const player = Mpris.getPlayer(busName);
player.colors = Variable();
overlay._players.set(busName, PlayerBox(player));
const player = Mpris.getPlayer(busName);
player.colors = Variable();
overlay._players.set(busName, PlayerBox(player));
let result = [];
overlay._players.forEach(widget => {
result.push(widget);
});
const result = [];
overlay._players.forEach(widget => {
result.push(widget);
});
overlay.overlays = result;
overlay.overlays = result;
// Select favorite player at startup
if (!overlay._setup) {
if (overlay._players.has(FAVE_PLAYER)) {
overlay._selected = overlay._players.get(FAVE_PLAYER);
}
overlay._setup = true;
}
// Select favorite player at startup
if (!overlay._setup) {
if (overlay._players.has(FAVE_PLAYER))
overlay._selected = overlay._players.get(FAVE_PLAYER);
if (overlay._selected)
overlay.reorder_overlay(overlay._selected, -1);
overlay._setup = true;
}
}, 'player-added'],
if (overlay._selected)
overlay.reorder_overlay(overlay._selected, -1);
}, 'player-added'],
[Mpris, (overlay, busName) => {
if (!busName || !overlay._players.has(busName))
return;
[Mpris, (overlay, busName) => {
if (!busName || !overlay._players.has(busName))
return;
overlay._players.delete(busName);
overlay._players.delete(busName);
let result = [];
overlay._players.forEach(widget => {
result.push(widget);
});
const result = [];
overlay._players.forEach(widget => {
result.push(widget);
});
overlay.overlays = result;
if (overlay._selected)
overlay.reorder_overlay(overlay._selected, -1);
}, 'player-closed'],
],
}),
overlay.overlays = result;
if (overlay._selected)
overlay.reorder_overlay(overlay._selected, -1);
}, 'player-closed'],
],
}),
});

120
hosts/wim/config/ags/js/misc/closer.js
View file

@ -4,80 +4,82 @@ const { Window, Revealer } = Widget;
import Pointers from '../../services/pointers.js';
const ALWAYS_OPEN = [
'closer',
'bar',
'notifications',
'cornertl',
'cornertr',
'cornerbl',
'cornerbr'
'closer',
'bar',
'notifications',
'cornertl',
'cornertr',
'cornerbl',
'cornerbr',
];
const closeAll = () => {
App.windows.forEach(w => {
if (!ALWAYS_OPEN.some(window => window === w.name))
App.closeWindow(w.name)
});
App.closeWindow('closer');
App.windows.forEach(w => {
if (!ALWAYS_OPEN.some(window => window === w.name))
App.closeWindow(w.name);
});
App.closeWindow('closer');
};
globalThis.closeAll = closeAll;
Pointers.connect('new-line', (_, out) => {
if (out) {
Utils.execAsync('hyprctl layers -j').then(layers => {
layers = JSON.parse(layers);
if (out) {
Utils.execAsync('hyprctl layers -j').then(layers => {
layers = JSON.parse(layers);
Utils.execAsync('hyprctl cursorpos -j').then(pos => {
pos = JSON.parse(pos);
Utils.execAsync('hyprctl cursorpos -j').then(pos => {
pos = JSON.parse(pos);
Object.values(layers).forEach(key => {
let bar = key['levels']['3']
.find(n => n.namespace === "bar");
Object.values(layers).forEach(key => {
const bar = key['levels']['3']
.find(n => n.namespace === 'bar');
let widgets = key['levels']['3']
.filter(n => !ALWAYS_OPEN.includes(n.namespace));
const widgets = key['levels']['3']
.filter(n => !ALWAYS_OPEN.includes(n.namespace));
if (pos.x > bar.x && pos.x < bar.x + bar.w &&
pos.y > bar.y && pos.y < bar.y + bar.h) {
if (pos.x > bar.x && pos.x < bar.x + bar.w &&
pos.y > bar.y && pos.y < bar.y + bar.h) {
// don't handle clicks when on bar
}
else {
widgets.forEach(l => {
if (!(pos.x > l.x && pos.x < l.x + l.w &&
pos.y > l.y && pos.y < l.y + l.h)) {
closeAll();
return
}
});
}
});
}).catch(print);
}).catch(print);
}
})
// don't handle clicks when on bar
}
else {
widgets.forEach(l => {
if (!(pos.x > l.x && pos.x < l.x + l.w &&
pos.y > l.y && pos.y < l.y + l.h)) {
closeAll();
return;
}
});
}
});
}).catch(print);
}).catch(print);
}
});
export default () => Window({
name: 'closer',
popup: true,
layer: 'top',
name: 'closer',
popup: true,
layer: 'top',
child: Revealer({
connections: [[App, (_, windowName, visible) => {
if (!Array.from(App.windows).some(w => w[1].visible &&
!ALWAYS_OPEN.some(window => window === w[0]))) {
App.closeWindow('closer');
}
child: Revealer({
connections: [[App, (_, windowName, visible) => {
const anyVisibleAndClosable = Array.from(App.windows).some(w => {
const isAlwaysOpen = ALWAYS_OPEN.some(window => window === w[0]);
if (windowName === 'closer') {
if (visible)
Pointers.startProc();
else
Pointers.killProc();
}
}]],
}),
return w[1].visible && !isAlwaysOpen;
});
if (!anyVisibleAndClosable)
App.closeWindow('closer');
if (windowName === 'closer') {
if (visible)
Pointers.startProc();
else
Pointers.killProc();
}
}]],
}),
});

73
hosts/wim/config/ags/js/misc/cursorbox.js
View file

@ -5,42 +5,39 @@ const display = Gdk.Display.get_default();
export default ({
type = "EventBox",
reset = true,
...props
type = 'EventBox',
reset = true,
...props
}) => {
if (type === "EventBox") {
return Widget.EventBox({
...props,
onHover: self => {
if (!self.child.sensitive || !self.sensitive) {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
}
else {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
}
},
onHoverLost: self => {
if (reset)
self.window.set_cursor(null);
},
});
}
else {
return Widget.Button({
...props,
onHover: self => {
if (!self.child.sensitive || !self.sensitive) {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
}
else {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
}
},
onHoverLost: self => {
if (reset)
self.window.set_cursor(null);
},
});
}
}
if (type === 'EventBox') {
return Widget.EventBox({
...props,
onHover: self => {
if (!self.child.sensitive || !self.sensitive)
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
else
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: self => {
if (reset)
self.window.set_cursor(null);
},
});
}
else {
return Widget.Button({
...props,
onHover: self => {
if (!self.child.sensitive || !self.sensitive)
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
else
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: self => {
if (reset)
self.window.set_cursor(null);
},
});
}
};

62
hosts/wim/config/ags/js/misc/popup.js
View file

@ -3,37 +3,37 @@ const { Revealer, Box, Window } = Widget;
export default ({
name,
child,
transition = 'slide_down',
onOpen = rev => {},
...props
}) => {
let window = Window({
name,
popup: true,
visible: false,
layer: 'overlay',
...props,
child,
transition = 'slide_down',
onOpen = () => {},
...props
}) => {
const window = Window({
name,
popup: true,
visible: false,
layer: 'overlay',
...props,
child: Box({
style: 'min-height:1px; min-width:1px',
child: Revealer({
transition,
transitionDuration: 500,
connections: [[App, (rev, currentName, visible) => {
if (currentName === name) {
rev.reveal_child = visible;
onOpen(child);
child: Box({
style: 'min-height:1px; min-width:1px',
child: Revealer({
transition,
transitionDuration: 500,
connections: [[App, (rev, currentName, visible) => {
if (currentName === name) {
rev.reveal_child = visible;
onOpen(child);
if (visible && name !== 'overview')
App.openWindow('closer');
}
}]],
child: child,
}),
}),
});
window.getChild = () => child;
return window;
}
if (visible && name !== 'overview')
App.openWindow('closer');
}
}]],
child: child,
}),
}),
});
window.getChild = () => child;
return window;
};

22
hosts/wim/config/ags/js/misc/separator.js
View file

@ -3,14 +3,14 @@ const { Box } = Widget;
export default (size, { vertical = false } = {}) => {
if (vertical) {
return Box({
style: `min-height: ${size}px;`,
});
}
else {
return Box({
style: `min-width: ${size}px;`,
});
}
}
if (vertical) {
return Box({
style: `min-height: ${size}px;`,
});
}
else {
return Box({
style: `min-width: ${size}px;`,
});
}
};

316
hosts/wim/config/ags/js/notifications/base.js
View file

@ -5,190 +5,184 @@ const { Box, Icon, Label, Button } = Widget;
import GLib from 'gi://GLib';
const setTime = time => {
return GLib.DateTime
.new_from_unix_local(time)
.format('%H:%M');
return GLib.DateTime
.new_from_unix_local(time)
.format('%H:%M');
};
const getDragState = box => box.get_parent().get_parent()
.get_parent().get_parent().get_parent()._dragging;
.get_parent().get_parent().get_parent()._dragging;
import Gesture from './gesture.js';
import EventBox from '../misc/cursorbox.js'
import EventBox from '../misc/cursorbox.js';
const NotificationIcon = notif => {
let iconCmd = () => {};
let iconCmd = () => {};
if (Applications.query(notif.appEntry).length > 0) {
let app = Applications.query(notif.appEntry)[0];
if (Applications.query(notif.appEntry).length > 0) {
const app = Applications.query(notif.appEntry)[0];
let wmClass = app.app.get_string('StartupWMClass');
if (app.app.get_filename().includes('discord'))
wmClass = 'discord';
let wmClass = app.app.get_string('StartupWMClass');
if (app.app.get_filename().includes('discord'))
wmClass = 'discord';
if (wmClass != null) {
iconCmd = box => {
if (!getDragState(box)) {
execAsync(['bash', '-c',
`$AGS_PATH/launch-app.sh
${wmClass}
${app.app.get_string('Exec')}`
]).catch(print);
if (wmClass != null) {
iconCmd = box => {
if (!getDragState(box)) {
execAsync(['bash', '-c',
`$AGS_PATH/launch-app.sh
${wmClass}
${app.app.get_string('Exec')}`,
]).catch(print);
globalThis.closeAll();
globalThis.closeAll();
}
};
}
}
}
}
if (notif.image) {
if (notif.image) {
return EventBox({
onPrimaryClickRelease: iconCmd,
child: Box({
valign: 'start',
hexpand: false,
className: 'icon img',
style: `background-image: url("${notif.image}");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 78px;
min-height: 78px;`,
}),
});
}
let icon = 'dialog-information-symbolic';
if (lookUpIcon(notif.appIcon))
icon = notif.appIcon;
if (lookUpIcon(notif.appEntry))
icon = notif.appEntry;
return EventBox({
onPrimaryClickRelease: iconCmd,
child: Box({
valign: 'start',
hexpand: false,
className: 'icon img',
style: `
background-image: url("${notif.image}");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 78px;
min-height: 78px;
`,
}),
onPrimaryClickRelease: iconCmd,
child: Box({
valign: 'start',
hexpand: false,
className: 'icon',
style: `min-width: 78px;
min-height: 78px;`,
children: [Icon({
icon, size: 58,
halign: 'center',
hexpand: true,
valign: 'center',
vexpand: true,
})],
}),
});
}
let icon = 'dialog-information-symbolic';
if (lookUpIcon(notif.appIcon)) {
icon = notif.appIcon;
}
if (lookUpIcon(notif.appEntry)) {
icon = notif.appEntry;
}
return EventBox({
onPrimaryClickRelease: iconCmd,
child: Box({
valign: 'start',
hexpand: false,
className: 'icon',
style: `
min-width: 78px;
min-height: 78px;
`,
children: [Icon({
icon, size: 58,
halign: 'center',
hexpand: true,
valign: 'center',
vexpand: true,
})],
}),
});
};
export default ({ notif, command = () => {}, } = {}) => {
const BlockedApps = [
'Spotify',
];
export default ({ notif, command = () => {} } = {}) => {
const BlockedApps = [
'Spotify',
];
if (BlockedApps.find(app => app == notif.appName)) {
notif.close();
return;
}
if (BlockedApps.find(app => app == notif.appName)) {
notif.close();
return;
}
return Gesture({
maxOffset: 200,
command: () => command(),
properties: [
['hovered', false],
['id', notif.id],
],
onHover: w => {
if (!w._hovered) {
w._hovered = true;
}
},
onHoverLost: w => {
if (w._hovered) {
w._hovered = false;
}
},
return Gesture({
maxOffset: 200,
command: () => command(),
properties: [
['hovered', false],
['id', notif.id],
],
onHover: w => {
if (!w._hovered)
w._hovered = true;
},
onHoverLost: w => {
if (w._hovered)
w._hovered = false;
},
child: Box({
className: `notification ${notif.urgency}`,
vexpand: false,
// Notification
child: Box({
vertical: true,
children: [
// Content
Box({
children: [
NotificationIcon(notif),
Box({
hexpand: true,
child: Box({
className: `notification ${notif.urgency}`,
vexpand: false,
// Notification
child: Box({
vertical: true,
children: [
// Top of Content
Box({
children: [
Label({
className: 'title',
xalign: 0,
justification: 'left',
hexpand: true,
maxWidthChars: 24,
truncate: 'end',
wrap: true,
label: notif.summary,
useMarkup: notif.summary.startsWith('<'),
}),
Label({
className: 'time',
valign: 'start',
label: setTime(notif.time),
}),
EventBox({
reset: false,
child: Button({
className: 'close-button',
valign: 'start',
onClicked: () => notif.close(),
child: Icon('window-close-symbolic'),
}),
}),
],
}),
Label({
className: 'description',
hexpand: true,
useMarkup: true,
xalign: 0,
justification: 'left',
label: notif.body,
wrap: true,
}),
// Content
Box({
children: [
NotificationIcon(notif),
Box({
hexpand: true,
vertical: true,
children: [
// Top of Content
Box({
children: [
Label({
className: 'title',
xalign: 0,
justification: 'left',
hexpand: true,
maxWidthChars: 24,
truncate: 'end',
wrap: true,
label: notif.summary,
useMarkup: notif.summary.startsWith('<'),
}),
Label({
className: 'time',
valign: 'start',
label: setTime(notif.time),
}),
EventBox({
reset: false,
child: Button({
className: 'close-button',
valign: 'start',
onClicked: () => notif.close(),
child: Icon('window-close-symbolic'),
}),
}),
],
}),
Label({
className: 'description',
hexpand: true,
useMarkup: true,
xalign: 0,
justification: 'left',
label: notif.body,
wrap: true,
}),
],
}),
],
}),
// Actions
Box({
className: 'actions',
children: notif.actions.map(action => Button({
className: 'action-button',
onClicked: () => notif.invoke(action.id),
hexpand: true,
child: Label(action.label),
})),
}),
],
}),
],
}),
// Actions
Box({
className: 'actions',
children: notif.actions.map(action => Button({
className: 'action-button',
onClicked: () => notif.invoke(action.id),
hexpand: true,
child: Label(action.label),
})),
}),
],
}),
}),
});
}),
}),
});
};

235
hosts/wim/config/ags/js/notifications/center.js
View file

@ -8,148 +8,147 @@ import EventBox from '../misc/cursorbox.js';
const ClearButton = () => EventBox({
child: Button({
onPrimaryClickRelease: button => {
button._popups.children.forEach(ch => {
ch.child.setStyle(ch.child._leftAnim1);
});
child: Button({
onPrimaryClickRelease: button => {
button._popups.children.forEach(ch => {
ch.child.setStyle(ch.child._leftAnim1);
});
button._notifList.children.forEach(ch => {
if (ch.child)
ch.child.setStyle(ch.child._rightAnim1);
timeout(500, () => {
button._notifList.remove(ch);
Notifications.clear();
});
});
},
properties: [
['notifList'],
['popups'],
],
connections: [[Notifications, button => {
if (!button._notifList)
button._notifList = NotificationList;
button._notifList.children.forEach(ch => {
if (ch.child)
ch.child.setStyle(ch.child._rightAnim1);
timeout(500, () => {
button._notifList.remove(ch);
Notifications.clear();
});
});
},
properties: [
['notifList'],
['popups'],
],
connections: [[Notifications, button => {
if (!button._notifList)
button._notifList = NotificationList;
if (!button._popups)
button._popups = App.getWindow('notifications').child.children[0].child;
if (!button._popups)
button._popups = App.getWindow('notifications').child.children[0].child;
button.sensitive = Notifications.notifications.length > 0;
}]],
child: Box({
children: [
Label('Clear '),
Icon({
connections: [[Notifications, self => {
self.icon = Notifications.notifications.length > 0
? 'user-trash-full-symbolic' : 'user-trash-symbolic';
}]],
button.sensitive = Notifications.notifications.length > 0;
}]],
child: Box({
children: [
Label('Clear '),
Icon({
connections: [[Notifications, self => {
self.icon = Notifications.notifications.length > 0
? 'user-trash-full-symbolic' : 'user-trash-symbolic';
}]],
}),
],
}),
],
}),
}),
});
const Header = () => Box({
className: 'header',
children: [
Label({
label: 'Notifications',
hexpand: true,
xalign: 0,
}),
ClearButton(),
],
className: 'header',
children: [
Label({
label: 'Notifications',
hexpand: true,
xalign: 0,
}),
ClearButton(),
],
});
const NotificationList = Box({
vertical: true,
vexpand: true,
connections: [
[Notifications, (box, id) => {
if (box.children.length == 0) {
box.children = Notifications.notifications
.reverse()
.map(n => Notification({ notif: n, command: () => n.close() }));
}
else if (id) {
let notif = Notifications.getNotification(id);
vertical: true,
vexpand: true,
connections: [
[Notifications, (box, id) => {
if (box.children.length == 0) {
box.children = Notifications.notifications
.reverse()
.map(n => Notification({ notif: n, command: () => n.close() }));
}
else if (id) {
const notif = Notifications.getNotification(id);
const NewNotif = Notification({
notif,
command: () => notif.close(),
});
const NewNotif = Notification({
notif,
command: () => notif.close(),
});
if (NewNotif) {
box.add(NewNotif);
box.show_all();
}
}
if (NewNotif) {
box.add(NewNotif);
box.show_all();
}
}
}, 'notified'],
}, 'notified'],
[Notifications, (box, id) => {
for (const ch of box.children) {
if (ch._id == id) {
ch.child.setStyle(ch.child._rightAnim1);
timeout(500, () => box.remove(ch));
return;
}
}
}, 'closed'],
[Notifications, (box, id) => {
for (const ch of box.children) {
if (ch._id == id) {
ch.child.setStyle(ch.child._rightAnim1);
timeout(500, () => box.remove(ch));
return;
}
}
}, 'closed'],
[Notifications, box => box.visible = Notifications.notifications.length > 0],
],
[Notifications, box => box.visible = Notifications.notifications.length > 0],
],
});
const Placeholder = () => Revealer({
transition: 'crossfade',
connections: [[Notifications, box => {
box.revealChild = Notifications.notifications.length === 0;
}]],
child: Box({
className: 'placeholder',
vertical: true,
valign: 'center',
halign: 'center',
vexpand: true,
hexpand: true,
children: [
Icon('notification-disabled-symbolic'),
Label('Your inbox is empty'),
],
}),
transition: 'crossfade',
connections: [[Notifications, box => {
box.revealChild = Notifications.notifications.length === 0;
}]],
child: Box({
className: 'placeholder',
vertical: true,
valign: 'center',
halign: 'center',
vexpand: true,
hexpand: true,
children: [
Icon('notification-disabled-symbolic'),
Label('Your inbox is empty'),
],
}),
});
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,
className: 'notification-center',
vertical: true,
children: [
Header(),
Box({
className: 'notification-wallpaper-box',
children: [
NotificationList,
Placeholder(),
Scrollable({
className: 'notification-list-box',
hscroll: 'never',
vscroll: 'automatic',
child: Box({
className: 'notification-list',
vertical: true,
children: [
NotificationList,
Placeholder(),
],
}),
}),
],
}),
})
],
}),
],
}),
],
});
export default () => PopupWindow({
name: 'notification-center',
anchor: [ 'top', 'right' ],
margin: [ 8, 60, 0, 0 ],
child: NotificationCenterWidget(),
name: 'notification-center',
anchor: ['top', 'right'],
margin: [8, 60, 0, 0],
child: NotificationCenterWidget(),
});

208
hosts/wim/config/ags/js/notifications/gesture.js
View file

@ -1,4 +1,4 @@
import { Widget } from '../../imports.js';
import { Utils, Widget } from '../../imports.js';
const { Box, EventBox } = Widget;
import Gtk from 'gi://Gtk';
@ -7,136 +7,136 @@ const display = Gdk.Display.get_default();
export default ({
maxOffset = 150,
startMargin = 0,
endMargin = 300,
command = () => {},
onHover = w => {},
onHoverLost = w => {},
child = '',
children = [],
properties = [[]],
...props
maxOffset = 150,
startMargin = 0,
endMargin = 300,
command = () => {},
onHover = () => {},
onHoverLost = () => {},
child = '',
children = [],
properties = [[]],
...props
}) => {
let widget = EventBox({
...props,
properties: [
['dragging', false],
...properties,
],
onHover: self => {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
onHover(self);
},
onHoverLost: self => {
self.window.set_cursor(null);
onHoverLost(self);
},
});
const widget = EventBox({
...props,
properties: [
['dragging', false],
...properties,
],
onHover: self => {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
onHover(self);
},
onHoverLost: self => {
self.window.set_cursor(null);
onHoverLost(self);
},
});
let gesture = Gtk.GestureDrag.new(widget);
const gesture = Gtk.GestureDrag.new(widget);
let leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
opacity: 0;`;
const leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
opacity: 0;`;
let leftAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
const leftAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
let rightAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
opacity: 0;`;
const rightAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
opacity: 0;`;
let rightAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
const rightAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
widget.add(Box({
properties: [
['leftAnim1', leftAnim1],
['leftAnim2', leftAnim2],
['rightAnim1', rightAnim1],
['rightAnim2', rightAnim2],
['ready', false]
],
children: [
...children,
child,
],
style: leftAnim2,
connections: [
widget.add(Box({
properties: [
['leftAnim1', leftAnim1],
['leftAnim2', leftAnim2],
['rightAnim1', rightAnim1],
['rightAnim2', rightAnim2],
['ready', false],
],
children: [
...children,
child,
],
style: leftAnim2,
connections: [
[gesture, self => {
var offset = gesture.get_offset()[1];
[gesture, self => {
var offset = gesture.get_offset()[1];
if (offset >= 0) {
self.setStyle(`margin-left: ${Number(offset + startMargin)}px;
if (offset >= 0) {
self.setStyle(`margin-left: ${Number(offset + startMargin)}px;
margin-right: -${Number(offset + startMargin)}px;`);
}
else {
offset = Math.abs(offset);
self.setStyle(`margin-right: ${Number(offset + startMargin)}px;
}
else {
offset = Math.abs(offset);
self.setStyle(`margin-right: ${Number(offset + startMargin)}px;
margin-left: -${Number(offset + startMargin)}px;`);
}
}
self.get_parent()._dragging = Math.abs(offset) > 10;
self.get_parent()._dragging = Math.abs(offset) > 10;
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
}, 'drag-update'],
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
}, 'drag-update'],
[gesture, self => {
if (!self._ready) {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
[gesture, self => {
if (!self._ready) {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
margin-bottom: 0px; margin-top: 0px; opacity: 0;`);
setTimeout(() => {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
Utils.timeout(500, () => {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${startMargin}px;
margin-right: ${startMargin}px;
margin-bottom: unset; margin-top: unset; opacity: 1;`);
}, 500);
setTimeout(() => self._ready = true, 1000);
return;
}
});
Utils.timeout(1000, () => self._ready = true);
return;
}
const offset = gesture.get_offset()[1];
const offset = gesture.get_offset()[1];
if (Math.abs(offset) > maxOffset) {
if (offset > 0) {
self.setStyle(rightAnim1);
setTimeout(() => self.setStyle(rightAnim2), 500);
}
else {
self.setStyle(leftAnim1);
setTimeout(() => self.setStyle(leftAnim2), 500);
}
setTimeout(() => {
command();
self.destroy();
}, 1000);
}
else {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
if (Math.abs(offset) > maxOffset) {
if (offset > 0) {
self.setStyle(rightAnim1);
Utils.timeout(500, () => self.setStyle(rightAnim2));
}
else {
self.setStyle(leftAnim1);
Utils.timeout(500, () => self.setStyle(leftAnim2));
}
Utils.timeout(1000, () => {
command();
self.destroy();
});
}
else {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${startMargin}px;
margin-right: ${startMargin}px;
margin-bottom: unset; margin-top: unset; opacity: 1;`);
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
self.get_parent()._dragging = false;
}
}, 'drag-end'],
self.get_parent()._dragging = false;
}
}, 'drag-end'],
],
}));
],
}));
return widget;
return widget;
};

126
hosts/wim/config/ags/js/notifications/popup.js
View file

@ -1,87 +1,89 @@
import { Notifications, Widget } from '../../imports.js';
import { Notifications, Utils, Widget } from '../../imports.js';
const { Box, Revealer, Window } = Widget;
import GLib from 'gi://GLib';
import Notification from './base.js';
const Popups = () => Box({
vertical: true,
properties: [
['map', new Map()],
vertical: true,
properties: [
['map', new Map()],
['dismiss', (box, id, force = false) => {
if (!id || !box._map.has(id) ||
box._map.get(id)._hovered && !force) {
['dismiss', (box, id, force = false) => {
if (!id || !box._map.has(id) ||
box._map.get(id)._hovered && !force)
return;
}
return;
if (box._map.size - 1 === 0)
box.get_parent().reveal_child = false;
setTimeout(() => {
if (box._map.get(id)?.interval) {
box._map.get(id).interval.destroy();
box._map.get(id).interval = undefined;
}
box._map.get(id)?.destroy();
box._map.delete(id);
}, 200);
}],
if (box._map.size - 1 === 0)
box.get_parent().reveal_child = false;
['notify', (box, id) => {
if (!id || Notifications.dnd)
return;
Utils.timeout(200, () => {
if (box._map.get(id)?.interval) {
box._map.get(id).interval.destroy();
box._map.get(id).interval = undefined;
}
box._map.get(id)?.destroy();
box._map.delete(id);
});
}],
if (! Notifications.getNotification(id))
return;
['notify', (box, id) => {
if (!id || Notifications.dnd)
return;
box._map.delete(id);
if (! Notifications.getNotification(id))
return;
let notif = Notifications.getNotification(id);
box._map.set(id, Notification({
notif,
command: () => notif.dismiss(),
}));
box._map.delete(id);
box.children = Array.from(box._map.values()).reverse();
const notif = Notifications.getNotification(id);
box._map.set(id, Notification({
notif,
command: () => notif.dismiss(),
}));
setTimeout(() => {
box.get_parent().revealChild = true;
}, 10);
box.children = Array.from(box._map.values()).reverse();
box._map.get(id).interval = setInterval(() => {
if (!box._map.get(id)._hovered) {
box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim1);
Utils.timeout(10, () => {
box.get_parent().revealChild = true;
});
if (box._map.get(id).interval) {
box._map.get(id).interval.destroy();
box._map.get(id).interval = undefined;
}
}
}, 4500);
}],
],
connections: [
[Notifications, (box, id) => box._notify(box, id), 'notified'],
[Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
[Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
],
box._map.get(id).interval = Utils.interval(4500, () => {
if (!box._map.get(id)._hovered) {
box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim1);
if (box._map.get(id).interval) {
GLib.source_remove(box._map.get(id).interval);
box._map.get(id).interval = undefined;
}
}
});
}],
],
connections: [
[Notifications, (box, id) => box._notify(box, id), 'notified'],
[Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
[Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
],
});
const PopupList = ({ transition = 'none' } = {}) => Box({
className: 'notifications-popup-list',
style: 'padding: 1px',
children: [
Revealer({
transition,
child: Popups(),
}),
],
className: 'notifications-popup-list',
style: 'padding: 1px',
children: [
Revealer({
transition,
child: Popups(),
}),
],
});
export default () => Window({
name: `notifications`,
anchor: [ 'top', 'left' ],
child: PopupList(),
name: 'notifications',
anchor: ['top', 'left'],
child: PopupList(),
});

221
hosts/wim/config/ags/js/overview/clients.js
View file

@ -6,11 +6,11 @@ import { WindowButton } from './dragndrop.js';
import * as VARS from './variables.js';
// Has to be a traditional function for 'this' scope
Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1) };
Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1); };
const scale = size => size * VARS.SCALE - VARS.MARGIN;
const getFontSize = client => Math.min(scale(client.size[0]),
scale(client.size[1])) * VARS.ICON_SCALE;
scale(client.size[1])) * VARS.ICON_SCALE;
const IconStyle = client => `transition: font-size 0.2s linear;
min-width: ${scale(client.size[0])}px;
@ -19,127 +19,128 @@ const IconStyle = client => `transition: font-size 0.2s linear;
const Client = (client, active, clients) => {
let wsName = String(client.workspace.name).replace('special:', '');
let wsId = client.workspace.id;
let addr = `address:${client.address}`;
const wsName = String(client.workspace.name).replace('special:', '');
const wsId = client.workspace.id;
const addr = `address:${client.address}`;
// FIXME: special workspaces not closing when in one and clicking on normal client
return Revealer({
transition: 'crossfade',
setup: rev => rev.revealChild = true,
properties: [
['address', client.address],
['toDestroy', false]
],
child: WindowButton({
address: client.address,
onSecondaryClickRelease: () => {
execAsync(`hyprctl dispatch closewindow ${addr}`)
.catch(print);
},
// FIXME: special workspaces not closing when in one and clicking on normal client
return Revealer({
transition: 'crossfade',
setup: rev => rev.revealChild = true,
properties: [
['address', client.address],
['toDestroy', false],
],
child: WindowButton({
address: client.address,
onSecondaryClickRelease: () => {
execAsync(`hyprctl dispatch closewindow ${addr}`)
.catch(print);
},
onPrimaryClickRelease: () => {
if (wsId < 0) {
if (client.workspace.name === 'special') {
execAsync(`hyprctl dispatch
movetoworkspacesilent special:${wsId},${addr}`)
.then(
onPrimaryClickRelease: () => {
if (wsId < 0) {
if (client.workspace.name === 'special') {
execAsync(`hyprctl dispatch
movetoworkspacesilent special:${wsId},${addr}`)
.then(
execAsync(`hyprctl dispatch togglespecialworkspace ${wsId}`).then(
() => App.closeWindow('overview')
).catch(print)
execAsync(`hyprctl dispatch togglespecialworkspace ${wsId}`).then(
() => App.closeWindow('overview'),
).catch(print),
).catch(print);
}
else {
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`).then(
() => App.closeWindow('overview')
).catch(print);
}
}
else {
// close special workspace if one is opened
let activeAddress = Hyprland.active.client.address;
let currentActive = clients.find(c => c.address === activeAddress)
).catch(print);
}
else {
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`).then(
() => App.closeWindow('overview'),
).catch(print);
}
}
else {
// close special workspace if one is opened
const activeAddress = Hyprland.active.client.address;
const currentActive = clients.find(c => c.address === activeAddress);
if (currentActive && currentActive.workspace.id < 0) {
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`)
.catch(print);
}
execAsync(`hyprctl dispatch focuswindow ${addr}`).then(
() => App.closeWindow('overview')
).catch(print);
}
},
if (currentActive && currentActive.workspace.id < 0) {
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`)
.catch(print);
}
execAsync(`hyprctl dispatch focuswindow ${addr}`).then(
() => App.closeWindow('overview'),
).catch(print);
}
},
child: Icon({
className: `window ${active}`,
style: IconStyle(client) + 'font-size: 10px;',
icon: client.class,
}),
}),
});
child: Icon({
className: `window ${active}`,
style: IconStyle(client) + 'font-size: 10px;',
icon: client.class,
}),
}),
});
};
export function updateClients(box) {
execAsync('hyprctl clients -j').then(out => {
let clients = JSON.parse(out).filter(client => client.class)
execAsync('hyprctl clients -j').then(out => {
const clients = JSON.parse(out).filter(client => client.class);
box._workspaces.forEach(workspace => {
let fixed = workspace.getFixed();
let toRemove = fixed.get_children();
box._workspaces.forEach(workspace => {
const fixed = workspace.getFixed();
const toRemove = fixed.get_children();
clients.filter(client => client.workspace.id == workspace._id)
.forEach(client => {
let active = '';
if (client.address == Hyprland.active.client.address) {
active = 'active';
}
clients.filter(client => client.workspace.id == workspace._id)
.forEach(client => {
let active = '';
if (client.address == Hyprland.active.client.address)
active = 'active';
// TODO: fix multi monitor issue. this is just a temp fix
client.at[1] -= 2920;
// Special workspaces that haven't been opened yet
// return a size of 0. We need to set them to default
// values to show the workspace properly
if (client.size[0] === 0) {
client.size[0] = VARS.DEFAULT_SPECIAL.SIZE_X;
client.size[1] = VARS.DEFAULT_SPECIAL.SIZE_Y;
client.at[0] = VARS.DEFAULT_SPECIAL.POS_X;
client.at[1] = VARS.DEFAULT_SPECIAL.POS_Y;
}
// TODO: fix multi monitor issue. this is just a temp fix
client.at[1] -= 2920;
let newClient = [
fixed.get_children().find(ch => ch._address == client.address),
client.at[0] * VARS.SCALE,
client.at[1] * VARS.SCALE,
];
// Special workspaces that haven't been opened yet
// return a size of 0. We need to set them to default
// values to show the workspace properly
if (client.size[0] === 0) {
client.size[0] = VARS.DEFAULT_SPECIAL.SIZE_X;
client.size[1] = VARS.DEFAULT_SPECIAL.SIZE_Y;
client.at[0] = VARS.DEFAULT_SPECIAL.POS_X;
client.at[1] = VARS.DEFAULT_SPECIAL.POS_Y;
}
if (newClient[0]) {
toRemove.remove(newClient[0]);
fixed.move(...newClient);
}
else {
newClient[0] = Client(client, active, clients);
fixed.put(...newClient);
}
const newClient = [
fixed.get_children().find(ch => ch._address == client.address),
client.at[0] * VARS.SCALE,
client.at[1] * VARS.SCALE,
];
// Set a timeout here to have an animation when the icon first appears
setTimeout(() => {
newClient[0].child.child.className = `window ${active}`;
newClient[0].child.child.style = IconStyle(client);
}, 1);
});
fixed.show_all();
toRemove.forEach(ch => {
if (ch._toDestroy) {
ch.destroy();
}
else {
ch.revealChild = false;
ch._toDestroy = true;
}
});
});
}).catch(print);
};
if (newClient[0]) {
toRemove.remove(newClient[0]);
fixed.move(...newClient);
}
else {
newClient[0] = Client(client, active, clients);
fixed.put(...newClient);
}
// Set a timeout here to have an animation when the icon first appears
Utils.timeout(1, () => {
newClient[0].child.child.className = `window ${active}`;
newClient[0].child.child.style = IconStyle(client);
});
});
fixed.show_all();
toRemove.forEach(ch => {
if (ch._toDestroy) {
ch.destroy();
}
else {
ch.revealChild = false;
ch._toDestroy = true;
}
});
});
}).catch(print);
}

98
hosts/wim/config/ags/js/overview/dragndrop.js
View file

@ -13,61 +13,61 @@ const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
function createSurfaceFromWidget(widget) {
const alloc = widget.get_allocation();
const surface = new Cairo.ImageSurface(
Cairo.Format.ARGB32,
alloc.width,
alloc.height,
);
const cr = new Cairo.Context(surface);
cr.setSourceRGBA(255, 255, 255, 0);
cr.rectangle(0, 0, alloc.width, alloc.height);
cr.fill();
widget.draw(cr);
const alloc = widget.get_allocation();
const surface = new Cairo.ImageSurface(
Cairo.Format.ARGB32,
alloc.width,
alloc.height,
);
const cr = new Cairo.Context(surface);
cr.setSourceRGBA(255, 255, 255, 0);
cr.rectangle(0, 0, alloc.width, alloc.height);
cr.fill();
widget.draw(cr);
return surface;
};
return surface;
}
let hidden = 0;
export const WorkspaceDrop = props => EventBox({
...props,
connections: [['drag-data-received', (self, _c, _x, _y, data) => {
let id = self.get_parent()._id;
...props,
connections: [['drag-data-received', (self, _c, _x, _y, data) => {
let id = self.get_parent()._id;
if (id < -1) {
id = self.get_parent()._name;
}
else if (id === -1) {
id = `special:${++hidden}`;
}
else if (id === 1000) {
id = "empty";
}
execAsync(`hyprctl dispatch movetoworkspacesilent ${id},address:${data.get_text()}`)
.catch(print);
}]],
setup: self => {
self.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
},
if (id < -1)
id = self.get_parent()._name;
else if (id === -1)
id = `special:${++hidden}`;
else if (id === 1000)
id = 'empty';
execAsync(`hyprctl dispatch movetoworkspacesilent ${id},address:${data.get_text()}`)
.catch(print);
}]],
setup: self => {
self.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
},
});
export const WindowButton = ({address, ...props} = {}) => Button({
type: "Button",
...props,
setup: self => {
self.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
self.connect('drag-data-get', (_w, _c, data) => {
data.set_text(address, address.length);
});
self.connect('drag-begin', (_, context) => {
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self));
self.get_parent().revealChild = false;
});
self.connect('drag-end', () => {
self.get_parent().destroy();
export const WindowButton = ({ address, ...props } = {}) => Button({
type: 'Button',
...props,
setup: self => {
self.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
self.connect('drag-data-get', (_w, _c, data) => {
data.set_text(address, address.length);
});
self.connect('drag-begin', (_, context) => {
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self));
self.get_parent().revealChild = false;
});
self.connect('drag-end', () => {
self.get_parent().destroy();
let mainBox = App.getWindow('overview').getChild();
updateClients(mainBox);
});
},
const mainBox = App.getWindow('overview').getChild();
updateClients(mainBox);
});
},
});

58
hosts/wim/config/ags/js/overview/main.js
View file

@ -7,42 +7,42 @@ import { updateClients } from './clients.js';
function update(box) {
getWorkspaces(box);
updateWorkspaces(box);
updateClients(box);
getWorkspaces(box);
updateWorkspaces(box);
updateClients(box);
}
export default () => PopupWindow({
name: 'overview',
transition: 'crossfade',
onOpen: child => update(child),
name: 'overview',
transition: 'crossfade',
onOpen: child => update(child),
child: Box({
className: 'overview',
vertical: true,
children: [
Box({
child: Box({
className: 'overview',
vertical: true,
children: [
WorkspaceRow('normal', 0),
Box({
vertical: true,
children: [
WorkspaceRow('normal', 0),
],
}),
Box({
vertical: true,
children: [
WorkspaceRow('special', 0),
],
}),
],
}),
Box({
vertical: true,
children: [
WorkspaceRow('special', 0),
],
}),
],
connections: [[Hyprland, self => {
if (!App.getWindow('overview').visible)
return;
connections: [[Hyprland, self => {
if (!App.getWindow('overview').visible)
return;
update(self);
}]],
properties: [
['workspaces'],
],
}),
update(self);
}]],
properties: [
['workspaces'],
],
}),
});

12
hosts/wim/config/ags/js/overview/variables.js
View file

@ -2,13 +2,13 @@ export const SCALE = 0.11;
export const ICON_SCALE = 0.8;
export const MARGIN = 8;
export const DEFAULT_SPECIAL = {
SIZE_X: 1524,
SIZE_Y: 908,
POS_X: 197,
POS_Y: 170,
SIZE_X: 1524,
SIZE_Y: 908,
POS_X: 197,
POS_Y: 170,
};
export const WORKSPACE_PER_ROW = 6;
export const SCREEN = {
X: 1920,
Y: 1200,
X: 1920,
Y: 1200,
};

357
hosts/wim/config/ags/js/overview/workspaces.js
View file

@ -1,7 +1,8 @@
import { Hyprland, Widget } from '../../imports.js';
import { Hyprland, Utils, Widget } from '../../imports.js';
const { Revealer, CenterBox, Box, EventBox, Label, Overlay } = Widget;
import Gtk from 'gi://Gtk';
import Gtk from 'gi://Gtk';
import GLib from 'gi://GLib';
import { WorkspaceDrop } from './dragndrop.js';
import * as VARS from './variables.js';
@ -11,203 +12,201 @@ const DEFAULT_STYLE = `min-width: ${VARS.SCREEN.X * VARS.SCALE}px;
export function getWorkspaces(box) {
let children = [];
box.children.forEach(type => {
type.children.forEach(row => {
row.child.centerWidget.child.children.forEach(ch => {
children.push(ch);
});
const children = [];
box.children.forEach(type => {
type.children.forEach(row => {
row.child.centerWidget.child.children.forEach(ch => {
children.push(ch);
});
});
});
});
box._workspaces = children.sort((a, b) => a._id - b._id);
};
box._workspaces = children.sort((a, b) => a._id - b._id);
}
export const WorkspaceRow = (className, i) => Revealer({
transition: 'slide_down',
connections: [[Hyprland, rev => {
let minId = i * VARS.WORKSPACE_PER_ROW;
let activeId = Hyprland.active.workspace.id;
transition: 'slide_down',
connections: [[Hyprland, rev => {
const minId = i * VARS.WORKSPACE_PER_ROW;
const activeId = Hyprland.active.workspace.id;
rev.revealChild = Hyprland.workspaces.some(ws => ws.id > minId &&
rev.revealChild = Hyprland.workspaces.some(ws => ws.id > minId &&
(ws.windows > 0 ||
ws.id === activeId));
}]],
child: CenterBox({
children: [null, EventBox({
properties: [['box']],
setup: eventbox => eventbox._box = eventbox.child.children[0],
connections: [[Hyprland, eventbox => {
const maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
const activeId = Hyprland.active.workspace.id;
eventbox._box.revealChild = className === 'special' ||
!Hyprland.workspaces.some(ws => ws.id > maxId &&
(ws.windows > 0 ||
ws.id === activeId));
}]],
child: CenterBox({
children: [null, EventBox({
properties: [['box']],
setup: eventbox => eventbox._box = eventbox.child.children[0],
connections: [[Hyprland, eventbox => {
let maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
let activeId = Hyprland.active.workspace.id;
eventbox._box.revealChild = className === 'special' ||
!Hyprland.workspaces.some(ws => ws.id > maxId &&
(ws.windows > 0 ||
ws.id === activeId));
}]],
child: Box({
className: className,
children: [
Workspace(className === 'special' ? -1 : 1000,
className === 'special' ? 'special' : '',
true),
],
}),
}), null],
}),
ws.id === activeId));
}]],
child: Box({
className: className,
children: [
Workspace(className === 'special' ? -1 : 1000,
className === 'special' ? 'special' : '',
true),
],
}),
}), null],
}),
});
// TODO: please make this readable for the love of god
const Workspace = (id, name, extra = false) => {
let workspace;
let fixed = Gtk.Fixed.new();
let workspace;
const fixed = Gtk.Fixed.new();
if (!extra) {
workspace = Revealer({
transition: 'slide_right',
transitionDuration: 500,
properties: [
['id', id],
['name', name],
['timeouts', []],
['wasActive', false],
],
connections: [[Hyprland, box => {
box._timeouts.forEach(timer => timer.destroy());
if (!extra) {
workspace = Revealer({
transition: 'slide_right',
transitionDuration: 500,
properties: [
['id', id],
['name', name],
['timeouts', []],
['wasActive', false],
],
connections: [[Hyprland, box => {
box._timeouts.forEach(timer => GLib.source_remove(timer));
let activeId = Hyprland.active.workspace.id;
let active = activeId === box._id;
const activeId = Hyprland.active.workspace.id;
const active = activeId === box._id;
let rev = box.child.child.get_children()[1];
let n = activeId > box._id;
const rev = box.child.child.get_children()[1];
const n = activeId > box._id;
if (Hyprland.getWorkspace(box._id)?.windows > 0 || active) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(setTimeout(() => {
box.revealChild = true;
}, 100));
if (Hyprland.getWorkspace(box._id)?.windows > 0 || active) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(Utils.timeout(100, () => {
box.revealChild = true;
}));
}
else if (!Hyprland.getWorkspace(box._id)?.windows > 0) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(Utils.timeout(100, () => {
box.revealChild = false;
}));
return;
}
}
else if (!Hyprland.getWorkspace(box._id)?.windows > 0) {
rev.setStyle(DEFAULT_STYLE);
box._timeouts.push(setTimeout(() => {
box.revealChild = false;
}, 100));
return;
}
if (active) {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1;`);
box._wasActive = true;
}
else if (box._wasActive) {
box._timeouts.push(setTimeout(() => {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1; margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
box._wasActive = false;
}, 120));
box._timeouts.push(setTimeout(() => {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}, 500));
}
else {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}
}]],
child: WorkspaceDrop({
child: Overlay({
child: Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
overlays: [
Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
Box({
className: 'workspace',
style: DEFAULT_STYLE,
child: fixed,
})
],
}),
}),
});
}
else {
workspace = Revealer({
transition: 'slide_right',
properties: [
['id', id],
['name', name],
],
child: WorkspaceDrop({
child: Overlay({
child: Box({
className: 'workspace',
style: DEFAULT_STYLE,
}),
overlays: [
Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
Box({
style: DEFAULT_STYLE,
children: [
fixed,
Label({
label: ' +',
style: 'font-size: 40px;',
if (active) {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1;`);
box._wasActive = true;
}
else if (box._wasActive) {
box._timeouts.push(Utils.timeout(120, () => {
rev.setStyle(`${DEFAULT_STYLE}
transition: margin 0.5s ease-in-out;
opacity: 1; margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
box._wasActive = false;
}));
box._timeouts.push(Utils.timeout(500, () => {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}));
}
else {
rev.setStyle(`${DEFAULT_STYLE} opacity: 0;
margin-left: ${n ? '' : '-'}300px;
margin-right: ${n ? '-' : ''}300px;`);
}
}]],
child: WorkspaceDrop({
child: Overlay({
child: Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
overlays: [
Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
Box({
className: 'workspace',
style: DEFAULT_STYLE,
child: fixed,
}),
],
}),
],
})
],
}),
}),
});
}
}),
});
}
else {
workspace = Revealer({
transition: 'slide_right',
properties: [
['id', id],
['name', name],
],
child: WorkspaceDrop({
child: Overlay({
child: Box({
className: 'workspace',
style: DEFAULT_STYLE,
}),
overlays: [
Box({
className: 'workspace active',
style: `${DEFAULT_STYLE} opacity: 0;`,
}),
Box({
style: DEFAULT_STYLE,
children: [
fixed,
Label({
label: ' +',
style: 'font-size: 40px;',
}),
],
}),
],
}),
}),
});
}
workspace.getFixed = () => fixed;
return workspace;
workspace.getFixed = () => fixed;
return workspace;
};
export function updateWorkspaces(box) {
Hyprland.workspaces.forEach(ws => {
let currentWs = box._workspaces.find(ch => ch._id == ws.id);
if (!currentWs) {
var type = 0;
var rowNo = 0;
Hyprland.workspaces.forEach(ws => {
const currentWs = box._workspaces.find(ch => ch._id == ws.id);
if (!currentWs) {
var type = 0;
var rowNo = 0;
if (ws.id < 0) {
// This means it's a special workspace
type = 1;
}
else {
rowNo = Math.floor((ws.id - 1) / VARS.WORKSPACE_PER_ROW);
if (rowNo >= box.children[type].children.length) {
for (let i = box.children[type].children.length; i <= rowNo; ++i) {
box.children[type].add(WorkspaceRow(type ? 'special' : 'normal', i));
}
if (ws.id < 0) {
// This means it's a special workspace
type = 1;
}
else {
rowNo = Math.floor((ws.id - 1) / VARS.WORKSPACE_PER_ROW);
if (rowNo >= box.children[type].children.length) {
for (let i = box.children[type].children.length; i <= rowNo; ++i)
box.children[type].add(WorkspaceRow(type ? 'special' : 'normal', i));
}
}
var row = box.children[type].children[rowNo].child.centerWidget.child;
row.add(Workspace(ws.id, type ? ws.name : ''));
}
}
var row = box.children[type].children[rowNo].child.centerWidget.child;
row.add(Workspace(ws.id, type ? ws.name : ''));
}
});
box.show_all();
});
box.show_all();
// Make sure the order is correct
box._workspaces.forEach((workspace, i) => {
workspace.get_parent().reorder_child(workspace, i)
});
// Make sure the order is correct
box._workspaces.forEach((workspace, i) => {
workspace.get_parent().reorder_child(workspace, i);
});
}

54
hosts/wim/config/ags/js/powermenu.js
View file

@ -2,46 +2,46 @@ import { Widget } from '../imports.js';
const { CenterBox, Label } = Widget;
import PopupWindow from './misc/popup.js';
import Button from './misc/cursorbox.js'
import Button from './misc/cursorbox.js';
const PowermenuWidget = () => CenterBox({
className: 'powermenu',
vertical: false,
className: 'powermenu',
vertical: false,
startWidget: Button({
type: "Button",
className: 'shutdown',
onPrimaryClickRelease: 'systemctl poweroff',
startWidget: Button({
type: 'Button',
className: 'shutdown',
onPrimaryClickRelease: 'systemctl poweroff',
child: Label({
label: '襤',
child: Label({
label: '襤',
}),
}),
}),
centerWidget: Button({
type: "Button",
className: 'reboot',
onPrimaryClickRelease: 'systemctl reboot',
centerWidget: Button({
type: 'Button',
className: 'reboot',
onPrimaryClickRelease: 'systemctl reboot',
child: Label({
label: '勒',
child: Label({
label: '勒',
}),
}),
}),
endWidget: Button({
type: "Button",
className: 'logout',
onPrimaryClickRelease: 'hyprctl dispatch exit',
endWidget: Button({
type: 'Button',
className: 'logout',
onPrimaryClickRelease: 'hyprctl dispatch exit',
child: Label({
label: '',
child: Label({
label: '',
}),
}),
}),
});
export default () => PopupWindow({
name: 'powermenu',
transition: 'crossfade',
child: PowermenuWidget(),
name: 'powermenu',
transition: 'crossfade',
child: PowermenuWidget(),
});

393
hosts/wim/config/ags/js/quick-settings/button-grid.js
View file

@ -6,240 +6,237 @@ import EventBox from '../misc/cursorbox.js';
const GridButton = ({
command = () => {},
secondaryCommand = () => {},
icon
command = () => {},
secondaryCommand = () => {},
icon,
} = {}) => Box({
className: 'grid-button',
children: [
className: 'grid-button',
children: [
EventBox({
className: 'left-part',
onPrimaryClickRelease: () => command(),
child: icon,
}),
EventBox({
className: 'left-part',
onPrimaryClickRelease: () => command(),
child: icon,
}),
EventBox({
className: 'right-part',
onPrimaryClickRelease: () => secondaryCommand(),
child: Label({
label: " ",
className: 'grid-chev',
}),
}),
EventBox({
className: 'right-part',
onPrimaryClickRelease: () => secondaryCommand(),
child: Label({
label: ' ',
className: 'grid-chev',
}),
}),
],
],
});
const FirstRow = () => Box({
className: 'button-row',
halign: 'center',
style: 'margin-top: 15px; margin-bottom: 7px;',
children: [
className: 'button-row',
halign: 'center',
style: 'margin-top: 15px; margin-bottom: 7px;',
children: [
GridButton({
command: () => Network.toggleWifi(),
secondaryCommand: () => {
execAsync(['bash', '-c', 'nm-connection-editor'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Network, icon => {
if (Network.wifi.enabled) {
icon.icon = 'network-wireless-connected-symbolic';
}
else {
icon.icon = 'network-wireless-offline-symbolic';
}
}, 'changed']],
}),
}),
GridButton({
command: () => Network.toggleWifi(),
secondaryCommand: () => {
execAsync(['bash', '-c', 'nm-connection-editor'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Network, icon => {
if (Network.wifi.enabled)
icon.icon = 'network-wireless-connected-symbolic';
GridButton({
command: () => {
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh blue-toggle'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'blueberry'])
.catch(print)
},
icon: Icon({
className: 'grid-label',
connections: [[Bluetooth, self => {
if (Bluetooth.enabled) {
self.icon = 'bluetooth-active-symbolic';
execAsync(['bash', '-c', 'echo 󰂯 > $HOME/.config/.bluetooth'])
.catch(print);
}
else {
self.icon = 'bluetooth-disabled-symbolic';
execAsync(['bash', '-c', 'echo 󰂲 > $HOME/.config/.bluetooth'])
.catch(print);
}
}, 'changed']],
})
}),
else
icon.icon = 'network-wireless-offline-symbolic';
}, 'changed']],
}),
}),
GridButton({
command: () => {
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh toggle-radio'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['notify-send', 'set this up moron'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Network, self => {
if (Network.wifi.enabled)
self.icon = 'airplane-mode-disabled-symbolic';
else
self.icon = 'airplane-mode-symbolic';
}, 'changed']],
}),
}),
GridButton({
command: () => {
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh blue-toggle'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'blueberry'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Bluetooth, self => {
if (Bluetooth.enabled) {
self.icon = 'bluetooth-active-symbolic';
execAsync(['bash', '-c', 'echo 󰂯 > $HOME/.config/.bluetooth'])
.catch(print);
}
else {
self.icon = 'bluetooth-disabled-symbolic';
execAsync(['bash', '-c', 'echo 󰂲 > $HOME/.config/.bluetooth'])
.catch(print);
}
}, 'changed']],
}),
}),
],
GridButton({
command: () => {
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh toggle-radio'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['notify-send', 'set this up moron'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Network, self => {
if (Network.wifi.enabled)
self.icon = 'airplane-mode-disabled-symbolic';
else
self.icon = 'airplane-mode-symbolic';
}, 'changed']],
}),
}),
],
});
const SubRow = () => CenterBox({
halign: 'start',
children: [
halign: 'start',
children: [
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Network, self => {
// TODO: handle ethernet too
self.label = Network.wifi.ssid;
}, 'changed']],
}),
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Network, self => {
// TODO: handle ethernet too
self.label = Network.wifi.ssid;
}, 'changed']],
}),
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Bluetooth, self => {
if (Bluetooth.connectedDevices[0])
self.label = String(Bluetooth.connectedDevices[0])
else
self.label = 'Disconnected';
}, 'changed']],
}),
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Bluetooth, self => {
if (Bluetooth.connectedDevices[0])
self.label = String(Bluetooth.connectedDevices[0]);
else
self.label = 'Disconnected';
}, 'changed']],
}),
null,
null,
],
],
});
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const itemsMic = {
2: 'audio-input-microphone-high-symbolic',
1: 'audio-input-microphone-muted-symbolic',
0: 'audio-input-microphone-muted-symbolic',
2: 'audio-input-microphone-high-symbolic',
1: 'audio-input-microphone-muted-symbolic',
0: 'audio-input-microphone-muted-symbolic',
};
const SecondRow = () => Box({
className: 'button-row',
halign: 'center',
style: 'margin-top: 7px; margin-bottom: 15px;',
children: [
className: 'button-row',
halign: 'center',
style: 'margin-top: 7px; margin-bottom: 15px;',
children: [
GridButton({
command: () => {
execAsync(['swayosd-client', '--output-volume', 'mute-toggle'])
.catch(print);
},
GridButton({
command: () => {
execAsync(['swayosd-client', '--output-volume', 'mute-toggle'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'pavucontrol'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'pavucontrol'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1) {
icon.icon = items[threshold + 1];
}
}
}
}
}, 'speaker-changed']],
}),
}),
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
icon.icon = items[threshold + 1];
}
}
}
}, 'speaker-changed']],
}),
}),
GridButton({
command: () => {
execAsync(['swayosd-client', '--input-volume', 'mute-toggle'])
.catch(print);
},
GridButton({
command: () => {
execAsync(['swayosd-client', '--input-volume', 'mute-toggle'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'pavucontrol'])
.catch(print);
},
secondaryCommand: () => {
execAsync(['bash', '-c', 'pavucontrol'])
.catch(print);
},
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.microphone) {
if (Audio.microphone.stream.isMuted) {
icon.icon = itemsMic[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 1]) {
if (vol > threshold + 1) {
icon.icon = itemsMic[threshold + 1];
}
}
}
}
}, 'microphone-changed']],
})
}),
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.microphone) {
if (Audio.microphone.stream.isMuted) {
icon.icon = itemsMic[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 1]) {
if (vol > threshold + 1)
icon.icon = itemsMic[threshold + 1];
}
}
}
}, 'microphone-changed']],
}),
}),
GridButton({
command: () => {
execAsync(['bash', '-c', '$LOCK_PATH/lock.sh'])
.catch(print);
},
secondaryCommand: () => App.openWindow('powermenu'),
icon: Label({
className: 'grid-label',
label: " 󰌾 ",
}),
}),
GridButton({
command: () => {
execAsync(['bash', '-c', '$LOCK_PATH/lock.sh'])
.catch(print);
},
secondaryCommand: () => App.openWindow('powermenu'),
icon: Label({
className: 'grid-label',
label: ' 󰌾 ',
}),
}),
],
],
});
export default () => Box({
className: 'button-grid',
vertical: true,
halign: 'center',
children: [
FirstRow(),
SubRow(),
SecondRow(),
],
className: 'button-grid',
vertical: true,
halign: 'center',
children: [
FirstRow(),
SubRow(),
SecondRow(),
],
});

60
hosts/wim/config/ags/js/quick-settings/main.js
View file

@ -9,42 +9,42 @@ import ToggleButton from './toggle-button.js';
const QuickSettingsWidget = () => Box({
className: 'qs-container',
vertical: true,
children: [
className: 'qs-container',
vertical: true,
children: [
Box({
className: 'quick-settings',
vertical: true,
children: [
Box({
className: 'quick-settings',
vertical: true,
children: [
Label({
label: 'Control Center',
className: 'title',
halign: 'start',
style: 'margin-left: 20px'
Label({
label: 'Control Center',
className: 'title',
halign: 'start',
style: 'margin-left: 20px',
}),
ButtonGrid(),
SliderBox(),
ToggleButton(),
],
}),
ButtonGrid(),
Revealer({
transition: 'slide_down',
child: Player(),
}),
SliderBox(),
ToggleButton(),
],
}),
Revealer({
transition: 'slide_down',
child: Player(),
})
],
],
});
export default () => PopupWindow({
name: 'quick-settings',
anchor: [ 'top', 'right' ],
margin: [ 8, 5, 0, ],
child: QuickSettingsWidget(),
name: 'quick-settings',
anchor: ['top', 'right'],
margin: [8, 5, 0],
child: QuickSettingsWidget(),
});

158
hosts/wim/config/ags/js/quick-settings/slider-box.js
View file

@ -3,93 +3,91 @@ const { Box, Slider, Icon, EventBox } = Widget;
const { execAsync } = Utils;
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
export default () => Box({
className: 'slider-box',
vertical: true,
halign: 'center',
children: [
className: 'slider-box',
vertical: true,
halign: 'center',
children: [
Box({
className: 'slider',
valign: 'start',
halign: 'center',
children: [
Icon({
size: 26,
className: 'slider-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1) {
icon.icon = items[threshold + 1];
}
}
}
}
}, 'speaker-changed']],
}),
Box({
className: 'slider',
valign: 'start',
halign: 'center',
children: [
Icon({
size: 26,
className: 'slider-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.stream.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1)
icon.icon = items[threshold + 1];
}
}
}
}, 'speaker-changed']],
}),
Slider({
connections: [[Audio, slider => {
if (Audio.speaker) {
slider.value = Audio.speaker.volume;
}
}, 'speaker-changed']],
onChange: ({ value }) => Audio.speaker.volume = value,
max: 0.999,
draw_value: false,
}),
],
}),
Box({
className: 'slider',
valign: 'start',
halign: 'center',
children: [
Icon({
className: 'slider-label',
icon: 'display-brightness-symbolic',
}),
EventBox({
onHover: box => box.child._canChange = false,
onHoverLost: box => box.child._canChange = true,
child: Slider({
properties: [
['canChange', true],
Slider({
connections: [[Audio, slider => {
if (Audio.speaker)
slider.value = Audio.speaker.volume;
}, 'speaker-changed']],
onChange: ({ value }) => Audio.speaker.volume = value,
max: 0.999,
draw_value: false,
}),
],
onChange: ({ value }) => {
execAsync(`brightnessctl set ${value}`)
.catch(print);
},
connections: [[1000, slider => {
if (slider._canChange) {
execAsync('brightnessctl get')
.then(out => slider.value = out)
.catch(print);
}
}]],
min: 0,
max: 255,
draw_value: false,
}),
}),
],
}),
],
Box({
className: 'slider',
valign: 'start',
halign: 'center',
children: [
Icon({
className: 'slider-label',
icon: 'display-brightness-symbolic',
}),
EventBox({
onHover: box => box.child._canChange = false,
onHoverLost: box => box.child._canChange = true,
child: Slider({
properties: [
['canChange', true],
],
onChange: ({ value }) => {
execAsync(`brightnessctl set ${value}`)
.catch(print);
},
connections: [[1000, slider => {
if (slider._canChange) {
execAsync('brightnessctl get')
.then(out => slider.value = out)
.catch(print);
}
}]],
min: 0,
max: 255,
draw_value: false,
}),
}),
],
}),
],
});

58
hosts/wim/config/ags/js/quick-settings/toggle-button.js
View file

@ -5,38 +5,38 @@ import Gtk from 'gi://Gtk';
import EventBox from '../misc/cursorbox.js';
export default () => {
let widget = EventBox({});
const widget = EventBox({});
let toggleButton = Gtk.ToggleButton.new();
toggleButton.add(Icon({
icon: 'go-down-symbolic',
className: 'arrow',
style: `-gtk-icon-transform: rotate(180deg);`,
}));
const toggleButton = Gtk.ToggleButton.new();
toggleButton.add(Icon({
icon: 'go-down-symbolic',
className: 'arrow',
style: '-gtk-icon-transform: rotate(180deg);',
}));
// Setup
const id = Mpris.connect('changed', () => {
toggleButton.set_active(Mpris.players.length > 0);
Mpris.disconnect(id);
});
// Setup
const id = Mpris.connect('changed', () => {
toggleButton.set_active(Mpris.players.length > 0);
Mpris.disconnect(id);
});
// Connections
toggleButton.connect('toggled', () => {
let rev = toggleButton.get_parent().get_parent().get_parent().children[1];
// Connections
toggleButton.connect('toggled', () => {
const rev = toggleButton.get_parent().get_parent().get_parent().children[1];
if (toggleButton.get_active()) {
toggleButton.get_children()[0]
.setStyle("-gtk-icon-transform: rotate(0deg);");
rev.revealChild = true;
}
else {
toggleButton.get_children()[0]
.setStyle('-gtk-icon-transform: rotate(180deg);');
rev.revealChild = false;
}
});
if (toggleButton.get_active()) {
toggleButton.get_children()[0]
.setStyle('-gtk-icon-transform: rotate(0deg);');
rev.revealChild = true;
}
else {
toggleButton.get_children()[0]
.setStyle('-gtk-icon-transform: rotate(180deg);');
rev.revealChild = false;
}
});
widget.add(toggleButton);
widget.add(toggleButton);
return widget;
}
return widget;
};

24
hosts/wim/config/ags/js/screen-corners.js
View file

@ -9,22 +9,22 @@ export const RoundedCorner = (place, props) => Widget({
valign: place.includes('top') ? 'start' : 'end',
setup: widget => {
const r = widget.get_style_context()
.get_property('border-radius', Gtk.StateFlags.NORMAL);
.get_property('border-radius', Gtk.StateFlags.NORMAL);
widget.set_size_request(r, r);
widget.connect('draw', Lang.bind(widget, (widget, cr) => {
const c = widget.get_style_context()
.get_property('background-color', Gtk.StateFlags.NORMAL);
.get_property('background-color', Gtk.StateFlags.NORMAL);
const r = widget.get_style_context()
.get_property('border-radius', Gtk.StateFlags.NORMAL);
.get_property('border-radius', Gtk.StateFlags.NORMAL);
const borderColor = widget.get_style_context()
.get_property('color', Gtk.StateFlags.NORMAL);
.get_property('color', Gtk.StateFlags.NORMAL);
// ur going to write border-width: something anyway
const borderWidth = widget.get_style_context()
.get_border(Gtk.StateFlags.NORMAL).left;
.get_border(Gtk.StateFlags.NORMAL).left;
widget.set_size_request(r, r);
switch (place) {
@ -54,9 +54,9 @@ export const RoundedCorner = (place, props) => Widget({
cr.fill();
cr.setLineWidth(borderWidth);
cr.setSourceRGBA(borderColor.red,
borderColor.green,
borderColor.blue,
borderColor.alpha);
borderColor.green,
borderColor.blue,
borderColor.alpha);
cr.stroke();
}));
},
@ -68,7 +68,7 @@ export const Topleft = () => Widget.Window({
anchor: ['top', 'left'],
exclusive: false,
visible: true,
child: RoundedCorner('topleft', { className: 'corner', }),
child: RoundedCorner('topleft', { className: 'corner' }),
});
export const Topright = () => Widget.Window({
name: 'cornertr',
@ -76,7 +76,7 @@ export const Topright = () => Widget.Window({
anchor: ['top', 'right'],
exclusive: false,
visible: true,
child: RoundedCorner('topright', { className: 'corner', }),
child: RoundedCorner('topright', { className: 'corner' }),
});
export const Bottomleft = () => Widget.Window({
name: 'cornerbl',
@ -84,7 +84,7 @@ export const Bottomleft = () => Widget.Window({
anchor: ['bottom', 'left'],
exclusive: false,
visible: true,
child: RoundedCorner('bottomleft', { className: 'corner', }),
child: RoundedCorner('bottomleft', { className: 'corner' }),
});
export const Bottomright = () => Widget.Window({
name: 'cornerbr',
@ -92,5 +92,5 @@ export const Bottomright = () => Widget.Window({
anchor: ['bottom', 'right'],
exclusive: false,
visible: true,
child: RoundedCorner('bottomright', { className: 'corner', }),
child: RoundedCorner('bottomright', { className: 'corner' }),
});

3
hosts/wim/config/ags/package.json
View file

@ -1,6 +1,7 @@
{
"dependencies": {
"@girs/gtk-3.0": "^3.24.39-3.2.2",
"eslint": "^8.52.0"
"eslint": "^8.52.0",
"stylelint-config-standard-scss": "^11.0.0"
}
}

6
hosts/wim/config/ags/scss/widgets/corners.scss
View file

@ -1,5 +1,5 @@
.corner {
background-color: black;
border-radius: 18px; //Hard code because Hyprland rounding is in px
border-width: 0.068rem;
background-color: black;
border-radius: 18px; //Hard code because Hyprland rounding is in px
border-width: 0.068rem;
}

126
hosts/wim/config/ags/scss/widgets/notification-center.scss
View file

@ -21,26 +21,26 @@
}
button {
all: unset;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: #664C90;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
padding: 4.5px 9px;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: #664C90;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
padding: 4.5px 9px;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
}
&:disabled {
box-shadow: none;
background-color: rgba(#664C90, 0.3);
color: rgba(238, 238, 238, 0.3);
}
label {
font-size: 1.2em;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
}
&:disabled {
box-shadow: none;
background-color: rgba(#664C90, 0.3);
color: rgba(238, 238, 238, 0.3);
}
label {
font-size: 1.2em;
}
}
}
@ -50,51 +50,51 @@
border-radius: 30px;
border-top: 2px solid $contrastbg;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
scrollbar {
all: unset;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
* {
all: unset;
}
&:hover {
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
scrollbar.vertical {
transition: 200ms;
background-color: rgba(23, 23, 23, 0.3);
&:hover {
background-color: rgba(23, 23, 23, 0.7);
slider {
background-color: rgba(238, 238, 238, 0.7);
min-width: .6em;
}
}
slider {
background-color: rgba(238, 238, 238, 0.5);
border-radius: 9px;
min-width: .4em;
min-height: 2em;
transition: 200ms;
}
}
scrollbar {
all: unset;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
* {
all: unset;
}
&:hover {
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
scrollbar.vertical {
transition: 200ms;
background-color: rgba(23, 23, 23, 0.3);
&:hover {
background-color: rgba(23, 23, 23, 0.7);
slider {
background-color: rgba(238, 238, 238, 0.7);
min-width: .6em;
}
}
slider {
background-color: rgba(238, 238, 238, 0.5);
border-radius: 9px;
min-width: .4em;
min-height: 2em;
transition: 200ms;
}
}
}
.placeholder {
color: white;
image {
font-size: 7em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
label {
font-size: 1.2em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
}
color: white;
image {
font-size: 7em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
label {
font-size: 1.2em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
}
}

328
hosts/wim/config/ags/scss/widgets/notification.scss
View file

@ -10,170 +10,170 @@ $background-color_9: rgba(238, 238, 238, 0.7);
$background-color_10: rgba(238, 238, 238, 0.5);
.notification.critical {
>box {
box-shadow: inset 0 0 0.5em 0 #e67090;
}
>box {
box-shadow: inset 0 0 0.5em 0 #e67090;
}
}
.notification {
>box {
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px 9px 0 9px;
border: 2px solid $contrastbg;
border-radius: 15px;
background-color: $bg;
padding: 16.2px;
* {
font-size: 16px;
}
}
&:hover {
.close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
background-color: $background-color_2;
}
}
.title {
margin-right: 9px;
font-size: 1.1em;
}
.description {
font-size: .9em;
min-width: 350px;
}
.icon {
border-radius: 7.2px;
margin-right: 9px;
}
.icon.img {
border: 1px solid rgba(238, 238, 238, 0.03);
}
.actions {
button {
all: unset;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px;
font-size: 1.2em;
padding: 4.5px 9px;
margin: 9px 4.5px 0;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
}
button.close-button {
all: unset;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_5;
background-image: none;
box-shadow: none;
margin-left: 9px;
border-radius: 7.2px;
min-width: 1.2em;
min-height: 1.2em;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
background-color: $background-color_2;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
background-image: linear-gradient(#e67090, #e67090);
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
}
button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.close-button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
>box {
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px 9px 0 9px;
border: 2px solid $contrastbg;
border-radius: 15px;
background-color: $bg;
padding: 16.2px;
* {
font-size: 16px;
}
}
&:hover {
.close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
background-color: $background-color_2;
}
}
.title {
margin-right: 9px;
font-size: 1.1em;
}
.description {
font-size: .9em;
min-width: 350px;
}
.icon {
border-radius: 7.2px;
margin-right: 9px;
}
.icon.img {
border: 1px solid rgba(238, 238, 238, 0.03);
}
.actions {
button {
all: unset;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px;
font-size: 1.2em;
padding: 4.5px 9px;
margin: 9px 4.5px 0;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
}
button.close-button {
all: unset;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_5;
background-image: none;
box-shadow: none;
margin-left: 9px;
border-radius: 7.2px;
min-width: 1.2em;
min-height: 1.2em;
* {
font-size: 16px;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
background-color: $background-color_2;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
background-image: linear-gradient(#e67090, #e67090);
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
}
}
button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
button.close-button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
}
}
}

137
hosts/wim/config/ags/services/pointers.js
View file

@ -4,88 +4,87 @@ import { Service, Utils } from '../imports.js';
class Pointers extends Service {
static {
Service.register(this, {
'proc-started': ['boolean'],
'proc-destroyed': ['boolean'],
'device-fetched': ['boolean'],
'new-line': ['string'],
});
}
static {
Service.register(this, {
'proc-started': ['boolean'],
'proc-destroyed': ['boolean'],
'device-fetched': ['boolean'],
'new-line': ['string'],
});
}
proc = undefined;
output = "";
devices = new Map();
proc = undefined;
output = '';
devices = new Map();
get proc() { return this.proc; }
get output() { return this.output; }
get devices() { return this.devices; }
get process() { return this.proc; }
get lastLine() { return this.output; }
get pointers() { return this.devices; }
constructor() {
super();
this.parseDevices();
}
constructor() {
super();
this.parseDevices();
}
parseDevices() {
Utils.execAsync(['libinput', 'list-devices']).then(out => {
let lines = out.split('\n');
let device = null;
let devices = new Map();
parseDevices() {
Utils.execAsync(['libinput', 'list-devices']).then(out => {
const lines = out.split('\n');
let device = null;
const devices = new Map();
lines.forEach(line => {
let parts = line.split(':');
lines.forEach(line => {
const parts = line.split(':');
if (parts[0] === 'Device') {
device = {};
devices.set(parts[1].trim(), device);
}
else if (device && parts[1]) {
let key = parts[0].trim();
let value = parts[1].trim();
device[key] = value;
}
});
this.devices = Array.from(devices).filter(dev => dev.Capabilities &&
if (parts[0] === 'Device') {
device = {};
devices.set(parts[1].trim(), device);
}
else if (device && parts[1]) {
const key = parts[0].trim();
const value = parts[1].trim();
device[key] = value;
}
});
this.devices = Array.from(devices).filter(dev => dev.Capabilities &&
dev.Capabilities.includes('pointer'));
this.emit('device-fetched', true);
}).catch(print);
}
this.emit('device-fetched', true);
}).catch(print);
}
startProc() {
if (this.proc)
return;
startProc() {
if (this.proc)
return;
let args = [];
this.devices.forEach(dev => {
if (dev.Kernel) {
args.push('--device');
args.push(dev.Kernel);
}
});
const args = [];
this.devices.forEach(dev => {
if (dev.Kernel) {
args.push('--device');
args.push(dev.Kernel);
}
});
this.proc = Utils.subprocess(
['libinput', 'debug-events', ...args],
(output) => {
if (output.includes('BTN') && output.includes('released') ||
this.proc = Utils.subprocess(
['libinput', 'debug-events', ...args],
output => {
if (output.includes('BTN') && output.includes('released') ||
output.includes('TOUCH_UP') ||
output.includes('HOLD_END') && !output.includes('cancelled')) {
this.output = output;
this.emit('new-line', output);
}
},
(err) => logError(err)
);
this.emit('proc-started', true);
}
killProc() {
if (this.proc) {
this.proc.force_exit();
this.proc = undefined;
this.emit('proc-destroyed', true);
this.output = output;
this.emit('new-line', output);
}
},
err => logError(err),
);
this.emit('proc-started', true);
}
killProc() {
if (this.proc) {
this.proc.force_exit();
this.proc = undefined;
this.emit('proc-destroyed', true);
}
}
}
}
const pointersService = new Pointers();