Skip to content

Commit 3532d5f

Browse files
CPlusPatchCPlusPatch
committed
refactor: ♻️ Improve alt text editor UI
1 parent 4f8cbe7 commit 3532d5f

File tree

4 files changed

+109
-99
lines changed

4 files changed

+109
-99
lines changed

‎components/composer/autocomplete-suggestbox.vue

+14-18
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
<template>
2-
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
3-
enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
4-
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
5-
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
6-
left: `${x}px`,
7-
top: `${y}px`,
8-
width: `${width}px`,
9-
}" v-show="topSuggestions && topSuggestions.length > 0">
10-
<OverlayScrollbarsComponent class="w-full [&>div]:flex">
11-
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
12-
@click="emit('autocomplete', suggestion.key)"
13-
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
14-
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
15-
<slot :suggestion="suggestion"></slot>
16-
</div>
17-
</OverlayScrollbarsComponent>
18-
</div>
19-
</Transition>
2+
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
3+
left: `${x}px`,
4+
top: `${y}px`,
5+
width: `${width}px`,
6+
}" v-show="topSuggestions && topSuggestions.length > 0">
7+
<OverlayScrollbarsComponent class="w-full [&>div]:flex">
8+
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
9+
@click="emit('autocomplete', suggestion.key)"
10+
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
11+
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
12+
<slot :suggestion="suggestion"></slot>
13+
</div>
14+
</OverlayScrollbarsComponent>
15+
</div>
2016
</template>
2117

2218
<script lang="ts" setup>

‎components/composer/uploader/alt-text-editor.vue

+18-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
11
<template>
22
<Popover.Root :positioning="{
33
strategy: 'fixed',
4-
}" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)">
4+
}" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)" :close-on-interact-outside="false">
55
<Popover.Trigger aria-hidden="true"
66
class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
77
<iconify-icon icon="tabler:alt" width="none" class="size-4" />
88
</Popover.Trigger>
99
<Popover.Positioner class="!z-[100]">
1010
<Popover.Content
11-
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
11+
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 w-72 space-y-2">
12+
<div class="flex items-center justify-between px-1 pt-1 gap-x-1">
13+
<Popover.CloseTrigger :as-child="true">
14+
<Button theme="outline" aria-label="Close" class="text-xs !p-1">
15+
<iconify-icon icon="tabler:x" width="1rem" height="1rem" />
16+
</Button>
17+
</Popover.CloseTrigger>
18+
<h3 class="text-xs font-semibold">Alt Text</h3>
19+
<a :href="`https://www.w3.org/WAI/tutorials/images/decision-tree/`" target="_blank"
20+
class="text-xs text-gray-300 ml-auto mr-1" title="Learn more about alt text">
21+
<iconify-icon icon="tabler:info-circle" width="1rem" height="1rem" />
22+
</a>
23+
</div>
24+
<PreviewContent :file="fileData.file" class="rounded" />
1225
<textarea :disabled="fileData.uploading" @keydown.enter.stop v-model="fileData.alt_text"
13-
placeholder="Add alt text"
26+
placeholder="Describe this image for screen readers"
27+
rows="5"
1428
class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
1529
<Button theme="secondary" @click="$emit('update-alt-text', fileData.alt_text)" class="w-full"
1630
:loading="fileData.uploading">
@@ -24,6 +38,7 @@
2438
<script lang="ts" setup>
2539
import { Popover } from "@ark-ui/vue";
2640
import Button from "~/packages/ui/components/buttons/button.vue";
41+
import PreviewContent from "./preview-content.vue";
2742
import type { FileData } from "./uploader.vue";
2843
2944
const props = defineProps<{

‎components/composer/uploader/file-preview.vue

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div role="button" tabindex="0" :class="[
33
'size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden',
4-
fileData.uploading && 'animate-pulse'
54
]" @keydown.enter="$emit('remove', fileData.id)">
65
<PreviewContent :file="fileData.file" />
76
<FileShadowOverlay />

‎package.json

+77-77
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,79 @@
11
{
2-
"name": "versia-fe",
3-
"private": true,
4-
"type": "module",
5-
"license": "AGPL-3.0",
6-
"author": {
7-
"email": "[email protected]",
8-
"name": "CPlusPatch",
9-
"url": "https://cpluspatch.com"
10-
},
11-
"maintainers": [
12-
{
13-
"email": "[email protected]",
14-
"name": "CPlusPatch",
15-
"url": "https://cpluspatch.com"
16-
}
17-
],
18-
"repository": {
19-
"type": "git",
20-
"url": "git+https://github.com/versia-pub/frontend.git"
21-
},
22-
"scripts": {
23-
"build": "nuxt build",
24-
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bun --bun nuxt dev --https --https.cert config/versia-fe.localhost.pem --https.key config/versia-fe.localhost-key.pem --host versia-fe.localhost",
25-
"generate": "nuxt generate",
26-
"preview": "nuxt preview",
27-
"postinstall": "nuxt prepare",
28-
"lint": "bunx @biomejs/biome check .",
29-
"check": "bunx tsc -p ."
30-
},
31-
"dependencies": {
32-
"@ark-ui/vue": "^4.2.0",
33-
"@nuxt/fonts": "^0.10.2",
34-
"@tailwindcss/typography": "^0.5.15",
35-
"@vee-validate/nuxt": "^4.14.6",
36-
"@vee-validate/zod": "^4.14.6",
37-
"@versia/client": "^0.1.0",
38-
"@vite-pwa/nuxt": "^0.10.6",
39-
"@vueuse/core": "^11.2.0",
40-
"@vueuse/nuxt": "^11.2.0",
41-
"c12": "^2.0.1",
42-
"fastest-levenshtein": "^1.0.16",
43-
"html-to-text": "^9.0.5",
44-
"iconify-icon": "^2.1.0",
45-
"magic-regexp": "^0.8.0",
46-
"mitt": "^3.0.1",
47-
"nanoid": "^5.0.8",
48-
"nuxt": "^3.14.0",
49-
"nuxt-headlessui": "^1.2.0",
50-
"nuxt-security": "^2.0.0",
51-
"nuxt-shiki": "^0.3.0",
52-
"overlayscrollbars": "^2.10.0",
53-
"overlayscrollbars-vue": "^0.5.9",
54-
"shiki": "^1.22.2",
55-
"vue": "^3.5.12",
56-
"vue-router": "^4.4.5",
57-
"zod": "^3.23.8"
58-
},
59-
"devDependencies": {
60-
"@biomejs/biome": "^1.9.4",
61-
"@nuxtjs/seo": "^2.0.0-rc.23",
62-
"@nuxtjs/tailwindcss": "^6.12.2",
63-
"@tailwindcss/forms": "^0.5.9",
64-
"@types/html-to-text": "^9.0.4",
65-
"@vue-email/nuxt": "^0.8.19",
66-
"typescript": "^5.6.3",
67-
"vue-tsc": "^2.1.10"
68-
},
69-
"trustedDependencies": [
70-
"@biomejs/biome",
71-
"@fortawesome/fontawesome-common-types",
72-
"@fortawesome/free-regular-svg-icons",
73-
"@fortawesome/free-solid-svg-icons",
74-
"@parcel/watcher",
75-
"esbuild",
76-
"json-editor-vue",
77-
"vue-demi"
78-
]
2+
"name": "versia-fe",
3+
"private": true,
4+
"type": "module",
5+
"license": "AGPL-3.0",
6+
"author": {
7+
"email": "[email protected]",
8+
"name": "CPlusPatch",
9+
"url": "https://cpluspatch.com"
10+
},
11+
"maintainers": [
12+
{
13+
"email": "[email protected]",
14+
"name": "CPlusPatch",
15+
"url": "https://cpluspatch.com"
16+
}
17+
],
18+
"repository": {
19+
"type": "git",
20+
"url": "git+https://github.com/versia-pub/frontend.git"
21+
},
22+
"scripts": {
23+
"build": "nuxt build",
24+
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bun --bun nuxt dev --https --https.cert config/versia-fe.localhost.pem --https.key config/versia-fe.localhost-key.pem --host versia-fe.localhost",
25+
"generate": "nuxt generate",
26+
"preview": "nuxt preview",
27+
"postinstall": "nuxt prepare",
28+
"lint": "bunx @biomejs/biome check .",
29+
"check": "bunx tsc -p ."
30+
},
31+
"dependencies": {
32+
"@ark-ui/vue": "^4.2.0",
33+
"@nuxt/fonts": "^0.10.2",
34+
"@tailwindcss/typography": "^0.5.15",
35+
"@vee-validate/nuxt": "^4.14.6",
36+
"@vee-validate/zod": "^4.14.6",
37+
"@versia/client": "^0.1.0",
38+
"@vite-pwa/nuxt": "^0.10.6",
39+
"@vueuse/core": "^11.2.0",
40+
"@vueuse/nuxt": "^11.2.0",
41+
"c12": "^2.0.1",
42+
"fastest-levenshtein": "^1.0.16",
43+
"html-to-text": "^9.0.5",
44+
"iconify-icon": "^2.1.0",
45+
"magic-regexp": "^0.8.0",
46+
"mitt": "^3.0.1",
47+
"nanoid": "^5.0.8",
48+
"nuxt": "^3.14.0",
49+
"nuxt-headlessui": "^1.2.0",
50+
"nuxt-security": "^2.0.0",
51+
"nuxt-shiki": "^0.3.0",
52+
"overlayscrollbars": "^2.10.0",
53+
"overlayscrollbars-vue": "^0.5.9",
54+
"shiki": "^1.22.2",
55+
"vue": "^3.5.12",
56+
"vue-router": "^4.4.5",
57+
"zod": "^3.23.8"
58+
},
59+
"devDependencies": {
60+
"@biomejs/biome": "^1.9.4",
61+
"@nuxtjs/seo": "^2.0.0-rc.23",
62+
"@nuxtjs/tailwindcss": "^6.12.2",
63+
"@tailwindcss/forms": "^0.5.9",
64+
"@types/html-to-text": "^9.0.4",
65+
"@vue-email/nuxt": "^0.8.19",
66+
"typescript": "^5.6.3",
67+
"vue-tsc": "^2.1.10"
68+
},
69+
"trustedDependencies": [
70+
"@biomejs/biome",
71+
"@fortawesome/fontawesome-common-types",
72+
"@fortawesome/free-regular-svg-icons",
73+
"@fortawesome/free-solid-svg-icons",
74+
"@parcel/watcher",
75+
"esbuild",
76+
"json-editor-vue",
77+
"vue-demi"
78+
]
7979
}

0 commit comments

Comments
 (0)