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 044af825ce
commit 9936a0638a
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/Settings/BottomScreen/Menus/Clock/Date.vue
View File

@@ -3,6 +3,8 @@ import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core"; import { useIntervalFn } from "@vueuse/core";
const store = useSettingsStore(); const store = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();
const now = ref(new Date()); const now = ref(new Date());
@@ -18,6 +20,10 @@ const handleConfirm = () => {
store.closeSubMenu(); store.closeSubMenu();
}; };
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
});
defineOptions({ render: () => null }); defineOptions({ render: () => null });
</script> </script>
@@ -25,20 +31,20 @@ defineOptions({ render: () => null });
<NumberInput <NumberInput
:model-value="now.getMonth() + 1" :model-value="now.getMonth() + 1"
title="Month" title="Month"
:x="1 * 16" :x="1 * 16 - 1"
:disabled="true" :disabled="true"
/> />
<NumberInput <NumberInput
:model-value="now.getDate()" :model-value="now.getDate()"
title="Day" title="Day"
:x="5 * 16" :x="5 * 16 - 1"
:disabled="true" :disabled="true"
/> />
<NumberInput <NumberInput
:model-value="now.getFullYear()" :model-value="now.getFullYear()"
title="Year" title="Year"
:digits="4" :digits="4"
:x="9 * 16" :x="9 * 16 - 1"
:disabled="true" :disabled="true"
/> />

8
app/components/Settings/BottomScreen/Menus/Clock/Time.vue
View File

@@ -21,7 +21,9 @@ const handleConfirm = () => {
}; };
onRender((ctx) => { onRender((ctx) => {
assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 113, 62); assets.images.home.topScreen.background.draw(ctx, 0, 0);
assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
}); });
defineOptions({ render: () => null }); defineOptions({ render: () => null });
@@ -31,13 +33,13 @@ defineOptions({ render: () => null });
<NumberInput <NumberInput
:model-value="now.getHours()" :model-value="now.getHours()"
title="Hour" title="Hour"
:x="4 * 16" :x="4 * 16 - 1"
:disabled="true" :disabled="true"
/> />
<NumberInput <NumberInput
:model-value="now.getMinutes()" :model-value="now.getMinutes()"
title="Minute" title="Minute"
:x="9 * 16" :x="9 * 16 - 1"
:disabled="true" :disabled="true"
/> />

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

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