feat(ags): add start of traybuttons

This commit is contained in:
matt1432 2023-08-27 14:28:39 -04:00
parent d0c75b76df
commit b46125b5c6
4 changed files with 139 additions and 0 deletions

View file

@ -1,5 +1,6 @@
import { execAsync, writeFile } from 'resource:///com/github/Aylur/ags/utils.js';
import { Powermenu } from 'file:///home/matt/.nix/config/ags/powermenu/powermenu.js';
import { LeftBar } from 'file:///home/matt/.nix/config/ags/traybuttons/traybuttons.js';
import { Closer } from 'file:///home/matt/.nix/config/ags/closer/closer.js';
const scss = ags.App.configDir + '/style.scss';
@ -12,6 +13,7 @@ export default {
style: css,
windows: [
Powermenu,
LeftBar,
Closer,
]
}

View file

@ -4,3 +4,4 @@
@import "/home/matt/.nix/config/ags/colors.scss";
@import "/home/matt/.nix/config/ags/powermenu/powermenu.scss";
@import "/home/matt/.nix/config/ags/traybuttons/traybuttons.scss";

View file

@ -0,0 +1,60 @@
const OskToggle = ags.Widget.EventBox({
className: 'toggle-off',
onPrimaryClickRelease: function() {
OskToggle.toggleClassName('toggle-on', true);
},
child: ags.Widget.Box({
className: 'osk-toggle',
vertical: false,
child: ags.Widget.Label({
label: " 󰌌 ",
}),
}),
});
export const LeftBar = ags.Widget.Window({
name: 'left-bar',
layer: 'overlay',
anchor: 'top left',
child: ags.Widget.Box({
className: 'transparent',
vertical: false,
children: [
OskToggle,
ags.Widget.EventBox({
className: '',
onPrimaryClickRelease: '',
child: ags.Widget.Box({
className: 'tablet-toggle',
vertical: false,
child: ags.Widget.Label({
label: " 󰦧 ",
}),
}),
}),
ags.Widget.EventBox({
className: '',
onPrimaryClickRelease: '',
child: ags.Widget.Box({
className: 'heart-toggle',
vertical: false,
child: ags.Widget.Label({
label: '',
}),
}),
}),
],
}),
});

View file

@ -0,0 +1,76 @@
.osk-toggle {
font-size: 28px;
min-height: 40px;
min-width: 50px;
padding: 0px 0px 0px 5px;
}
.tablet-toggle {
font-size: 28px;
min-height: 40px;
min-width: 50px;
padding: 0px 0px 0px 5px;
}
.heart-toggle {
font-size: 28px;
min-height: 40px;
min-width: 50px;
padding: 0px 0px 0px 4px;
}
.notif-panel {
font-size: 20px;
border-radius: 80px;
min-height: 37px;
min-width: 105px;
padding: 1px 0px 1px 5px;
.toggle-on {
border-top-left-radius: 22px;
border-top-right-radius: 22px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: 0px solid $bg;
}
}
.filler {
border-left: 2px solid $contrastbg;
border-right: 2px solid $contrastbg;
min-height: 14px;
min-width: 105px;
background-color: $bg;
transition: all 0.5s;
}
.quick-settings-toggle {
font-size: 24px;
min-height: 40px;
min-width: 40px;
padding: 0px 0px 0px 0px;
}
.toggle-off {
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;
}
.toggle-on {
background-color: $bg;
color: #CBA6F7;
border-radius: 80px;
border: 2px solid $contrastbg;
transition: background-color 0.5s ease-in-out,
border 0.5s ease-in-out;
}
.toggle-on:hover, .toggle-off:hover {
background-color: rgba(127, 132, 156, 0.4);
transition: background-color 0.5s ease-in-out,
border 0.5s ease-in-out;
}