fix(ags): keep hovered state for playpause button
This commit is contained in:
parent
0004dd85be
commit
c66909efed
1 changed files with 18 additions and 5 deletions
|
@ -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}; }`);
|
||||||
|
|
Loading…
Reference in a new issue