From fe2404d43901e14267adb3a52c8dfd44de7e681c Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Wed, 6 Sep 2023 17:36:26 -0400
Subject: [PATCH] feat(ags): add battery and systray modules. change default
outline to tray items
---
config/ags/js/bar/bar.js | 10 +++++
config/ags/js/bar/systray.js | 47 +++++++++++++++++++++
config/ags/scss/common.scss | 2 +-
config/ags/scss/main.scss | 1 +
config/ags/scss/widgets/systray.scss | 45 ++++++++++++++++++++
config/ags/scss/widgets/traybuttons.scss | 26 ++++++++++--
config/ags/style.css | 53 +++++++++++++++++++++---
7 files changed, 174 insertions(+), 10 deletions(-)
create mode 100644 config/ags/js/bar/systray.js
create mode 100644 config/ags/scss/widgets/systray.scss
diff --git a/config/ags/js/bar/bar.js b/config/ags/js/bar/bar.js
index e5dd7d90..358972aa 100644
--- a/config/ags/js/bar/bar.js
+++ b/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),
diff --git a/config/ags/js/bar/systray.js b/config/ags/js/bar/systray.js
new file mode 100644
index 00000000..8b99520e
--- /dev/null
+++ b/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();
diff --git a/config/ags/scss/common.scss b/config/ags/scss/common.scss
index d5666856..e9ab974d 100644
--- a/config/ags/scss/common.scss
+++ b/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;
diff --git a/config/ags/scss/main.scss b/config/ags/scss/main.scss
index 509df54e..301c873b 100644
--- a/config/ags/scss/main.scss
+++ b/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";
diff --git a/config/ags/scss/widgets/systray.scss b/config/ags/scss/widgets/systray.scss
new file mode 100644
index 00000000..04332d85
--- /dev/null
+++ b/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;
+ }
+ }
+}
+
diff --git a/config/ags/scss/widgets/traybuttons.scss b/config/ags/scss/widgets/traybuttons.scss
index a5306acc..083decd7 100644
--- a/config/ags/scss/widgets/traybuttons.scss
+++ b/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;
+ }
}
diff --git a/config/ags/style.css b/config/ags/style.css
index 61e5fb16..dd5049c8 100644
--- a/config/ags/style.css
+++ b/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;
- border: 2px solid rgba(56, 44, 74, 0.8);
- border-radius: 80px; }
+ min-width: 230px; }
+
+.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; }