From 91c8eb8509adbac2ccc65a5b8148a9524b23116e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 4 Sep 2021 16:55:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E4=BF=AE=E6=94=B9AvatarUpload?=
 =?UTF-8?q?er=E4=BA=A4=E4=BA=92=EF=BC=8C=E5=BC=BA=E5=8C=96=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E8=92=99=E5=B1=82=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AvatarUploader.tsx         | 29 +++++++++++++++----
 web/src/components/Modal.tsx                  |  2 +-
 .../components/modals/GroupDetail/Summary.tsx |  6 +++-
 .../modals/SettingsView/Account.tsx           |  6 +++-
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/web/src/components/AvatarUploader.tsx b/web/src/components/AvatarUploader.tsx
index 1d6e9138..412e05cf 100644
--- a/web/src/components/AvatarUploader.tsx
+++ b/web/src/components/AvatarUploader.tsx
@@ -1,9 +1,13 @@
 import { blobUrlToFile } from '@/utils/file-helper';
+import { Icon } from '@iconify/react';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { uploadFile, UploadFileResult, useAsyncRequest } from 'tailchat-shared';
 import { AvatarPicker } from './AvatarPicker';
 
 export const AvatarUploader: React.FC<{
+  circle?: boolean;
+  className?: string;
   onUploadSuccess: (fileInfo: UploadFileResult) => void;
 }> = React.memo((props) => {
   const [uploadProgress, setUploadProgress] = useState(0); // 0 - 100
@@ -31,13 +35,26 @@ export const AvatarUploader: React.FC<{
       disabled={loading}
       onChange={handlePickImage}
     >
-      {props.children}
-      {loading && (
+      <div className={clsx('group', props.className)}>
+        {props.children}
+        {loading && (
+          <div
+            className="absolute bottom-0 left-0 h-1"
+            style={{ width: `${uploadProgress}%` }}
+          />
+        )}
+
         <div
-          className="absolute bottom-0 left-0 h-1"
-          style={{ width: `${uploadProgress}%` }}
-        />
-      )}
+          className={clsx(
+            'absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center transition opacity-0 group-hover:opacity-100',
+            {
+              'rounded-1/2': props.circle,
+            }
+          )}
+        >
+          <Icon icon="mdi:camera-outline" />
+        </div>
+      </div>
     </AvatarPicker>
   );
 });
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 38d7086a..d5f8e86d 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -97,7 +97,7 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
           >
             {closable === true && (
               <Icon
-                className="absolute right-2.5 top-3.5 text-xl z-10"
+                className="absolute right-2.5 top-3.5 text-xl z-10 cursor-pointer"
                 icon="mdi:close"
                 onClick={closeModal}
               />
diff --git a/web/src/components/modals/GroupDetail/Summary.tsx b/web/src/components/modals/GroupDetail/Summary.tsx
index 9c501fec..ecdae87f 100644
--- a/web/src/components/modals/GroupDetail/Summary.tsx
+++ b/web/src/components/modals/GroupDetail/Summary.tsx
@@ -47,7 +47,11 @@ export const GroupSummary: React.FC<{
 
       <div className="flex">
         <div className="w-1/3">
-          <AvatarUploader onUploadSuccess={handleGroupAvatarChange}>
+          <AvatarUploader
+            className="text-4xl"
+            circle={true}
+            onUploadSuccess={handleGroupAvatarChange}
+          >
             <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
           </AvatarUploader>
         </div>
diff --git a/web/src/components/modals/SettingsView/Account.tsx b/web/src/components/modals/SettingsView/Account.tsx
index 9d24d61d..c75f7472 100644
--- a/web/src/components/modals/SettingsView/Account.tsx
+++ b/web/src/components/modals/SettingsView/Account.tsx
@@ -66,7 +66,11 @@ export const SettingsAccount: React.FC = React.memo(() => {
     <div>
       <div className="flex">
         <div className="w-1/3">
-          <AvatarUploader onUploadSuccess={handleUserAvatarChange}>
+          <AvatarUploader
+            className="text-4xl"
+            circle={true}
+            onUploadSuccess={handleUserAvatarChange}
+          >
             <Avatar size={128} src={userInfo.avatar} name={userInfo.nickname} />
           </AvatarUploader>
         </div>