traxxx/assets/components/users/actor-preview.vue

88 lines
1.3 KiB
Vue

<template>
<router-link
:to="`/actor/${actor.id}/${actor.slug}`"
class="actor nolink"
>
<div class="avatar">
<img
v-if="actor.avatar"
:src="getPath(actor.avatar)"
class="avatar-image"
>
<Icon
v-else-if="actor.gender"
:icon="actor.gender"
class="avatar-fallback"
/>
</div>
<span class="name">{{ actor.name }}</span>
</router-link>
</template>
<script>
async function unstashActor(actorId, stashId) {
await this.$store.dispatch('unstashActor', { actorId, stashId });
this.$emit('unstash');
}
export default {
props: {
actor: {
type: Object,
default: null,
},
stash: {
type: Object,
default: null,
},
},
methods: {
unstashActor,
},
};
</script>
<style lang="scss" scoped>
.actor {
height: 2.5rem;
display: inline-flex;
align-items: center;
border: solid 1px var(--shadow-hint);
&:hover {
border: solid 1px var(--primary);
}
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 100%;
background: var(--profile);
}
.avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
.avatar-fallback {
fill: var(--lighten-weak);
}
.name {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 .5rem;
font-weight: bold;
}
</style>