whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ChatNavigation): improve navigation button collapse functionality

Browse Source
This commit is contained in:
George·Dong 2025-04-03 23:46:24 +08:00 committed by Asurada
parent 8cb11e6d55
commit fb5ddaf9d5
1 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/renderer/src/pages/home/Messages/ChatNavigation.tsx
View File

@ -255,19 +255,15 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
if (now - lastMoveTime.current < 50) return if (now - lastMoveTime.current < 50) return
lastMoveTime.current = now lastMoveTime.current = now
// Calculate if the mouse is in the trigger area const triggerWidth = 10
const triggerWidth = 80 // Same as the width in styled component let rightOffset = 5
// Safe way to calculate position when using calc expressions
let rightOffset = 16 // Default right offset
if (showRightTopics) { if (showRightTopics) {
// When topics are shown on right, we need to account for topic list width rightOffset = 5 + 300
rightOffset = 16 + 300 // Assuming topic list width is 300px, adjust if different
} }
const rightPosition = window.innerWidth - rightOffset - triggerWidth const rightPosition = window.innerWidth - rightOffset - triggerWidth
const topPosition = window.innerHeight * 0.3 // 30% from top const topPosition = window.innerHeight * 0.35
const height = window.innerHeight * 0.4 // 40% of window height const height = window.innerHeight * 0.3
const isInTriggerArea = const isInTriggerArea =
e.clientX > rightPosition && e.clientX > rightPosition &&
@ -407,31 +403,32 @@ const ButtonGroup = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-color); background: var(--bg-color);
border-radius: 8px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden; overflow: hidden;
backdrop-filter: blur(8px); backdrop-filter: blur(12px);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
` `
const NavigationButton = styled(Button)` const NavigationButton = styled(Button)`
width: 28px; width: 32px;
height: 28px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 0; border-radius: 0;
border: none; border: none;
color: var(--color-text); color: var(--color-text);
transition: all 0.2s ease-in-out; transition: all 0.25s ease-in-out;
&:hover { &:hover {
background-color: var(--color-hover); background-color: var(--color-hover);
color: var(--color-primary); color: var(--color-primary);
transform: scale(1.05);
} }
.anticon { .anticon {
font-size: 14px; font-size: 16px;
} }
` `