root
/
open-webui
mirror of https://github.com/open-webui/open-webui.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #15477 from itk-dev/feature/accessibility-user-settings 

Feat: accessibility user settings dropdown menu
This commit is contained in:
Tim Jaeryang Baek 2025-07-02 14:22:37 +04:00 committed by GitHub
parent 2c6227e4b6 225d20fb84
commit a3c9b46e9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/chat/Navbar.svelte
View File

@ -173,19 +173,19 @@
}
}}
>
<button
<div
class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label="User Menu"
>
<div class=" self-center">
<span class="sr-only">{$i18n.t('User menu')}</span>
<img
src={$user?.profile_image_url}
class="size-6 object-cover rounded-full"
alt="User profile"
alt=""
draggable="false"
/>
</div>
</button>
</div>
</UserMenu>
{/if}
</div>

1
src/lib/components/icons/ArchiveBox.svelte
View File

@ -9,6 +9,7 @@
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
>
<path

1
src/lib/components/icons/Code.svelte
View File

@ -7,6 +7,7 @@
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}

1
src/lib/components/icons/Map.svelte
View File

@ -7,6 +7,7 @@
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}

1
src/lib/components/icons/QuestionMarkCircle.svelte
View File

@ -9,6 +9,7 @@
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
>
<path

1
src/lib/components/icons/Settings.svelte
View File

@ -9,6 +9,7 @@
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
aria-hidden="true"
class={className}
>
<path

1
src/lib/components/icons/SignOut.svelte
View File

@ -8,6 +8,7 @@
fill-rule="evenodd"
d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z"
clip-rule="evenodd"
aria-hidden="true"
/>
<path
fill-rule="evenodd"

1
src/lib/components/icons/UserGroup.svelte
View File

@ -7,6 +7,7 @@
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}

28
src/lib/components/layout/Sidebar/UserMenu.svelte
View File

@ -72,7 +72,7 @@
align="start"
transition={(e) => fade(e, { duration: 100 })}
>
<button
<DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={async () => {
await showSettings.set(true);
@ -87,9 +87,9 @@
<Settings className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Settings')}</div>
</button>
</DropdownMenu.Item>
<button
<DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={() => {
dispatch('show', 'archived-chat');
@ -104,44 +104,40 @@
<ArchiveBox className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Archived Chats')}</div>
</button>
</DropdownMenu.Item>
{#if role === 'admin'}
<a
href="/playground"
<DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
on:click={() => {
show = false;
if ($mobile) {
showSidebar.set(false);
}
goto('/playground');
}}
rel="noopener noreferrer"
draggable="false"
>
<div class=" self-center mr-3">
<Code className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Playground')}</div>
</a>
</DropdownMenu.Item>
<a
href="/admin"
<DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
on:click={() => {
show = false;
if ($mobile) {
showSidebar.set(false);
}
goto('/admin');
}}
rel="noopener noreferrer"
draggable="false"
>
<div class=" self-center mr-3">
<UserGroup className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
</a>
</DropdownMenu.Item>
{/if}
{#if help}
@ -188,7 +184,7 @@
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
<button
<DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={async () => {
const res = await userSignOut();
@ -203,7 +199,7 @@
<SignOut className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
</button>
</DropdownMenu.Item>
{#if usage}
{#if usage?.user_ids?.length > 0}