LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish network module for now... replace nmcli with something better later (it sucks at auth)

Browse Source
This commit is contained in:
Jas Singh
2024-06-23 12:06:53 -07:00
parent 6c5685b9a2
commit 46c34e169d
7 changed files with 546 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/bar/menu/index.js
View File

@@ -1,6 +1,9 @@
import { exec } from "resource:///com/github/Aylur/ags/utils.js";
export const Menu = () => { export const Menu = () => {
return Widget.Box({ return Widget.Box({
child: Widget.Button({ child: Widget.Button({
on_primary_click: () => exec('/home/jaskir/.config/hypr/scripts/rofi.sh'),
child: Widget.Label({ child: Widget.Label({
class_name: "bar-menu_label", class_name: "bar-menu_label",
label: "󰣇", label: "󰣇",

405
modules/menus/network/index.js
View File

@@ -3,9 +3,11 @@ import DropdownMenu from "../DropdownMenu.js";
export default () => { export default () => {
network.connect("changed", (value) => { network.connect("changed", (value) => {
console.log(JSON.stringify(value, null, 2)); // console.log(JSON.stringify(value, null, 2));
}); });
const pendingAuth = Variable("");
return DropdownMenu({ return DropdownMenu({
name: "networkmenu", name: "networkmenu",
transition: "crossfade", transition: "crossfade",
@@ -42,32 +44,32 @@ export default () => {
vertical: true, vertical: true,
setup: (self) => { setup: (self) => {
self.hook(network, () => { self.hook(network, () => {
// console.log(JSON.stringify(network, null, 2));
self.hook(pendingAuth, () => {
let sortedNetworks = []; let sortedNetworks = [];
if (network.wifi.access_points.length > 0) { if (network.wifi.access_points.length > 0) {
sortedNetworks = network.wifi.access_points sortedNetworks = network.wifi.access_points
.filter((ap) => ap.ssid !== "Unknown") .filter((ap) => ap.ssid !== "Unknown")
.sort((a, b) => { .sort((a, b) => {
if (a.ssid === network.wifi.ssid) {
return -1;
} else if (b.ssid === network.wifi.ssid) {
return 1;
} else {
return b.strength - a.strength; return b.strength - a.strength;
}
}); });
} }
const localIfConnected = () => { const localIfConnected = () => {
if (network.primary === "wired") { if (network.primary === "wired") {
return Widget.Box({ return [
Widget.Box({
class_name: `network-element-item-ethernet ${sortedNetworks.length > 0 ? "multi" : ""}`, class_name: `network-element-item-ethernet ${sortedNetworks.length > 0 ? "multi" : ""}`,
child: Widget.Box({ child: Widget.Box({
hpack: "start", hpack: "start",
vertical: true, vertical: true,
children: [ children: [
Widget.Box({ Widget.Box({
class_name: "network-element-items-container", children: [
Widget.Box({
class_name:
"network-element-items-container",
children: [ children: [
Widget.Button({ Widget.Button({
class_name: "menu-button-icon network", class_name: "menu-button-icon network",
@@ -86,11 +88,159 @@ export default () => {
}), }),
], ],
}), }),
}); Widget.Box({
class_name:
"menu-button-name-container status dim",
children: [
Widget.Label({
class_name:
"menu-button-name status network dim",
label:
network.wired.internet
.charAt(0)
.toUpperCase() +
network.wired.internet.slice(1),
}),
],
}),
],
}),
}),
];
} }
return Widget.Box({}); return [];
}; };
return (self.child = localIfConnected());
const wifiIfConnected = () => {
const getIdBySsid = (ssid, nmcliOutput) => {
const lines = nmcliOutput.trim().split("\n");
for (const line of lines) {
const columns = line.trim().split(/\s{2,}/);
if (columns[0].includes(ssid)) {
return columns[1];
}
}
return null;
};
if (network.wifi.ssid !== "") {
return [
Widget.Box({
class_name: `network-element-item-ethernet`,
children: [
Widget.Box({
hpack: "start",
vertical: true,
children: [
Widget.Box({
children: [
Widget.Box({
class_name:
"network-element-items-container",
children: [
Widget.Button({
class_name:
"menu-button-icon network",
child: Widget.Icon({
tooltip_text: network.wifi.state,
icon: `${network.wifi["icon_name"]}`,
}),
}),
Widget.Label({
class_name:
"menu-button-name network",
truncate: "end",
wrap: true,
label: network.wifi.ssid,
}),
],
}),
],
}),
Widget.Box({
class_name:
"menu-button-name-container status dim",
children: [
Widget.Label({
class_name:
"menu-button-name status network dim",
label:
network.wifi.internet
.charAt(0)
.toUpperCase() +
network.wifi.internet.slice(1),
}),
],
}),
],
}),
Widget.Box({
hexpand: true,
hpack: "end",
children: [
Widget.Button({
class_name:
"menu-icon-button network disconnect",
on_primary_click: () => {
Utils.execAsync(
"nmcli connection show --active",
).then((res) => {
const connectionId = getIdBySsid(
network.wifi.ssid,
res,
);
Utils.execAsync(
`nmcli connection down ${connectionId} "${network.wifi.ssid}"`,
).catch((err) =>
console.error(
`Error while disconnecting from wifi "${network.wifi.ssid}": ${err}`,
),
);
});
},
child: Widget.Label(""),
}),
Widget.Box({
hexpand: true,
child: Widget.Button({
class_name:
"menu-icon-button network forget",
on_primary_click: () => {
Utils.execAsync(
"nmcli connection show --active",
).then((res) => {
const connectionId = getIdBySsid(
network.wifi.ssid,
res,
);
Utils.execAsync(
`nmcli connection delete ${connectionId} "${network.wifi.ssid}"`,
).catch((err) =>
console.error(
`Error while forgetting "${network.wifi.ssid}": ${err}`,
),
);
});
},
child: Widget.Label("󰆴"),
}),
}),
],
}),
],
}),
];
}
return [];
};
return (self.children = [
...localIfConnected(),
...wifiIfConnected(),
]);
});
}); });
}, },
}), }),
@@ -98,6 +248,9 @@ export default () => {
class_name: "menu-separator", class_name: "menu-separator",
}), }),
Widget.Box({ Widget.Box({
children: [
Widget.Box({
hpack: "start",
class_name: "menu-label-container network", class_name: "menu-label-container network",
child: Widget.Label({ child: Widget.Label({
class_name: "menu-label network", class_name: "menu-label network",
@@ -105,33 +258,39 @@ export default () => {
label: "Available Networks", label: "Available Networks",
}), }),
}), }),
Widget.Box({
hexpand: true,
hpack: "end",
child: Widget.Button({
class_name: "menu-icon-button refresh network",
on_primary_click: () => {
network.wifi.scan();
},
child: Widget.Icon("view-refresh-symbolic"),
}),
}),
],
}),
Widget.Box({ Widget.Box({
class_name: "menu-item-box network", class_name: "menu-item-box network",
vertical: true,
children: [
Widget.Box({
vertical: true, vertical: true,
setup: (self) => { setup: (self) => {
self.hook(network, () => { self.hook(pendingAuth, () => {
// TODO: Finish dis const accPoint = network.wifi.access_points.find(
(ap) => ap.bssid === pendingAuth.value,
let sortedNetworks = []; );
if (
if (network.wifi.access_points.length > 0) { pendingAuth.value !== "" &&
sortedNetworks = network.wifi.access_points accPoint !== undefined &&
.filter((ap) => ap.ssid !== "Unknown") network.wifi.ssid !== pendingAuth.value
.sort((a, b) => { ) {
if (a.ssid === network.wifi.ssid) { return (self.child = Widget.Box({
return -1; vertical: true,
} else if (b.ssid === network.wifi.ssid) { children: [
return 1; Widget.Button({
} else {
return b.strength - a.strength;
}
});
}
console.log(sortedNetworks.length);
return (self.children = sortedNetworks.map((curNetwork) => {
return Widget.Button({
class_name: "network-element-item", class_name: "network-element-item",
child: Widget.Box({ child: Widget.Box({
children: [ children: [
@@ -140,23 +299,27 @@ export default () => {
vertical: true, vertical: true,
children: [ children: [
Widget.Box({ Widget.Box({
class_name: "network-element-items-container", class_name:
"network-element-items-container",
children: [ children: [
Widget.Button({ Widget.Button({
class_name: "menu-button-icon network", class_name:
"menu-button-icon network",
child: Widget.Icon({ child: Widget.Icon({
tooltip_text: tooltip_text:
curNetwork.ssid === network.wifi.ssid accPoint.ssid ===
network.wifi.ssid
? network.wifi.state ? network.wifi.state
: null, : null,
icon: `${curNetwork["iconName"]}`, icon: `${accPoint["iconName"]}`,
}), }),
}), }),
Widget.Label({ Widget.Label({
class_name: "menu-button-name network", class_name:
"menu-button-name network",
truncate: "end", truncate: "end",
wrap: true, wrap: true,
label: curNetwork.ssid, label: accPoint.ssid,
}), }),
], ],
}), }),
@@ -164,13 +327,173 @@ export default () => {
}), }),
], ],
}), }),
}),
Widget.Revealer({
transition: "slide_down",
reveal_child: pendingAuth
.bind("value")
.as((v) => (v === accPoint.bssid ? true : false)),
class_name: "network-password-input-container",
child: Widget.Box({
hexpand: true,
children: [
Widget.Box({
child: Widget.Entry({
hpack: "start",
class_name: "network-password-input",
placeholder_text: "enter password",
visibility: false,
onAccept: (selfInp) => {
Utils.execAsync(
`nmcli dev wifi connect ${accPoint.bssid} password ${selfInp.text}`,
)
.catch((err) => {
pendingAuth.value = "";
console.error(
`Failed to connect to wifi: ${accPoint.ssid}... ${err}`,
);
})
.then(() => (pendingAuth.value = ""));
selfInp.text = "";
},
}),
}),
Widget.Box({
class_name:
"network-password-input-close-container",
hexpand: true,
child: Widget.Button({
class_name: "network-password-input-close",
on_primary_click: () =>
(pendingAuth.value = ""),
child: Widget.Label("󰅜 "),
}),
}),
],
}),
}),
],
}));
} else {
self.children = [];
}
});
},
}),
Widget.Box({
vertical: true,
setup: (self) => {
self.hook(network, () => {
let sortedNetworks = [];
self.hook(pendingAuth, () => {
if (network.wifi.access_points.length > 0) {
sortedNetworks = network.wifi.access_points
.filter((ap) => {
return (
ap.ssid !== "Unknown" &&
ap.bssid !== pendingAuth.value &&
!ap.active &&
network.wifi.ssid !== ap.ssid
);
})
.sort((a, b) => {
return b.strength - a.strength;
});
}
return (self.children = sortedNetworks.map((accPoint) => {
return Widget.Box({
vertical: true,
children: [
Widget.Button({
on_primary_click: () => {
Utils.execAsync(
`nmcli device wifi connect ${accPoint.bssid}`,
).catch((err) => {
if (
err
.toLowerCase()
.includes(
"secrets were required, but not provided",
)
) {
pendingAuth.value = accPoint.bssid;
}
});
},
class_name: "network-element-item",
child: Widget.Box({
children: [
Widget.Box({
hpack: "start",
vertical: true,
children: [
Widget.Box({
class_name:
"network-element-items-container",
children: [
Widget.Button({
class_name:
"menu-button-icon network",
child: Widget.Icon({
tooltip_text:
accPoint.ssid ===
network.wifi.ssid
? network.wifi.state
: null,
icon: `${accPoint["iconName"]}`,
}),
}),
Widget.Label({
class_name:
"menu-button-name network",
truncate: "end",
wrap: true,
label: accPoint.ssid,
}),
],
}),
],
}),
],
}),
}),
Widget.Revealer({
transition: "slide_down",
reveal_child: pendingAuth
.bind("value")
.as((v) =>
v === accPoint.bssid ? true : false,
),
class_name: "network-password-input-container",
child: Widget.Box({
hexpand: true,
children: [
Widget.Entry({
hexpand: true,
class_name: "network-password-input",
placeholder_text: "enter password",
visibility: false,
onAccept: (selfInp) => {
selfInp.text = "";
},
}),
],
}),
}),
],
}); });
})); }));
}); });
});
}, },
}), }),
], ],
}), }),
],
}),
}), }),
}); });
}; };

2
modules/notifications/index.js
View File

@@ -134,7 +134,7 @@ export default () => {
hexpand: true, hexpand: true,
vexpand: true, vexpand: true,
max_width_chars: max_width_chars:
notif.image === undefined ? 29 : 21, notif.image === undefined ? 27 : 20,
truncate: "end", truncate: "end",
wrap: true, wrap: true,
label: notif["summary"], label: notif["summary"],

59
scss/menus/network.scss
View File

@@ -8,6 +8,10 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.menu-button-name.status.network {
margin-left: 2.5rem;
}
.menu-label.network { .menu-label.network {
color: $mauve; color: $mauve;
} }
@@ -30,3 +34,58 @@
color: $overlay2; color: $overlay2;
} }
.network-password-input {
border-radius: 0.4rem;
background: $crust;
padding: 0.4rem;
margin-left: 2.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.menu-icon-button.refresh.network {
margin-bottom: 1rem;
&:hover {
color: $mauve;
}
}
.network-password-input-close {
margin-left: 0.75rem;
margin-bottom: 0.6rem;
&:hover {
color: $sky;
}
label {
font-size: 1.35rem;
}
}
.menu-icon-button.network.disconnect {
margin-bottom: 1.4rem;
margin-right: 0.5rem;
&:hover {
color: $mauve;
}
label {
font-size: 1.2rem;
}
}
.menu-icon-button.network.forget {
margin-bottom: 1.4rem;
margin-right: 0.5rem;
&:hover {
color: $mauve;
}
label {
font-size: 1.5rem;
}
}

5
scss/notifications/popups.scss
View File

@@ -7,8 +7,7 @@
color: $text; color: $text;
background: $mantle; background: $mantle;
margin-right: 0.4rem; margin-right: 0.4rem;
border: 0.15rem solid $surface0; border: 0.15rem solid $surface0; min-width: 28rem;
min-width: 28rem;
min-height: 6rem; min-height: 6rem;
border-radius: 0.4rem; border-radius: 0.4rem;
@@ -81,7 +80,7 @@
} }
&:hover { &:hover {
background: $pink; background: $surface1;
} }
} }

55
style.css
View File

@@ -776,6 +776,10 @@ window#powermenu .powermenu.box {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.menu-button-name.status.network {
margin-left: 2.5rem;
}
.menu-label.network { .menu-label.network {
color: #cba6f7; color: #cba6f7;
} }
@@ -795,6 +799,55 @@ window#powermenu .powermenu.box {
color: #9399b2; color: #9399b2;
} }
.network-password-input {
border-radius: 0.4rem;
background: #11111b;
padding: 0.4rem;
margin-left: 2.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.menu-icon-button.refresh.network {
margin-bottom: 1rem;
}
.menu-icon-button.refresh.network:hover {
color: #cba6f7;
}
.network-password-input-close {
margin-left: 0.75rem;
margin-bottom: 0.6rem;
}
.network-password-input-close:hover {
color: #89dceb;
}
.network-password-input-close label {
font-size: 1.35rem;
}
.menu-icon-button.network.disconnect {
margin-bottom: 1.4rem;
margin-right: 0.5rem;
}
.menu-icon-button.network.disconnect:hover {
color: #cba6f7;
}
.menu-icon-button.network.disconnect label {
font-size: 1.2rem;
}
.menu-icon-button.network.forget {
margin-bottom: 1.4rem;
margin-right: 0.5rem;
}
.menu-icon-button.network.forget:hover {
color: #cba6f7;
}
.menu-icon-button.network.forget label {
font-size: 1.5rem;
}
.menu-dropdown-label.bluetooth { .menu-dropdown-label.bluetooth {
color: #89dceb; color: #89dceb;
} }
@@ -919,7 +972,7 @@ window#powermenu .powermenu.box {
margin-right: 2rem; margin-right: 2rem;
} }
.notification-action-buttons:hover { .notification-action-buttons:hover {
background: #f5c2e7; background: #45475a;
} }
.notification-icon { .notification-icon {

2
style.css.map
View File

File diff suppressed because one or more lines are too long