marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-07 08:07:18 +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; 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; min-width: 40px;
font-family: var(--bx-monospaced-font); font-family: var(--bx-monospaced-font);
font-size: 12px; font-size: 12px;
margin: 0 4px;
} }
button { button {
border: none; border: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 4px; margin: 0;
line-height: 24px; line-height: 24px;
background-color: var(--bx-default-button-color); background-color: var(--bx-default-button-color);
color: #fff; color: #fff;

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

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

16
src/utils/settings.ts
View File

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