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

Implement basics of network module.

Browse Source
This commit is contained in:
Jas Singh
2024-06-20 22:27:31 -07:00
parent 285aac5740
commit 6c5685b9a2
4 changed files with 192 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,219 +4,7 @@ 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 renderPlaybacks = (playbackDevices) => {
// return playbackDevices.map((device) => {
// if (device.description === "Dummy Output") {
// return Widget.Box({
// class_name: "networkmenu-unfound-button playback",
// child: Widget.Box({
// children: [
// Widget.Label({
// class_name: "networkmenu-button-name playback",
// label: "No playback devices found...",
// }),
// ],
// }),
// });
// }
// return Widget.Button({
// class_name: `networkmenu-button playback ${device}`,
// cursor: "pointer",
// on_primary_click: () => (audio.speaker = device),
// child: Widget.Box({
// children: [
// Widget.Box({
// hpack: "start",
// children: [
// Widget.Label({
// truncate: "end",
// wrap: true,
// class_name: audio.speaker
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-icon active playback"
// : "networkmenu-button-icon playback",
// ),
// label: "",
// }),
// Widget.Label({
// class_name: audio.speaker
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-name active playback"
// : "networkmenu-button-name playback",
// ),
// truncate: "end",
// wrap: true,
// label: device.description,
// }),
// ],
// }),
// Widget.Box({
// hpack: "end",
// expand: true,
// children: [
// Widget.Label({
// class_name: "networkmenu-button-isactive playback",
// label: audio.speaker
// .bind("description")
// .as((v) => (device.description === v ? " " : "")),
// }),
// ],
// }),
// ],
// }),
// });
// });
};
const renderInputDevices = (inputDevices) => {
// if (!inputDevices.length) {
// return [
// Widget.Box({
// class_name: `networkmenu-unfound-button input`,
// child: Widget.Box({
// children: [
// Widget.Label({
// class_name: "networkmenu-button-name input",
// label: "No input devices found...",
// }),
// ],
// }),
// }),
// ];
// }
// return inputDevices.map((device) => {
// return Widget.Button({
// cursor: "pointer",
// on_primary_click: () => (audio.microphone = device),
// class_name: `networkmenu-button input ${device}`,
// child: Widget.Box({
// children: [
// Widget.Box({
// hpack: "start",
// children: [
// Widget.Label({
// class_name: audio.microphone
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-icon active input"
// : "networkmenu-button-icon input",
// ),
// label: "",
// }),
// Widget.Label({
// truncate: "end",
// wrap: true,
// class_name: audio.microphone
// .bind("description")
// .as((v) =>
// device.description === v
// ? "networkmenu-button-name active input"
// : "networkmenu-button-name input",
// ),
// label: device.description,
// }),
// ],
// }),
// Widget.Box({
// hpack: "end",
// expand: true,
// children: [
// Widget.Label({
// class_name: "networkmenu-button-isactive input",
// truncate: "end",
// wrap: true,
// label: audio.microphone
// .bind("description")
// .as((v) => (device.description === v ? " " : "")),
// }),
// ],
// }),
// ],
// }),
// });
// });
};
const renderActivePlayback = () => {
// return [
// Widget.Label({
// class_name: "networkmenu-active playback",
// truncate: "end",
// expand: true,
// wrap: true,
// label: audio.bind("speaker").as((v) => v.description || ""),
// }),
// Widget.Box({
// class_name: "networkmenu-slider-container playback",
// children: [
// Widget.Label({
// class_name: "networkmenu-active-icon playback",
// label: audio.speaker
// .bind("volume")
// .as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
// }),
// Widget.Slider({
// value: audio["speaker"].bind("volume"),
// class_name: "networkmenu-active-slider menu-slider playback",
// draw_value: false,
// hexpand: true,
// min: 0,
// max: 1,
// onChange: ({ value }) => (audio.speaker.volume = value),
// }),
// Widget.Label({
// class_name: "networkmenu-active-percentage playback",
// label: audio.speaker
// .bind("volume")
// .as((v) => `${Math.floor(v * 100)}%`),
// }),
// ],
// }),
// ];
};
const renderActiveInput = () => {
// return [
// Widget.Label({
// class_name: "networkmenu-active input",
// truncate: "end",
// wrap: true,
// label: audio.bind("microphone").as((v) => v.description || ""),
// }),
// Widget.Box({
// class_name: "networkmenu-slider-container input",
// children: [
// Widget.Label({
// class_name: "networkmenu-active-icon input",
// label: audio.microphone
// .bind("volume")
// .as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
// }),
// Widget.Slider({
// value: audio.microphone.bind("volume").as((v) => v),
// class_name: "networkmenu-active-slider menu-slider inputs",
// draw_value: false,
// hexpand: true,
// min: 0,
// max: 1,
// onChange: ({ value }) => (audio.microphone.volume = value),
// }),
// Widget.Label({
// class_name: "networkmenu-active-percentage input",
// label: audio.microphone
// .bind("volume")
// .as((v) => `${Math.floor(v * 100)}%`),
// }),
// ],
// }),
// ];
};
return DropdownMenu({ return DropdownMenu({
name: "networkmenu", name: "networkmenu",
@@ -225,15 +13,16 @@ export default () => {
class_name: "menu-items", class_name: "menu-items",
child: Widget.Box({ child: Widget.Box({
vertical: true, vertical: true,
class_name: "menu-items-container", hexpand: true,
class_name: "menu-items-container network",
children: [ children: [
Widget.Box({ Widget.Box({
class_name: "menu-dropdown-label-container", class_name: "menu-dropdown-label-container",
hpack: "start", hpack: "start",
children: [ children: [
Widget.Label({ Widget.Label({
class_name: "menu-dropdown-label audio", class_name: "menu-dropdown-label network",
label: "Network", label: "Networks",
}), }),
], ],
}), }),
@@ -241,52 +30,144 @@ export default () => {
class_name: "menu-separator", class_name: "menu-separator",
}), }),
Widget.Box({ Widget.Box({
class_name: "networkmenu-active-container playback", class_name: "menu-label-container network",
vertical: true, child: Widget.Label({
// children: renderActivePlayback(), class_name: "menu-label network",
hpack: "start",
label: "Connected Network",
}),
}), }),
Widget.Box({ Widget.Box({
class_name: "networkmenu-active-container input", class_name: "menu-item-box network",
vertical: true, vertical: true,
// children: renderActiveInput(), setup: (self) => {
self.hook(network, () => {
let sortedNetworks = [];
if (network.wifi.access_points.length > 0) {
sortedNetworks = network.wifi.access_points
.filter((ap) => ap.ssid !== "Unknown")
.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;
}
});
}
const localIfConnected = () => {
if (network.primary === "wired") {
return Widget.Box({
class_name: `network-element-item-ethernet ${sortedNetworks.length > 0 ? "multi" : ""}`,
child: 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: network.wired.internet,
icon: `${network.wired["icon_name"]}`,
}),
}),
Widget.Label({
class_name: "menu-button-name network",
truncate: "end",
wrap: true,
label: `Ethernet (${network.wired.speed / 1000} Gbps)`,
}),
],
}),
],
}),
});
}
return Widget.Box({});
};
return (self.child = localIfConnected());
});
},
}), }),
Widget.Separator({ Widget.Separator({
class_name: "menu-separator", class_name: "menu-separator",
}), }),
Widget.Box({ Widget.Box({
class_name: "networkmenu-label-container playback", class_name: "menu-label-container network",
vertical: true, child: Widget.Label({
children: [ class_name: "menu-label network",
Widget.Label({ hpack: "start",
class_name: "networkmenu-label playback", label: "Available Networks",
label: "Playback Devices", }),
hpack: "start",
}),
// Widget.Box({
// vertical: true,
// children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
// }),
],
}),
Widget.Separator({
class_name: "menu-separator",
}), }),
Widget.Box({ Widget.Box({
class_name: "networkmenu-label-container input", class_name: "menu-item-box network",
vertical: true, vertical: true,
children: [ setup: (self) => {
Widget.Label({ self.hook(network, () => {
class_name: "networkmenu-label input", // TODO: Finish dis
hpack: "start",
label: "Input Devices", let sortedNetworks = [];
}),
// Widget.Box({ if (network.wifi.access_points.length > 0) {
// vertical: true, sortedNetworks = network.wifi.access_points
// children: audio .filter((ap) => ap.ssid !== "Unknown")
// .bind("microphones") .sort((a, b) => {
// .as((v) => renderInputDevices(v)), if (a.ssid === network.wifi.ssid) {
// }), return -1;
], } else if (b.ssid === network.wifi.ssid) {
return 1;
} else {
return b.strength - a.strength;
}
});
}
console.log(sortedNetworks.length);
return (self.children = sortedNetworks.map((curNetwork) => {
return Widget.Button({
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:
curNetwork.ssid === network.wifi.ssid
? network.wifi.state
: null,
icon: `${curNetwork["iconName"]}`,
}),
}),
Widget.Label({
class_name: "menu-button-name network",
truncate: "end",
wrap: true,
label: curNetwork.ssid,
}),
],
}),
],
}),
],
}),
});
}));
});
},
}), }),
], ],
}), }),

32
scss/menus/network.scss
View File

@@ -0,0 +1,32 @@
@import "../colors";
.menu-dropdown-label.network {
color: $mauve;
}
.network-element-item-ethernet.multi {
margin-bottom: 0.5rem;
}
.menu-label.network {
color: $mauve;
}
.network-element-items-container * {
font-size: 1.1rem;
}
.network-element-item {
&:not(:last-child) {
margin-bottom: 0.5rem;
}
&:hover {
color: $mauve;
}
}
.menu-button-icon.network {
color: $overlay2;
}

27
style.css
View File

@@ -768,6 +768,33 @@ window#powermenu .powermenu.box {
min-width: 25rem; min-width: 25rem;
} }
.menu-dropdown-label.network {
color: #cba6f7;
}
.network-element-item-ethernet.multi {
margin-bottom: 0.5rem;
}
.menu-label.network {
color: #cba6f7;
}
.network-element-items-container * {
font-size: 1.1rem;
}
.network-element-item:not(:last-child) {
margin-bottom: 0.5rem;
}
.network-element-item:hover {
color: #cba6f7;
}
.menu-button-icon.network {
color: #9399b2;
}
.menu-dropdown-label.bluetooth { .menu-dropdown-label.bluetooth {
color: #89dceb; color: #89dceb;
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long