feat(ags): make use of exclusive ignore
This commit is contained in:
parent
d296dbf4bd
commit
28be70e1ca
8 changed files with 153 additions and 150 deletions
|
|
@ -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(),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;',
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
45
devices/wim/config/ags/js/corners/main.js
Normal file
45
devices/wim/config/ags/js/corners/main.js
Normal 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(),
|
||||
];
|
||||
|
|
@ -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' }),
|
||||
});
|
||||
15
devices/wim/config/ags/js/misc/background-fade.js
Normal file
15
devices/wim/config/ags/js/misc/background-fade.js
Normal 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)));
|
||||
`,
|
||||
});
|
||||
|
|
@ -20,5 +20,4 @@ undershoot {
|
|||
@import "./widgets/player";
|
||||
@import "./widgets/overview";
|
||||
@import "./widgets/applauncher";
|
||||
@import "./widgets/corners";
|
||||
@import "./widgets/osd";
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.corner {
|
||||
background-color: black;
|
||||
border-radius: 18px; // Hard code because Hyprland rounding is in px
|
||||
border-width: 0.068rem;
|
||||
}
|
||||
Loading…
Reference in a new issue