fix(ags overview): fix visual flicker

This commit is contained in:
matt1432 2023-11-07 10:56:12 -05:00
parent 33ff902117
commit 80427166f5
7 changed files with 37 additions and 46 deletions

View file

@ -8,7 +8,7 @@ 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 Overview from './js/overview/main.js';
import AppLauncher from './js/applauncher/main.js';
import * as Corners from './js/screen-corners.js';
@ -34,7 +34,7 @@ export default {
AppLauncher(),
Calendar(),
NotifCenter(),
//Overview(),
Overview(),
Powermenu(),
QuickSettings(),

View file

@ -22,6 +22,7 @@ const addNotif = (box, notif) => {
}
};
// FIXME: first notif never works
const NotificationList = () => Box({
vertical: true,
vexpand: true,

View file

@ -1,6 +1,3 @@
// Has to be a traditional function for 'this' scope
Array.prototype.removeItem = function (el) { this.splice(this.indexOf(el), 1); };
import App from 'resource:///com/github/Aylur/ags/app.js';
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import { Icon, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
@ -19,7 +16,6 @@ const getFontSize = client => {
};
const IconStyle = client => `
transition: font-size 0.2s linear;
min-width: ${scale(client.size[0])}px;
min-height: ${scale(client.size[1])}px;
font-size: ${getFontSize(client)}px;
@ -82,8 +78,9 @@ const Client = (client, active, clients) => {
child: Icon({
className: `window ${active}`,
style: IconStyle(client) + 'font-size: 10px;',
css: IconStyle(client) + 'font-size: 10px;',
icon: client.class,
size: 1,
}),
}),
});
@ -103,7 +100,6 @@ export function updateClients(box) {
if (client.address == Hyprland.active.client.address)
active = 'active';
// TODO: fix multi monitor issue. this is just a temp fix
client.at[1] -= 2920;
@ -123,19 +119,19 @@ export function updateClients(box) {
client.at[1] * VARS.SCALE,
];
if (newClient[0]) {
toRemove.removeItem(newClient[0]);
fixed.move(...newClient);
}
else {
if (!newClient[0]) {
newClient[0] = Client(client, active, clients);
fixed.put(...newClient);
}
else {
toRemove.splice(toRemove.indexOf(newClient[0]), 1);
fixed.move(...newClient);
}
// Set a timeout here to have an animation when the icon first appears
timeout(1, () => {
newClient[0].child.child.className = `window ${active}`;
newClient[0].child.child.style = IconStyle(client);
newClient[0].child.child.setCss(IconStyle(client));
});
});

View file

@ -10,10 +10,10 @@ const DEFAULT_STYLE = `
export const Highlighter = () => Box({
valign: 'start',
halign: 'start',
vpack: 'start',
hpack: 'start',
className: 'workspace active',
style: DEFAULT_STYLE,
css: DEFAULT_STYLE,
});
export const updateCurrentWorkspace = self => {
@ -27,7 +27,7 @@ export const updateCurrentWorkspace = self => {
const height = row * (VARS.SCREEN.Y * VARS.SCALE + 17);
const currentIndex = workspaces.findIndex(w => w._id == currentId);
self.setStyle(`
self.setCss(`
${DEFAULT_STYLE}
margin-left: ${9 + currentIndex * (VARS.SCREEN.X * VARS.SCALE + 34)}px;
margin-top: ${9 + height}px;

View file

@ -52,7 +52,7 @@ export const WorkspaceDrop = props => EventBox({
});
export const WindowButton = ({ address, ...props } = {}) => Button({
type: 'Button',
isButton: true,
...props,
setup: self => {
self.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);

View file

@ -1,6 +1,7 @@
import App from 'resource:///com/github/Aylur/ags/app.js';
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import { Box, Overlay } from 'resource:///com/github/Aylur/ags/widget.js';
import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
import PopupWindow from '../misc/popup.js';
import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
@ -15,6 +16,8 @@ function update(box) {
updateCurrentWorkspace(box);
}
// FIXME: can't drag in workspaces that are before the highlight
// TODO: have a 'page' for each monitor, arrows on both sides to loop through
export default () => PopupWindow({
name: 'overview',
closeOnUnfocus: 'none',
@ -22,10 +25,13 @@ export default () => PopupWindow({
child: Overlay({
setup: self => {
// FIXME: see if we can get rid of this timeout
timeout(1, () => {
self.set_overlay_pass_through(
self.get_children()[1],
true,
);
});
},
overlays: [Highlighter()],
child: Box({

View file

@ -1,7 +1,5 @@
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import { Revealer, CenterBox, Box, EventBox, Label } from 'resource:///com/github/Aylur/ags/widget.js';
import Gtk from 'gi://Gtk';
import { Revealer, CenterBox, Box, EventBox, Fixed, Label } from 'resource:///com/github/Aylur/ags/widget.js';
import { WorkspaceDrop } from './dragndrop.js';
import * as VARS from './variables.js';
@ -24,7 +22,7 @@ export function getWorkspaces(box) {
export const WorkspaceRow = (className, i) => Revealer({
transition: 'slide_down',
halign: className === 'special' ? '' : 'start',
hpack: className === 'special' ? '' : 'start',
connections: [[Hyprland, rev => {
const minId = i * VARS.WORKSPACE_PER_ROW;
const activeId = Hyprland.active.workspace.id;
@ -35,15 +33,11 @@ export const WorkspaceRow = (className, i) => Revealer({
}]],
child: CenterBox({
children: [null, EventBox({
// save ref to the 'add' workspace
properties: [['box']],
setup: eventbox => eventbox._box = eventbox.child.children[0],
connections: [[Hyprland, eventbox => {
const maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
const activeId = Hyprland.active.workspace.id;
eventbox._box.revealChild = className === 'special' ||
eventbox.child.children[0].revealChild = className === 'special' ||
!Hyprland.workspaces.some(ws => ws.id > maxId &&
(ws.windows > 0 || ws.id === activeId));
}]],
@ -62,16 +56,12 @@ export const WorkspaceRow = (className, i) => Revealer({
const Workspace = (id, name, extra = false) => {
let workspace;
const fixed = Gtk.Fixed.new();
const fixed = Fixed();
if (!extra) {
workspace = Revealer({
transition: 'slide_right',
transitionDuration: 500,
properties: [
['id', id],
['name', name],
],
connections: [[Hyprland, box => {
const activeId = Hyprland.active.workspace.id;
const active = activeId === box._id;
@ -81,7 +71,7 @@ const Workspace = (id, name, extra = false) => {
child: WorkspaceDrop({
child: Box({
className: 'workspace',
style: DEFAULT_STYLE,
css: DEFAULT_STYLE,
child: fixed,
}),
}),
@ -91,19 +81,15 @@ const Workspace = (id, name, extra = false) => {
else {
workspace = Revealer({
transition: 'slide_right',
properties: [
['id', id],
['name', name],
],
child: WorkspaceDrop({
child: Box({
style: `min-width: ${VARS.SCREEN.X * VARS.SCALE / 2}px;
css: `min-width: ${VARS.SCREEN.X * VARS.SCALE / 2}px;
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
children: [
fixed,
Label({
label: ' +',
style: 'font-size: 40px;',
css: 'font-size: 40px;',
}),
],
}),
@ -111,6 +97,8 @@ const Workspace = (id, name, extra = false) => {
});
}
workspace._id = id;
workspace._name = name;
workspace.getFixed = () => fixed;
return workspace;
};
@ -137,10 +125,10 @@ export function updateWorkspaces(box) {
row.add(Workspace(ws.id, type ? ws.name : ''));
}
});
box.show_all();
// Make sure the order is correct
box._workspaces.forEach((workspace, i) => {
workspace.get_parent().reorder_child(workspace, i);
});
box.show_all();
}