ami/tl-vikunja
1
0
Fork 0
Code Activity

Move buttons to separate component (#380)

Browse Source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2021-01-17 17:57:57 +00:00
parent f3e0b79b26
commit 2aceca54ca
61 changed files with 2315 additions and 1825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/user/avatar-settings.vue
View File

@ -1,69 +1,64 @@
<template>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Avatar
</p>
</header>
<div class="card-content">
<div class="control mb-4">
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
Default
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
Initials
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
Gravatar
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
Upload
</label>
</div>
<template v-if="avatarProvider === 'upload'">
<input
@change="cropAvatar"
accept="image/*"
class="is-hidden"
ref="avatarUploadInput"
type="file"
/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
@click="$refs.avatarUploadInput.click()"
class="button is-primary"
v-if="!isCropAvatar">
Upload Avatar
</a>
<template v-else>
<cropper
:src="avatarToCrop"
:stencil-props="{aspectRatio: 1}"
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<a
:class="{ 'is-loading': avatarService.loading || loading}"
@click="uploadAvatar"
class="button is-primary">
Upload Avatar
</a>
</template>
</template>
<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<card title="Avatar">
<div class="control mb-4">
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
Default
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
Initials
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
Gravatar
</label>
<label class="radio">
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
Upload
</label>
</div>
</div>
<template v-if="avatarProvider === 'upload'">
<input
@change="cropAvatar"
accept="image/*"
class="is-hidden"
ref="avatarUploadInput"
type="file"
/>
<x-button
:loading="avatarService.loading || loading"
@click="$refs.avatarUploadInput.click()"
v-if="!isCropAvatar">
Upload Avatar
</x-button>
<template v-else>
<cropper
:src="avatarToCrop"
:stencil-props="{aspectRatio: 1}"
@ready="() => loading = false"
class="mb-4"
ref="cropper"/>
<x-button
:loading="avatarService.loading || loading"
@click="uploadAvatar"
>
Upload Avatar
</x-button>
</template>
</template>
<div class="mt-2" v-if="avatarProvider !== 'upload'">
<x-button
:loading="avatarService.loading || loading"
@click="updateAvatarStatus()"
class="is-fullwidth"
>
Save
</x-button>
</div>
</card>
</template>
<script>