pagesassos/panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat: rounded avatar editor

Browse source
This commit is contained in:
Matthieu Bessat 2020-07-25 12:33:32 +02:00
parent 9d4cd6321c
commit 96bd968c33
1 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/components/AvatarEditor.vue
View file

@ -7,23 +7,31 @@
{{ caption }} {{ caption }}
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-layout justify-center> <v-layout justify-center class="mb-4">
<croppa <div
ref="croppa" :class="rounded ? 'rounded' : ''"
class="canvas-container" class="canvas-container">
v-model="plugin" <croppa
canvas-color="white" ref="croppa"
accept="image/jpeg,image/png" v-model="plugin"
prevent-white-space canvas-color="white"
:width="width" accept="image/jpeg,image/png"
:height="height" prevent-white-space
:show-remove-button="false" :width="width"
:initial-image="imageUrl" :height="height"
:placeholder-font-size="22" :show-remove-button="false"
@file-size-exceed="handleFileSizeExceed" :initial-image="imageUrl"
@file-type-mismatch="handleFileTypeMismatch" :placeholder-font-size="22"
placeholder="Choisissez une image" @file-size-exceed="handleFileSizeExceed"
></croppa> @file-type-mismatch="handleFileTypeMismatch"
placeholder="Choisissez une image"
></croppa>
<!-- <div
v-if="rounded"
class="rounded-mask">
<div class="inside"></div>
</div> -->
</div>
</v-layout> </v-layout>
<v-layout justify-center> <v-layout justify-center>
<v-btn <v-btn
@ -104,6 +112,10 @@ export default {
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
},
rounded: {
type: Boolean,
default: false
} }
}, },
methods: { methods: {
@ -154,9 +166,24 @@ export default {
.croppa-container { .croppa-container {
background: transparent !important; background: transparent !important;
} }
.canvas-container {
line-height: 0;
}
.canvas-container canvas { .canvas-container canvas {
border: 1px solid #bdc3c7; border: 1px solid #bdc3c7;
} }
/* .rounded-mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background-color: rgba(189, 195, 199, 0.5);
} */
.canvas-container.rounded .croppa-container canvas {
border-radius: 50% !important;
}
@media screen and (max-width: 959px) { @media screen and (max-width: 959px) {
.canvas-container canvas { .canvas-container canvas {
width: 100% !important; width: 100% !important;