matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags): add hover anims to player

Browse source
This commit is contained in:
matt1432 2023-09-18 13:36:50 -04:00
parent 9f7bb5e166
commit b5784a9e48
3 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
config/ags/js/media-player/mpris.js
View file

@ -113,7 +113,7 @@ export const PositionSlider = (player, params) => EventBox({
if (player.colors.value) if (player.colors.value)
s.setCss(`highlight { background-color: ${player.colors.value.buttonAccent}; } s.setCss(`highlight { background-color: ${player.colors.value.buttonAccent}; }
slider { background-color: ${player.colors.value.buttonAccent}; } slider { background-color: ${player.colors.value.buttonAccent}; }
slider:hover { background-color: #303240; } slider:hover { background-color: ${player.colors.value.hoverAccent}; }
trough { background-color: ${player.colors.value.buttonAccent}; }`); trough { background-color: ${player.colors.value.buttonAccent}; }`);
}], }],
], ],
@ -152,9 +152,34 @@ export const Slash = player => Label({
}]], }]],
}); });
// TODO: use label instead of stack to fix UI issues
const PlayerButton = ({ player, items, onClick, prop }) => Button({ const PlayerButton = ({ player, items, onClick, prop }) => Button({
child: Stack({ items }), child: Stack({ items }),
onPrimaryClickRelease: () => player[onClick](), onPrimaryClickRelease: () => player[onClick](),
onHover: box => {
if (! box.child.sensitive || ! box.sensitive) {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
}
else {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
}
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};`);
});
}
},
onHoverLost: box => {
box.window.set_cursor(null);
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};`);
});
}
},
connections: [ connections: [
[player, button => { [player, button => {
button.child.shown = `${player[prop]}`; button.child.shown = `${player[prop]}`;
@ -169,7 +194,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
}); });
} }
else { else {
button.setStyle(`color: ${player.colors.value.buttonAccent};`); button.setCss(`* { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; }`);
} }
} }
}], }],

4
config/ags/scss/widgets/player.scss
View file

@ -63,11 +63,11 @@
.shuffle, .shuffle,
.loop { .loop {
border-radius: 100%; border-radius: 100%;
transition: background-color 200ms; transition: color 200ms;
&:hover { &:hover {
border-radius: 100%; border-radius: 100%;
background-color: rgba(127, 132, 156, 0.4); background-color: rgba(127, 132, 156, 0.4);
transition: background-color 200ms; transition: color 200ms;
} }
} }

4
config/ags/style.css
View file

@ -638,14 +638,14 @@ calendar:indeterminate {
.shuffle, .shuffle,
.loop { .loop {
border-radius: 100%; border-radius: 100%;
transition: background-color 200ms; } transition: color 200ms; }
.previous:hover, .previous:hover,
.next:hover, .next:hover,
.shuffle:hover, .shuffle:hover,
.loop:hover { .loop:hover {
border-radius: 100%; border-radius: 100%;
background-color: rgba(127, 132, 156, 0.4); background-color: rgba(127, 132, 156, 0.4);
transition: background-color 200ms; } transition: color 200ms; }
.loop label { .loop label {
padding-right: 8px; } padding-right: 8px; }