♻️ Integrate image upload functionality into avatar component

components/v2/ProfileView.vue

@@ -2,24 +2,27 @@
   <div class="profile-view">
     <div class="profile-view__profile">
       <div
-        v-if="!internalAvatar"
-        class="profile-view__avatar"
-      />
-      <img
-        v-else
-        class="profile-view__avatar"
-        :src="internalAvatar"
-        :alt="displayName"
+        class="profile-view__avatar profile-view__avatar--editable"
+        @click="handleAvatarUploadButtonClick"
       >
+        <img
+          v-if="internalAvatar"
+          class="profile-view__avatar-image"
+          :src="internalAvatar"
+          :alt="displayName"
+        >
+        <div
+          v-else
+          class="profile-view__avatar-placeholder"
+        />
+        <span class="profile-view__edit-overlay">{{ $t('General.edit') }}</span>
+      </div>
       <div>
         <div class="profile-view__display-name">{{ displayName }}</div>
         <div class="profile-view__liker-id">{{ likerId }}</div>
       </div>
     </div>
-    <Button
-      preset="outlined"
-      @click="handleAvatarUploadButtonClick"
-    ><PictureIcon />{{ $t('V2_Form_Button_UploadPicture') }}</Button>
+
     <input
       ref="fileUploader"
       class="profile-view__file-uploader"
@@ -31,14 +34,7 @@
 </template>
 
 <script>
-import Button from './Button';
-import PictureIcon from './icons/Picture';
-
 export default {
-  components: {
-    Button,
-    PictureIcon,
-  },
   props: {
     avatar: {
       type: String,
@@ -87,12 +83,12 @@ export default {
 .profile-view {
   display: flex;
   align-items: center;
+  justify-items: center;
 
   padding: 32px 24px;
 
   border: 3px solid #ebebeb;
   border-radius: 12px;
-  justify-items: center;
 }
 
 @media screen and (max-width: 640px) {
@@ -109,28 +105,82 @@ export default {
 
   margin-right: 24px;
 }
+
 .profile-view__avatar {
+  position: relative;
+
+  overflow: hidden;
+
   width: 88px;
   height: 88px;
+
   margin-right: 24px;
 
+  cursor: pointer;
+
   border: 4px solid #ebebeb;
   border-radius: 9999px;
 
   object-fit: cover;
   object-position: center center;
 }
+
+.profile-view__avatar--editable:hover .profile-view__edit-overlay {
+  opacity: 1;
+}
+
+.profile-view__edit-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 4px;
+
+  transition: opacity 0.3s ease;
+
+  text-align: center;
+
+  opacity: 0;
+
+  color: #fff;
+
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+
+  background-color: rgba(0, 0, 0, 0.6);
+
+  font-size: 12px;
+}
+
+.profile-view__avatar-image {
+  width: 100%;
+  height: 100%;
+
+  border-radius: 9999px;
+}
+
+.profile-view__avatar-placeholder {
+  width: 100%;
+  height: 100%;
+
+  border-radius: 9999px;
+  background-color: #ebebeb;
+}
+
 .profile-view__display-name {
   color: #4a4a4a;
 
   font-size: 16px;
   font-weight: 600;
 }
+
 .profile-view__liker-id {
   margin-top: 4px;
 
   font-size: 12px;
 }
+
 .profile-view__file-uploader {
   display: none;
 }

locales/client/cn.json

@@ -3,6 +3,7 @@
         "back": "返回",
         "accept": "接受",
         "decline": "拒绝",
+        "edit": "编辑",
         "email": "电邮地址",
         "connect": "连接",
         "disconnect": "取消连接",

locales/client/en.json

@@ -5,6 +5,7 @@
     "decline": "Decline",
     "connect": "Connect",
     "disconnect": "Disconnect",
+    "edit": "Edit",
     "learnMore": "Learn More",
     "loading": "Loading",
     "signing": "Waiting for signature",

locales/client/zh.json

@@ -3,6 +3,7 @@
     "back": "返回",
     "accept": "接受",
     "decline": "拒絕",
+    "edit": "编辑",
     "email": "電郵",
     "connect": "連接",
     "disconnect": "取消連接",