LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Readme (#567)

Browse Source 
* Update readme.

* updates

* Update and fix startup issues.
This commit is contained in:
Jas Singh
2024-12-20 22:40:41 -08:00
committed by GitHub
parent 0101f242e6
commit e4a5e8060e
4 changed files with 70 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
README.md
View File

@@ -1,72 +1,40 @@
# 🚧 Migrating to Astal and AGSv2 🚧
Hyprpanel is upgrading to AGSv2 and Astal
🔧 No new features or most bugs will be worked on until migration is complete.
<p align="center">
<a href="https://hyprpanel.com" target="_blank" rel="noopener noreferrer">
<img width="180" src="./assets/hyprpanel.png" alt="Hyprpanel logo">
</a>
</p>
<br/>
<p align="center">
<a href="https://hyprpanel.com/getting_started/installation.html"><img src="https://img.shields.io/badge/Wiki-hyprpanel-orange?style=flat&logo=wiki" alt="wiki"></a>
<a href="https://discord.gg/MNpg7Z2b3a"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
</p>
<br/>
# HyprPanel 🚀 # HyprPanel 🚀
A panel built for Hyprland with [AGS](https://github.com/Aylur/ags) A panel built for Hyprland with [Astal](https://github.com/Aylur/astal)
![HyprPanel1](./assets/hp1.png) ![HyprPanel1](./assets/hp1.png)
![HyprPanel2](./assets/hp2.png) ![HyprPanel2](./assets/hp2.png)
> NOTE: If you would like to support the project, please instead [donate to Aylur](https://ko-fi.com/aylur) who put in tremendous effort to build AGS. Hyprpanel likely wouldn't exist without it. > NOTE: If you would like to support the project, please instead [donate to Aylur](https://ko-fi.com/aylur) who put in tremendous effort to build AGS. Hyprpanel likely wouldn't exist without it.
## Installation ## Information
The [HyprPanel Wiki](https://hyprpanel.com/getting_started/installation.html) contains in depth instructions for installing the panel and all of its dependencies. The instructions below are general instructions for installing the panel. The [HyprPanel Wiki](https://hyprpanel.com/getting_started/installation.html) contains in depth instructions for configuring and installing the panel and all of its dependencies. The instructions below are just the general instructions for installing the panel.
## Requirements ## Arch
Bun ```bash
yay -S ags-hyprpanel-git
```sh
curl -fsSL https://bun.sh/install | bash && \
sudo ln -s $HOME/.bun/bin/bun /usr/local/bin/bun
``` ```
## From Source
### Required ### Required
```sh ```sh
pipewire aylurs-gtk-shell-git
wireplumber
## Resource monitoring modules
libgtop libgtop
## Bluetooth menu utilities
bluez bluez
bluez-utils bluez-utils
## Copy/Paste utilities
wl-clipboard
## Compiler for sass/scss
dart-sass
## Brightness module for OSD
brightnessctl
## AGS requirements
networkmanager networkmanager
gnome-bluetooth-3.0 dart-sass
wl-clipboard
upower
gvfs
``` ```
::: warning **NOTE: HyprPanel will not run without the required dependencies.**
HyprPanel will not run without the required dependencies.
:::
### Optional ### Optional
@@ -75,6 +43,9 @@ HyprPanel will not run without the required dependencies.
python python
python-gpustat python-gpustat
## To control screen/keyboard brightness
brightnessctl
## Only if a pywal hook from wallpaper changes applied through settings is desired ## Only if a pywal hook from wallpaper changes applied through settings is desired
pywal pywal
@@ -114,13 +85,13 @@ swww
pacman: pacman:
```bash ```bash
sudo pacman -S pipewire libgtop bluez bluez-utils btop networkmanager dart-sass wl-clipboard brightnessctl swww python gnome-bluetooth-3.0 pacman-contrib power-profiles-daemon gvfs sudo pacman -S --needed wireplumber libgtop bluez bluez-utils btop networkmanager dart-sass wl-clipboard brightnessctl swww python upower pacman-contrib power-profiles-daemon gvfs
``` ```
AUR: AUR:
```bash ```bash
yay -S grimblast-git gpu-screen-recorder hyprpicker matugen-bin python-gpustat aylurs-gtk-shell-git hyprsunset-git hypridle-git yay -S --needed aylurs-gtk-shell-git grimblast-git gpu-screen-recorder-git hyprpicker matugen-bin python-gpustat hyprsunset-git hypridle-git
``` ```
### Fedora ### Fedora
@@ -135,14 +106,14 @@ sudo dnf config-manager --save --setopt=copr:copr.fedorainfracloud.org:heus-sueh
DNF: DNF:
```bash ```sh
sudo dnf install pipewire libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs sudo dnf install wireplumber upower libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs nodejs
``` ```
bun: npm:
```bash ```bash
bun install -g sass npm install -g sass
``` ```
flatpak: flatpak:
@@ -163,41 +134,28 @@ sudo dnf install python python3-pip; pip install gpustat pywal
For NixOS/Home-Manager, see [NixOS & Home-Manager instructions](#nixos--home-manager). For NixOS/Home-Manager, see [NixOS & Home-Manager instructions](#nixos--home-manager).
## Instructions ## Installation
### AGS To install HyprPanel, you can run the following commands:
Once everything is installed you need to put the contents of this repo in `~/.config/ags`.
If you already have something in `~/.config/ags`, it's recommended that you back it up with:
```bash ```bash
mv $HOME/.config/ags $HOME/.config/ags.bkup git clone https://github.com/Jas-SinghFSU/HyprPanel.git
cd HyprPanel
meson setup build
meson compile -C build
meson install -C build
``` ```
Otherwise you can use this command to install the panel: ### Installing NerdFonts
```bash HyprPanel uses [Nerdfonts](https://www.nerdfonts.com/) to display icons. You can install them using the following command from within the HyprPanel's `scripts` directory:
git clone https://github.com/Jas-SinghFSU/HyprPanel.git && \
ln -s $(pwd)/HyprPanel $HOME/.config/ags ```sh
# Installs the JetBrainsMono NerdFonts used for icons
./scripts/install_fonts.sh
``` ```
### Nerd Fonts If you install the fonts after installing HyperPanel, you will need to restart HyperPanel for the changes to take effect.
Additionally, you need to ensure that you have a [Nerd Font](https://www.nerdfonts.com/font-downloads) installed for your icons to render properly.
### Launch the panel
Afterwards you can run the panel with the following command in your terminal:
```bash
ags
```
Or you can add it to your Hyprland config (hyprland.conf) to auto-start with:
```bash
exec-once = ags
```
### NixOS & Home-Manager ### NixOS & Home-Manager
@@ -263,97 +221,22 @@ wayland.windowManager.hyprland.settings.exec-once = [
``` ```
### Launch the panel
Afterwards you can run the panel with the following command in your terminal:
```bash
hyprpanel
```
Or you can add it to your Hyprland config (hyprland.conf) to auto-start with:
```bash
exec-once = hyprpanel
```
### Notifications ### Notifications
HyprPanel handles notifications through the AGS built-in notification service. If you're already using a notification daemon such as Dunst or Mako, you may have to stop them to prevent conflicts with HyprPanel. HyprPanel handles notifications through the AGS built-in notification service. If you're already using a notification daemon such as Dunst or Mako, you may have to stop them to prevent conflicts with HyprPanel.
> NOTE: If your system is in a language other than English, the resource monitor in the dashboard may not work properly. > NOTE: If your system is in a language other than English, the resource monitor in the dashboard may not work properly.
## Configuration
The HyprPanel comes with a configuration menu which is available by opening the Dashboard menu (click the button in the bar with the default - Arch - icon) and then clicking the Gear icon.
### Size
The panel is automatically scaled based on your font size in `Configuration > General`.
### Specifying bar layouts per monitor
To specify layouts for each monitor you can create a JSON object such as:
```JSON
{
"0": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"1": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"2": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"network",
"bluetooth",
"systray",
"clock",
"notifications"
]
}
}
```
Where each monitor is defined by its index (0, 1, 2 in this case) and each section (left, middle, right) contains one or more of the following modules:
```js
'battery';
'dashboard';
'workspaces';
'windowtitle';
'media';
'notifications';
'volume';
'network';
'bluetooth';
'clock';
'systray';
```
Since the text-box in the options dialog isn't sufficient, it is recommended that you create this JSON configuration in a text editor elsewhere and paste it into the layout text-box under Configuration > Bar > "Bar Layouts for Monitors".
### Additional Configuration
#### GPU Tracking
If you have an NVidia GPU, you can track your GPU usage in your Dashboard by going to your `Settings > Configuration > Dashboard Menu > Track GPU` and turning it on.

16
src/components/bar/modules/systray/index.tsx
View File

@@ -33,7 +33,16 @@ const MenuDefaultIcon = ({ item }: MenuEntryProps): JSX.Element => {
}; };
const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => { const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => {
const menu = createMenu(item.menuModel, item.actionGroup); let menu: Gtk.Menu;
const entryBinding = Variable.derive(
[bind(item, 'menuModel'), bind(item, 'actionGroup')],
(menuModel, actionGroup) => {
if (menuModel && actionGroup) {
menu = createMenu(menuModel, actionGroup);
}
},
);
return ( return (
<button <button
@@ -51,7 +60,10 @@ const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => {
Notify({ summary: 'App Name', body: item.id }); Notify({ summary: 'App Name', body: item.id });
} }
}} }}
onDestroy={() => menu?.destroy()} onDestroy={() => {
menu?.destroy();
entryBinding.drop();
}}
> >
{child} {child}
</button> </button>

4
src/components/menus/bluetooth/devices/helpers.ts
View File

@@ -11,7 +11,9 @@ import { bluetoothService } from 'src/lib/constants/services';
* @returns An array of available Bluetooth devices. * @returns An array of available Bluetooth devices.
*/ */
export const getAvailableBluetoothDevices = (): AstalBluetooth.Device[] => { export const getAvailableBluetoothDevices = (): AstalBluetooth.Device[] => {
const availableDevices = bluetoothService.devices const bluetoothDevices = bluetoothService.get_devices() ?? [];
const availableDevices = bluetoothDevices
.filter((btDev) => btDev.name !== null) .filter((btDev) => btDev.name !== null)
.sort((a, b) => { .sort((a, b) => {
if (a.connected || a.paired) { if (a.connected || a.paired) {

2
src/components/menus/network/wifi/WirelessAPs/helpers.ts
View File

@@ -69,7 +69,7 @@ const dedupeWAPs = (): AstalNetwork.AccessPoint[] => {
return []; return [];
} }
const WAPs = networkService.wifi.accessPoints; const WAPs = networkService.wifi.get_access_points();
const dedupMap: Record<string, AstalNetwork.AccessPoint> = {}; const dedupMap: Record<string, AstalNetwork.AccessPoint> = {};
WAPs.forEach((item: AstalNetwork.AccessPoint) => { WAPs.forEach((item: AstalNetwork.AccessPoint) => {