fix(ags): keep hovered state for playpause button

This commit is contained in:
matt1432 2023-09-18 14:56:57 -04:00
parent 0004dd85be
commit c66909efed

View file

@ -156,7 +156,9 @@ export const Slash = player => Label({
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](),
properties: [['hovered', false]],
onHover: box => { onHover: box => {
box._hovered = true;
if (! box.child.sensitive || ! box.sensitive) { if (! box.child.sensitive || ! box.sensitive) {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed')); box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
} }
@ -174,6 +176,7 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
} }
}, },
onHoverLost: box => { onHoverLost: box => {
box._hovered = false;
box.window.set_cursor(null); box.window.set_cursor(null);
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
@ -191,12 +194,22 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
[player.colors, button => { [player.colors, button => {
if (player.colors.value) { if (player.colors.value) {
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
if (button._hovered) {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
});
}
else {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent}; item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText}; color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`); min-height: 42px; min-width: 38px;`);
}); });
} }
}
else { else {
button.setCss(`* { color: ${player.colors.value.buttonAccent}; } button.setCss(`* { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; }`); *:hover { color: ${player.colors.value.hoverAccent}; }`);