root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nightly: Emoji-Picker fix als fixed Overlay neben Button (hoher z-index) statt überlagertem Inline-Panel

Browse source
This commit is contained in:
vibe-bot 2025-08-09 21:29:11 +02:00
parent 9cedc3ce96
commit 3d9e03da57
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web/src/App.tsx
View file

@ -29,9 +29,9 @@ export default function App() {
const [editingCategoryId, setEditingCategoryId] = useState<string>(''); const [editingCategoryId, setEditingCategoryId] = useState<string>('');
const [editingCategoryName, setEditingCategoryName] = useState<string>(''); const [editingCategoryName, setEditingCategoryName] = useState<string>('');
const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false); const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
const [showEmojiRemovePicker, setShowEmojiRemovePicker] = useState<boolean>(false);
const emojiPickerRef = useRef<HTMLDivElement|null>(null); const emojiPickerRef = useRef<HTMLDivElement|null>(null);
const emojiRemovePickerRef = useRef<HTMLDivElement|null>(null); const emojiTriggerRef = useRef<HTMLButtonElement|null>(null);
const [emojiPos, setEmojiPos] = useState<{left:number; top:number}>({ left: 0, top: 0 });
const EMOJIS = useMemo(()=>{ const EMOJIS = useMemo(()=>{
// einfache, breite Auswahl gängiger Emojis; kann später erweitert/extern geladen werden // einfache, breite Auswahl gängiger Emojis; kann später erweitert/extern geladen werden
const groups = [ const groups = [
@ -454,11 +454,18 @@ export default function App() {
{/* Custom Badge Picker */} {/* Custom Badge Picker */}
<div style={{ position:'relative' }}> <div style={{ position:'relative' }}>
<button <button
ref={emojiTriggerRef}
className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
onClick={()=> setShowEmojiPicker(v=>!v)} onClick={()=> {
try{
const r = emojiTriggerRef.current?.getBoundingClientRect();
if(r){ setEmojiPos({ left: r.left, top: r.bottom + 8 }); }
}catch{}
setShowEmojiPicker(v=>!v);
}}
>Custom Emoji</button> >Custom Emoji</button>
{showEmojiPicker && ( {showEmojiPicker && (
<div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'absolute', top:'110%', right:0, zIndex: 99999 }}> <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 999999 }}>
{EMOJIS.map((e, i)=> ( {EMOJIS.map((e, i)=> (
<button key={i} onClick={async ()=>{ <button key={i} onClick={async ()=>{
try{ try{

1
web/src/styles.css
View file

@ -451,6 +451,7 @@ header p {
.emoji-picker { .emoji-picker {
display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem; display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem;
max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px; max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px;
box-shadow: 0 24px 48px rgba(0,0,0,.6);
} }
.emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; } .emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
.emoji-picker button:hover { filter: brightness(1.2); } .emoji-picker button:hover { filter: brightness(1.2); }