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 }}
</v-card-title>
<v-card-text>
<v-layout justify-center>
<croppa
ref="croppa"
class="canvas-container"
v-model="plugin"
canvas-color="white"
accept="image/jpeg,image/png"
prevent-white-space
:width="width"
:height="height"
:show-remove-button="false"
:initial-image="imageUrl"
:placeholder-font-size="22"
@file-size-exceed="handleFileSizeExceed"
@file-type-mismatch="handleFileTypeMismatch"
placeholder="Choisissez une image"
></croppa>
<v-layout justify-center class="mb-4">
<div
:class="rounded ? 'rounded' : ''"
class="canvas-container">
<croppa
ref="croppa"
v-model="plugin"
canvas-color="white"
accept="image/jpeg,image/png"
prevent-white-space
:width="width"
:height="height"
:show-remove-button="false"
:initial-image="imageUrl"
:placeholder-font-size="22"
@file-size-exceed="handleFileSizeExceed"
@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 justify-center>
<v-btn
@ -104,6 +112,10 @@ export default {
loading: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: false
}
},
methods: {
@ -154,9 +166,24 @@ export default {
.croppa-container {
background: transparent !important;
}
.canvas-container {
line-height: 0;
}
.canvas-container canvas {
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) {
.canvas-container canvas {
width: 100% !important;