aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-27 03:24:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make FAB fully transparent when no text selected

Browse Source 
- Change opacity from 0.4 to 0 when no selection (fully transparent)
- Remove shadow when transparent for cleaner look
- Use pointerEvents: none to prevent interaction when invisible
- Remove disabled attribute, handle interaction via pointer events
- Button smoothly fades in/scales up when text is selected
This commit is contained in:
Gigi
2025-10-05 23:10:08 +01:00
parent cc68e67726
commit 2bbfa82eec
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/index.html vendored
View File

@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Boris - Nostr Bookmarks</title>
<script type="module" crossorigin src="/assets/index-Bty_eGh6.js"></script>
<script type="module" crossorigin src="/assets/index-C99jJJ32.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Bj-Uhit8.css">
</head>
<body>

12
src/components/HighlightButton.tsx
View File

@@ -54,20 +54,20 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
backgroundColor: highlightColor,
color: '#000',
border: 'none',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
cursor: hasSelection ? 'pointer' : 'not-allowed',
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.9)',
opacity: hasSelection ? 1 : 0,
transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
pointerEvents: hasSelection ? 'auto' : 'none',
userSelect: 'none'
}}
onClick={handleClick}
disabled={!hasSelection}
aria-label="Create highlight from selection"
title={hasSelection ? 'Create highlight' : 'Select text to highlight'}
title={hasSelection ? 'Create highlight' : ''}
>
<FontAwesomeIcon icon={faHighlighter} size="lg" />
</button>