[AGS] Bar: Improve QuickActions
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
import { bind } from "astal";
|
||||
import { Gtk } from "astal/gtk4";
|
||||
import AstalNetwork from "gi://AstalNetwork";
|
||||
import networkHelper from "./network-helper";
|
||||
|
||||
const net = AstalNetwork.get_default();
|
||||
const STATE = AstalNetwork.DeviceState;
|
||||
|
||||
const WiFiList = () => {
|
||||
const popover = new Gtk.Popover({ cssClasses: ["WiFiPicker"] });
|
||||
|
||||
return popover;
|
||||
};
|
||||
|
||||
const renderWiFiList = () => {
|
||||
return <box>
|
||||
<label label="Test"></label>
|
||||
</box>
|
||||
}
|
||||
|
||||
const Network = () => {
|
||||
const wifiList = WiFiList();
|
||||
|
||||
return (
|
||||
<box>
|
||||
<button
|
||||
cssClasses={networkHelper.networkEnabled(en => {
|
||||
if (en) return ["network-button", "net-on"];
|
||||
else return ["network-button"];
|
||||
})}
|
||||
onClicked={() =>
|
||||
networkHelper.setNetworking(
|
||||
!networkHelper.networkEnabled.get(),
|
||||
)
|
||||
}
|
||||
child={<box vertical>
|
||||
<label label="Wired" cssClasses={[ 'button-name' ]}></label>
|
||||
<label label={bind( net.wired, 'state' ).as( state => {
|
||||
if ( state === STATE.ACTIVATED ) {
|
||||
return 'Connected. IP: ' + networkHelper.getIP();
|
||||
} else if ( state === STATE.DISCONNECTED ) {
|
||||
return 'Disconnected';
|
||||
} else if ( state === STATE.FAILED ) {
|
||||
return 'Error';
|
||||
} else if ( state === STATE.PREPARE || state === STATE.CONFIG || state === STATE.IP_CHECK || state === STATE.IP_CONFIG ) {
|
||||
return 'Connecting...';
|
||||
} else {
|
||||
return 'Unavailable';
|
||||
}
|
||||
} )}></label>
|
||||
</box>}
|
||||
></button>
|
||||
<box>
|
||||
<button
|
||||
cssClasses={bind(net.wifi, "enabled").as(b => {
|
||||
const classes = ["network-button"];
|
||||
if (b) {
|
||||
classes.push("wifi-on");
|
||||
}
|
||||
return classes;
|
||||
})}
|
||||
child={<box vertical>
|
||||
<label label="WiFi" cssClasses={[ 'button-name' ]}></label>
|
||||
<label label={bind( net.wifi, 'state' ).as( state => {
|
||||
if ( state === STATE.ACTIVATED ) {
|
||||
return 'Connected. IP: ' + networkHelper.getIP();
|
||||
} else if ( state === STATE.DISCONNECTED ) {
|
||||
return 'Disconnected';
|
||||
} else if ( state === STATE.FAILED ) {
|
||||
return 'Error';
|
||||
} else if ( state === STATE.PREPARE || state === STATE.CONFIG || state === STATE.IP_CHECK || state === STATE.IP_CONFIG ) {
|
||||
return 'Connecting...';
|
||||
} else {
|
||||
return 'Unavailable';
|
||||
}
|
||||
} )}></label>
|
||||
</box>}
|
||||
></button>
|
||||
<button
|
||||
cssClasses={["network-button-context"]}
|
||||
visible={bind(net.wifi, "enabled").as(b => b)}
|
||||
onClicked={() => wifiList.popup()}
|
||||
></button>
|
||||
</box>
|
||||
{wifiList}
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Network;
|
||||
@@ -1,221 +0,0 @@
|
||||
import { execAsync, bind } from "astal";
|
||||
import Network from "gi://AstalNetwork";
|
||||
import { App, Gtk } from "astal/gtk4";
|
||||
import { NetworkItem } from "./modules/NetworkItem";
|
||||
import { PasswordDialog } from "./modules/PasswordDialog";
|
||||
import {
|
||||
availableNetworks,
|
||||
savedNetworks,
|
||||
activeNetwork,
|
||||
showPasswordDialog,
|
||||
scanNetworks,
|
||||
getSavedNetworks,
|
||||
disconnectNetwork,
|
||||
forgetNetwork,
|
||||
isExpanded,
|
||||
refreshIntervalId,
|
||||
} from "./networkinghelper";
|
||||
|
||||
// Main WiFi Box component
|
||||
export const WiFiBox = () => {
|
||||
const network = Network.get_default();
|
||||
|
||||
// Initial scan when component is first used
|
||||
setTimeout(() => {
|
||||
scanNetworks();
|
||||
getSavedNetworks();
|
||||
}, 100);
|
||||
|
||||
return (
|
||||
<box vertical cssClasses={["wifi-menu", "toggle"]}>
|
||||
{/* WiFi Toggle Header */}
|
||||
<box cssClasses={["toggle", "wifi-toggle"]}>
|
||||
<button
|
||||
onClicked={() => {
|
||||
if (network.wifi.enabled) {
|
||||
network.wifi.set_enabled(false);
|
||||
} else network.wifi.set_enabled(true);
|
||||
}}
|
||||
cssClasses={bind(network.wifi, "enabled").as((enabled) =>
|
||||
enabled ? ["button"] : ["button-disabled"],
|
||||
)}
|
||||
>
|
||||
<image iconName={bind(network.wifi, "icon_name")} />
|
||||
</button>
|
||||
<button
|
||||
hexpand={true}
|
||||
onClicked={() => {
|
||||
if (network.wifi.enabled) {
|
||||
isExpanded.set(!isExpanded.get());
|
||||
if (isExpanded.get()) {
|
||||
scanNetworks();
|
||||
getSavedNetworks();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<box hexpand={true}>
|
||||
<label
|
||||
hexpand={true}
|
||||
xalign={0}
|
||||
label={bind(network.wifi, "ssid").as(
|
||||
(ssid) =>
|
||||
ssid || (network.wifi.enabled ? "Not Connected" : "WiFi Off"),
|
||||
)}
|
||||
/>
|
||||
<image
|
||||
iconName="pan-end-symbolic"
|
||||
halign={Gtk.Align.END}
|
||||
cssClasses={bind(isExpanded).as((expanded) =>
|
||||
expanded
|
||||
? ["arrow-indicator", "arrow-down"]
|
||||
: ["arrow-indicator"],
|
||||
)}
|
||||
/>
|
||||
</box>
|
||||
</button>
|
||||
</box>
|
||||
|
||||
{/* Networks List Revealer */}
|
||||
<revealer
|
||||
transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
|
||||
transitionDuration={300}
|
||||
revealChild={bind(isExpanded)}
|
||||
setup={() => {
|
||||
const clearScanInterval = () => {
|
||||
if (refreshIntervalId.get()) {
|
||||
clearInterval( parseInt( '' + refreshIntervalId.get() ));
|
||||
refreshIntervalId.set(null);
|
||||
}
|
||||
};
|
||||
bind(isExpanded).subscribe((expanded) => {
|
||||
// Clear existing interval
|
||||
clearScanInterval();
|
||||
|
||||
if (expanded) {
|
||||
// Scan networks
|
||||
network.wifi?.scan();
|
||||
|
||||
// Set up new interval if WiFi is enabled
|
||||
if (network.wifi?.enabled) {
|
||||
refreshIntervalId.set(
|
||||
setInterval(() => {
|
||||
scanNetworks();
|
||||
getSavedNetworks();
|
||||
print("updated");
|
||||
}, 10000),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Apply revealer bug fix when collapsed
|
||||
App.toggle_window("system-menu");
|
||||
App.toggle_window("system-menu");
|
||||
}
|
||||
});
|
||||
|
||||
// Monitor window toggling
|
||||
const windowListener = App.connect("window-toggled", (_, window) => {
|
||||
if (window.name === "system-menu" && isExpanded.get()) {
|
||||
isExpanded.set(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up resources when component is destroyed
|
||||
return () => {
|
||||
App.disconnect(windowListener);
|
||||
clearScanInterval();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<box vertical cssClasses={["network-list"]}>
|
||||
<box visible={showPasswordDialog( v => v )}>
|
||||
<PasswordDialog />
|
||||
</box>
|
||||
|
||||
<label label="Available Networks" cssClasses={["section-label"]} />
|
||||
<label label="No networks found" cssClasses={["empty-label"]} visible={availableNetworks( net => net.length === 0 )}/>
|
||||
<box visible={availableNetworks( networks => networks.length > 1 )}>
|
||||
{availableNetworks( networks =>
|
||||
networks.map( (network) => <NetworkItem network={network} />)
|
||||
)}
|
||||
</box>
|
||||
|
||||
{savedNetworks((networks) => {
|
||||
// Filter out networks already shown in available networks
|
||||
const filteredNetworks = networks.filter(
|
||||
(ssid) => !availableNetworks.get().some((n) => n.ssid === ssid)
|
||||
);
|
||||
|
||||
// Only render the section if there are filtered networks to show
|
||||
return filteredNetworks.length > 0 ? (
|
||||
<box vertical>
|
||||
<label label="Saved Networks" cssClasses={["section-label"]} />
|
||||
{filteredNetworks.map((ssid) => (
|
||||
<box cssClasses={["saved-network"]}>
|
||||
<label label={ssid} />
|
||||
<box hexpand={true} />
|
||||
<button
|
||||
label="Forget"
|
||||
cssClasses={["forget-button", "button"]}
|
||||
onClicked={() => forgetNetwork(ssid)}
|
||||
/>
|
||||
</box>
|
||||
))}
|
||||
</box>
|
||||
) : (
|
||||
<box></box>
|
||||
);
|
||||
})}
|
||||
|
||||
<box hexpand>
|
||||
<button
|
||||
halign={Gtk.Align.START}
|
||||
cssClasses={["refresh-button"]}
|
||||
onClicked={() => {
|
||||
scanNetworks();
|
||||
getSavedNetworks();
|
||||
}}
|
||||
>
|
||||
<image iconName="view-refresh-symbolic" />
|
||||
</button>
|
||||
{/* Connected Network Options */}
|
||||
<box hexpand>
|
||||
{activeNetwork((active) =>
|
||||
active ? (
|
||||
<box vertical cssClasses={["connected-network"]} hexpand>
|
||||
<button
|
||||
label="Disconnect"
|
||||
cssClasses={["disconnect-button"]}
|
||||
onClicked={() => disconnectNetwork(active.ssid)}
|
||||
/>
|
||||
</box>
|
||||
) : (
|
||||
""
|
||||
),
|
||||
)}
|
||||
</box>
|
||||
<button
|
||||
cssClasses={["settings-button"]}
|
||||
halign={Gtk.Align.END}
|
||||
hexpand={false}
|
||||
onClicked={() => {
|
||||
execAsync([
|
||||
"sh",
|
||||
"-c",
|
||||
"XDG_CURRENT_DESKTOP=GNOME gnome-control-center wifi",
|
||||
]);
|
||||
isExpanded.set(false);
|
||||
}}
|
||||
>
|
||||
<image iconName={"emblem-system-symbolic"} />
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
),
|
||||
)}
|
||||
</box>
|
||||
</box>
|
||||
</revealer>
|
||||
</box>
|
||||
);
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
# Source
|
||||
This is a modified version from [MatShell](https://github.com/Neurian/matshell)
|
||||
@@ -0,0 +1,30 @@
|
||||
import { exec, Variable } from "astal";
|
||||
import AstalNetwork from "gi://AstalNetwork";
|
||||
|
||||
const networkEnabled = Variable( exec( 'nmcli networking connectivity' ) !== 'none' );
|
||||
const network = AstalNetwork.get_default();
|
||||
|
||||
|
||||
const setNetworking = ( status: boolean ) => {
|
||||
if ( status === true ) {
|
||||
exec( 'nmcli networking on' );
|
||||
networkEnabled.set( true );
|
||||
} else {
|
||||
exec( 'nmcli networking off' );
|
||||
networkEnabled.set( false );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getIP = () => {
|
||||
print( 'Hello World' );
|
||||
return 'Hello World';
|
||||
// return exec( "ip addr show | grep 'inet ' | awk '{print $2}' | grep -v '127'" ).split( '/' )[ 0 ];
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
networkEnabled,
|
||||
setNetworking,
|
||||
getIP
|
||||
}
|
||||
Reference in New Issue
Block a user