feat(ags): add start of traybuttons

config/ags/config.js

@@ -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,
     ]
 }

config/ags/style.scss

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

config/ags/traybuttons/traybuttons.js

@@ -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: '',
+          }),
+        }),
+      }),
+
+    ],
+  }),
+});

config/ags/traybuttons/traybuttons.scss

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