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

feat(settings): compose title notification instead of using image

Browse Source
This commit is contained in:
Stevan
2025-11-25 19:52:35 +01:00
parent 2b82f6df52
commit 3d5d326e53
3 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
import SETTINGS_IMAGE from "/assets/images/settings/top-screen/settings.webp";
import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
@@ -10,14 +10,14 @@ const store = useSettingsStore();
const [
notificationImage,
titleImage,
settingsImage,
optionsImage,
clockImage,
userImage,
touchScreenImage,
] = useImages(
NOTIFICATION_IMAGE,
TITLE_IMAGE,
SETTINGS_IMAGE,
OPTIONS_IMAGE,
CLOCK_IMAGE,
USER_IMAGE,
@@ -28,38 +28,61 @@ const activeMenu = computed(() => {
if (!store.activeMenu) return null;
if (/^options[A-Z]/.test(store.activeMenu)) {
return { text: "Options", image: optionsImage };
return { id: "options", image: optionsImage };
}
if (/^clock[A-Z]/.test(store.activeMenu)) {
return { text: "Clock", image: clockImage };
return { id: "clock", image: clockImage };
}
if (/^user[A-Z]/.test(store.activeMenu)) {
return { text: "User", image: userImage };
return { id: "user", image: userImage };
}
if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
return { text: "Touch Screen", image: touchScreenImage };
return { id: "touchScreen", image: touchScreenImage };
}
return null;
});
const renderNotification = (
ctx: CanvasRenderingContext2D,
image: HTMLImageElement,
title: string,
description: string,
) => {
ctx.drawImage(notificationImage!, 0, 0);
ctx.drawImage(image, 2, 2);
ctx.font = "10px NDS10";
ctx.fillStyle = "#282828";
ctx.fillText(title, 52, 13);
ctx.fillStyle = "#fbfbfb";
const lines = description.split("\n");
const textY = lines.length === 1 ? 36 : 28;
for (let i = 0; i < lines.length; i += 1) {
ctx.fillText(lines[i]!, 52, textY + 14 * i);
}
};
useRender((ctx) => {
ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
ctx.drawImage(titleImage!, 0, 0);
renderNotification(
ctx,
settingsImage!,
$t(`settings.title`),
$t(`settings.description`),
);
if (activeMenu.value) {
ctx.translate(0, 16);
ctx.drawImage(notificationImage!, 0, 0);
ctx.drawImage(activeMenu.value.image!, 2, 2);
ctx.font = "10px NDS10";
ctx.fillStyle = "#282828";
ctx.fillText(activeMenu.value.text, 52, 13);
ctx.fillStyle = "#fbfbfb";
ctx.fillText("TODO", 52, 36);
renderNotification(
ctx,
activeMenu.value.image!,
$t(`settings.${activeMenu.value.id}.title`),
$t(`settings.${activeMenu.value.id}.description`),
);
}
});