Fixes
This commit is contained in:
parent
ef66dfaa24
commit
738d7d3baf
@ -1,45 +1,69 @@
|
||||
<template>
|
||||
<div class="icon-picker-overlay" @click.self="$emit('close')">
|
||||
<div class="icon-picker">
|
||||
<div class="icon-picker-header">
|
||||
<h3>Icon auswaehlen</h3>
|
||||
<button class="close-btn" @click="$emit('close')">x</button>
|
||||
<div
|
||||
class="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
|
||||
@click.self="$emit('close')"
|
||||
>
|
||||
<div class="border border-border rounded-2xl w-[90%] max-w-2xl max-h-[80vh] flex flex-col shadow-2xl" style="background: var(--panel)">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-border">
|
||||
<h3 class="text-base font-semibold">Icon auswaehlen</h3>
|
||||
<button
|
||||
class="w-7 h-7 rounded-lg border border-border bg-panel-2 text-text cursor-pointer hover:border-accent"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-picker-search">
|
||||
<!-- Search -->
|
||||
<div class="px-5 py-3 border-b border-border">
|
||||
<input
|
||||
type="text"
|
||||
v-model="search"
|
||||
placeholder="Icon suchen..."
|
||||
ref="searchInput"
|
||||
class="w-full bg-panel-2 border border-border rounded-lg px-4 py-2.5 text-text text-sm placeholder:text-muted focus:outline-none focus:border-accent"
|
||||
@keydown.esc="$emit('close')"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="icon-picker-current" v-if="modelValue">
|
||||
<span class="current-label">Aktuell:</span>
|
||||
<span class="material-symbols-outlined current-icon">{{ String.fromCodePoint(modelValue) }}</span>
|
||||
<span class="current-name">{{ currentIconName }}</span>
|
||||
<button class="remove-btn" @click="selectIcon(0)">Entfernen</button>
|
||||
</div>
|
||||
|
||||
<div class="icon-grid">
|
||||
<!-- Current Selection -->
|
||||
<div v-if="modelValue" class="flex items-center gap-3 px-5 py-3 bg-panel-2 border-b border-border">
|
||||
<span class="text-xs text-muted">Aktuell:</span>
|
||||
<span class="material-symbols-outlined text-2xl text-accent">{{ String.fromCodePoint(modelValue) }}</span>
|
||||
<span class="flex-1 text-sm">{{ currentIconName }}</span>
|
||||
<button
|
||||
v-for="icon in filteredIcons"
|
||||
:key="icon.codepoint"
|
||||
class="icon-btn"
|
||||
:class="{ selected: icon.codepoint === modelValue }"
|
||||
@click="selectIcon(icon.codepoint)"
|
||||
:title="icon.name"
|
||||
class="bg-transparent border border-red-400/40 text-red-200 px-3 py-1.5 rounded-md text-xs cursor-pointer hover:bg-red-500/20"
|
||||
@click="selectIcon(0)"
|
||||
>
|
||||
<span class="material-symbols-outlined">{{ String.fromCodePoint(icon.codepoint) }}</span>
|
||||
<span class="icon-name">{{ icon.name }}</span>
|
||||
Entfernen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredIcons.length === 0" class="no-results">
|
||||
<!-- Icon Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-4 grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-2">
|
||||
<button
|
||||
v-for="icon in filteredIcons"
|
||||
:key="icon.codepoint"
|
||||
class="flex flex-col items-center justify-center gap-2 p-3 bg-panel-2 border rounded-xl cursor-pointer transition-all hover:border-accent hover:-translate-y-0.5 min-h-[80px]"
|
||||
:class="icon.codepoint === modelValue ? 'border-accent-2 bg-accent-2/10' : 'border-border'"
|
||||
@click="selectIcon(icon.codepoint)"
|
||||
:title="icon.name"
|
||||
>
|
||||
<span class="material-symbols-outlined text-2xl text-text">{{ String.fromCodePoint(icon.codepoint) }}</span>
|
||||
<span class="text-[11px] text-muted text-center break-all leading-tight">{{ icon.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div v-if="filteredIcons.length === 0" class="py-10 text-center text-muted">
|
||||
Keine Icons gefunden fuer "{{ search }}"
|
||||
</div>
|
||||
|
||||
<!-- Hint when not searching -->
|
||||
<div v-if="!search && filteredIcons.length === 200" class="px-5 py-2 text-xs text-muted text-center border-t border-border">
|
||||
Zeige 200 von 4102 Icons - Suche verwenden um mehr zu finden
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -57,7 +81,12 @@ const emit = defineEmits(['update:modelValue', 'close']);
|
||||
const search = ref('');
|
||||
const searchInput = ref(null);
|
||||
|
||||
const filteredIcons = computed(() => searchIcons(search.value));
|
||||
const filteredIcons = computed(() => {
|
||||
const results = searchIcons(search.value);
|
||||
// Ohne Suche: max 200 Icons anzeigen (Performance)
|
||||
// Mit Suche: alle Ergebnisse anzeigen
|
||||
return search.value ? results : results.slice(0, 200);
|
||||
});
|
||||
|
||||
const currentIconName = computed(() => {
|
||||
if (!props.modelValue) return '';
|
||||
@ -76,157 +105,3 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-picker-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.icon-picker {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.icon-picker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.icon-picker-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-2);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-picker-search {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.icon-picker-search input {
|
||||
width: 100%;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-picker-search input::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.icon-picker-current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
background: var(--panel-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.current-label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
font-size: 24px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.current-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 107, 107, 0.4);
|
||||
color: #ffd1d1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 12px 8px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.icon-btn.selected {
|
||||
border-color: var(--accent-2);
|
||||
background: rgba(125, 211, 176, 0.1);
|
||||
}
|
||||
|
||||
.icon-btn .material-symbols-outlined {
|
||||
font-size: 24px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.icon-btn .icon-name {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user