refactor(ags overview): make icon animations make more sense
This commit is contained in:
parent
f934a2cac2
commit
8ea47d4932
2 changed files with 19 additions and 21 deletions
|
@ -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),
|
||||||
|
|
||||||
if (existingClient) {
|
|
||||||
fixed.move(
|
|
||||||
existingClient,
|
|
||||||
client.at[0] * VARS.SCALE,
|
client.at[0] * VARS.SCALE,
|
||||||
client.at[1] * VARS.SCALE,
|
client.at[1] * VARS.SCALE,
|
||||||
);
|
];
|
||||||
existingClient.child.child.className = `window ${active}`;
|
|
||||||
existingClient.child.child.style = IconStyle(client);
|
if (newClient[0]) {
|
||||||
|
toRemove.remove(newClient[0]);
|
||||||
|
fixed.move(...newClient);
|
||||||
}
|
}
|
||||||
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 => {
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue