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 { motion as m } from 'framer-motion'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import {
MessageCircleIcon,
@ -109,19 +108,13 @@ export default function RibbonPanel() {
<div
data-testid={menu.name}
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 &&
'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}
</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>
}
content={

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

@ -1,6 +1,5 @@
import { useCallback } from 'react'
import { motion as m } from 'framer-motion'
import { useAtom } from 'jotai'
import { twMerge } from 'tailwind-merge'
@ -22,23 +21,20 @@ const SettingItem = ({ name, setting }: Props) => {
return (
<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}
>
<span
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))]'
)}
>
{name}
</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>
)
}

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 { Button } from '@janhq/joi'
import { motion as m } from 'framer-motion'
import { useAtomValue, useSetAtom } from 'jotai'
import {
GalleryHorizontalEndIcon,
@ -118,7 +117,9 @@ const ThreadLeftPanel = () => {
<div
key={thread.id}
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={() => {
onThreadClick(thread)
@ -208,12 +209,6 @@ const ThreadLeftPanel = () => {
</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>