Implement basics of network module.
This commit is contained in:
Jas Singh
@@ -4,219 +4,7 @@ import DropdownMenu from "../DropdownMenu.js";
|
||||
export default () => {
|
||||
network.connect("changed", (value) => {
|
||||
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({
|
||||
name: "networkmenu",
|
||||
@@ -225,15 +13,16 @@ export default () => {
|
||||
class_name: "menu-items",
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
class_name: "menu-items-container",
|
||||
hexpand: true,
|
||||
class_name: "menu-items-container network",
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "menu-dropdown-label-container",
|
||||
hpack: "start",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "menu-dropdown-label audio",
|
||||
label: "Network",
|
||||
class_name: "menu-dropdown-label network",
|
||||
label: "Networks",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
@@ -241,52 +30,144 @@ export default () => {
|
||||
class_name: "menu-separator",
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "networkmenu-active-container playback",
|
||||
vertical: true,
|
||||
// children: renderActivePlayback(),
|
||||
class_name: "menu-label-container network",
|
||||
child: Widget.Label({
|
||||
class_name: "menu-label network",
|
||||
hpack: "start",
|
||||
label: "Connected Network",
|
||||
}),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "networkmenu-active-container input",
|
||||
class_name: "menu-item-box network",
|
||||
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({
|
||||
class_name: "menu-separator",
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "networkmenu-label-container playback",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "networkmenu-label playback",
|
||||
label: "Playback Devices",
|
||||
hpack: "start",
|
||||
}),
|
||||
// Widget.Box({
|
||||
// vertical: true,
|
||||
// children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
|
||||
// }),
|
||||
],
|
||||
}),
|
||||
Widget.Separator({
|
||||
class_name: "menu-separator",
|
||||
class_name: "menu-label-container network",
|
||||
child: Widget.Label({
|
||||
class_name: "menu-label network",
|
||||
hpack: "start",
|
||||
label: "Available Networks",
|
||||
}),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "networkmenu-label-container input",
|
||||
class_name: "menu-item-box network",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "networkmenu-label input",
|
||||
hpack: "start",
|
||||
label: "Input Devices",
|
||||
}),
|
||||
// Widget.Box({
|
||||
// vertical: true,
|
||||
// children: audio
|
||||
// .bind("microphones")
|
||||
// .as((v) => renderInputDevices(v)),
|
||||
// }),
|
||||
],
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
// TODO: Finish dis
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -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
27
style.css
@@ -768,6 +768,33 @@ window#powermenu .powermenu.box {
|
||||
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 {
|
||||
color: #89dceb;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user