[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