Skip to content

Commit

Permalink
refactor: ♻️ Improve alt text editor UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@CPlusPatch
CPlusPatch committed Nov 4, 2024
1 parent 4f8cbe7 commit 3532d5f
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 99 deletions.
32 changes: 14 additions & 18 deletions components/composer/autocomplete-suggestbox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
<template>
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
left: `${x}px`,
top: `${y}px`,
width: `${width}px`,
}" v-show="topSuggestions && topSuggestions.length > 0">
<OverlayScrollbarsComponent class="w-full [&>div]:flex">
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
@click="emit('autocomplete', suggestion.key)"
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
<slot :suggestion="suggestion"></slot>
</div>
</OverlayScrollbarsComponent>
</div>
</Transition>
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
left: `${x}px`,
top: `${y}px`,
width: `${width}px`,
}" v-show="topSuggestions && topSuggestions.length > 0">
<OverlayScrollbarsComponent class="w-full [&>div]:flex">
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
@click="emit('autocomplete', suggestion.key)"
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
<slot :suggestion="suggestion"></slot>
</div>
</OverlayScrollbarsComponent>
</div>
</template>

<script lang="ts" setup>
Expand Down
21 changes: 18 additions & 3 deletions components/composer/uploader/alt-text-editor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,30 @@
<template>
<Popover.Root :positioning="{
strategy: 'fixed',
}" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)">
}" @update:open="o => !o && $emit('update-alt-text', fileData.alt_text)" :close-on-interact-outside="false">
<Popover.Trigger aria-hidden="true"
class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
<iconify-icon icon="tabler:alt" width="none" class="size-4" />
</Popover.Trigger>
<Popover.Positioner class="!z-[100]">
<Popover.Content
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 w-72 space-y-2">
<div class="flex items-center justify-between px-1 pt-1 gap-x-1">
<Popover.CloseTrigger :as-child="true">
<Button theme="outline" aria-label="Close" class="text-xs !p-1">
<iconify-icon icon="tabler:x" width="1rem" height="1rem" />
</Button>
</Popover.CloseTrigger>
<h3 class="text-xs font-semibold">Alt Text</h3>
<a :href="`https://www.w3.org/WAI/tutorials/images/decision-tree/`" target="_blank"
class="text-xs text-gray-300 ml-auto mr-1" title="Learn more about alt text">
<iconify-icon icon="tabler:info-circle" width="1rem" height="1rem" />
</a>
</div>
<PreviewContent :file="fileData.file" class="rounded" />
<textarea :disabled="fileData.uploading" @keydown.enter.stop v-model="fileData.alt_text"
placeholder="Add alt text"
placeholder="Describe this image for screen readers"
rows="5"
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" />
<Button theme="secondary" @click="$emit('update-alt-text', fileData.alt_text)" class="w-full"
:loading="fileData.uploading">
Expand All @@ -24,6 +38,7 @@
<script lang="ts" setup>
import { Popover } from "@ark-ui/vue";
import Button from "~/packages/ui/components/buttons/button.vue";
import PreviewContent from "./preview-content.vue";
import type { FileData } from "./uploader.vue";
const props = defineProps<{
Expand Down
1 change: 0 additions & 1 deletion components/composer/uploader/file-preview.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div role="button" tabindex="0" :class="[
'size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden',
fileData.uploading && 'animate-pulse'
]" @keydown.enter="$emit('remove', fileData.id)">
<PreviewContent :file="fileData.file" />
<FileShadowOverlay />
Expand Down
154 changes: 77 additions & 77 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,79 @@
{
"name": "versia-fe",
"private": true,
"type": "module",
"license": "AGPL-3.0",
"author": {
"email": "contact@cpluspatch.com",
"name": "CPlusPatch",
"url": "https://cpluspatch.com"
},
"maintainers": [
{
"email": "contact@cpluspatch.com",
"name": "CPlusPatch",
"url": "https://cpluspatch.com"
}
],
"repository": {
"type": "git",
"url": "git+https://github.com/versia-pub/frontend.git"
},
"scripts": {
"build": "nuxt build",
"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",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "bunx @biomejs/biome check .",
"check": "bunx tsc -p ."
},
"dependencies": {
"@ark-ui/vue": "^4.2.0",
"@nuxt/fonts": "^0.10.2",
"@tailwindcss/typography": "^0.5.15",
"@vee-validate/nuxt": "^4.14.6",
"@vee-validate/zod": "^4.14.6",
"@versia/client": "^0.1.0",
"@vite-pwa/nuxt": "^0.10.6",
"@vueuse/core": "^11.2.0",
"@vueuse/nuxt": "^11.2.0",
"c12": "^2.0.1",
"fastest-levenshtein": "^1.0.16",
"html-to-text": "^9.0.5",
"iconify-icon": "^2.1.0",
"magic-regexp": "^0.8.0",
"mitt": "^3.0.1",
"nanoid": "^5.0.8",
"nuxt": "^3.14.0",
"nuxt-headlessui": "^1.2.0",
"nuxt-security": "^2.0.0",
"nuxt-shiki": "^0.3.0",
"overlayscrollbars": "^2.10.0",
"overlayscrollbars-vue": "^0.5.9",
"shiki": "^1.22.2",
"vue": "^3.5.12",
"vue-router": "^4.4.5",
"zod": "^3.23.8"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@nuxtjs/seo": "^2.0.0-rc.23",
"@nuxtjs/tailwindcss": "^6.12.2",
"@tailwindcss/forms": "^0.5.9",
"@types/html-to-text": "^9.0.4",
"@vue-email/nuxt": "^0.8.19",
"typescript": "^5.6.3",
"vue-tsc": "^2.1.10"
},
"trustedDependencies": [
"@biomejs/biome",
"@fortawesome/fontawesome-common-types",
"@fortawesome/free-regular-svg-icons",
"@fortawesome/free-solid-svg-icons",
"@parcel/watcher",
"esbuild",
"json-editor-vue",
"vue-demi"
]
"name": "versia-fe",
"private": true,
"type": "module",
"license": "AGPL-3.0",
"author": {
"email": "contact@cpluspatch.com",
"name": "CPlusPatch",
"url": "https://cpluspatch.com"
},
"maintainers": [
{
"email": "contact@cpluspatch.com",
"name": "CPlusPatch",
"url": "https://cpluspatch.com"
}
],
"repository": {
"type": "git",
"url": "git+https://github.com/versia-pub/frontend.git"
},
"scripts": {
"build": "nuxt build",
"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",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "bunx @biomejs/biome check .",
"check": "bunx tsc -p ."
},
"dependencies": {
"@ark-ui/vue": "^4.2.0",
"@nuxt/fonts": "^0.10.2",
"@tailwindcss/typography": "^0.5.15",
"@vee-validate/nuxt": "^4.14.6",
"@vee-validate/zod": "^4.14.6",
"@versia/client": "^0.1.0",
"@vite-pwa/nuxt": "^0.10.6",
"@vueuse/core": "^11.2.0",
"@vueuse/nuxt": "^11.2.0",
"c12": "^2.0.1",
"fastest-levenshtein": "^1.0.16",
"html-to-text": "^9.0.5",
"iconify-icon": "^2.1.0",
"magic-regexp": "^0.8.0",
"mitt": "^3.0.1",
"nanoid": "^5.0.8",
"nuxt": "^3.14.0",
"nuxt-headlessui": "^1.2.0",
"nuxt-security": "^2.0.0",
"nuxt-shiki": "^0.3.0",
"overlayscrollbars": "^2.10.0",
"overlayscrollbars-vue": "^0.5.9",
"shiki": "^1.22.2",
"vue": "^3.5.12",
"vue-router": "^4.4.5",
"zod": "^3.23.8"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@nuxtjs/seo": "^2.0.0-rc.23",
"@nuxtjs/tailwindcss": "^6.12.2",
"@tailwindcss/forms": "^0.5.9",
"@types/html-to-text": "^9.0.4",
"@vue-email/nuxt": "^0.8.19",
"typescript": "^5.6.3",
"vue-tsc": "^2.1.10"
},
"trustedDependencies": [
"@biomejs/biome",
"@fortawesome/fontawesome-common-types",
"@fortawesome/free-regular-svg-icons",
"@fortawesome/free-solid-svg-icons",
"@parcel/watcher",
"esbuild",
"json-editor-vue",
"vue-demi"
]
}

0 comments on commit 3532d5f

Please sign in to comment.