Refine admin workflows and team access
This commit is contained in:
@@ -33,26 +33,23 @@
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)_300px]">
|
||||
<label class="space-y-2">
|
||||
<div class="grid gap-4 lg:grid-cols-2 2xl:grid-cols-[minmax(220px,0.85fr)_minmax(260px,1fr)_minmax(260px,0.8fr)]">
|
||||
<label class="min-w-0 space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
|
||||
<input v-model="social.label" type="text" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Twitch" />
|
||||
<input v-model="social.label" type="text" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Twitch" />
|
||||
</label>
|
||||
<label class="space-y-2">
|
||||
<label class="min-w-0 space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform auswählen</span>
|
||||
<select :value="selectedSocialIconValue(social)" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" @change="handleSocialIconSelection($event, index)">
|
||||
<optgroup v-for="group in SOCIAL_ICON_OPTION_GROUPS" :key="group.label" :label="group.label">
|
||||
<option v-for="option in group.options" :key="option.key" :value="option.key">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<option value="custom">Andere Plattform / eigenes Icon</option>
|
||||
</select>
|
||||
<NativeSelect
|
||||
:model-value="selectedSocialIconValue(social)"
|
||||
:options="socialIconSelectOptions"
|
||||
@update:model-value="handleSocialIconSelection(String($event), index)"
|
||||
/>
|
||||
<span class="block text-xs text-slate-400">Bekannte Plattformen nutzen automatisch Bibliotheks-Icons. Neue oder eingestellte Plattformen bleiben über Custom-Key plus Upload möglich.</span>
|
||||
</label>
|
||||
<div class="space-y-2">
|
||||
<div class="min-w-0 space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Custom Icon</span>
|
||||
<label class="group flex h-11 min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
|
||||
<label class="group flex h-11 w-full min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
|
||||
<span class="flex min-w-0 items-center gap-2">
|
||||
<span class="grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-xl bg-violet-100 text-violet-600">
|
||||
<Upload class="h-4 w-4" />
|
||||
@@ -62,12 +59,12 @@
|
||||
<input type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="sr-only" @change="handleSocialIconUpload($event, index)" />
|
||||
</label>
|
||||
</div>
|
||||
<label v-if="selectedSocialIconValue(social) === 'custom'" class="space-y-2 xl:col-span-3">
|
||||
<label v-if="selectedSocialIconValue(social) === 'custom'" class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Andere Plattform / eigener Key</span>
|
||||
<input v-model="social.platform" type="text" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z.B. cake, booth, neue-plattform" />
|
||||
<span class="block text-xs text-slate-400">Für neue oder nicht mehr gepflegte Plattformen: Key speichern, eigenes Icon hochladen oder Stern-Fallback nutzen.</span>
|
||||
</label>
|
||||
<label class="space-y-2 xl:col-span-3">
|
||||
<label class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">URL</span>
|
||||
<input v-model="social.url" type="url" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="https://..." />
|
||||
</label>
|
||||
@@ -117,6 +114,7 @@ import { Plus, Save, Trash2, Upload } from '@lucide/vue'
|
||||
import { SOCIAL_ICON_OPTION_GROUPS } from '../../lib/socialIcons'
|
||||
import Button from '../ui/Button.vue'
|
||||
import Card from '../ui/Card.vue'
|
||||
import NativeSelect from '../ui/NativeSelect.vue'
|
||||
import type { AdminContentForm, SocialLinkForm } from './adminContentTypes'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -127,7 +125,7 @@ const props = defineProps<{
|
||||
removeSocialLink: (index: number) => void
|
||||
isUploadedIcon: (icon: string) => boolean
|
||||
selectedSocialIconValue: (social: SocialLinkForm) => string
|
||||
handleSocialIconSelection: (event: Event, index: number) => void
|
||||
handleSocialIconSelection: (value: string, index: number) => void
|
||||
hasSocialIconPreview: (social: SocialLinkForm) => boolean
|
||||
socialIconModeLabel: (social: SocialLinkForm) => string
|
||||
socialSimpleIconPath: (social: SocialLinkForm) => string
|
||||
@@ -137,6 +135,17 @@ const props = defineProps<{
|
||||
saveSiteSettings: (sectionLabel?: string) => Promise<void>
|
||||
}>()
|
||||
|
||||
const socialIconSelectOptions = [
|
||||
...SOCIAL_ICON_OPTION_GROUPS.flatMap((group) =>
|
||||
group.options.map((option) => ({
|
||||
label: option.label,
|
||||
value: option.key,
|
||||
group: group.label,
|
||||
})),
|
||||
),
|
||||
{ label: 'Andere Plattform / eigenes Icon', value: 'custom' },
|
||||
]
|
||||
|
||||
function onSave() {
|
||||
return props.saveSiteSettings('Social Links')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user