fix(ags overview): fix visual flicker
This commit is contained in:
parent
33ff902117
commit
80427166f5
7 changed files with 37 additions and 46 deletions
|
@ -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(),
|
||||
|
||||
|
|
|
@ -22,6 +22,7 @@ const addNotif = (box, notif) => {
|
|||
}
|
||||
};
|
||||
|
||||
// FIXME: first notif never works
|
||||
const NotificationList = () => Box({
|
||||
vertical: true,
|
||||
vexpand: true,
|
||||
|
|
|
@ -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));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue