diff --git a/config/ags/config.js b/config/ags/config.js index 8725d85b..dfcdd5a4 100644 --- a/config/ags/config.js +++ b/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, ] } diff --git a/config/ags/style.scss b/config/ags/style.scss index 1c93cce7..3c83caff 100644 --- a/config/ags/style.scss +++ b/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"; diff --git a/config/ags/traybuttons/traybuttons.js b/config/ags/traybuttons/traybuttons.js new file mode 100644 index 00000000..4a33612a --- /dev/null +++ b/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: '', + }), + }), + }), + + ], + }), +}); diff --git a/config/ags/traybuttons/traybuttons.scss b/config/ags/traybuttons/traybuttons.scss new file mode 100644 index 00000000..dd48b3a0 --- /dev/null +++ b/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; +}