xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): sonner styles 

Updated the global shortcuts registration to ensure proper detection of editable elements by checking if the target is an instance of HTMLElement. This change enhances the accuracy of shortcut handling in editable contexts.

style(toast): remove unused toast styles

Deleted redundant CSS styles related to sonner toast notifications to streamline the stylesheet and improve maintainability.

style(toast): enhance toast styles with z-index and pointer events

Added z-index and pointer-events styles to the toast component for better layering and interaction handling.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-11-04 22:55:49 +08:00
parent ad97c27906
commit 2ac5aed4e1
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
3 changed files with 4 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/layer/renderer/src/initialize/global-shortcuts.ts
View File

@ -46,7 +46,7 @@ export const registerAppGlobalShortcuts = () => {
const handleKeydown = (e: KeyboardEvent) => {
shortcuts.forEach(({ accelerator, action, inputBypass }) => {
// Prevent on input, textarea, [contenteditable]
if (!inputBypass && detectIsEditableElement(e.target as HTMLElement)) {
if (!inputBypass && e.target instanceof HTMLElement && detectIsEditableElement(e.target)) {
return
}

61
apps/desktop/layer/renderer/src/styles/additional.css
View File

@ -52,64 +52,3 @@
top: calc(env(safe-area-inset-top, 0px) + 20px);
}
}
[data-sonner-toast] {
background-image: linear-gradient(
to bottom right,
rgba(var(--color-background) / 0.98),
rgba(var(--color-background) / 0.95)
) !important;
}
[data-sonner-toast]::before {
content: "";
position: absolute;
inset: 0;
border-radius: 1rem;
background: linear-gradient(
to bottom right,
rgba(255, 92, 0, 0.05),
transparent,
rgba(255, 92, 0, 0.05)
);
z-index: -1;
}
[data-sonner-toast][data-type="success"]::before {
background: linear-gradient(
to bottom right,
rgba(40, 205, 65, 0.05),
transparent,
rgba(40, 205, 65, 0.05)
);
}
[data-sonner-toast][data-type="error"]::before {
background: linear-gradient(
to bottom right,
rgba(255, 69, 58, 0.05),
transparent,
rgba(255, 69, 58, 0.05)
);
}
[data-sonner-toast][data-type="warning"]::before {
background: linear-gradient(
to bottom right,
rgba(255, 149, 0, 0.05),
transparent,
rgba(255, 149, 0, 0.05)
);
}
[data-sonner-toast][data-type="info"]::before {
background: linear-gradient(
to bottom right,
rgba(0, 122, 255, 0.05),
transparent,
rgba(0, 122, 255, 0.05)
);
}
[data-sonner-toast][data-type="loading"]::before {
background: linear-gradient(
to bottom right,
rgba(142, 142, 147, 0.05),
transparent,
rgba(142, 142, 147, 0.05)
);
}

3
packages/internal/components/src/ui/toast/styles.ts
View File

@ -3,6 +3,8 @@ export const toastStyles = {
group relative flex w-full items-center justify-between gap-3 rounded-2xl p-4
backdrop-blur-2xl duration-300 ease-out
max-w-md min-w-[320px]
z-[9999999999]
pointer-events-auto
font-theme
[&]:border [&]:border-solid
[&]:data-[type=default]:border-[rgba(255,92,0,0.2)]
@ -17,6 +19,7 @@ export const toastStyles = {
[&]:data-[type=warning]:shadow-[0_8px_32px_rgba(255,149,0,0.08),0_4px_16px_rgba(255,149,0,0.06),0_2px_8px_rgba(0,0,0,0.1)]
[&]:data-[type=info]:shadow-[0_8px_32px_rgba(0,122,255,0.08),0_4px_16px_rgba(0,122,255,0.06),0_2px_8px_rgba(0,0,0,0.1)]
[&]:data-[type=loading]:shadow-[0_8px_32px_rgba(142,142,147,0.08),0_4px_16px_rgba(142,142,147,0.06),0_2px_8px_rgba(0,0,0,0.1)]
[&_.sonner-loader]:relative
`,
title: tw`
text-sm font-medium text-text