marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Only disable buttons in number-stepper when they're at min/max

Browse Source
This commit is contained in:
redphx 2024-07-17 06:49:19 +07:00
parent 44083f2469
commit d7dc6931d6
4 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/button.styl
View File

@ -111,3 +111,9 @@ a.bx-button {
text-align: center;
}
}
button.bx-inactive {
pointer-events: none;
opacity: 0.2;
background: transparent !important;
}

3
src/assets/css/number-stepper.styl
View File

@ -6,13 +6,14 @@
min-width: 40px;
font-family: var(--bx-monospaced-font);
font-size: 12px;
margin: 0 4px;
}
button {
border: none;
width: 24px;
height: 24px;
margin: 0 4px;
margin: 0;
line-height: 24px;
background-color: var(--bx-default-button-color);
color: #fff;

6
src/assets/css/web-components.styl
View File

@ -84,12 +84,6 @@
font-size: 12px;
font-family: var(--bx-monospaced-font);
&.bx-inactive {
pointer-events: none;
opacity: 0.2;
background: transparent !important;
}
span {
line-height: unset;
}

16
src/utils/settings.ts
View File

@ -167,8 +167,8 @@ export class SettingElement {
};
const updateButtonsVisibility = () => {
$btnDec.classList.toggle('bx-hidden', controlValue === MIN);
$btnInc.classList.toggle('bx-hidden', controlValue === MAX);
$btnDec.classList.toggle('bx-inactive', controlValue === MIN);
$btnInc.classList.toggle('bx-inactive', controlValue === MAX);
}
const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
@ -200,10 +200,16 @@ export class SettingElement {
$range.addEventListener('input', e => {
value = parseInt((e.target as HTMLInputElement).value);
const valueChanged = controlValue !== value;
if (!valueChanged) {
return;
}
controlValue = value;
updateButtonsVisibility();
$text.textContent = renderTextValue(value);
!(e as any).ignoreOnChange && onChange && onChange(e, value);
});
$wrapper.appendChild($range);
@ -234,10 +240,10 @@ export class SettingElement {
if (options.disabled) {
$btnInc.disabled = true;
$btnInc.classList.add('bx-hidden');
$btnInc.classList.add('bx-inactive');
$btnDec.disabled = true;
$btnDec.classList.add('bx-hidden');
$btnDec.classList.add('bx-inactive');
return $wrapper;
}