Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-09-20 06:11:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui): use standard list format for Users screen

Browse source
This commit is contained in:
Phan An 2024-02-25 16:54:57 +07:00
parent 727370446f
commit 43e1a84cc1
2 changed files with 27 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
resources/assets/js/components/screens/UserListScreen.vue
View file

@ -45,6 +45,7 @@ import isMobile from 'ismobilejs'
import { computed, defineAsyncComponent, onMounted, ref, toRef } from 'vue' import { computed, defineAsyncComponent, onMounted, ref, toRef } from 'vue'
import { userStore } from '@/stores' import { userStore } from '@/stores'
import { eventBus } from '@/utils' import { eventBus } from '@/utils'
import {useAuthorization} from '@/composables'
import ScreenHeader from '@/components/ui/ScreenHeader.vue' import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ControlsToggle from '@/components/ui/ScreenControlsToggle.vue' import ControlsToggle from '@/components/ui/ScreenControlsToggle.vue'
@ -53,8 +54,14 @@ import UserCard from '@/components/user/UserCard.vue'
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue')) const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
const BtnGroup = defineAsyncComponent(() => import('@/components/ui/BtnGroup.vue')) const BtnGroup = defineAsyncComponent(() => import('@/components/ui/BtnGroup.vue'))
const { currentUser } = useAuthorization()
const allUsers = toRef(userStore.state, 'users') const allUsers = toRef(userStore.state, 'users')
const users = computed(() => allUsers.value.filter(({ is_prospect }) => !is_prospect)) const users = computed(() => allUsers
.value
.filter(({ is_prospect }) => !is_prospect)
.sort((a, b) => a.id === currentUser.value.id ? -1 : b.id === currentUser.value.id ? 1 : a.name.localeCompare(b.name))
)
const prospects = computed(() => allUsers.value.filter(({ is_prospect }) => is_prospect)) const prospects = computed(() => allUsers.value.filter(({ is_prospect }) => is_prospect))
const isPhone = isMobile.phone const isPhone = isMobile.phone
@ -68,9 +75,9 @@ onMounted(async () => await userStore.fetch())
<style lang="scss" scoped> <style lang="scss" scoped>
.users { .users {
display: grid; display: flex;
grid-gap: .7rem 1rem; flex-direction: column;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .5rem;
} }
.invited-heading { .invited-heading {

49
resources/assets/js/components/user/UserCard.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<article :class="{ me: isCurrentUser }" class="user-card"> <article :class="{ me: isCurrentUser }" class="user-card">
<UserAvatar :user="user" width="80" /> <UserAvatar :user="user" width="48" />
<main> <main>
<h1> <h1>
@ -16,19 +16,19 @@
</h1> </h1>
<p class="email text-secondary">{{ user.email }}</p> <p class="email text-secondary">{{ user.email }}</p>
<footer>
<template v-if="user.is_prospect">
<Btn class="btn-revoke" red small @click="revokeInvite">Revoke</Btn>
</template>
<template v-else>
<Btn v-if="!isCurrentUser" class="btn-delete" red small @click="destroy">Delete</Btn>
<Btn v-if="!user.is_prospect" class="btn-edit" orange small @click="edit">
{{ isCurrentUser ? 'Your Profile' : 'Edit' }}
</Btn>
</template>
</footer>
</main> </main>
<div class="actions">
<template v-if="user.is_prospect">
<Btn class="btn-revoke" red small @click="revokeInvite">Revoke</Btn>
</template>
<template v-else>
<Btn v-if="!user.is_prospect" class="btn-edit" orange small @click="edit">
{{ isCurrentUser ? 'Your Profile' : 'Edit' }}
</Btn>
<Btn v-if="!isCurrentUser" class="btn-delete" red small @click="destroy">Delete</Btn>
</template>
</div>
</article> </article>
</template> </template>
@ -102,12 +102,6 @@ const revokeInvite = async () => {
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
img {
border-radius: 50%;
flex: 0 0 80px;
background: rgba(0, 0, 0, .2)
}
main { main {
flex: 1; flex: 1;
display: flex; display: flex;
@ -126,20 +120,9 @@ const revokeInvite = async () => {
} }
} }
footer { .actions {
visibility: hidden; display: flex;
gap: .5rem;
> * + * {
margin-left: .3rem;
}
@media (hover: none) {
visibility: visible;
}
}
&:hover footer {
visibility: visible;
} }
} }
</style> </style>