From 11de1da003752d2cad89f1f0ee24db0b3b1b5c9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Av=C3=A9?= Date: Fri, 5 Jul 2024 15:50:08 +0200 Subject: [PATCH] Fri Jul 5 03:50:08 PM CEST 2024 --- home/ags/files/config.js | 105 +++++++++++++++++++++++---------------- home/ags/files/style.css | 13 +++-- home/ags/files/utils.js | 9 +++- 3 files changed, 78 insertions(+), 49 deletions(-) diff --git a/home/ags/files/config.js b/home/ags/files/config.js index ef6cc64..611577e 100644 --- a/home/ags/files/config.js +++ b/home/ags/files/config.js @@ -6,30 +6,62 @@ const battery = await Service.import("battery") const systemtray = await Service.import("systemtray") import { getIconName } from "./utils.js" -const date = Variable("", { - poll: [1000, 'date "+%H:%M:%S %b %e."'], -}) +const volumeIndicator = Widget.Button({ + on_clicked: () => audio.speaker.is_muted = !audio.speaker.is_muted, + class_name: "item", + child: Widget.Box({ + children: [ + Widget.Icon().hook(audio.speaker, self => { + const vol = audio.speaker.volume * 100 + const icon = [ + [101, 'overamplified'], + [67, 'high'], + [34, 'medium'], + [1, 'low'], + [0, 'muted'], + ].find(([threshold]) => threshold <= vol)?.[1] + + self.icon = `audio-volume-${icon}-symbolic` + self.tooltip_text = `Volume ${Math.floor(vol)}%` + }), + Widget.Label().hook(audio.speaker, self => { + self.label = `${Math.floor(audio.speaker.volume * 100)}%` + self.css = "margin-left: 0.7em;" + }) + ]}), +}); function Clients() { const activeId = hyprland.active.client.bind("address") - let clients = hyprland.clients.filter(a => a.workspace.id == hyprland.active.workspace.id).map(({ address, title }) => - Widget.Button({ - child: Widget.Box({ - children: [ - Widget.Icon({ - vexpand: false, - size: 16, - className: "app-icon", - icon: getIconName(hyprland.clients.find(c => c.address === address)) + const clients = hyprland.bind("clients").as(cl => + cl.map(({ address, title, workspace }) => + { + const short_title = title.length > 40 ? title.slice(0, 20) + "..." : title + return Widget.Button({ + attribute: workspace.id, + child: Widget.Box({ + children: [ + Widget.Icon({ + vexpand: false, + size: 16, + className: "app-icon", + icon: getIconName(hyprland.clients.find(c => c.address === address)) + }), + Widget.Label(`${short_title}`) + ], }), - Widget.Label(`${title}`) - ], - }), - class_name: activeId.as(i => `${i === address ? "client-title focused" : "client-title"}`), - })) + class_name: activeId.as(i => `${i === address ? "item client-title focused" : "item client-title"}`), + }) + } + ) + ) + return Widget.Box({ class_name: "clients", children: clients, + setup: self => self.hook(hyprland, () => self.children.forEach(btn => { + btn.visible = hyprland.active.workspace.id === btn.attribute + })), }) } @@ -40,8 +72,8 @@ function Workspaces() { return ws.map(({ id, monitorID }) => Widget.Button({ attribute: monitorID, - label: `${id}`, - onClicked: () => dispatch(i), + label: `${id}`.slice(-1), + onClicked: () => hyprland.messageAsync(`dispatch workspace ${id}`), class_name: activeId.as(i => `${i === id ? "focused" : ""}`), }) ) @@ -49,25 +81,13 @@ function Workspaces() { return Widget.Box({ children: workspaces, + class_name: "workspaces", setup: self => self.hook(hyprland, () => self.children.forEach(btn => { btn.visible = hyprland.active.monitor.id === btn.attribute })), }) } - - - -function Clock() { - return Widget.Label({ - class_name: "clock", - label: date.bind(), - }) -} - - -// we don't need dunst or any other notification daemon -// because the Notifications module is a notification daemon itself function Notification() { const popups = notifications.bind("popups") return Widget.Box({ @@ -102,14 +122,11 @@ function SysTray() { }) } - -// layout of the bar function Left() { return Widget.Box({ spacing: 8, children: [ Clients(), - // ClientTitle(), ], }) } @@ -130,7 +147,15 @@ function Right() { spacing: 8, children: [ SysTray(), - Clock(), + volumeIndicator, + Widget.Label({ + class_name: "item", + label: Variable("", { poll: [1000, 'date "+%Y-%m-%d"'] }).bind(), + }), + Widget.Label({ + class_name: "item", + label: Variable("", { poll: [1000, 'date "+%H:%M:%S"'] }).bind(), + }) ], }) } @@ -143,7 +168,7 @@ function Bar(monitor = 0) { anchor: ["top", "left", "right"], exclusivity: "exclusive", child: Widget.CenterBox({ - css: "margin-bottom: 0.2em;", + class_name: "window-box", start_widget: Left(), center_widget: Center(), end_widget: Right(), @@ -154,11 +179,7 @@ function Bar(monitor = 0) { App.config({ style: "./style.css", windows: [ - Bar(), - - // you can call it, for each monitor - // Bar(0), - // Bar(1) + Bar(1), ], }) diff --git a/home/ags/files/style.css b/home/ags/files/style.css index 9f70da2..aa85e6c 100644 --- a/home/ags/files/style.css +++ b/home/ags/files/style.css @@ -1,19 +1,21 @@ window.bar { background-color: rgba(0, 0, 0, 0.2); + font-size: 1.3em; } -label { - font-weight: bold; +.window-box { + margin-bottom: 0.3em; + margin-top: 0.2em; } .client-title { - padding-left: 0.7em; - padding-right: 0.7em; margin-right: 0.3em; } -.client-title, .clock { +.item { background: #1f2430; + padding-left: 0.7em; + padding-right: 0.7em; border-radius: 0.3em; } @@ -33,6 +35,7 @@ button.focused, button:hover { } .workspaces button { + font-weight: bold; padding-left: 0.4em; padding-right: 0.4em; margin-left: 0.2em; diff --git a/home/ags/files/utils.js b/home/ags/files/utils.js index 5247fd6..fdeb003 100644 --- a/home/ags/files/utils.js +++ b/home/ags/files/utils.js @@ -1,4 +1,5 @@ import { Applications } from "resource:///com/github/Aylur/ags/service/applications.js"; +import GLib from "gi://GLib?version=2.0"; const app_icons = new Applications().list.reduce( (acc, app) => { @@ -11,9 +12,13 @@ const app_icons = new Applications().list.reduce( { classOrNames: {}, executables: {} }, ); +function fileExists(path) { + return GLib.file_test(path, GLib.FileTest.EXISTS); +} + export function getIconName(client) { if (!client) { - return "missing"; + return ""; } let icon = app_icons.classOrNames[client.class]; @@ -65,7 +70,7 @@ export function getIconName(client) { } if (!icon) { - app_icons.classOrNames[client.class] = "missing"; + app_icons.classOrNames[client.class] = ""; } return icon;