feat(ags): make use of exclusive ignore

This commit is contained in:
matt1432 2023-11-15 16:01:30 -05:00
parent d296dbf4bd
commit 28be70e1ca
8 changed files with 153 additions and 150 deletions

View file

@ -1,17 +1,18 @@
import App from 'resource:///com/github/Aylur/ags/app.js'; import App from 'resource:///com/github/Aylur/ags/app.js';
import { exec } from 'resource:///com/github/Aylur/ags/utils.js'; import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
import Setup from './js/setup.js'; import Setup from './js/setup.js';
import OSD from './js/osd/main.js'; import AppLauncher from './js/applauncher/main.js';
import Powermenu from './js/powermenu.js'; import Bar from './js/bar/main.js';
import * as Bar from './js/bar/main.js'; import BgFade from './js/misc/background-fade.js';
import NotifCenter from './js/notifications/center.js'; import Calendar from './js/date.js';
import NotifPopups from './js/notifications/popup.js'; import Corners from './js/corners/main.js';
import Calendar from './js/date.js'; import NotifCenter from './js/notifications/center.js';
import QuickSettings from './js/quick-settings/main.js'; import NotifPopups from './js/notifications/popup.js';
import Overview from './js/overview/main.js'; import OSD from './js/osd/main.js';
import AppLauncher from './js/applauncher/main.js'; import Overview from './js/overview/main.js';
import * as Corners from './js/screen-corners.js'; import Powermenu from './js/powermenu.js';
import QSettings from './js/quick-settings/main.js';
const scss = App.configDir + '/scss/main.scss'; const scss = App.configDir + '/scss/main.scss';
const css = App.configDir + '/style.css'; const css = App.configDir + '/style.css';
@ -36,15 +37,14 @@ export default {
AppLauncher(), AppLauncher(),
Calendar(), Calendar(),
NotifCenter(), NotifCenter(),
OSD(),
Overview(), Overview(),
Powermenu(), Powermenu(),
QuickSettings(), QSettings(),
Bar.Bar(), Bar(),
Bar.BgGradient(), BgFade(),
Corners.Bottomleft(), ...Corners(),
Corners.Bottomright(),
OSD(),
NotifPopups(), NotifPopups(),
], ],
}; };

View file

@ -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 Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import Variable from 'resource:///com/github/Aylur/ags/variable.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 { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
import { RoundedCorner } from '../screen-corners.js';
const Revealed = Variable(true); const Revealed = Variable(true);
const Hovering = Variable(false); const Hovering = Variable(false);
const wStyle = 'background: rgba(0, 0, 0, 0.5);';
Hyprland.connect('changed', () => { Hyprland.connect('changed', () => {
const workspace = Hyprland.getWorkspace(Hyprland.active.workspace.id); 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); Hyprland.connect('fullscreen', (_, fullscreen) => Revealed.value = fullscreen);
export default props => Overlay({ export default props => Box({
overlays: [ css: 'min-height: 1px',
RoundedCorner('topleft', { className: 'corner' }), hexpand: true,
RoundedCorner('topright', { className: 'corner' }), 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;',
}),
}),
}),
],
}),
}); });

View file

@ -12,23 +12,12 @@ import SysTray from './systray.js';
import Battery from './battery.js'; import Battery from './battery.js';
import Brightness from './brightness.js'; import Brightness from './brightness.js';
import Audio from './audio.js'; import Audio from './audio.js';
import Revealer from './fullscreen.js';
import KeyboardLayout from './keyboard-layout.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', name: 'bar',
layer: 'overlay', layer: 'overlay',
anchor: ['top', 'left', 'right'], anchor: ['top', 'left', 'right'],

View file

@ -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(),
];

View file

@ -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'; import Gtk from 'gi://Gtk';
const Lang = imports.lang; const Lang = imports.lang;
export const RoundedCorner = (place, props) => Box({ export default place => Box({
hpack: place.includes('left') ? 'start' : 'end', hpack: place.includes('left') ? 'start' : 'end',
vpack: place.includes('top') ? 'start' : 'end', vpack: place.includes('top') ? 'start' : 'end',
css: ` css: `
@ -13,7 +13,11 @@ export const RoundedCorner = (place, props) => Box({
${place.includes('left') ? '-1px' : '0'}; ${place.includes('left') ? '-1px' : '0'};
`, `,
child: DrawingArea({ child: DrawingArea({
...props, css: `
background-color: black;
border-radius: 18px;
border-width: 0.068rem;
`,
setup: widget => { setup: widget => {
const r = widget.get_style_context() const r = widget.get_style_context()
.get_property('border-radius', Gtk.StateFlags.NORMAL); .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' }),
});

View file

@ -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)));
`,
});

View file

@ -20,5 +20,4 @@ undershoot {
@import "./widgets/player"; @import "./widgets/player";
@import "./widgets/overview"; @import "./widgets/overview";
@import "./widgets/applauncher"; @import "./widgets/applauncher";
@import "./widgets/corners";
@import "./widgets/osd"; @import "./widgets/osd";

View file

@ -1,5 +0,0 @@
.corner {
background-color: black;
border-radius: 18px; // Hard code because Hyprland rounding is in px
border-width: 0.068rem;
}