From 28be70e1cac26dd0d1ab791ff8a11512c13ff7f4 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Wed, 15 Nov 2023 16:01:30 -0500 Subject: [PATCH] feat(ags): make use of exclusive ignore --- devices/wim/config/ags/config.js | 34 ++-- devices/wim/config/ags/js/bar/fullscreen.js | 149 ++++++++---------- devices/wim/config/ags/js/bar/main.js | 15 +- devices/wim/config/ags/js/corners/main.js | 45 ++++++ .../ags/js/{ => corners}/screen-corners.js | 39 +---- .../wim/config/ags/js/misc/background-fade.js | 15 ++ devices/wim/config/ags/scss/main.scss | 1 - .../wim/config/ags/scss/widgets/corners.scss | 5 - 8 files changed, 153 insertions(+), 150 deletions(-) create mode 100644 devices/wim/config/ags/js/corners/main.js rename devices/wim/config/ags/js/{ => corners}/screen-corners.js (72%) create mode 100644 devices/wim/config/ags/js/misc/background-fade.js delete mode 100644 devices/wim/config/ags/scss/widgets/corners.scss diff --git a/devices/wim/config/ags/config.js b/devices/wim/config/ags/config.js index 31f8371..d056e4b 100644 --- a/devices/wim/config/ags/config.js +++ b/devices/wim/config/ags/config.js @@ -1,17 +1,18 @@ import App from 'resource:///com/github/Aylur/ags/app.js'; import { exec } from 'resource:///com/github/Aylur/ags/utils.js'; -import Setup from './js/setup.js'; -import OSD from './js/osd/main.js'; -import Powermenu from './js/powermenu.js'; -import * as Bar from './js/bar/main.js'; -import NotifCenter from './js/notifications/center.js'; -import NotifPopups from './js/notifications/popup.js'; -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 Setup from './js/setup.js'; +import AppLauncher from './js/applauncher/main.js'; +import Bar from './js/bar/main.js'; +import BgFade from './js/misc/background-fade.js'; +import Calendar from './js/date.js'; +import Corners from './js/corners/main.js'; +import NotifCenter from './js/notifications/center.js'; +import NotifPopups from './js/notifications/popup.js'; +import OSD from './js/osd/main.js'; +import Overview from './js/overview/main.js'; +import Powermenu from './js/powermenu.js'; +import QSettings from './js/quick-settings/main.js'; const scss = App.configDir + '/scss/main.scss'; const css = App.configDir + '/style.css'; @@ -36,15 +37,14 @@ export default { AppLauncher(), Calendar(), NotifCenter(), + OSD(), Overview(), Powermenu(), - QuickSettings(), + QSettings(), - Bar.Bar(), - Bar.BgGradient(), - Corners.Bottomleft(), - Corners.Bottomright(), - OSD(), + Bar(), + BgFade(), + ...Corners(), NotifPopups(), ], }; diff --git a/devices/wim/config/ags/js/bar/fullscreen.js b/devices/wim/config/ags/js/bar/fullscreen.js index ebe198e..4514eba 100644 --- a/devices/wim/config/ags/js/bar/fullscreen.js +++ b/devices/wim/config/ags/js/bar/fullscreen.js @@ -1,98 +1,83 @@ -import App from 'resource:///com/github/Aylur/ags/app.js'; import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js'; import Variable from 'resource:///com/github/Aylur/ags/variable.js'; -import { Box, EventBox, Overlay, Revealer } from 'resource:///com/github/Aylur/ags/widget.js'; +import { Box, EventBox, Revealer } from 'resource:///com/github/Aylur/ags/widget.js'; import { timeout } from 'resource:///com/github/Aylur/ags/utils.js'; -import { RoundedCorner } from '../screen-corners.js'; - const Revealed = Variable(true); const Hovering = Variable(false); -const wStyle = 'background: rgba(0, 0, 0, 0.5);'; Hyprland.connect('changed', () => { const workspace = Hyprland.getWorkspace(Hyprland.active.workspace.id); - if (workspace) - Revealed.value = workspace.hasfullscreen; + Revealed.value = workspace?.hasfullscreen; }); Hyprland.connect('fullscreen', (_, fullscreen) => Revealed.value = fullscreen); -export default props => Overlay({ - overlays: [ - RoundedCorner('topleft', { className: 'corner' }), - RoundedCorner('topright', { className: 'corner' }), +export default props => Box({ + css: 'min-height: 1px', + hexpand: true, + vertical: true, + children: [ + Revealer({ + transition: 'slide_down', + revealChild: true, + + properties: [['timeouts', []]], + connections: [[Revealed, self => { + if (Revealed.value) { + timeout(2000, () => { + if (Revealed.value) + self.revealChild = false; + }); + } + else { + self.revealChild = true; + } + }]], + + child: EventBox({ + onHover: () => Hovering.value = true, + onHoverLost: self => { + Hovering.value = false; + if (Revealed.value) { + timeout(2000, () => { + if (!Hovering.value) { + // Replace bar with transparent eventbox + self.get_parent().get_parent().children[1].revealChild = true; + self.get_parent().revealChild = false; + } + }); + } + }, + ...props, + }), + }), + + Revealer({ + connections: [[Revealed, self => { + if (Revealed.value) { + timeout(2000, () => { + if (Revealed.value) + self.revealChild = true; + }); + } + else { + self.revealChild = false; + } + }]], + child: EventBox({ + onHover: self => { + Hovering.value = true; + + // Replace eventbox with bar + self.get_parent().get_parent().children[0].revealChild = true; + self.get_parent().revealChild = false; + }, + child: Box({ + css: 'min-height: 5px;', + }), + }), + }), ], - - child: Box({ - css: 'min-height: 1px', - hexpand: true, - vertical: true, - children: [ - Revealer({ - transition: 'slide_down', - setup: self => self.revealChild = true, - - properties: [['timeouts', []]], - connections: [[Revealed, self => { - App.getWindow('bar').setCss(Revealed.value ? '' : wStyle); - App.getWindow('bg-gradient').visible = !Revealed.value; - - if (Revealed.value) { - timeout(2000, () => { - if (Revealed.value) - self.revealChild = false; - }); - } - else { - self.revealChild = true; - } - }]], - - child: EventBox({ - onHover: () => Hovering.value = true, - onHoverLost: self => { - Hovering.value = false; - if (Revealed.value) { - timeout(2000, () => { - if (!Hovering.value) { - // Replace bar with transparent eventbox - self.get_parent().get_parent().children[1].revealChild = true; - self.get_parent().revealChild = false; - } - }); - } - }, - ...props, - }), - }), - - Revealer({ - connections: [[Revealed, self => { - if (Revealed.value) { - timeout(2000, () => { - if (Revealed.value) - self.revealChild = true; - }); - } - else { - self.revealChild = false; - } - }]], - child: EventBox({ - onHover: self => { - Hovering.value = true; - - // Replace eventbox with bar - self.get_parent().get_parent().children[0].revealChild = true; - self.get_parent().revealChild = false; - }, - child: Box({ - css: 'min-height: 5px;', - }), - }), - }), - ], - }), }); diff --git a/devices/wim/config/ags/js/bar/main.js b/devices/wim/config/ags/js/bar/main.js index d8bb5b0..b7f5a4c 100644 --- a/devices/wim/config/ags/js/bar/main.js +++ b/devices/wim/config/ags/js/bar/main.js @@ -12,23 +12,12 @@ import SysTray from './systray.js'; import Battery from './battery.js'; import Brightness from './brightness.js'; import Audio from './audio.js'; -import Revealer from './fullscreen.js'; import KeyboardLayout from './keyboard-layout.js'; +import Revealer from './fullscreen.js'; -export const BgGradient = () => Window({ - name: 'bg-gradient', - layer: 'background', - anchor: ['top', 'bottom', 'left', 'right'], - css: ` - background-image: -gtk-gradient (linear, - left top, left bottom, - from(rgba(0, 0, 0, 0.5)), - to(rgba(0, 0, 0, 0))); - `, -}); -export const Bar = () => Window({ +export default () => Window({ name: 'bar', layer: 'overlay', anchor: ['top', 'left', 'right'], diff --git a/devices/wim/config/ags/js/corners/main.js b/devices/wim/config/ags/js/corners/main.js new file mode 100644 index 0000000..14df711 --- /dev/null +++ b/devices/wim/config/ags/js/corners/main.js @@ -0,0 +1,45 @@ +import { Window } from 'resource:///com/github/Aylur/ags/widget.js'; + +import RoundedCorner from './screen-corners.js'; + + +const TopLeft = () => Window({ + name: 'cornertl', + layer: 'overlay', + exclusivity: 'ignore', + anchor: ['top', 'left'], + visible: true, + child: RoundedCorner('topleft'), +}); +const TopRight = () => Window({ + name: 'cornertr', + layer: 'overlay', + exclusivity: 'ignore', + anchor: ['top', 'right'], + visible: true, + child: RoundedCorner('topright'), +}); +const BottomLeft = () => Window({ + name: 'cornerbl', + layer: 'overlay', + exclusivity: 'ignore', + anchor: ['bottom', 'left'], + visible: true, + child: RoundedCorner('bottomleft'), +}); +const BottomRight = () => Window({ + name: 'cornerbr', + layer: 'overlay', + exclusivity: 'ignore', + anchor: ['bottom', 'right'], + visible: true, + child: RoundedCorner('bottomright'), +}); + + +export default () => [ + TopLeft(), + TopRight(), + BottomLeft(), + BottomRight(), +]; diff --git a/devices/wim/config/ags/js/screen-corners.js b/devices/wim/config/ags/js/corners/screen-corners.js similarity index 72% rename from devices/wim/config/ags/js/screen-corners.js rename to devices/wim/config/ags/js/corners/screen-corners.js index 711022b..333e73c 100644 --- a/devices/wim/config/ags/js/screen-corners.js +++ b/devices/wim/config/ags/js/corners/screen-corners.js @@ -1,8 +1,8 @@ -import { Box, DrawingArea, Window } from 'resource:///com/github/Aylur/ags/widget.js'; +import { Box, DrawingArea } from 'resource:///com/github/Aylur/ags/widget.js'; import Gtk from 'gi://Gtk'; const Lang = imports.lang; -export const RoundedCorner = (place, props) => Box({ +export default place => Box({ hpack: place.includes('left') ? 'start' : 'end', vpack: place.includes('top') ? 'start' : 'end', css: ` @@ -13,7 +13,11 @@ export const RoundedCorner = (place, props) => Box({ ${place.includes('left') ? '-1px' : '0'}; `, child: DrawingArea({ - ...props, + css: ` + background-color: black; + border-radius: 18px; + border-width: 0.068rem; + `, setup: widget => { const r = widget.get_style_context() .get_property('border-radius', Gtk.StateFlags.NORMAL); @@ -69,32 +73,3 @@ export const RoundedCorner = (place, props) => Box({ }, }), }); - -export const Topleft = () => Window({ - name: 'cornertl', - layer: 'overlay', - anchor: ['top', 'left'], - visible: true, - child: RoundedCorner('topleft', { className: 'corner' }), -}); -export const Topright = () => Window({ - name: 'cornertr', - layer: 'overlay', - anchor: ['top', 'right'], - visible: true, - child: RoundedCorner('topright', { className: 'corner' }), -}); -export const Bottomleft = () => Window({ - name: 'cornerbl', - layer: 'overlay', - anchor: ['bottom', 'left'], - visible: true, - child: RoundedCorner('bottomleft', { className: 'corner' }), -}); -export const Bottomright = () => Window({ - name: 'cornerbr', - layer: 'overlay', - anchor: ['bottom', 'right'], - visible: true, - child: RoundedCorner('bottomright', { className: 'corner' }), -}); diff --git a/devices/wim/config/ags/js/misc/background-fade.js b/devices/wim/config/ags/js/misc/background-fade.js new file mode 100644 index 0000000..052ff4a --- /dev/null +++ b/devices/wim/config/ags/js/misc/background-fade.js @@ -0,0 +1,15 @@ +import { Window } from 'resource:///com/github/Aylur/ags/widget.js'; + + +export default () => Window({ + name: 'bg-gradient', + layer: 'background', + exclusivity: 'ignore', + anchor: ['top', 'bottom', 'left', 'right'], + css: ` + background-image: -gtk-gradient (linear, + left top, left bottom, + from(rgba(0, 0, 0, 0.5)), + to(rgba(0, 0, 0, 0))); + `, +}); diff --git a/devices/wim/config/ags/scss/main.scss b/devices/wim/config/ags/scss/main.scss index afd1955..b15ff93 100644 --- a/devices/wim/config/ags/scss/main.scss +++ b/devices/wim/config/ags/scss/main.scss @@ -20,5 +20,4 @@ undershoot { @import "./widgets/player"; @import "./widgets/overview"; @import "./widgets/applauncher"; -@import "./widgets/corners"; @import "./widgets/osd"; diff --git a/devices/wim/config/ags/scss/widgets/corners.scss b/devices/wim/config/ags/scss/widgets/corners.scss deleted file mode 100644 index 00a890a..0000000 --- a/devices/wim/config/ags/scss/widgets/corners.scss +++ /dev/null @@ -1,5 +0,0 @@ -.corner { - background-color: black; - border-radius: 18px; // Hard code because Hyprland rounding is in px - border-width: 0.068rem; -}