Redesign organizer picker with tailwind

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-03 22:13:06 +02:00
parent 4e3eb33d01
commit 59c39efb80
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 44 additions and 26 deletions

View file

@ -5,14 +5,33 @@
:placeholder="$t('Filter by profile or group name')"
v-model="actorFilter"
/>
<b-radio-button
v-model="selectedActor"
:native-value="availableActor"
class="list-item"
<transition-group
tag="ul"
class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto"
enter-active-class="duration-300 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="transform opacity-0"
>
<li
class="relative focus-within:shadow-lg"
v-for="availableActor in actualFilteredAvailableActors"
:key="availableActor.id"
>
<div class="media" dir="auto">
<input
class="sr-only peer"
type="radio"
:value="availableActor"
name="availableActors"
v-model="selectedActor"
:id="`availableActor-${availableActor.id}`"
/>
<label
class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
:for="`availableActor-${availableActor.id}`"
>
<figure class="image is-48x48" v-if="availableActor.avatar">
<img
class="image is-rounded"
@ -20,18 +39,14 @@
alt=""
/>
</figure>
<b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content">
<b-icon v-else size="is-large" icon="account-circle" />
<div>
<h3>{{ availableActor.name }}</h3>
<small>{{ `@${availableActor.preferredUsername}` }}</small>
</div>
</div>
</b-radio-button>
</label>
</li>
</transition-group>
</div>
</template>
<script lang="ts">

View file

@ -1,5 +1,8 @@
<template>
<div class="organizer-picker" v-if="selectedActor">
<div
class="bg-white border border-gray-300 rounded-lg cursor-pointer"
v-if="selectedActor"
>
<!-- If we have a current actor (inline) -->
<div
v-if="inline && selectedActor.id"