feat(ags): add battery and systray modules. change default outline to tray items

config/ags/js/bar/bar.js

@@ -9,6 +9,8 @@ import { TabletToggle }   from './tablet-toggle.js';
 import { QsToggle }       from './quick-settings.js';
 import { NotifButton }    from './notif-button.js';
 import { Clock }          from './clock.js';
+import { SysTray }        from './systray.js';
+import { BatteryLabel }   from './battery.js';
 
 export const Bar = Window({
   name: 'left-bar',
@@ -41,6 +43,10 @@ export const Bar = Window({
 
           Separator(12),
 
+          SysTray,
+
+          Separator(12),
+
           Workspaces,
 
         ],
@@ -53,6 +59,10 @@ export const Bar = Window({
       Box({
         halign: 'end',
         children: [
+          BatteryLabel(),
+
+          Separator(12),
+
           Clock,
 
           Separator(12),

config/ags/js/bar/systray.js

@@ -0,0 +1,47 @@
+const { SystemTray } = ags.Service;
+const { Box, Button, Icon, MenuItem } = ags.Widget;
+const { Gtk } = imports.gi;
+
+// 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;
+    }]]
+});
+
+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 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'],
+    ],
+});
+
+export const SysTray = SysTrayModule();

config/ags/scss/common.scss

@@ -2,7 +2,7 @@ $darkbg: #0b0d16;
 $bg: rgba(40, 42, 54, 0.8); //rgba(69, 71, 90, 0.3); #0d0f18;
 $bgfull: rgb(40, 42, 54);
 $contrastbg: rgba(189, 147, 249, 0.8);
-$bgSecondary: #11131c;
+$bgSecondary: rgba(#382c4a, 0.8);
 $bgSecondaryAlt: #a5b6cf;
 $fg: #a5b6cf;
 $fgDim: #a5b6cf;

config/ags/scss/main.scss

@@ -6,3 +6,4 @@
 @import "./widgets/powermenu.scss";
 @import "./widgets/traybuttons.scss";
 @import "./widgets/workspaces.scss";
+@import "./widgets/systray.scss";

config/ags/scss/widgets/systray.scss

@@ -0,0 +1,45 @@
+.sys-tray {
+  padding: 5px;
+  background-color: $bg;
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out,
+              border 0.5s ease-in-out;
+
+  .tray-item {
+    all: unset;
+    padding: 0px 2px 0px 2px;
+    font-size: 25px;
+  }
+
+* {
+  min-width: 20px;
+  min-height: 20px;
+}
+  menuitem:not(.tray-item) {
+    background: $bgfull;
+    padding: 5px;
+    border-left: 2px solid #1b1b2b;
+    border-right: 2px solid #1b1b2b;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background: #1b1b1b;
+    }
+
+    &:nth-child(1) {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-top: 2px solid #1b1b2b;
+      padding-top: 10px;
+    }
+    &:nth-last-child(1) {
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      border-bottom: 2px solid #1b1b2b;
+      padding-bottom: 10px;
+    }
+  }
+}
+

config/ags/scss/widgets/traybuttons.scss

@@ -34,7 +34,7 @@
   background-color: $bg;
   color: #CBA6F7;
   border-radius: 80px;
-  border: 2px solid #1b1b2b;
+  border: 2px solid $bgSecondary;
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 }
@@ -59,6 +59,26 @@
   padding-left: 10px;
   padding-right: 10px;
   min-width: 230px;
-  border: 2px solid rgba(#382c4a, 0.8);
+}
-  border-radius: 80px;
+
+.battery {
+  padding: 0 10px 0 10px;
+  font-size: 20px;
+
+  .battery-indicator {
+    &.charging {
+      color: green;
+    }
+    &.charged {}
+    &.low {
+      color: red;
+    }
+  }
+  icon {
+    .charging {}
+    .discharging {}
+  }
+  .label {
+    font-size: 20px;
+  }
 }

config/ags/style.css

@@ -22,9 +22,9 @@
     min-width: 80px;
     transition: all ease .2s; }
     .powermenu button:hover {
-      background-color: #11131c; }
+      background-color: rgba(56, 44, 74, 0.8); }
     .powermenu button:active {
-      background-color: #11131c; }
+      background-color: rgba(56, 44, 74, 0.8); }
     .powermenu button .content {
       border-radius: 4px;
       padding: 0px 15px 0px 15px; }
@@ -69,7 +69,7 @@
   background-color: rgba(40, 42, 54, 0.8);
   color: #CBA6F7;
   border-radius: 80px;
-  border: 2px solid #1b1b2b;
+  border: 2px solid rgba(56, 44, 74, 0.8);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
 
 .toggle-on {
@@ -87,9 +87,17 @@
   font-size: 20px;
   padding-left: 10px;
   padding-right: 10px;
-  min-width: 230px;
+  min-width: 230px; }
-  border: 2px solid rgba(56, 44, 74, 0.8);
+
-  border-radius: 80px; }
+.battery {
+  padding: 0 10px 0 10px;
+  font-size: 20px; }
+  .battery .battery-indicator.charging {
+    color: green; }
+  .battery .battery-indicator.low {
+    color: red; }
+  .battery .label {
+    font-size: 20px; }
 
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);
@@ -115,3 +123,36 @@
   .workspaces .active {
     border: 2px solid #50fa7b;
     transition: border-color 0.25s linear; }
+
+.sys-tray {
+  padding: 5px;
+  background-color: rgba(40, 42, 54, 0.8);
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+  .sys-tray .tray-item {
+    all: unset;
+    padding: 0px 2px 0px 2px;
+    font-size: 25px; }
+  .sys-tray * {
+    min-width: 20px;
+    min-height: 20px; }
+  .sys-tray menuitem:not(.tray-item) {
+    background: #282a36;
+    padding: 5px;
+    border-left: 2px solid #1b1b2b;
+    border-right: 2px solid #1b1b2b;
+    transition: background-color 0.2s ease-in-out; }
+    .sys-tray menuitem:not(.tray-item):hover {
+      background: #1b1b1b; }
+    .sys-tray menuitem:not(.tray-item):nth-child(1) {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-top: 2px solid #1b1b2b;
+      padding-top: 10px; }
+    .sys-tray menuitem:not(.tray-item):nth-last-child(1) {
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      border-bottom: 2px solid #1b1b2b;
+      padding-bottom: 10px; }