From 1488f4992f681a340852bfd61084e972bf6148f8 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Fri, 8 Sep 2023 21:27:25 -0400
Subject: [PATCH] feat(ags): remove eventbox from systray because of bug

---
 config/ags/js/bar/systray.js         | 70 ++++++++++++++--------------
 config/ags/scss/widgets/systray.scss |  9 ++++
 config/ags/style.css                 |  8 +++-
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/config/ags/js/bar/systray.js b/config/ags/js/bar/systray.js
index 8b99520..c216dde 100644
--- a/config/ags/js/bar/systray.js
+++ b/config/ags/js/bar/systray.js
@@ -1,47 +1,47 @@
 const { SystemTray } = ags.Service;
 const { Box, Button, Icon, MenuItem } = ags.Widget;
 const { Gtk } = imports.gi;
+import { EventBox } from '../common.js';
 
-// this one uses a MenuBar and shouldn't throw that destroyed widget warning
 const SysTrayItem = item => MenuItem({
-    className: 'tray-item',
-    child: Icon({
-        size: 24,
-    }),
-    submenu: item.menu,
-    connections: [[item, btn => {
-        btn.child.icon = item.icon;
-        btn.tooltipMarkup = item.tooltipMarkup;
-    }]]
+  className: 'tray-item',
+  child: Icon({
+    size: 24,
+  }),
+  submenu: item.menu,
+  connections: [[item, btn => {
+    btn.child.icon = item.icon;
+    btn.tooltipMarkup = item.tooltipMarkup;
+  }]]
 });
 
-export const SysTrayModule = () => ags.Widget({
-    type: Gtk.MenuBar,
-    className: 'sys-tray',
-    properties: [
-        ['items', new Map()],
-        ['onAdded', (box, id) => {
-            const item = SystemTray.getItem(id);
-            if (box._items.has(id) || !item)
-                return;
+const SysTrayModule = () => ags.Widget({
+  type: Gtk.MenuBar,
+  className: 'sys-tray',
+  properties: [
+    ['items', new Map()],
+    ['onAdded', (box, id) => {
+      const item = SystemTray.getItem(id);
+      if (box._items.has(id) || !item)
+        return;
 
-            const widget = SysTrayItem(item);
-            box._items.set(id, widget);
-            box.add(widget);
-            box.show_all();
-        }],
-        ['onRemoved', (box, id) => {
-            if (!box._items.has(id))
-                return;
+      const widget = SysTrayItem(item);
+      box._items.set(id, widget);
+      box.add(widget);
+      box.show_all();
+    }],
+    ['onRemoved', (box, id) => {
+      if (!box._items.has(id))
+        return;
 
-            box._items.get(id).destroy();
-            box._items.delete(id);
-        }],
-    ],
-    connections: [
-        [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
-        [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
-    ],
+      box._items.get(id).destroy();
+      box._items.delete(id);
+    }],
+  ],
+  connections: [
+    [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
+    [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
+  ],
 });
 
 export const SysTray = SysTrayModule();
diff --git a/config/ags/scss/widgets/systray.scss b/config/ags/scss/widgets/systray.scss
index 513d6ff..8340581 100644
--- a/config/ags/scss/widgets/systray.scss
+++ b/config/ags/scss/widgets/systray.scss
@@ -11,6 +11,15 @@
     all: unset;
     padding: 0px 2px 0px 2px;
     font-size: 25px;
+    border-radius: 100%;
+    transition: background-color 0.5s ease-in-out,
+                border 0.5s ease-in-out;
+    &:hover {
+      background: rgba(127, 132, 156, 0.4);
+      border-radius: 100%;
+      transition: background-color 0.5s ease-in-out,
+                  border 0.5s ease-in-out;
+    }
   }
 
   menu {
diff --git a/config/ags/style.css b/config/ags/style.css
index a288e43..cbd5556 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -138,7 +138,13 @@
   .sys-tray .tray-item {
     all: unset;
     padding: 0px 2px 0px 2px;
-    font-size: 25px; }
+    font-size: 25px;
+    border-radius: 100%;
+    transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+    .sys-tray .tray-item:hover {
+      background: rgba(127, 132, 156, 0.4);
+      border-radius: 100%;
+      transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
   .sys-tray menu {
     background: #282a36;
     padding-top: 5px;