From fe2404d43901e14267adb3a52c8dfd44de7e681c Mon Sep 17 00:00:00 2001 From: matt1432 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 e5dd7d9..358972a 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 0000000..8b99520 --- /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 d566685..e9ab974 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 509df54..301c873 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 0000000..04332d8 --- /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 a5306ac..083decd 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 61e5fb1..dd5049c 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; }