Update style of the show/hide touch control button

This commit is contained in:
redphx 2024-05-11 21:12:14 +07:00
parent 0092417a6e
commit 5c9202119b
2 changed files with 16 additions and 4 deletions

View File

@ -50,6 +50,7 @@
button { button {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 0;
svg { svg {
width: 28px; width: 28px;
@ -66,6 +67,14 @@
transform: scale(0.75); transform: scale(0.75);
} }
} }
&.bx-activated {
background-color: white;
svg {
filter: invert(1);
}
}
} }
/* Touch controller buttons */ /* Touch controller buttons */
@ -75,16 +84,16 @@
} }
} }
/* Show disable button */ /* Show enabled button */
div[data-enabled='true'] { div[data-enabled='true'] {
button:last-of-type { button:first-of-type {
display: block; display: block;
} }
} }
/* Show enable button */ /* Show enable button */
div[data-enabled='false'] { div[data-enabled='false'] {
button:first-of-type { button:last-of-type {
display: block; display: block;
} }
} }

View File

@ -26,6 +26,7 @@ export class TouchControlAction extends BaseGameBarAction {
icon: BxIcon.TOUCH_CONTROL_ENABLE, icon: BxIcon.TOUCH_CONTROL_ENABLE,
title: t('show-touch-controller'), title: t('show-touch-controller'),
onClick: onClick, onClick: onClick,
classes: ['bx-activated'],
}); });
const $btnDisable = createButton({ const $btnDisable = createButton({
@ -35,10 +36,12 @@ export class TouchControlAction extends BaseGameBarAction {
onClick: onClick, onClick: onClick,
}); });
this.$content = CE('div', {'data-enabled': 'true'}, this.$content = CE('div', {},
$btnEnable, $btnEnable,
$btnDisable, $btnDisable,
); );
this.reset();
} }
render(): HTMLElement { render(): HTMLElement {