refactor(ags overview): make icon animations make more sense

This commit is contained in:
matt1432 2023-10-12 18:10:39 -04:00
parent f934a2cac2
commit 8ea47d4932
2 changed files with 19 additions and 21 deletions

View file

@ -11,7 +11,8 @@ Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1) };
const scale = size => size * VARS.SCALE - VARS.MARGIN; const scale = size => size * VARS.SCALE - VARS.MARGIN;
const getFontSize = client => Math.min(scale(client.size[0]), scale(client.size[1])) * VARS.ICON_SCALE; const getFontSize = client => Math.min(scale(client.size[0]), scale(client.size[1])) * VARS.ICON_SCALE;
const IconStyle = client => `min-width: ${scale(client.size[0])}px; const IconStyle = client => `transition: font-size 0.2s linear;
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;`;
@ -99,25 +100,26 @@ export function updateClients(box) {
client.at[1] = VARS.DEFAULT_SPECIAL.POS_Y; client.at[1] = VARS.DEFAULT_SPECIAL.POS_Y;
} }
let existingClient = fixed.get_children().find(ch => ch._address == client.address); let newClient = [
toRemove.remove(existingClient); fixed.get_children().find(ch => ch._address == client.address),
client.at[0] * VARS.SCALE,
client.at[1] * VARS.SCALE,
];
if (existingClient) { if (newClient[0]) {
fixed.move( toRemove.remove(newClient[0]);
existingClient, fixed.move(...newClient);
client.at[0] * VARS.SCALE,
client.at[1] * VARS.SCALE,
);
existingClient.child.child.className = `window ${active}`;
existingClient.child.child.style = IconStyle(client);
} }
else { else {
fixed.put( newClient[0] = Client(client, active, clients);
Client(client, active, clients), fixed.put(...newClient);
client.at[0] * VARS.SCALE,
client.at[1] * VARS.SCALE,
);
} }
// Set a timeout here to have an animation when the icon first appears
setTimeout(() => {
newClient[0].child.child.className = `window ${active}`;
newClient[0].child.child.style = IconStyle(client);
}, 1);
}); });
fixed.show_all(); fixed.show_all();
toRemove.forEach(ch => { toRemove.forEach(ch => {

View file

@ -64,13 +64,9 @@ export const WindowButton = ({address, ...params} = {}) => Button({
}); });
button.connect('drag-end', () => { button.connect('drag-end', () => {
button.get_parent().destroy(); button.get_parent().destroy();
let mainBox = getWindow('overview').child.children[0].child; let mainBox = getWindow('overview').child.children[0].child;
mainBox._updateClients(mainBox); mainBox._updateClients(mainBox);
// Set the correct Icon size
setTimeout(() => {
mainBox._updateClients(mainBox);
}, 100);
}); });
}, },
}); });