versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 💄 Improve appearance of dropdown menus and settings pages

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-02-09 19:50:57 +01:00
parent 9ba59cfd21
commit 7e9ccbc932
No known key found for this signature in database
13 changed files with 68 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/composer/file-preview.vue
View file

@ -14,16 +14,16 @@
<DropdownMenuSeparator />
<DropdownMenuItem @click="editName">
<TextCursorInput class="mr-2 size-4" />
<TextCursorInput />
<span>Rename</span>
</DropdownMenuItem>
<DropdownMenuItem @click="editCaption">
<Captions class="mr-2 size-4" />
<Captions />
<span>Add caption</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="emit('remove')">
<Delete class="mr-2 size-4" />
<Delete />
<span>Remove</span>
</DropdownMenuItem>
</DropdownMenuContent>

20
components/notes/menu.vue
View file

@ -87,52 +87,52 @@ const _delete = async () => {
<DropdownMenuContent class="min-w-56">
<DropdownMenuGroup>
<DropdownMenuItem v-if="authorIsMe" as="button" @click="emit('edit')">
<Pencil class="mr-2 size-4" />
<Pencil />
{{ m.front_lime_grizzly_persist() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="copyText(apiNoteString)">
<Code class="mr-2 size-4" />
<Code />
{{ m.yummy_moving_scallop_sail() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="copyText(noteId)">
<Hash class="mr-2 size-4" />
<Hash />
{{ m.sunny_zany_jellyfish_pop() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem as="button" @click="copyText(url)">
<Link class="mr-2 size-4" />
<Link />
{{ m.ago_new_pelican_drip() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" v-if="isRemote" @click="copyText(remoteUrl)">
<Link class="mr-2 size-4" />
<Link />
{{ m.solid_witty_zebra_walk() }}
</DropdownMenuItem>
<DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="remoteUrl">
<ExternalLink class="mr-2 size-4" />
<ExternalLink />
{{ m.active_trite_lark_inspire() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator v-if="authorIsMe" />
<DropdownMenuGroup v-if="authorIsMe">
<DropdownMenuItem as="button" :disabled="true">
<Delete class="mr-2 size-4" />
<Delete />
{{ m.real_green_clownfish_pet() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="_delete">
<Trash class="mr-2 size-4" />
<Trash />
{{ m.tense_quick_cod_favor() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator v-if="loggedIn && !authorIsMe" />
<DropdownMenuGroup v-if="loggedIn && !authorIsMe">
<DropdownMenuItem as="button" :disabled="true">
<Flag class="mr-2 size-4" />
<Flag />
{{ m.great_few_jaguar_rise() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="blockUser(authorId)">
<Ban class="mr-2 size-4" />
<Ban />
{{ m.misty_soft_sparrow_vent() }}
</DropdownMenuItem>
</DropdownMenuGroup>

2
components/preferences/code.vue
View file

@ -1,5 +1,5 @@
<template>
<Collapsible :as="Card" class="grid items-center p-6 gap-4" v-slot="{ open }">
<Collapsible :as="Card" class="grid items-center px-6 py-4 gap-4" v-slot="{ open }">
<div class="grid grid-cols-[1fr,auto] items-center gap-4">
<CardHeader class="space-y-0.5 p-0">
<CardTitle class="text-base">

6
components/preferences/emojis/emoji.vue
View file

@ -23,16 +23,16 @@
</Card>
<DropdownMenuContent class="min-w-48">
<DropdownMenuItem @click="editName">
<TextCursorInput class="mr-2 size-4" />
<TextCursorInput />
{{ m.cuddly_such_swallow_hush() }}
</DropdownMenuItem>
<!-- <DropdownMenuItem @click="editCaption">
<Captions class="mr-2 size-4" />
<Captions />
<span>Add caption</span>
</DropdownMenuItem>
<DropdownMenuSeparator /> -->
<DropdownMenuItem @click="_delete">
<Delete class="mr-2 size-4" />
<Delete />
{{ m.tense_quick_cod_favor() }}
</DropdownMenuItem>
</DropdownMenuContent>

2
components/preferences/select.vue
View file

@ -1,5 +1,5 @@
<template>
<Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
<Card class="grid grid-cols-[1fr,auto] items-center px-6 py-4 gap-2">
<CardHeader class="space-y-0.5 p-0">
<CardTitle class="text-base">
{{ setting.title() }}

2
components/preferences/string.vue
View file

@ -1,5 +1,5 @@
<template>
<Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center p-6 gap-4">
<Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center px-6 py-4 gap-4">
<CardHeader class="space-y-0.5 p-0">
<CardTitle class="text-base">
{{ setting.title() }}

2
components/preferences/switch.vue
View file

@ -1,5 +1,5 @@
<template>
<Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
<Card class="grid grid-cols-[1fr,auto] items-center px-6 py-4 gap-2">
<CardHeader class="space-y-0.5 p-0">
<CardTitle class="text-base">
{{ setting.title() }}

20
components/profiles/profile-actions.vue
View file

@ -6,55 +6,55 @@
<DropdownMenuContent class="min-w-56">
<DropdownMenuGroup>
<DropdownMenuItem as="button" @click="copyText(account.username)">
<AtSign class="mr-2 size-4" />
<AtSign />
{{ m.cool_dark_tapir_belong() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="copyText(JSON.stringify(account, null, 4))">
<Code class="mr-2 size-4" />
<Code />
{{ m.yummy_moving_scallop_sail() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="copyText(account.id)">
<Hash class="mr-2 size-4" />
<Hash />
{{ m.sunny_zany_jellyfish_pop() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem as="button" @click="copyText(url)">
<Link class="mr-2 size-4" />
<Link />
{{ m.ago_new_pelican_drip() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="copyText(account.url)">
<Link class="mr-2 size-4" />
<Link />
{{ m.solid_witty_zebra_walk() }}
</DropdownMenuItem>
<DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="account.url">
<ExternalLink class="mr-2 size-4" />
<ExternalLink />
{{ m.active_trite_lark_inspire() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
<DropdownMenuGroup v-if="isLoggedIn && !isMe">
<DropdownMenuItem as="button" @click="muteUser(account.id)">
<VolumeX class="mr-2 size-4" />
<VolumeX />
{{ m.spare_wild_mole_intend() }}
</DropdownMenuItem>
<DropdownMenuItem as="button" @click="blockUser(account.id)">
<Ban class="mr-2 size-4" />
<Ban />
{{ m.misty_soft_sparrow_vent() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator v-if="isRemote" />
<DropdownMenuGroup v-if="isRemote">
<DropdownMenuItem as="button" @click="refresh">
<RefreshCw class="mr-2 size-4" />
<RefreshCw />
{{ m.slow_chunky_chipmunk_hush() }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
<DropdownMenuGroup v-if="isLoggedIn && !isMe">
<DropdownMenuItem as="button" :disabled="true">
<Flag class="mr-2 size-4" />
<Flag />
{{ m.great_few_jaguar_rise() }}
</DropdownMenuItem>
</DropdownMenuGroup>

44
components/sidebars/theme-switcher.vue
View file

@ -1,44 +0,0 @@
<script setup lang="ts">
import { Moon, Sun, Wrench } from "lucide-vue-next";
import { Button } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
const colorMode = useColorMode();
const themeNames = {
light: "Light",
dark: "Dark",
system: "System",
} as Record<string, string>;
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline" class="w-full justify-start">
<Sun class="size-[1.2rem] scale-100 transition-all dark:scale-0 dark:hidden inline" />
<Moon class="size-[1.2rem] scale-0 transition-all dark:scale-100 hidden dark:inline" />
{{ themeNames[colorMode.preference] }}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" >
<DropdownMenuItem @click="colorMode.preference = 'light'">
<Sun class="size-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'dark'">
<Moon class="size-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'system'">
<Wrench class="size-4 mr-2" />
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>

25
components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View file

@ -25,18 +25,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuCheckboxItem
v-bind="forwarded"
:class=" cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Check class="size-4" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem v-bind="forwarded" :class="cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)">
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Check class="!mr-0" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuCheckboxItem>
</template>

17
components/ui/dropdown-menu/DropdownMenuItem.vue
View file

@ -21,14 +21,11 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DropdownMenuItem
v-bind="forwardedProps"
:class="cn(
'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 w-full',
inset && 'pl-8',
props.class,
)"
>
<slot />
</DropdownMenuItem>
<DropdownMenuItem v-bind="forwardedProps" :class="cn(
'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:mr-0.5 w-full',
inset && 'pl-8',
props.class,
)">
<slot />
</DropdownMenuItem>
</template>

25
components/ui/dropdown-menu/DropdownMenuRadioItem.vue
View file

@ -26,18 +26,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<DropdownMenuRadioItem
v-bind="forwarded"
:class="cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Circle class="h-2 w-2 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuRadioItem>
<DropdownMenuRadioItem v-bind="forwarded" :class="cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)">
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Circle class="size-2 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />
</DropdownMenuRadioItem>
</template>

5
pages/preferences/[page].vue
View file

@ -1,9 +1,10 @@
<template>
<div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full">
<!-- Add padding at bottom to prevent hiding some content by the bottom navbar -->
<div class="md:px-8 px-4 py-4 pb-20 max-w-7xl mx-auto w-full">
<h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
{{ page }}
</h1>
<div class="grid grid-cols-1 gap-4 mt-6">
<div class="grid grid-cols-1 gap-2 mt-6">
<template v-for="[id, setting] of settingEntries">
<SwitchPreference v-if="setting.type === SettingType.Boolean" :setting="(setting as BooleanSetting)" @update:setting="updateSetting(id, setting)" />
<SelectPreference v-else-if="setting.type === SettingType.Enum" :setting="(setting as EnumSetting)" @update:setting="updateSetting(id, setting)" />