Added the ability to define custom icons for the system tray. (#408)

* Added the ability to define custom icons for the system tray.

* Add placeholder icon if icon is not defined.

* Update themes
This commit is contained in:
Jas Singh
2024-10-30 21:16:15 -07:00
committed by GitHub
parent aaad7c73b5
commit 77d4512c82
51 changed files with 534 additions and 399 deletions

View File

@@ -4,30 +4,53 @@ import { Notify } from 'lib/utils';
const systemtray = await Service.import('systemtray');
import options from 'options';
const { ignore } = options.bar.systray;
const { ignore, customIcons } = options.bar.systray;
const SysTray = (): BarBoxChild => {
const isVis = Variable(false);
const items = Utils.merge([systemtray.bind('items'), ignore.bind('value')], (items, ignored) => {
const filteredTray = items.filter(({ id }) => !ignored.includes(id));
const items = Utils.merge(
[systemtray.bind('items'), ignore.bind('value'), customIcons.bind('value')],
(items, ignored, custIcons) => {
const filteredTray = items.filter(({ id }) => !ignored.includes(id));
isVis.value = filteredTray.length > 0;
isVis.value = filteredTray.length > 0;
return filteredTray.map((item) => {
return Widget.Button({
cursor: 'pointer',
child: Widget.Icon({
class_name: 'systray-icon',
icon: item.bind('icon'),
}),
on_primary_click: (_: SelfButton, event: Gdk.Event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
onMiddleClick: () => Notify({ summary: 'App Name', body: item.id }),
tooltip_markup: item.bind('tooltip_markup'),
return filteredTray.map((item) => {
const matchedCustomIcon = Object.keys(custIcons).find((iconRegex) => item.id.match(iconRegex));
if (matchedCustomIcon !== undefined) {
const iconLabel = custIcons[matchedCustomIcon].icon || '󰠫';
const iconColor = custIcons[matchedCustomIcon].color;
return Widget.Button({
cursor: 'pointer',
child: Widget.Label({
class_name: 'systray-icon txt-icon',
label: iconLabel,
css: iconColor ? `color: ${iconColor}` : '',
}),
on_primary_click: (_: SelfButton, event: Gdk.Event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
onMiddleClick: () => Notify({ summary: 'App Name', body: item.id }),
tooltip_markup: item.bind('tooltip_markup'),
});
}
return Widget.Button({
cursor: 'pointer',
child: Widget.Icon({
class_name: 'systray-icon',
icon: item.bind('icon'),
}),
on_primary_click: (_: SelfButton, event: Gdk.Event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
onMiddleClick: () => Notify({ summary: 'App Name', body: item.id }),
tooltip_markup: item.bind('tooltip_markup'),
});
});
});
});
},
);
return {
component: Widget.Box({