Used file input for character portrait and avatar

This commit is contained in:
Thaum Rystra
2024-08-29 15:42:26 +02:00
parent 8eabd16601
commit a30ce140d2
2 changed files with 33 additions and 16 deletions

View File

@@ -21,22 +21,34 @@
:error-messages="errors.gender" :error-messages="errors.gender"
@change="(value, ack) => $emit('change', {path: ['gender'], value, ack})" @change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
/> />
<text-field <v-row>
label="Picture URL" <v-col
hint="A link to a high resolution image" cols="12"
:disabled="!editPermission" md="6"
:value="model.picture" >
:error-messages="errors.picture" <smart-image-input
@change="(value, ack) => $emit('change', {path: ['picture'], value, ack})" label="Picture"
/> hint="A link to a high resolution image"
<text-field :disabled="!editPermission"
label="Avatar picture URL" :value="model.picture"
hint="A link to a smaller, square image to use as an avatar" :error-messages="errors.picture"
:disabled="!editPermission" @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
:value="model.avatarPicture" />
:error-messages="errors.avatarPicture" </v-col>
@change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})" <v-col
/> cols="12"
md="6"
>
<smart-image-input
label="Avatar"
hint="A link to a smaller, square image to use as an avatar"
:disabled="!editPermission"
:value="model.avatarPicture"
:error-messages="errors.avatarPicture"
@change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
/>
</v-col>
</v-row>
<form-sections> <form-sections>
<form-section name="Settings"> <form-section name="Settings">
<v-switch <v-switch
@@ -155,12 +167,14 @@ import LibraryList from '/imports/client/ui/library/LibraryList.vue';
import LibraryCollections from '/imports/api/library/LibraryCollections'; import LibraryCollections from '/imports/api/library/LibraryCollections';
import { changeAllowedLibraries, toggleAllUserLibraries } from '/imports/api/creature/creatures/methods/changeAllowedLibraries'; import { changeAllowedLibraries, toggleAllUserLibraries } from '/imports/api/creature/creatures/methods/changeAllowedLibraries';
import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions'; import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions';
import SmartImageInput from '/imports/client/ui/components/global/SmartImageInput.vue';
export default { export default {
components: { components: {
FormSection, FormSection,
FormSections, FormSections,
LibraryList, LibraryList,
SmartImageInput,
}, },
props: { props: {
stored: { stored: {

View File

@@ -114,6 +114,9 @@ export default {
}; };
}, },
meteor: { meteor: {
$subscribe: {
'userImages': [],
},
userImages() { userImages() {
const userId = Meteor.userId(); const userId = Meteor.userId();
return UserImages.find( return UserImages.find(