diff --git a/hosts/wim/config/ags/config.js b/hosts/wim/config/ags/config.js index 49a29bf1..ebf92cba 100644 --- a/hosts/wim/config/ags/config.js +++ b/hosts/wim/config/ags/config.js @@ -8,6 +8,7 @@ import { Calendar } from './js/date.js'; import { QuickSettings } from './js/quick-settings/main.js'; import Overview from './js/overview/main.js'; import AppLauncher from './js/applauncher/main.js'; +import * as Corners from './js/screen-corners.js'; import { Closer, closeAll } from './js/misc/closer.js'; globalThis.closeAll = () => closeAll(); @@ -43,5 +44,7 @@ export default { QuickSettings, Overview, AppLauncher, + Corners.Bottomleft(), + Corners.Bottomright(), ], }; diff --git a/hosts/wim/config/ags/js/bar/fullscreen.js b/hosts/wim/config/ags/js/bar/fullscreen.js index 7813f2d9..479a324e 100644 --- a/hosts/wim/config/ags/js/bar/fullscreen.js +++ b/hosts/wim/config/ags/js/bar/fullscreen.js @@ -1,81 +1,95 @@ import { Widget, Hyprland, Utils, Variable } from '../../imports.js'; -const { Box, EventBox } = Widget; +const { Box, EventBox, Overlay } = Widget; const Revealed = Variable(true); const Hovering = Variable(false); import { Gesture } from './gesture.js'; +import { RoundedCorner } from '../screen-corners.js'; -export const Revealer = params => Box({ - style: 'min-height: 1px', - vertical: true, - children: [ - Widget.Revealer({ - transition: 'slide_down', - setup: self => self.revealChild = true, - properties: [ - ['timeouts', []], - ], - connections: [[Hyprland, self => { - Utils.execAsync('hyprctl activewindow -j') - .then(result => { - let client = JSON.parse(result); - if (client.fullscreen !== Revealed.value) { - Revealed.value = client.fullscreen; - - if (Revealed.value) { - setTimeout(() => { - if (Revealed.value) - self.revealChild = false - }, 2000); - } - else { - self.revealChild = true; - } - } - }).catch(print); - }]], - - child: Gesture({ - onHover: () => Hovering.value = true, - onHoverLost: self => { - Hovering.value = false; - if (Revealed.value) { - setTimeout(() => { - if (!Hovering.value) { - self.get_parent().get_parent().children[1].revealChild = true; - self.get_parent().revealChild = false; - } - }, 2000); - } - }, - ...params, - }), +export const Revealer = params => Overlay({ + overlays: [ + RoundedCorner('topleft', { + className: 'corner', }), - Widget.Revealer({ - connections: [[Revealed, self => { - if (Revealed.value) { - setTimeout(() => { - if (Revealed.value) - self.revealChild = true; - }, 2000); - } - else { - self.revealChild = false; - } - }]], - child: EventBox({ - onHover: self => { - Hovering.value = true; - self.get_parent().get_parent().children[0].revealChild = true; - self.get_parent().revealChild = false; - }, - child: Box({ - style: 'min-height: 50px;', - }), - }), + RoundedCorner('topright', { + className: 'corner', }), ], + + child: Box({ + style: 'min-height: 1px', + hexpand: true, + vertical: true, + children: [ + Widget.Revealer({ + transition: 'slide_down', + setup: self => self.revealChild = true, + properties: [ + ['timeouts', []], + ], + connections: [[Hyprland, self => { + Utils.execAsync('hyprctl activewindow -j') + .then(result => { + let client = JSON.parse(result); + if (client.fullscreen !== Revealed.value) { + Revealed.value = client.fullscreen; + + if (Revealed.value) { + setTimeout(() => { + if (Revealed.value) + self.revealChild = false + }, 2000); + } + else { + self.revealChild = true; + } + } + }).catch(print); + }]], + + child: Gesture({ + onHover: () => Hovering.value = true, + onHoverLost: self => { + Hovering.value = false; + if (Revealed.value) { + setTimeout(() => { + if (!Hovering.value) { + self.get_parent().get_parent().children[1].revealChild = true; + self.get_parent().revealChild = false; + } + }, 2000); + } + }, + ...params, + }), + }), + + Widget.Revealer({ + connections: [[Revealed, self => { + if (Revealed.value) { + setTimeout(() => { + if (Revealed.value) + self.revealChild = true; + }, 2000); + } + else { + self.revealChild = false; + } + }]], + child: EventBox({ + onHover: self => { + Hovering.value = true; + self.get_parent().get_parent().children[0].revealChild = true; + self.get_parent().revealChild = false; + }, + child: Box({ + style: 'min-height: 50px;', + }), + }), + }), + ], + }), }); diff --git a/hosts/wim/config/ags/js/bar/main.js b/hosts/wim/config/ags/js/bar/main.js index d6cd5de1..4358e6fa 100644 --- a/hosts/wim/config/ags/js/bar/main.js +++ b/hosts/wim/config/ags/js/bar/main.js @@ -25,7 +25,6 @@ export const Bar = Window({ child: Revealer({ child: CenterBox({ className: 'transparent', - halign: 'fill', style: 'margin: 5px', vertical: false, diff --git a/hosts/wim/config/ags/js/misc/closer.js b/hosts/wim/config/ags/js/misc/closer.js index c1bd8871..64938df0 100644 --- a/hosts/wim/config/ags/js/misc/closer.js +++ b/hosts/wim/config/ags/js/misc/closer.js @@ -5,6 +5,10 @@ const ALWAYS_OPEN = [ 'closer', 'bar', 'notifications', + 'cornertl', + 'cornertr', + 'cornerbl', + 'cornerbr' ]; diff --git a/hosts/wim/config/ags/js/screen-corners.js b/hosts/wim/config/ags/js/screen-corners.js new file mode 100644 index 00000000..5a519be9 --- /dev/null +++ b/hosts/wim/config/ags/js/screen-corners.js @@ -0,0 +1,83 @@ +import { Widget } from '../imports.js'; +const { Gtk } = imports.gi; +const Lang = imports.lang; + +export const RoundedCorner = (place, props) => Widget({ + ...props, + type: Gtk.DrawingArea, + halign: place.includes('left') ? 'start' : 'end', + valign: place.includes('top') ? 'start' : 'end', + setup: widget => { + const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL); + widget.set_size_request(r, r); + widget.connect('draw', Lang.bind(widget, (widget, cr) => { + const c = widget.get_style_context().get_property('background-color', Gtk.StateFlags.NORMAL); + const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL); + const borderColor = widget.get_style_context().get_property('color', Gtk.StateFlags.NORMAL); + const borderWidth = widget.get_style_context().get_border(Gtk.StateFlags.NORMAL).left; // ur going to write border-width: something anyway + widget.set_size_request(r, r); + + switch (place) { + case 'topleft': + cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2); + cr.lineTo(0, 0); + break; + + case 'topright': + cr.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI); + cr.lineTo(r, 0); + break; + + case 'bottomleft': + cr.arc(r, 0, r, Math.PI / 2, Math.PI); + cr.lineTo(0, r); + break; + + case 'bottomright': + cr.arc(0, 0, r, 0, Math.PI / 2); + cr.lineTo(r, r); + break; + } + + cr.closePath(); + cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha); + cr.fill(); + cr.setLineWidth(borderWidth); + cr.setSourceRGBA(borderColor.red, borderColor.green, borderColor.blue, borderColor.alpha); + cr.stroke(); + })); + }, +}); + +export const Topleft = () => Widget.Window({ + name: 'cornertl', + layer: 'overlay', + anchor: ['top', 'left'], + exclusive: false, + visible: true, + child: RoundedCorner('topleft', { className: 'corner', }), +}); +export const Topright = () => Widget.Window({ + name: 'cornertr', + layer: 'overlay', + anchor: ['top', 'right'], + exclusive: false, + visible: true, + child: RoundedCorner('topright', { className: 'corner', }), +}); +export const Bottomleft = () => Widget.Window({ + name: 'cornerbl', + layer: 'overlay', + anchor: ['bottom', 'left'], + exclusive: false, + visible: true, + child: RoundedCorner('bottomleft', { className: 'corner', }), +}); +export const Bottomright = () => Widget.Window({ + name: 'cornerbr', + layer: 'overlay', + anchor: ['bottom', 'right'], + exclusive: false, + visible: true, + child: RoundedCorner('bottomright', { className: 'corner', }), +}); diff --git a/hosts/wim/config/ags/scss/main.scss b/hosts/wim/config/ags/scss/main.scss index 88ecfcd0..a0f3b5ac 100644 --- a/hosts/wim/config/ags/scss/main.scss +++ b/hosts/wim/config/ags/scss/main.scss @@ -20,3 +20,4 @@ undershoot { @import "./widgets/player.scss"; @import "./widgets/overview.scss"; @import "./widgets/applauncher.scss"; +@import "./widgets/corners.scss"; diff --git a/hosts/wim/config/ags/scss/widgets/corners.scss b/hosts/wim/config/ags/scss/widgets/corners.scss new file mode 100644 index 00000000..812a8b83 --- /dev/null +++ b/hosts/wim/config/ags/scss/widgets/corners.scss @@ -0,0 +1,5 @@ +.corner { + background-color: black; + border-radius: 21px; //Hard code because Hyprland rounding is in px + border-width: 0.068rem; +} diff --git a/hosts/wim/config/ags/style.css b/hosts/wim/config/ags/style.css index 87c93f74..22e77fea 100644 --- a/hosts/wim/config/ags/style.css +++ b/hosts/wim/config/ags/style.css @@ -764,3 +764,8 @@ calendar:indeterminate { .applauncher .app image { transition: 200ms; margin-right: 9px; } + +.corner { + background-color: black; + border-radius: 21px; + border-width: 0.068rem; }