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 NotifPopups from './js/notifications/popup.js';
|
||||||
import Calendar from './js/date.js';
|
import Calendar from './js/date.js';
|
||||||
import QuickSettings from './js/quick-settings/main.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 AppLauncher from './js/applauncher/main.js';
|
||||||
import * as Corners from './js/screen-corners.js';
|
import * as Corners from './js/screen-corners.js';
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ export default {
|
||||||
AppLauncher(),
|
AppLauncher(),
|
||||||
Calendar(),
|
Calendar(),
|
||||||
NotifCenter(),
|
NotifCenter(),
|
||||||
//Overview(),
|
Overview(),
|
||||||
Powermenu(),
|
Powermenu(),
|
||||||
QuickSettings(),
|
QuickSettings(),
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ const addNotif = (box, notif) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// FIXME: first notif never works
|
||||||
const NotificationList = () => Box({
|
const NotificationList = () => Box({
|
||||||
vertical: true,
|
vertical: true,
|
||||||
vexpand: 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 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 { Icon, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
|
import { Icon, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
|
@ -19,7 +16,6 @@ const getFontSize = client => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const IconStyle = client => `
|
const IconStyle = client => `
|
||||||
transition: font-size 0.2s linear;
|
|
||||||
min-width: ${scale(client.size[0])}px;
|
min-width: ${scale(client.size[0])}px;
|
||||||
min-height: ${scale(client.size[1])}px;
|
min-height: ${scale(client.size[1])}px;
|
||||||
font-size: ${getFontSize(client)}px;
|
font-size: ${getFontSize(client)}px;
|
||||||
|
@ -82,8 +78,9 @@ const Client = (client, active, clients) => {
|
||||||
|
|
||||||
child: Icon({
|
child: Icon({
|
||||||
className: `window ${active}`,
|
className: `window ${active}`,
|
||||||
style: IconStyle(client) + 'font-size: 10px;',
|
css: IconStyle(client) + 'font-size: 10px;',
|
||||||
icon: client.class,
|
icon: client.class,
|
||||||
|
size: 1,
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
@ -103,7 +100,6 @@ export function updateClients(box) {
|
||||||
if (client.address == Hyprland.active.client.address)
|
if (client.address == Hyprland.active.client.address)
|
||||||
active = 'active';
|
active = 'active';
|
||||||
|
|
||||||
|
|
||||||
// TODO: fix multi monitor issue. this is just a temp fix
|
// TODO: fix multi monitor issue. this is just a temp fix
|
||||||
client.at[1] -= 2920;
|
client.at[1] -= 2920;
|
||||||
|
|
||||||
|
@ -123,19 +119,19 @@ export function updateClients(box) {
|
||||||
client.at[1] * VARS.SCALE,
|
client.at[1] * VARS.SCALE,
|
||||||
];
|
];
|
||||||
|
|
||||||
if (newClient[0]) {
|
if (!newClient[0]) {
|
||||||
toRemove.removeItem(newClient[0]);
|
|
||||||
fixed.move(...newClient);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
newClient[0] = Client(client, active, clients);
|
newClient[0] = Client(client, active, clients);
|
||||||
fixed.put(...newClient);
|
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
|
// Set a timeout here to have an animation when the icon first appears
|
||||||
timeout(1, () => {
|
timeout(1, () => {
|
||||||
newClient[0].child.child.className = `window ${active}`;
|
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({
|
export const Highlighter = () => Box({
|
||||||
valign: 'start',
|
vpack: 'start',
|
||||||
halign: 'start',
|
hpack: 'start',
|
||||||
className: 'workspace active',
|
className: 'workspace active',
|
||||||
style: DEFAULT_STYLE,
|
css: DEFAULT_STYLE,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const updateCurrentWorkspace = self => {
|
export const updateCurrentWorkspace = self => {
|
||||||
|
@ -27,7 +27,7 @@ export const updateCurrentWorkspace = self => {
|
||||||
const height = row * (VARS.SCREEN.Y * VARS.SCALE + 17);
|
const height = row * (VARS.SCREEN.Y * VARS.SCALE + 17);
|
||||||
const currentIndex = workspaces.findIndex(w => w._id == currentId);
|
const currentIndex = workspaces.findIndex(w => w._id == currentId);
|
||||||
|
|
||||||
self.setStyle(`
|
self.setCss(`
|
||||||
${DEFAULT_STYLE}
|
${DEFAULT_STYLE}
|
||||||
margin-left: ${9 + currentIndex * (VARS.SCREEN.X * VARS.SCALE + 34)}px;
|
margin-left: ${9 + currentIndex * (VARS.SCREEN.X * VARS.SCALE + 34)}px;
|
||||||
margin-top: ${9 + height}px;
|
margin-top: ${9 + height}px;
|
||||||
|
|
|
@ -52,7 +52,7 @@ export const WorkspaceDrop = props => EventBox({
|
||||||
});
|
});
|
||||||
|
|
||||||
export const WindowButton = ({ address, ...props } = {}) => Button({
|
export const WindowButton = ({ address, ...props } = {}) => Button({
|
||||||
type: 'Button',
|
isButton: true,
|
||||||
...props,
|
...props,
|
||||||
setup: self => {
|
setup: self => {
|
||||||
self.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
|
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 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 { Box, Overlay } from 'resource:///com/github/Aylur/ags/widget.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 PopupWindow from '../misc/popup.js';
|
||||||
import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
|
import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
|
||||||
|
@ -15,6 +16,8 @@ function update(box) {
|
||||||
updateCurrentWorkspace(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({
|
export default () => PopupWindow({
|
||||||
name: 'overview',
|
name: 'overview',
|
||||||
closeOnUnfocus: 'none',
|
closeOnUnfocus: 'none',
|
||||||
|
@ -22,10 +25,13 @@ export default () => PopupWindow({
|
||||||
|
|
||||||
child: Overlay({
|
child: Overlay({
|
||||||
setup: self => {
|
setup: self => {
|
||||||
self.set_overlay_pass_through(
|
// FIXME: see if we can get rid of this timeout
|
||||||
self.get_children()[1],
|
timeout(1, () => {
|
||||||
true,
|
self.set_overlay_pass_through(
|
||||||
);
|
self.get_children()[1],
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
overlays: [Highlighter()],
|
overlays: [Highlighter()],
|
||||||
child: Box({
|
child: Box({
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
|
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 { Revealer, CenterBox, Box, EventBox, Fixed, Label } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
|
|
||||||
import Gtk from 'gi://Gtk';
|
|
||||||
|
|
||||||
import { WorkspaceDrop } from './dragndrop.js';
|
import { WorkspaceDrop } from './dragndrop.js';
|
||||||
import * as VARS from './variables.js';
|
import * as VARS from './variables.js';
|
||||||
|
@ -24,7 +22,7 @@ export function getWorkspaces(box) {
|
||||||
|
|
||||||
export const WorkspaceRow = (className, i) => Revealer({
|
export const WorkspaceRow = (className, i) => Revealer({
|
||||||
transition: 'slide_down',
|
transition: 'slide_down',
|
||||||
halign: className === 'special' ? '' : 'start',
|
hpack: className === 'special' ? '' : 'start',
|
||||||
connections: [[Hyprland, rev => {
|
connections: [[Hyprland, rev => {
|
||||||
const minId = i * VARS.WORKSPACE_PER_ROW;
|
const minId = i * VARS.WORKSPACE_PER_ROW;
|
||||||
const activeId = Hyprland.active.workspace.id;
|
const activeId = Hyprland.active.workspace.id;
|
||||||
|
@ -35,15 +33,11 @@ export const WorkspaceRow = (className, i) => Revealer({
|
||||||
}]],
|
}]],
|
||||||
child: CenterBox({
|
child: CenterBox({
|
||||||
children: [null, EventBox({
|
children: [null, EventBox({
|
||||||
// save ref to the 'add' workspace
|
|
||||||
properties: [['box']],
|
|
||||||
setup: eventbox => eventbox._box = eventbox.child.children[0],
|
|
||||||
|
|
||||||
connections: [[Hyprland, eventbox => {
|
connections: [[Hyprland, eventbox => {
|
||||||
const maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
|
const maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW;
|
||||||
const activeId = Hyprland.active.workspace.id;
|
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 &&
|
!Hyprland.workspaces.some(ws => ws.id > maxId &&
|
||||||
(ws.windows > 0 || ws.id === activeId));
|
(ws.windows > 0 || ws.id === activeId));
|
||||||
}]],
|
}]],
|
||||||
|
@ -62,16 +56,12 @@ export const WorkspaceRow = (className, i) => Revealer({
|
||||||
|
|
||||||
const Workspace = (id, name, extra = false) => {
|
const Workspace = (id, name, extra = false) => {
|
||||||
let workspace;
|
let workspace;
|
||||||
const fixed = Gtk.Fixed.new();
|
const fixed = Fixed();
|
||||||
|
|
||||||
if (!extra) {
|
if (!extra) {
|
||||||
workspace = Revealer({
|
workspace = Revealer({
|
||||||
transition: 'slide_right',
|
transition: 'slide_right',
|
||||||
transitionDuration: 500,
|
transitionDuration: 500,
|
||||||
properties: [
|
|
||||||
['id', id],
|
|
||||||
['name', name],
|
|
||||||
],
|
|
||||||
connections: [[Hyprland, box => {
|
connections: [[Hyprland, box => {
|
||||||
const activeId = Hyprland.active.workspace.id;
|
const activeId = Hyprland.active.workspace.id;
|
||||||
const active = activeId === box._id;
|
const active = activeId === box._id;
|
||||||
|
@ -81,7 +71,7 @@ const Workspace = (id, name, extra = false) => {
|
||||||
child: WorkspaceDrop({
|
child: WorkspaceDrop({
|
||||||
child: Box({
|
child: Box({
|
||||||
className: 'workspace',
|
className: 'workspace',
|
||||||
style: DEFAULT_STYLE,
|
css: DEFAULT_STYLE,
|
||||||
child: fixed,
|
child: fixed,
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
|
@ -91,19 +81,15 @@ const Workspace = (id, name, extra = false) => {
|
||||||
else {
|
else {
|
||||||
workspace = Revealer({
|
workspace = Revealer({
|
||||||
transition: 'slide_right',
|
transition: 'slide_right',
|
||||||
properties: [
|
|
||||||
['id', id],
|
|
||||||
['name', name],
|
|
||||||
],
|
|
||||||
child: WorkspaceDrop({
|
child: WorkspaceDrop({
|
||||||
child: Box({
|
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;`,
|
min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`,
|
||||||
children: [
|
children: [
|
||||||
fixed,
|
fixed,
|
||||||
Label({
|
Label({
|
||||||
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;
|
workspace.getFixed = () => fixed;
|
||||||
return workspace;
|
return workspace;
|
||||||
};
|
};
|
||||||
|
@ -137,10 +125,10 @@ export function updateWorkspaces(box) {
|
||||||
row.add(Workspace(ws.id, type ? ws.name : ''));
|
row.add(Workspace(ws.id, type ? ws.name : ''));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
box.show_all();
|
|
||||||
|
|
||||||
// Make sure the order is correct
|
// Make sure the order is correct
|
||||||
box._workspaces.forEach((workspace, i) => {
|
box._workspaces.forEach((workspace, i) => {
|
||||||
workspace.get_parent().reorder_child(workspace, i);
|
workspace.get_parent().reorder_child(workspace, i);
|
||||||
});
|
});
|
||||||
|
box.show_all();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue