pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): fix alignment issues in number input

Browse Source
This commit is contained in:
Stevan
2026-01-21 13:52:39 +01:00
parent 14a4705498
commit 3ce2b116c6
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/Settings/BottomScreen/NumberInput.vue
View File

@@ -47,7 +47,7 @@ const app = useAppStore();
const { assets } = useAssets();
const { onRender, onClick } = useScreen();
const Y = 30;
const Y = 31;
const SQUARE_HEIGHT = 49;
const ARROW_IMAGE_HEIGHT =
assets.images.settings.bottomScreen.numberInputUp.rect.height;
@@ -112,15 +112,15 @@ onRender((ctx) => {
// value
ctx.font = "39px NDS39";
ctx.letterSpacing = "2px";
ctx.letterSpacing = props.digits === 2 ? "3px" : "2px";
ctx.textBaseline = "top";
ctx.fillStyle = props.selected
? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
: "#fbfbfb";
ctx.fillText(
value.value.toString().padStart(props.digits, "0"),
props.x + 3,
Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 1,
props.x + (props.digits === 2 ? 3 : 4),
Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2),
);
// arrow down
@@ -139,7 +139,7 @@ onRender((ctx) => {
Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT - 6,
downImage.value.rect.width,
);
});
}, 10);
useKeyDown((key) => {
if (!props.selected || props.disabled) return;