118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
import { bind } from "astal";
|
|
import AstalBattery from "gi://AstalBattery";
|
|
import AstalBluetooth from "gi://AstalBluetooth";
|
|
import AstalNetwork from "gi://AstalNetwork"
|
|
import AstalWp from "gi://AstalWp";
|
|
import Brightness from "../../util/brightness";
|
|
import { Gtk } from "astal/gtk4";
|
|
import QuickActions from "../QuickActions/QuickActions";
|
|
|
|
const STATE = AstalNetwork.DeviceState;
|
|
|
|
|
|
const QuickView = () => {
|
|
const quickActions = QuickActions.QuickActions();
|
|
|
|
return <button onClicked={() => quickActions.popup()} child={
|
|
<box>
|
|
<BatteryWidget></BatteryWidget>
|
|
<Audio></Audio>
|
|
<BluetoothWidget></BluetoothWidget>
|
|
<NetworkWidget></NetworkWidget>
|
|
<BrightnessWidget></BrightnessWidget>
|
|
<image iconName={"system-shutdown-symbolic"}></image>
|
|
{ quickActions }
|
|
</box>
|
|
}></button>
|
|
}
|
|
|
|
|
|
const NetworkWidget = () => {
|
|
const network = AstalNetwork.get_default();
|
|
|
|
return <box>
|
|
<image iconName={bind( network, 'state' ).as( state => {
|
|
if ( state === AstalNetwork.State.CONNECTING ) {
|
|
return 'chronometer-reset-symbolic';
|
|
} else if ( state === AstalNetwork.State.CONNECTED_LOCAL || state === AstalNetwork.State.CONNECTED_SITE || state === AstalNetwork.State.CONNECTED_GLOBAL ) {
|
|
return 'network-wired-activated-symbolic';
|
|
} else {
|
|
return 'paint-unknown-symbolic';
|
|
}
|
|
} )} cssClasses={[ 'network-widget', 'quick-view-symbol' ]} visible={bind( network.wifi, 'state' ).as( state => state !== STATE.ACTIVATED )}></image>
|
|
<image iconName={bind( network.wifi, 'state' ).as( state => {
|
|
if ( state === STATE.ACTIVATED ) {
|
|
return network.wifi.iconName
|
|
} else {
|
|
return '';
|
|
}
|
|
} )} cssClasses={[ 'network-widget', 'quick-view-symbol' ]} visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED )}></image>
|
|
</box>
|
|
|
|
|
|
}
|
|
|
|
const BluetoothWidget = () => {
|
|
const bluetooth = AstalBluetooth.get_default();
|
|
const enabled = bind( bluetooth.adapter, "powered" );
|
|
const connected = bind( bluetooth, "isConnected" );
|
|
|
|
// For each connected BT device, render status
|
|
return <box>
|
|
<box visible={enabled.as( e => e )}>
|
|
<image iconName={"bluetooth-active-symbolic"} visible={connected.as( c => c )}></image>
|
|
<image iconName={"bluetooth-disconnected-symbolic"} visible={connected.as( c => !c )}></image>
|
|
</box>
|
|
<image iconName={"bluetooth-disabled-symbolic"} visible={enabled.as( e => !e )}></image>
|
|
<box>
|
|
{bind( bluetooth, 'devices' ).as( devices => {
|
|
return devices.map( device => {
|
|
return <box visible={bind( device, 'connected' ).as( c => c )}>
|
|
<image iconName={bind( device, 'icon' ).as( icon => icon )}></image>
|
|
<label label={bind( device, 'batteryPercentage' ).as( n => { return n + '%' } ) }></label>
|
|
</box>
|
|
} );
|
|
} )}
|
|
</box>
|
|
</box>
|
|
}
|
|
|
|
|
|
const BatteryWidget = () => {
|
|
const battery = AstalBattery.get_default();
|
|
if ( battery.get_is_present() ) {
|
|
return <image iconName={bind( battery, 'iconName' ).as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
|
|
} else {
|
|
return <box></box>
|
|
}
|
|
// Else, no battery available -> Don't show the widget
|
|
}
|
|
|
|
|
|
const BrightnessWidget = () => {
|
|
const brightness = Brightness.get_default();
|
|
const screen_brightness = bind( brightness, "screen" );
|
|
|
|
return <label label={"🌣" + screen_brightness} visible={bind( brightness, 'screenAvailable' )} cssClasses={[ 'quick-view-symbol' ]}></label>
|
|
}
|
|
|
|
|
|
const Audio = () => {
|
|
const wireplumber = AstalWp.get_default();
|
|
if ( wireplumber ) {
|
|
return <box orientation={Gtk.Orientation.HORIZONTAL}>
|
|
<image iconName={bind(wireplumber.defaultSpeaker, 'volumeIcon').as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
|
|
<image iconName={bind(wireplumber.defaultMicrophone, 'volumeIcon').as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
|
|
</box>
|
|
} else {
|
|
print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );
|
|
return <image iconName={"action-unavailable-symbolic"}></image>;
|
|
}
|
|
}
|
|
|
|
// cssClasses={[ 'quick-view-symbol' ]}
|
|
|
|
export default {
|
|
QuickView
|
|
}
|