Skip to content

Commit 724f3a9

Browse files
notwindstonenotwindstone
committed
feat: implement initial home page UI
1 parent 8dabfdf commit 724f3a9

File tree

10 files changed

+101
-43
lines changed

10 files changed

+101
-43
lines changed

‎src/components/general/base/MaterialRipple.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ import { Ripple } from "m3ripple-vue";
33
44
import { ApplicationNamespace } from "@/constants/application.ts";
55
6-
const { id, label, disabled } = defineProps<{
6+
const { id, label, disabled, colors } = defineProps<{
77
"id" ?: string;
88
"label" ?: string;
99
"disabled"?: boolean;
10+
"colors" ?: {
11+
"ripple" ?: string;
12+
"sparkles"?: `${number} ${number} ${number}`;
13+
};
1014
}>();
1115
12-
const colors = {
16+
const defaultColors = {
1317
"ripple" : window[ApplicationNamespace].variables.rippleColor,
1418
"sparkles": window[ApplicationNamespace].variables.sparklesColorRGB,
1519
};
@@ -21,7 +25,7 @@ const colors = {
2125
:aria-label="label"
2226
:aria-hidden="true"
2327
:class="[disabled ? 'pointer-events-none' : '']"
24-
:ripple-color="colors.ripple"
25-
:sparkles-color-r-g-b="colors.sparkles"
28+
:ripple-color="colors?.ripple ?? defaultColors.ripple"
29+
:sparkles-color-r-g-b="colors?.sparkles ?? defaultColors.sparkles"
2630
/>
2731
</template>

‎src/components/general/layout/ContextMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const globalStates = inject<ContextGlobalStatesType>(GlobalStatesContextKey);
1919
<div
2020
v-show="opened"
2121
id="__context_menu__wrapper"
22-
class="__context_menu__wrapper __context-menu-disable absolute z-50000 flex flex-col select-none gap-1 rounded-md bg-neutral-800 py-1 text-white drop-shadow-lg"
22+
class="__context_menu__wrapper __context-menu-disable absolute z-50000 flex flex-col gap-1 rounded-md bg-neutral-800 py-1 text-white drop-shadow-lg"
2323
:style="{ left: `${x + 4}px`, top: `${y + 4}px` }"
2424
>
2525
<button

‎src/components/general/layout/Router.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ const { page } = defineProps<{
99
}>();
1010
1111
const __urls: Record<string, string> = {
12-
"home" : "https://i.redd.it/5e6h5ml67x961.jpg",
12+
"home" : "https://motionbgs.com/media/2787/morizuki-suzumi-blue-archive.jpg",
1313
"library" : "https://moewalls.com/wp-content/uploads/2023/01/arona-stargazing-blue-archive-thumb.jpg",
14-
"settings" : "https://motionbgs.com/media/2787/morizuki-suzumi-blue-archive.jpg",
14+
"settings" : "https://i.redd.it/5e6h5ml67x961.jpg",
1515
"add-instance": "https://i.pinimg.com/736x/c2/1d/a7/c21da7189d927e4727e5697c22005f3a.jpg",
1616
};
1717

‎src/components/general/layout/Sidebar.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { inject, ref, shallowRef } from "vue";
44
import Image from "@/components/general/base/Image.vue";
55
import MaterialRipple from "@/components/general/base/MaterialRipple.vue";
66
import { GlobalStatesContextKey } from "@/constants/application.ts";
7-
import iochiMariCat from "@/resources/iochi_mari_cat.webp";
87
import type {
98
ContextGlobalStatesType,
109
} from "@/types/application/global-states.type.ts";
@@ -90,7 +89,7 @@ function handleButtonAction(action: () => void): void {
9089
<template>
9190
<div
9291
id="__sidebar__hovering-tooltip"
93-
class="pointer-events-none absolute left-20 top-2 z-49000 w-fit transform-gpu select-none rounded-md bg-neutral-950 p-2 leading-none transition-[transform,opacity]"
92+
class="pointer-events-none absolute left-20 top-2 z-49000 w-fit transform-gpu rounded-md bg-neutral-950 p-2 leading-none transition-[transform,opacity]"
9493
:style="{
9594
transform: `translateY(${tooltip.top}px)`,
9695
opacity : tooltip.show ? 1 : 0,
@@ -151,11 +150,5 @@ function handleButtonAction(action: () => void): void {
151150
></div>
152151
</template>
153152
</TransitionGroup>
154-
<Image
155-
:src="iochiMariCat"
156-
id="__sidebar__entry-iochi-mari-cat"
157-
alt="Iochi Mari, a character from Blue Archive"
158-
class-names="fixed bottom-2 left-2 size-16 rounded-md overflow-hidden opacity-20 pointer-events-none"
159-
/>
160153
</div>
161154
</template>

‎src/components/home/Home.vue‎

Lines changed: 78 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,89 @@
11
<script setup lang="ts">
2+
import Image from "@/components/general/base/Image.vue";
3+
import MaterialRipple from "@/components/general/base/MaterialRipple.vue";
24
import PageWrapper from "@/components/general/layout/PageWrapper.vue";
3-
import GlobalStateHelpers from "@/lib/global-state-helpers";
4-
5-
async function download(): Promise<void> {}
6-
async function run(): Promise<void> {}
75
</script>
86

97
<template>
108
<PageWrapper>
11-
<div id="__home-page__wrapper" class="flex flex-col justify-start gap-2 opacity-50">
12-
<div id="__home-page__title w-fit">
13-
Home
9+
<div id="__home-page__wrapper" class="h-full flex flex-col justify-between gap-2">
10+
<div
11+
id="__home-page__header-wrapper"
12+
class="flex flex-col gap-2 px-2 pt-6"
13+
>
14+
<p
15+
id="__home-page__header-title"
16+
class="text-3xl"
17+
>
18+
В большой семье
19+
</p>
20+
<p
21+
id="__home-page__header-subtitle"
22+
class="text-lg text-neutral-300"
23+
>
24+
Еблом не щёлкают.
25+
</p>
1426
</div>
15-
<button id="__home-page__navigate-button" class="w-fit" @click="() => GlobalStateHelpers.Pages.navigate('library')">
16-
Navigate to Library
17-
</button>
18-
<button id="__home-page__download-button" class="w-fit" @click="download">uh, download</button>
19-
<button id="__home-page__run-button" class="w-fit" @click="run">run</button>
2027
<div
21-
v-for="(_, index) in Array.from({ length: 50 })"
22-
:key="index"
23-
:id="`__home-page__element-${index}`"
24-
class="text-2xl"
25-
>d{{ index }}</div>
28+
id="__home-page__content"
29+
class="flex flex-nowrap items-end justify-between gap-2 pr-2 pb-2"
30+
>
31+
<div
32+
class="flex flex-col items-stretch gap-0"
33+
>
34+
<button
35+
class="relative p-2 rounded-md flex flex-nowrap gap-2 items-center"
36+
>
37+
<Image
38+
id="__"
39+
class-names="rounded-md size-12 transition-none p-1"
40+
src="https://media.forgecdn.net/avatars/thumbnails/286/772/64/64/637305737753885398.png"
41+
alt="Fabulously optimized"
42+
/>
43+
<span class="flex flex-col items-start pr-1">
44+
<p class="font-medium">
45+
Fabulously Optimized
46+
</p>
47+
<p class="text-neutral-400">
48+
1.21.10
49+
</p>
50+
</span>
51+
<MaterialRipple />
52+
</button>
53+
<button
54+
class="relative p-2 rounded-md flex flex-nowrap gap-2 items-center"
55+
>
56+
<span class="size-12 shrink-0 grid place-items-center">
57+
<span class="block size-8 i-lucide-clock" />
58+
</span>
59+
<span class="flex flex-col items-start pr-1">
60+
<p class="font-medium">
61+
Playtime
62+
</p>
63+
<p class="text-neutral-400 text-sm">
64+
73 hours, 8 minutes, 56 seconds
65+
</p>
66+
</span>
67+
<MaterialRipple />
68+
</button>
69+
</div>
70+
<div class="flex flex-nowrap gap-1 p-2">
71+
<button class="relative px-4 py-2 w-fit rounded-l-md rounded-r-sm bg-white text-black">
72+
<span class="block">
73+
Launch
74+
</span>
75+
<MaterialRipple
76+
:colors="{ 'ripple': '#00000033', 'sparkles': '0 0 0' }"
77+
/>
78+
</button>
79+
<button class="relative w-fit px-1 py-2 rounded-l-sm rounded-r-md bg-white text-black">
80+
<span class="block i-lucide-chevron-down" />
81+
<MaterialRipple
82+
:colors="{ 'ripple': '#00000033', 'sparkles': '0 0 0' }"
83+
/>
84+
</button>
85+
</div>
86+
</div>
2687
</div>
2788
</PageWrapper>
2889
</template>

‎src/components/logging/LogViewer.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,10 +213,10 @@ onMounted(async () => {
213213
>
214214
<div id="__log-viewer__information-wrapper" class="w-full flex shrink-0 flex-nowrap items-start justify-between gap-4 pb-2">
215215
<div id="__log-viewer__information-text-wrapper" class="flex flex-col gap-2">
216-
<p id="__log-viewer__information-title" class="select-none text-xl font-medium leading-none">
216+
<p id="__log-viewer__information-title" class="text-xl font-medium leading-none">
217217
Logs
218218
</p>
219-
<p id="__log-viewer__information-subtitle" class="select-none text-neutral-300">
219+
<p id="__log-viewer__information-subtitle" class="text-neutral-300">
220220
<span id="__log-viewer__information-subtitle-static">View Kaede logs</span>
221221
<span
222222
v-if="fileData?.size !== undefined && fileData?.time !== undefined"
@@ -267,7 +267,7 @@ onMounted(async () => {
267267
:nodes="filteredLogs ?? logs"
268268
:id="globalStates?.logs?.lineBreaks ? '' : '__virtualized-list-logs'"
269269
ref="virtualList"
270-
class="w-full select-none"
270+
class="w-full"
271271
>
272272
<template #cell="slotProps">
273273
<LogEntry

‎src/components/logging/NonVirtualizedLogs.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ defineExpose({ "nonVirtualizedLogsTarget": target });
1919
<div
2020
:id="horizontalScroll ? '__non-virtualized-list-logs' : ''"
2121
ref="target"
22-
class="h-[calc(100vh-248px)] w-fit"
22+
class="h-[calc(100vh-248px)] w-fit select-text"
2323
>
2424
<template
2525
v-for="(entry, index) in logs"

‎src/components/logging/controls/LogControls.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ useEventListener("keydown", (event: KeyboardEvent) => {
193193
</script>
194194

195195
<template>
196-
<div id="__log-controls__wrapper" class="h-18 w-full flex flex-col select-none gap-2">
196+
<div id="__log-controls__wrapper" class="h-18 w-full flex flex-col gap-2">
197197
<div id="__log-controls__first-row" class="h-8 w-full flex flex-nowrap gap-2">
198198
<LogSearcher
199199
v-if="shouldVirtualize"

‎src/components/logging/lines/LogEntry.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const isInRange = computed((): boolean => {
7878
'flex shrink-0 flex-nowrap gap-1 px-1',
7979
]"
8080
>
81-
<p :id="`__log-entry__index-${index}`" class="__log-entry__index w-14 shrink-0 select-none text-center text-neutral-400">
81+
<p :id="`__log-entry__index-${index}`" class="__log-entry__index w-14 shrink-0 text-center text-neutral-400">
8282
{{ index }}
8383
</p>
8484
<div :id="`__log-entry__text-wrapper-${index}`" class="__log-entry__text-wrapper break-all">

‎src/globals.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ html {
1010
color-scheme: dark;
1111
}
1212

13+
#app {
14+
/* Text selections are going to be whitelisted */
15+
user-select: none;
16+
}
17+
1318
.text-justify-last {
1419
text-align-last: justify;
1520
}
@@ -34,11 +39,6 @@ input::-webkit-inner-spin-button {
3439
margin: 0;
3540
}
3641

37-
/* These elements should not allow text selection */
38-
img, button, button span {
39-
user-select: none;
40-
}
41-
4242
/* Show a custom tooltip on button hover */
4343
button[data-tooltip] {
4444
position: relative;

0 commit comments

Comments
 (0)