aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-19 23:04:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make highlight button sticky and always visible

Browse Source 
- Wrap button in sticky positioned container with height: 0
- Button now floats and stays visible while scrolling
- Remains within reader pane boundaries on desktop
- Uses flexbox to align button to the right side
This commit is contained in:
Gigi
2025-10-15 21:48:41 +02:00
parent f5e9e5bf61
commit 820ab1d902
1 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/HighlightButton.tsx
View File

@@ -41,36 +41,45 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
}))
return (
<button
className="highlight-fab"
<div
style={{
position: 'absolute',
position: 'sticky',
bottom: '32px',
right: '32px',
zIndex: 10,
width: '56px',
height: '56px',
borderRadius: '50%',
backgroundColor: highlightColor,
color: '#000',
border: 'none',
boxShadow: hasSelection ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
cursor: hasSelection ? 'pointer' : 'default',
height: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.3s ease',
opacity: hasSelection ? 1 : 0.4,
transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
pointerEvents: hasSelection ? 'auto' : 'none',
userSelect: 'none'
justifyContent: 'flex-end',
pointerEvents: 'none',
marginRight: '32px'
}}
onClick={handleClick}
aria-label="Create highlight from selection"
title={hasSelection ? 'Create highlight' : ''}
>
<FontAwesomeIcon icon={faHighlighter} size="lg" />
</button>
<button
className="highlight-fab"
style={{
width: '56px',
height: '56px',
borderRadius: '50%',
backgroundColor: highlightColor,
color: '#000',
border: 'none',
boxShadow: hasSelection ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
cursor: hasSelection ? 'pointer' : 'default',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.3s ease',
opacity: hasSelection ? 1 : 0.4,
transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
pointerEvents: hasSelection ? 'auto' : 'none',
userSelect: 'none'
}}
onClick={handleClick}
aria-label="Create highlight from selection"
title={hasSelection ? 'Create highlight' : ''}
>
<FontAwesomeIcon icon={faHighlighter} size="lg" />
</button>
</div>
)
}
)