matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
matt1432 2023-09-06 17:36:26 -04:00
parent 7ccf86d7a6
commit fe2404d439
7 changed files with 174 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
config/ags/js/bar/bar.js
View file

@ -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),

47
config/ags/js/bar/systray.js Normal file
View file

@ -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();

2
config/ags/scss/common.scss
View file

@ -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;

1
config/ags/scss/main.scss
View file

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

45
config/ags/scss/widgets/systray.scss Normal file
View file

@ -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;
}
}
}

26
config/ags/scss/widgets/traybuttons.scss
View file

@ -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;
}
}

53
config/ags/style.css
View file

@ -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; }