From 96bd968c332500de7a03488e702e5d37a8f2f887 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Sat, 25 Jul 2020 12:33:32 +0200
Subject: [PATCH] feat: rounded avatar editor

---
 src/components/AvatarEditor.vue | 61 ++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/AvatarEditor.vue b/src/components/AvatarEditor.vue
index 446cff4..cb177ef 100644
--- a/src/components/AvatarEditor.vue
+++ b/src/components/AvatarEditor.vue
@@ -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;