Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: remove redundant animation (#3938)

Browse Source
This commit is contained in:
Faisal Amir 2024-11-04 14:57:22 +07:00 committed by GitHub
parent 755b2f234b
commit c6481d4668
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/containers/Layout/RibbonPanel/index.tsx
View File

@ -1,5 +1,4 @@
import { Tooltip, useMediaQuery } from '@janhq/joi' import { Tooltip, useMediaQuery } from '@janhq/joi'
import { motion as m } from 'framer-motion'
import { useAtom, useAtomValue, useSetAtom } from 'jotai' import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { import {
MessageCircleIcon, MessageCircleIcon,
@ -109,19 +108,13 @@ export default function RibbonPanel() {
<div <div
data-testid={menu.name} data-testid={menu.name}
className={twMerge( className={twMerge(
'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center text-[hsla(var(--ribbon-panel-icon))] ', 'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center rounded-md p-1.5 text-[hsla(var(--ribbon-panel-icon))]',
isActive && isActive &&
'z-10 text-[hsla(var(--ribbon-panel-icon-active))]' 'z-10 bg-[hsla(var(--ribbon-panel-icon-active-bg))] text-[hsla(var(--ribbon-panel-icon-active))]'
)} )}
> >
{menu.icon} {menu.icon}
</div> </div>
{isActive && (
<m.div
className="absolute inset-0 left-0 h-full w-full rounded-md bg-[hsla(var(--ribbon-panel-icon-active-bg))]"
layoutId="active-state-menu"
/>
)}
</div> </div>
} }
content={ content={

14
web/screens/Settings/SettingLeftPanel/SettingItem/index.tsx
View File

@ -1,6 +1,5 @@
import { useCallback } from 'react' import { useCallback } from 'react'
import { motion as m } from 'framer-motion'
import { useAtom } from 'jotai' import { useAtom } from 'jotai'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
@ -22,23 +21,20 @@ const SettingItem = ({ name, setting }: Props) => {
return ( return (
<div <div
className="relative my-0.5 block cursor-pointer rounded-lg px-2 py-1.5 hover:bg-[hsla(var(--left-panel-menu-hover))]" className={twMerge(
'relative my-0.5 block cursor-pointer rounded-lg px-2 py-1.5 hover:bg-[hsla(var(--left-panel-menu-hover))]',
isActive && 'rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]'
)}
onClick={onSettingItemClick} onClick={onSettingItemClick}
> >
<span <span
className={twMerge( className={twMerge(
'font-medium capitalize text-[hsla(var(--left-panel-menu))]', 'p-1.5 font-medium capitalize text-[hsla(var(--left-panel-menu))]',
isActive && 'relative z-10 text-[hsla(var(--left-panel-menu-active))]' isActive && 'relative z-10 text-[hsla(var(--left-panel-menu-active))]'
)} )}
> >
{name} {name}
</span> </span>
{isActive && (
<m.div
className="absolute inset-0 -left-0.5 h-full w-[calc(100%+4px)] rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]"
layoutId="active-static-menu"
/>
)}
</div> </div>
) )
} }

11
web/screens/Thread/ThreadLeftPanel/index.tsx
View File

@ -3,7 +3,6 @@ import { useCallback, useEffect, useState } from 'react'
import { Thread } from '@janhq/core' import { Thread } from '@janhq/core'
import { Button } from '@janhq/joi' import { Button } from '@janhq/joi'
import { motion as m } from 'framer-motion'
import { useAtomValue, useSetAtom } from 'jotai' import { useAtomValue, useSetAtom } from 'jotai'
import { import {
GalleryHorizontalEndIcon, GalleryHorizontalEndIcon,
@ -118,7 +117,9 @@ const ThreadLeftPanel = () => {
<div <div
key={thread.id} key={thread.id}
className={twMerge( className={twMerge(
`group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-[hsla(var(--left-panel-menu-hover))]` `group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-[hsla(var(--left-panel-menu-hover))]`,
activeThreadId === thread.id &&
'rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]'
)} )}
onClick={() => { onClick={() => {
onThreadClick(thread) onThreadClick(thread)
@ -208,12 +209,6 @@ const ThreadLeftPanel = () => {
</div> </div>
</div> </div>
</div> </div>
{activeThreadId === thread.id && (
<m.div
className="absolute inset-0 left-0 h-full w-full rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]"
layoutId="active-thread"
/>
)}
</div> </div>
))} ))}
</div> </div>