From 80427166f57775e7917c17a3d036dfe02bca12d1 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Tue, 7 Nov 2023 10:56:12 -0500 Subject: [PATCH] fix(ags overview): fix visual flicker --- devices/wim/config/ags/config.js | 4 +-- .../wim/config/ags/js/notifications/center.js | 1 + devices/wim/config/ags/js/overview/clients.js | 20 +++++------ .../ags/js/overview/current-workspace.js | 8 ++--- .../wim/config/ags/js/overview/dragndrop.js | 2 +- devices/wim/config/ags/js/overview/main.js | 14 +++++--- .../wim/config/ags/js/overview/workspaces.js | 34 ++++++------------- 7 files changed, 37 insertions(+), 46 deletions(-) diff --git a/devices/wim/config/ags/config.js b/devices/wim/config/ags/config.js index 3d872e23..83a30f94 100644 --- a/devices/wim/config/ags/config.js +++ b/devices/wim/config/ags/config.js @@ -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(), diff --git a/devices/wim/config/ags/js/notifications/center.js b/devices/wim/config/ags/js/notifications/center.js index ddff1278..537d6ae3 100644 --- a/devices/wim/config/ags/js/notifications/center.js +++ b/devices/wim/config/ags/js/notifications/center.js @@ -22,6 +22,7 @@ const addNotif = (box, notif) => { } }; +// FIXME: first notif never works const NotificationList = () => Box({ vertical: true, vexpand: true, diff --git a/devices/wim/config/ags/js/overview/clients.js b/devices/wim/config/ags/js/overview/clients.js index 6be89a7e..26f795c7 100644 --- a/devices/wim/config/ags/js/overview/clients.js +++ b/devices/wim/config/ags/js/overview/clients.js @@ -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)); }); }); diff --git a/devices/wim/config/ags/js/overview/current-workspace.js b/devices/wim/config/ags/js/overview/current-workspace.js index 57f958ee..ab898132 100644 --- a/devices/wim/config/ags/js/overview/current-workspace.js +++ b/devices/wim/config/ags/js/overview/current-workspace.js @@ -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; diff --git a/devices/wim/config/ags/js/overview/dragndrop.js b/devices/wim/config/ags/js/overview/dragndrop.js index 3541724e..4f961d0d 100644 --- a/devices/wim/config/ags/js/overview/dragndrop.js +++ b/devices/wim/config/ags/js/overview/dragndrop.js @@ -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); diff --git a/devices/wim/config/ags/js/overview/main.js b/devices/wim/config/ags/js/overview/main.js index 530fe14a..876613c7 100644 --- a/devices/wim/config/ags/js/overview/main.js +++ b/devices/wim/config/ags/js/overview/main.js @@ -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 => { - self.set_overlay_pass_through( - self.get_children()[1], - true, - ); + // 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({ diff --git a/devices/wim/config/ags/js/overview/workspaces.js b/devices/wim/config/ags/js/overview/workspaces.js index 0de72b9e..ee7693f9 100644 --- a/devices/wim/config/ags/js/overview/workspaces.js +++ b/devices/wim/config/ags/js/overview/workspaces.js @@ -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; - min-height: ${VARS.SCREEN.Y * VARS.SCALE}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(); }