adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve focus states and keyboard navigation for organization switcher and user settings dropdown

Browse Source
This commit is contained in:
Gregor Vostrak
2025-09-30 16:45:48 +02:00
parent d2f75cca6e
commit 7584e59d0b
2 changed files with 14 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/Components/OrganizationSwitcher.vue
View File

@@ -40,10 +40,10 @@ const switchToTeam = (organization: Organization) => {
<template>
<DropdownMenu v-if="page.props.jetstream.hasTeamFeatures">
<DropdownMenuTrigger class="w-full text-left">
<div
data-testid="organization_switcher"
class="flex hover:bg-white/10 cursor-pointer transition pl-2 py-1 rounded w-full items-center justify-between">
<DropdownMenuTrigger
class="flex w-full text-left hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition pl-2 py-1 rounded w-full items-center justify-between"
as-child>
<button data-testid="organization_switcher">
<div class="flex flex-1 space-x-2 items-center w-[calc(100%-30px)]">
<div
class="rounded bg-blue-900 font-medium text-xs flex-shrink-0 text-white w-5 h-5 flex items-center justify-center">
@@ -58,7 +58,7 @@ const switchToTeam = (organization: Organization) => {
<ChevronDownIcon class="w-4 sm:w-full mt-[1px]"></ChevronDownIcon>
</div>
</div>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">

43
resources/js/Components/UserSettingsIcon.vue
View File

@@ -48,41 +48,16 @@ const openFeedback = () => {
<template>
<div class="relative">
<DropdownMenu>
<DropdownMenuTrigger>
<template v-if="page.props.jetstream.managesProfilePhotos">
<button
data-testid="current_user_button"
class="flex text-sm border-2 outline-none border-transparent rounded-full focus:border-gray-300 transition">
<img
class="h-8 w-8 rounded-full object-cover"
:src="page.props.auth.user.profile_photo_url"
:alt="page.props.auth.user.name" />
</button>
</template>
<template v-else>
<span class="inline-flex rounded-md">
<button
type="button"
class="inline-flex outline-none items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
{{ page.props.auth.user.name }}
<svg
class="ms-2 -me-0.5 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
</span>
</template>
<DropdownMenuTrigger
class="flex text-sm border-2 outline-none border-transparent rounded-full focus-visible:ring-2 focus-visible:ring-ring transition"
as-child>
<button data-testid="current_user_button">
<img
class="h-8 w-8 rounded-full object-cover"
:src="page.props.auth.user.profile_photo_url"
:alt="page.props.auth.user.name" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" class="min-w-40">
<DropdownMenuLabel>Manage Account</DropdownMenuLabel>