natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

display MkAvatars nicer

This commit is contained in:
ThatOneCalculator 2023-01-16 11:40:06 -08:00
parent 2aba31312f
commit 4cb29beeaa
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
3 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "13.0.8-rc2", "version": "13.0.8-rc3",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

26
packages/client/src/components/MkAvatars.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div class="defgtij">
<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> <div v-for="user in users" :key="user.id" class="users">
<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
</div> </div>
</div> </div>
</template> </template>
@ -22,3 +22,23 @@ onMounted(async () => {
}); });
}); });
</script> </script>
<style lang="scss">
.defgtij {
padding: 12px;
> .users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
grid-gap: 12px;
place-content: center;
padding: 12px;
> .avatar {
width: 100%;
height: 100%;
aspect-ratio: 1;
}
}
}
</style>

23
packages/client/src/widgets/user-list.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList"> <MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
<template #icon><i class="ph-user-list-bold ph-lg"></i></template> <template #header><i class="ph-user-list-bold ph-lg"></i> {{ list ? list.name : i18n.ts._widgets.userList }}</template>
<template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six-bold ph-lg"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six-bold ph-lg"></i></button></template>
<div class="wsdlkfj"> <div class="wsdlkfj">
@ -10,7 +9,7 @@
</div> </div>
<MkLoading v-else-if="fetching"/> <MkLoading v-else-if="fetching"/>
<div v-else class="users"> <div v-else class="users">
<MkAvatars :user-ids="users"/> <MkAvatars :user-ids="users" class="userAvatars"/>
</div> </div>
</div> </div>
</MkContainer> </MkContainer>
@ -94,26 +93,10 @@ defineExpose<WidgetComponentExpose>({
}); });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.wsdlkfj { .wsdlkfj {
> .init { > .init {
padding: 16px; padding: 16px;
} }
> .users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
grid-gap: 12px;
place-content: center;
padding: 16px;
> .user {
width: 100%;
height: 100%;
aspect-ratio: 1;
> .avatar {
width: 100%;
height: 100%;
}
}
}
} }
</style> </style>