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

feat(desktop): enhance EntryTitle and MagneticHoverEffect components 

- Updated EntryTitle styling to improve hover effects and visual feedback.
- Modified MagneticHoverEffect to calculate hover origin dynamically, enhancing interaction responsiveness.

These changes improve user engagement and visual appeal across the affected components.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-04-10 14:01:28 +08:00
parent acdca33aaf
commit 8f4dcd398f
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/desktop/src/renderer/src/modules/entry-content/components/EntryTitle.tsx
View File

@ -103,12 +103,14 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
href={populatedFullHref ?? "#"}
target="_blank"
rel="noopener noreferrer"
className={"select-text break-words text-2xl font-medium leading-normal"}
className={
"select-text break-words text-2xl font-medium leading-normal hover:before:-inset-x-3"
}
>
<EntryTranslation
source={entry.entries.title}
target={translation.data?.title}
className="select-text hyphens-auto"
className="inline-block select-text hyphens-auto duration-200 hover:scale-[1.02]"
/>
</MagneticHoverEffect>
</div>

11
packages/components/src/ui/effect/MagneticHoverEffect.tsx
View File

@ -16,9 +16,16 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
const itemRef = useRef<HTMLElement>(null)
const handleMouseEnter = () => {
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
if (!itemRef.current) return
const rect = itemRef.current.getBoundingClientRect()
const x = ((e.clientX - rect.left) / rect.width) * 100
const y = ((e.clientY - rect.top) / rect.height) * 100
itemRef.current.style.transition = "transform 0.2s cubic-bezier(0.33, 1, 0.68, 1)"
itemRef.current.style.setProperty("--origin-x", `${x}%`)
itemRef.current.style.setProperty("--origin-y", `${y}%`)
}
const handleMouseLeave = () => {
@ -50,7 +57,7 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
className={cn(
"relative !cursor-none",
"inline-block transition-all duration-200 ease-out",
"before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:origin-center before:scale-[0.92] before:rounded-xl before:bg-black/[0.03] before:opacity-0 before:backdrop-blur before:transition-all before:duration-200 hover:before:scale-100 hover:before:opacity-100 dark:before:bg-white/[0.10]",
"before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:bg-black/[0.03] before:opacity-0 before:backdrop-blur before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100 dark:before:bg-white/[0.10]",
rest.className,
)}
>