janishutz/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

[AGS] GTK4 Migration: Partially complete

Browse Source
This commit is contained in:
Janis Hutz
2025-04-21 21:48:29 +02:00
parent 7380c75818
commit 8b70f80e60
8 changed files with 321 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
config/astal/components/notifications/notifications.tsx
View File

@@ -1,12 +1,9 @@
// From astal examples
import { GLib } from "astal"
import { Gtk, Astal } from "astal/gtk3"
import { type EventBox } from "astal/gtk3/widget"
import { Gtk } from "astal/gtk4"
import Notifd from "gi://AstalNotifd"
const isIcon = (icon: string) =>
!!Astal.Icon.lookup_icon(icon)
// import Pango from "gi://Pango?version=1.0"
const fileExists = (path: string) =>
GLib.file_test(path, GLib.FileTest.EXISTS)
@@ -27,86 +24,80 @@ const urgency = (n: Notifd.Notification) => {
}
type Props = {
delete( id: number, instanceID: number ): void
setup(self: EventBox): void
onHoverLost(self: EventBox): void
delete( id: number ): void
notification: Notifd.Notification
id: number
instanceID: number
}
export default function Notification(props: Props) {
const { notification: n, onHoverLost, setup, id: id, delete: del, instanceID: instance } = props
const { notification: n, id: id, delete: del } = props
const { START, CENTER, END } = Gtk.Align
return <eventbox
className={`Notification ${urgency(n)}`}
setup={setup}
onHoverLost={onHoverLost}>
<box vertical>
<box className="header">
{(n.appIcon || n.desktopEntry) && <icon
className="app-icon"
visible={Boolean(n.appIcon || n.desktopEntry)}
icon={n.appIcon || n.desktopEntry}
/>}
<label
className="app-name"
halign={START}
truncate
label={n.appName || "Unknown"}
/>
<label
className="time"
hexpand
halign={END}
label={time(n.time)}
/>
<button onClicked={() => del( id, instance )}>
<icon icon="window-close-symbolic" />
</button>
</box>
<Gtk.Separator visible />
<box className="content">
{n.image && fileExists(n.image) && <box
valign={START}
className="image"
css={`background-image: url('${n.image}')`}
/>}
{n.image && isIcon(n.image) && <box
expand={false}
valign={START}
className="icon-image">
<icon icon={n.image} expand halign={CENTER} valign={CENTER} />
</box>}
<box vertical>
<label
className="summary"
halign={START}
xalign={0}
label={n.summary}
truncate
/>
{n.body && <label
className="body"
wrap
useMarkup
halign={START}
xalign={0}
justifyFill
label={n.body}
/>}
</box>
</box>
{n.get_actions().length > 0 && <box className="actions">
{n.get_actions().map(({ label, id }) => (
<button
hexpand
onClicked={() => n.invoke(id)}>
<label label={label} halign={CENTER} hexpand />
</button>
))}
</box>}
return <box vertical
cssClasses={['Notification', urgency(n)]}>
<box cssName="header">
{(n.appIcon || n.desktopEntry) ? <Gtk.Image
cssName="app-icon"
visible={Boolean(n.appIcon || n.desktopEntry)}
iconName={n.appIcon || n.desktopEntry}
/> : <Gtk.Image iconName={'window-close-symbolic'}></Gtk.Image>}
<label
cssName="app-name"
halign={START}
// ellipsize={Pango.EllipsizeMode.END}
label={n.appName || "Unknown"}
/>
<label
cssName="time"
hexpand
halign={END}
label={time(n.time)}
/>
<button onClicked={() => del( id )}>
<Gtk.Image iconName="window-close-symbolic" />
</button>
</box>
</eventbox>
<Gtk.Separator visible />
<box cssName="content">
{n.image && fileExists(n.image) ? <box
valign={START}
cssName="image">
<Gtk.Image file={n.image}></Gtk.Image>
</box>
: <box></box>}
{n.image ? <box
expand={false}
valign={START}
className="icon-image">
<Gtk.Image iconName={n.image} expand halign={CENTER} valign={CENTER} />
</box>
: <box></box>}
<box vertical>
<Gtk.Label
cssName="summary"
halign={START}
xalign={0}
label={n.summary}
// ellipsize={Pango.EllipsizeMode.END}
/>
{n.body ? <label
cssName="body"
wrap
useMarkup
halign={START}
xalign={0}
label={n.body}
/> : <label></label>}
</box>
</box>
{n.get_actions().length > 0 ? <box cssName="actions">
{n.get_actions().map(({ label, id }) => (
<button
hexpand
onClicked={() => n.invoke(id)}>
<label label={label} halign={CENTER} hexpand />
</button>
))}
</box> : <box></box>}
</box>
}