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

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)
s.setCss(`highlight { 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}; }`);
}],
],
@ -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({
child: Stack({ items }),
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: [
[player, button => {
button.child.shown = `${player[prop]}`;
@ -169,7 +194,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
});
}
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,
.loop {
border-radius: 100%;
transition: background-color 200ms;
transition: color 200ms;
&:hover {
border-radius: 100%;
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,
.loop {
border-radius: 100%;
transition: background-color 200ms; }
transition: color 200ms; }
.previous:hover,
.next:hover,
.shuffle:hover,
.loop:hover {
border-radius: 100%;
background-color: rgba(127, 132, 156, 0.4);
transition: background-color 200ms; }
transition: color 200ms; }
.loop label {
padding-right: 8px; }