ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-13 01:02:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

a11y

Browse Source 
Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
2026-08-11 01:25:20 -06:00
parent 865c80c160
commit c8f8fa451a
29 changed files with 103 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+10
View File
@@ -64,6 +64,16 @@ code {
@apply bg-gray-50/40 dark:bg-gray-800/40;
}
/* visibility:hidden is not focusable, so a keyboard user could never reveal these */
.hover-reveal {
@apply opacity-0 pointer-events-none;
}
.group:hover .hover-reveal,
.group:focus-within .hover-reveal {
@apply opacity-100 pointer-events-auto;
}
.marked a {
@apply underline;
}
src/lib/components/NotificationToast.svelte
+1 -1
View File
@@ -101,7 +101,7 @@
<!-- Close button (visible on hover) -->
<button
bind:this={closeButtonElement}
class="absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-opacity z-10"
class="absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-opacity z-10"
on:click|stopPropagation={closeHandler}
aria-label="Dismiss notification"
>
src/lib/components/calendar/CalendarSidebar.svelte
+4 -2
View File
@@ -149,7 +149,9 @@
</div>
</div>
<div class="grid grid-cols-7 text-center text-[0.5625rem] text-gray-400 dark:text-gray-500 mb-0.5">
<div
class="grid grid-cols-7 text-center text-[0.5625rem] text-gray-400 dark:text-gray-500 mb-0.5"
>
{#each ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as d}
<div class="py-0.5">{d}</div>
{/each}
@@ -224,7 +226,7 @@
{#if isDeletable(cal)}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100
class="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 group-focus-within:opacity-100
transition-all duration-150"
role="button"
tabindex="-1"
src/lib/components/channel/MessageInput.svelte
+1 -1
View File
@@ -850,7 +850,7 @@
</div>
<div class=" absolute -top-1 -right-1">
<button
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full hover-reveal transition"
type="button"
aria-label={$i18n.t('Remove file')}
on:click={() => {
src/lib/components/channel/Messages/Message.svelte
+4 -5
View File
@@ -209,9 +209,7 @@
: 'transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);'}"
>
{#if !edit && !disabled}
<div
class=" absolute {showButtons ? '' : 'invisible group-hover:visible'} right-1 -top-2 z-10"
>
<div class=" absolute {showButtons ? '' : 'hover-reveal'} right-1 -top-2 z-10">
<div
class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100/30 dark:border-gray-850/30"
>
@@ -413,7 +411,7 @@
{#if message.created_at}
<div
class="mt-1.5 flex shrink-0 items-center text-xs self-center invisible group-hover:visible text-gray-500 font-normal first-letter:capitalize"
class="mt-1.5 flex shrink-0 items-center text-xs self-center hover-reveal text-gray-500 font-normal first-letter:capitalize"
>
<Tooltip content={dayjs(message.created_at / 1000000).format('LLLL')}>
{dayjs(message.created_at / 1000000).format('HH:mm')}
@@ -555,7 +553,8 @@
allowEmbeds={!!message?.meta?.model_id}
/>
</span>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
class="text-gray-500 text-[0.625rem] pl-1 self-center">({$i18n.t('edited')})</span
class="text-gray-500 text-[0.625rem] pl-1 self-center"
>({$i18n.t('edited')})</span
>{/if}
{/if}
</div>
src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte
+1 -1
View File
@@ -40,7 +40,7 @@
>
<span class="min-w-0 truncate">{title}</span>
<ChevronRight
className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 dark:text-gray-500/70"
className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-500/70"
strokeWidth="2"
/>
</button>
src/lib/components/chat/EmbeddedChatHistoryItem.svelte
+6 -5
View File
@@ -22,7 +22,7 @@
</script>
<div
class="group/item flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
class="group flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
? 'bg-gray-50/70 dark:bg-gray-800/60'
: ''}"
>
@@ -41,9 +41,7 @@
</button>
<div
class="{showMenu
? 'visible'
: 'invisible group-hover/item:visible'} ml-auto flex shrink-0 items-center gap-1.5 pl-2"
class="{showMenu ? 'visible' : 'hover-reveal'} ml-auto flex shrink-0 items-center gap-1.5 pl-2"
>
<Dropdown
bind:show={showMenu}
@@ -54,7 +52,10 @@
onMenuOpenChange(item.id, state);
}}
>
<Tooltip content={$i18n.t('More')} className="group-hover/item:opacity-100 opacity-0">
<Tooltip
content={$i18n.t('More')}
className="group-hover:opacity-100 group-focus-within:opacity-100 opacity-0"
>
<button
type="button"
aria-label={$i18n.t('More Options')}
src/lib/components/chat/FileNav/PortList.svelte
+1 -1
View File
@@ -125,7 +125,7 @@
<span
role="button"
tabindex="-1"
class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
on:click|stopPropagation={() => openPortExternal(port.port)}
>
<svg
src/lib/components/chat/MessageInput.svelte
+1 -1
View File
@@ -1765,7 +1765,7 @@
class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'outline-hidden focus:outline-hidden group-hover:visible invisible transition'}"
: 'hover-reveal transition'}"
type="button"
aria-label={$i18n.t('Remove file')}
on:click={() => {
src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
{header}
</span>
<div class="invisible group-hover:visible flex gap-0.5 shrink-0">
<div class="hover-reveal flex gap-0.5 shrink-0">
<Tooltip content={copied ? $i18n.t('Copied') : $i18n.t('Copy')}>
<button
class="p-1 rounded-lg bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition"
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+1 -1
View File
@@ -245,7 +245,7 @@
</table>
</div>
<div class=" absolute top-1 right-1.5 z-20 invisible group-hover:visible flex gap-0.5">
<div class=" absolute top-1 right-1.5 z-20 hover-reveal flex gap-0.5">
<Tooltip content={$i18n.t('Copy')}>
<button
class="p-1 rounded-lg bg-transparent transition"
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+2 -2
View File
@@ -443,7 +443,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
{formatMessageTimestamp(message.timestamp * 1000)}
</time>
@@ -462,7 +462,7 @@
id="merge-response-button"
class="{true
? 'visible'
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
mergeResponsesHandler();
}}
src/lib/components/chat/Messages/OutputEditView.svelte
+1 -1
View File
@@ -335,8 +335,8 @@
<!-- Delete -->
<div class="pt-1.5">
<button
class="hover-reveal p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
aria-label={$i18n.t('Delete')}
class="invisible group-hover:visible p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
on:click={() => deleteIndices(di.indices)}
>
<svg
src/lib/components/chat/Messages/ResponseMessage.svelte
+14 -14
View File
@@ -1026,7 +1026,7 @@
aria-label={$i18n.t('Edit')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
editMessageHandler();
}}
@@ -1056,7 +1056,7 @@
aria-label={$i18n.t('Copy')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
on:click={() => {
copyToClipboard(visibleResponseContent);
}}
@@ -1085,7 +1085,7 @@
aria-label={$i18n.t('Insert into note')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
: 'hover-reveal'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => {
onInsertToNote?.(visibleResponseContent);
}}
@@ -1102,7 +1102,7 @@
id="speak-button-{message.id}"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
if (!loadingSpeech) {
if (speaking) {
@@ -1202,7 +1202,7 @@
aria-hidden="true"
class=" {isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
on:click={() => {
console.log(message);
}}
@@ -1234,7 +1234,7 @@
aria-label={$i18n.t('Good Response')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? ''
).toString() === '1'
? 'bg-gray-100 dark:bg-gray-800'
@@ -1272,7 +1272,7 @@
aria-label={$i18n.t('Bad Response')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? ''
).toString() === '-1'
? 'bg-gray-100 dark:bg-gray-800'
@@ -1314,7 +1314,7 @@
id="continue-response-button"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
continueResponse();
}}
@@ -1390,7 +1390,7 @@
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1417,7 +1417,7 @@
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={() => {
showRateComment = false;
regenerateResponse(message);
@@ -1462,7 +1462,7 @@
aria-label={action.name}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
actionMessage(action.id, message);
}}
@@ -1492,7 +1492,7 @@
aria-label="Fork chat"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
forkHandler?.(message.id);
}}
@@ -1526,7 +1526,7 @@
id="delete-response-button"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
disabled={!allowDelete}
on:click={(e) => {
if (!allowDelete) {
@@ -1567,7 +1567,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
{formatMessageTimestamp(message.timestamp * 1000)}
</time>
src/lib/components/chat/Messages/UserMessage.svelte
+5 -7
View File
@@ -225,7 +225,7 @@
class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'group-hover:visible invisible transition'}"
: 'hover-reveal transition'}"
type="button"
on:click={() => {
editedFiles.splice(fileIdx, 1);
@@ -421,9 +421,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="{compactPreview
? ''
: 'invisible group-hover:visible'} {($settings?.chatBubble ?? true)
class="{compactPreview ? '' : 'hover-reveal'} {($settings?.chatBubble ?? true)
? 'mr-1'
: 'ml-1 shrink-0 whitespace-nowrap'} text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
@@ -533,7 +531,7 @@
<button
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
aria-label={$i18n.t('Edit')}
on:click={() => {
editMessageHandler();
@@ -562,7 +560,7 @@
<button
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
aria-label={$i18n.t('Copy')}
on:click={() => {
copyToClipboard(message.content);
@@ -593,7 +591,7 @@
aria-label={$i18n.t('Delete')}
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
on:click={(e) => {
if (e.shiftKey) {
deleteMessageHandler();
src/lib/components/chat/Overview/Node.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
</div>
<button
class={data?.message?.favorite ? '' : 'invisible group-hover:visible'}
class={data?.message?.favorite ? '' : 'hover-reveal'}
aria-label={data?.message?.favorite
? $i18n.t('Remove from favorites')
: $i18n.t('Add to favorites')}
src/lib/components/chat/Settings/Account/UserProfileImage.svelte
+7 -5
View File
@@ -101,7 +101,7 @@
class="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200 group-hover:bg-black/40"
>
<svg
class="h-4 w-4 text-white opacity-0 drop-shadow-sm transition-opacity duration-200 group-hover:opacity-100"
class="h-4 w-4 text-white opacity-0 drop-shadow-sm transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -187,7 +187,9 @@
class=" rounded-full {imageClassName} object-cover"
/>
<div class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition">
<div
class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition"
>
<div class="p-1 rounded-full bg-white text-black border-gray-100 shadow">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +207,7 @@
</div>
<div class="flex flex-col w-full justify-center mt-2">
<button
class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-all"
type="button"
on:click={async () => {
profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
@@ -213,7 +215,7 @@
>
<button
class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-400"
type="button"
on:click={async () => {
if (canvasPixelTest()) {
@@ -232,7 +234,7 @@
>
<button
class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-400"
type="button"
on:click={async () => {
const url = await getGravatarUrl(localStorage.token, user?.email);
src/lib/components/common/FileItem.svelte
+1 -1
View File
@@ -183,7 +183,7 @@
class=" bg-white text-black border border-gray-50 rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'outline-hidden focus:outline-hidden group-hover:visible invisible transition'}"
: 'hover-reveal transition'}"
type="button"
on:click|stopPropagation={() => {
dispatch('dismiss');
src/lib/components/common/Folder.svelte
+4 -1
View File
@@ -174,7 +174,10 @@
{#if onAdd}
<button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
class="absolute z-10 right-2 hover-reveal self-center flex items-center dark:text-gray-300"
on:pointerup={(e) => {
e.stopPropagation();
}}
on:click={(e) => {
e.stopPropagation();
onAdd();
src/lib/components/common/Image.svelte
+1 -1
View File
@@ -80,7 +80,7 @@
<div class=" absolute -top-1 -right-1">
<button
aria-label={$i18n.t('Remove image')}
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full hover-reveal transition"
type="button"
on:click={() => {
onDismiss();
src/lib/components/layout/Sidebar.svelte
+2 -2
View File
@@ -1204,7 +1204,7 @@
<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('New Chat')}</div>
</div>
<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
<HotkeyHint name="newChat" className=" hover-reveal " />
</a>
</div>
@@ -1225,7 +1225,7 @@
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('Search')}</div>
</div>
<HotkeyHint name="search" className=" group-hover:visible invisible" />
<HotkeyHint name="search" className=" hover-reveal " />
</button>
</div>
src/lib/components/layout/Sidebar/ChannelItem.svelte
+2 -6
View File
@@ -203,9 +203,7 @@
</a>
{#if ['dm'].includes(channel?.type)}
<div
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
@@ -230,9 +228,7 @@
</button>
</div>
{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
<div
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
src/lib/components/layout/Sidebar/ChatItem.svelte
+16 -5
View File
@@ -103,6 +103,8 @@
let chat = null;
let mouseOver = false;
let focusWithin = false;
let menuOpen = false;
let openPreview = false;
const closeHoverPreview = () => {
@@ -131,7 +133,8 @@
id !== $chatId &&
!active &&
(effectiveReadAt === null || (updatedAt !== null && updatedAt > effectiveReadAt));
$: showInlineActions = id === $chatId || confirmEdit || mouseOver || selected;
$: showInlineActions =
id === $chatId || confirmEdit || mouseOver || focusWithin || menuOpen || selected;
$: chatItemClass = ` w-full flex justify-between rounded-xl px-2 py-1.5 ${
id === $chatId || confirmEdit
? ($settings?.highContrastMode ?? false)
@@ -582,6 +585,12 @@
on:mouseleave={() => {
mouseOver = false;
}}
on:focusin={() => {
focusWithin = true;
}}
on:focusout={() => {
focusWithin = false;
}}
>
{#if confirmEdit}
<div
@@ -669,7 +678,7 @@
? 'selected'
: showInlineActions
? 'selected'
: 'invisible group-hover:visible'} absolute {className === 'pr-2'
: 'hover-reveal'} absolute {className === 'pr-2'
? 'right-[0.5rem]'
: 'right-1'} inset-y-0 mr-1.5 flex items-center"
>
@@ -739,7 +748,12 @@
showDeleteConfirm = true;
}}
{markUnreadHandler}
onOpen={() => {
menuOpen = true;
dispatch('select');
}}
onClose={() => {
menuOpen = false;
dispatch('unselect');
}}
onPinChange={async () => {
@@ -750,9 +764,6 @@
type="button"
aria-label="Chat Menu"
class="flex size-5 items-center justify-center self-center dark:hover:text-white transition m-0"
on:click={() => {
dispatch('select');
}}
>
<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
</button>
src/lib/components/layout/Sidebar/ChatMenu.svelte
+10 -5
View File
@@ -39,11 +39,13 @@
export let archiveChatHandler: Function;
export let renameHandler: Function;
export let deleteHandler: Function;
export let onOpen: () => void = () => {};
export let onClose: Function;
export let markUnreadHandler: Function = () => {};
export let chatId = '';
let dropdown: Dropdown;
let show = false;
let pinned = false;
@@ -290,9 +292,12 @@
{/if}
<Dropdown
bind:this={dropdown}
bind:show
onOpenChange={(state) => {
if (state === false) {
if (state) {
onOpen();
} else {
onClose();
}
}}
@@ -363,7 +368,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
renameHandler();
}}
>
@@ -375,7 +380,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
markUnreadHandler();
}}
>
@@ -389,7 +394,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
pinHandler();
}}
>
@@ -407,7 +412,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
cloneChatHandler();
}}
>
src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+1 -1
View File
@@ -86,7 +86,7 @@
</div>
</a>
<button
class="invisible group-hover:visible self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
class="hover-reveal self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
on:click|preventDefault|stopPropagation={async () => {
await toggleNotePinnedStatusById(localStorage.token, note.id);
const _pinnedNotes = await getPinnedNoteList(localStorage.token).catch(() => []);
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+1 -1
View File
@@ -855,7 +855,7 @@
{#if isWritable}
<button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
class="absolute z-10 right-2 hover-reveal self-center flex items-center dark:text-gray-300"
>
<FolderMenu
onEdit={() => {
src/lib/components/layout/Sidebar/Section.svelte
+1 -1
View File
@@ -134,7 +134,7 @@
>
<span>{name}</span>
<span
class="flex opacity-0 group-hover:opacity-100 transition-all duration-100"
class="flex opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-all duration-100"
style="transform: rotate({open ? '90deg' : '0deg'})"
>
<ChevronRight className="size-[0.6875rem]" />
src/lib/components/playground/Images.svelte
+2 -2
View File
@@ -144,7 +144,7 @@
class="w-full aspect-square object-cover rounded-lg border border-gray-100/30 dark:border-gray-850/30"
/>
<div
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition rounded-lg flex items-center justify-center"
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition rounded-lg flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -188,7 +188,7 @@
</div>
<div class=" absolute -top-1 -right-1">
<button
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
class=" bg-white text-black border border-white rounded-full hover-reveal transition"
type="button"
aria-label={$i18n.t('Remove image')}
on:click={() => removeImage(index)}
src/lib/components/workspace/Models/ModelEditor.svelte
+1 -1
View File
@@ -633,7 +633,7 @@
{/if}
<div
class="absolute bottom-0 right-0 z-10 opacity-0 transition group-hover:opacity-100"
class="absolute bottom-0 right-0 z-10 opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100"
>
<div class="m-1">
<div