[Astal] Add mode indicator
This commit is contained in:
@@ -1,35 +1,39 @@
|
||||
import { execAsync } from "astal";
|
||||
import { Gtk } from "astal/gtk4";
|
||||
import sysinfo from "../sysinfo";
|
||||
import {
|
||||
Gtk
|
||||
} from 'astal/gtk4';
|
||||
import {
|
||||
execAsync
|
||||
} from 'astal';
|
||||
import sysinfo from '../sysinfo';
|
||||
|
||||
const info = () => {
|
||||
return (
|
||||
<box vertical>
|
||||
<label
|
||||
label={"System Information"}
|
||||
cssClasses={["title-2"]}
|
||||
label={'System Information'}
|
||||
cssClasses={[ 'title-2' ]}
|
||||
></label>
|
||||
<Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
|
||||
<label
|
||||
vexpand
|
||||
halign={Gtk.Align.START}
|
||||
hexpand
|
||||
label={sysinfo.ramUsed(used => {
|
||||
return "RAM: " + used + ` (${sysinfo.ramUtil.get()}%)`;
|
||||
})}
|
||||
label={sysinfo.ramUsed( used => {
|
||||
return 'RAM: ' + used + ` (${ sysinfo.ramUtil.get() }%)`;
|
||||
} )}
|
||||
></label>
|
||||
<label
|
||||
label={sysinfo.systemStats(stats => {
|
||||
return `CPU: ${stats.cpuTemp}, ${stats.cpuClk}
|
||||
GPU: ${stats.gpuTemp}, ${stats.gpuClk} (${stats.vram} / ${stats.availableVRAM})
|
||||
Kernel: ${stats.kernel}`;
|
||||
})}
|
||||
label={sysinfo.systemStats( stats => {
|
||||
return `CPU: ${ stats.cpuTemp }, ${ stats.cpuClk }
|
||||
GPU: ${ stats.gpuTemp }, ${ stats.gpuClk } (${ stats.vram } / ${ stats.availableVRAM })
|
||||
Kernel: ${ stats.kernel }`;
|
||||
} )}
|
||||
></label>
|
||||
<Gtk.Separator marginTop={10}></Gtk.Separator>
|
||||
<button
|
||||
onClicked={() => execAsync(`/bin/sh -c "kitty --hold fish -c 'fastfetch'"`)}
|
||||
onClicked={() => execAsync( '/bin/sh -c "kitty --hold fish -c \'fastfetch\'"' )}
|
||||
child={
|
||||
<label label={"View FastFetch"}></label>
|
||||
<label label={'View FastFetch'}></label>
|
||||
}></button>
|
||||
</box>
|
||||
);
|
||||
@@ -38,7 +42,7 @@ Kernel: ${stats.kernel}`;
|
||||
const SystemInformationPanel = () => {
|
||||
const popover = new Gtk.Popover();
|
||||
|
||||
popover.set_child(info());
|
||||
popover.set_child( info() );
|
||||
|
||||
return popover;
|
||||
};
|
||||
@@ -54,44 +58,44 @@ const SystemInfo = () => {
|
||||
sysinfo.refreshStats();
|
||||
};
|
||||
|
||||
if (sysinfo.enabled) {
|
||||
if ( sysinfo.enabled ) {
|
||||
return (
|
||||
<button
|
||||
onClicked={() => openSysInfo()}
|
||||
child={
|
||||
<box tooltipText={sysinfo.ramUsed(v => v)}>
|
||||
<box tooltipText={sysinfo.ramUsed( v => v )}>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image
|
||||
iconName={"power-profile-performance-symbolic"}
|
||||
iconName={'power-profile-performance-symbolic'}
|
||||
marginEnd={1}
|
||||
></image>
|
||||
<label
|
||||
label={sysinfo.cpuUtil(util => util)}
|
||||
label={sysinfo.cpuUtil( util => util )}
|
||||
marginEnd={5}
|
||||
></label>
|
||||
</box>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image iconName={"memory"}></image>
|
||||
<label label={sysinfo.ramUtil(util => util)}></label>
|
||||
<image iconName={'memory'}></image>
|
||||
<label label={sysinfo.ramUtil( util => util )}></label>
|
||||
</box>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image iconName={"show-gpu-effects-symbolic"}></image>
|
||||
<label label={sysinfo.gpuUtil(util => util)}></label>
|
||||
<image iconName={'show-gpu-effects-symbolic'}></image>
|
||||
<label label={sysinfo.gpuUtil( util => util )}></label>
|
||||
</box>
|
||||
{panel}
|
||||
</box>
|
||||
}
|
||||
cssClasses={["bar-button"]}
|
||||
cssClasses={[ 'bar-button' ]}
|
||||
></button>
|
||||
);
|
||||
} else {
|
||||
return <image iconName={"action-unavailable-symbolic"}></image>;
|
||||
return <image iconName={'action-unavailable-symbolic'}></image>;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user