refactor(console): optimize the image uploader (#3441)

2025-01-27 21:39:16 -05:00 · 2023-03-17 13:56:49 +08:00 · 2023-03-17 13:56:49 +08:00 · 70709044cc
commit 70709044cc
parent d570c3f1c9
13 changed files with 28 additions and 48 deletions
--- a/packages/console/src/components/Uploader/FileUploader/index.module.scss
+++ b/packages/console/src/components/Uploader/FileUploader/index.module.scss
@ -3,7 +3,7 @@
 .uploader {
  border: 1px dashed var(--color-border);
  border-radius: 8px;
-  padding: _.unit(5.5);
+  padding: _.unit(3.25);

  > input {
    display: none;
--- a/packages/console/src/components/Uploader/ImageUploader/index.module.scss
+++ b/packages/console/src/components/Uploader/ImageUploader/index.module.scss
@ -3,13 +3,14 @@
 .imageUploader {
  border: 1px dashed var(--color-border);
  border-radius: 8px;
-  padding: _.unit(6) _.unit(2);
+  padding: _.unit(3.75) _.unit(2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .delete {
+    display: none;
    position: absolute;
    right: _.unit(2);
    bottom: _.unit(2);
@ -19,5 +20,12 @@
    height: 40px;
    max-width: 100%;
    object-fit: contain;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    .delete {
+      display: block;
+    }
  }
 }
--- a/packages/console/src/components/Uploader/ImageUploader/index.tsx
+++ b/packages/console/src/components/Uploader/ImageUploader/index.tsx
@ -10,11 +10,10 @@ import * as styles from './index.module.scss';
 export const maxImageSizeLimit = 500 * 1024; // 500 KB

 export const allowedImageMimeTypes: AllowedUploadMimeType[] = [
-  'image/jpeg',
-  'image/png',
-  'image/gif',
-  'image/webp',
  'image/svg+xml',
+  'image/png',
+  'image/jpeg',
+  'image/vnd.microsoft.icon',
 ];

 export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
@ -140,7 +140,12 @@ const BrandingForm = () => {
                name="branding.darkLogoUrl"
                control={control}
                render={({ field: { onChange, value, name } }) => (
-                  <ImageUploaderField name={name} value={value ?? ''} onChange={onChange} />
+                  <ImageUploaderField
+                    name={name}
+                    value={value ?? ''}
+                    actionDescription={t('sign_in_exp.branding.dark_logo_image')}
+                    onChange={onChange}
+                  />
                )}
              />
            </FormField>
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx
@ -30,7 +30,7 @@ const LogoAndFaviconUploader = () => {
              <ImageUploader
                name={name}
                value={value ?? ''}
-                actionDescription={t('sign_in_exp.branding.upload_logo_image_description')}
+                actionDescription={t('sign_in_exp.branding.logo_image')}
                onCompleted={onChange}
                onUploadErrorChange={setUploadLogoError}
                onDelete={() => {
@ -48,7 +48,7 @@ const LogoAndFaviconUploader = () => {
              <ImageUploader
                name={name}
                value={value ?? ''}
-                actionDescription={t('sign_in_exp.branding.upload_favicon_description')}
+                actionDescription={t('sign_in_exp.branding.favicon')}
                onCompleted={onChange}
                onUploadErrorChange={setUploadFaviconError}
                onDelete={() => {
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
@ -84,19 +84,15 @@ const sign_in_exp = {
  branding: {
    title: 'BRANDING',
    ui_style: 'Stil',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: 'App logo URL',
    logo_image_url_placeholder: 'https://dein.cdn.domain/logo.png',
    dark_logo_image_url: 'App logo URL (Dunkler Modus)',
    dark_logo_image_url_placeholder: 'https://dein.cdn.domain/logo-dark.png',
    logo_image: 'App logo',
    dark_logo_image: 'App logo (Dunkler Modus)',
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -27,19 +27,15 @@ const sign_in_exp = {
  branding: {
    title: 'BRANDING AREA',
    ui_style: 'Style',
-    favicon: 'Browser favicon',
+    favicon: 'Favicon',
    logo_image_url: 'App logo image URL',
    logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
    dark_logo_image_url: 'App logo image URL (Dark)',
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'App logo',
    dark_logo_image: 'App logo (Dark)',
-    logo_action_description: 'App Logo to display in UI interface',
-    favicon_action_description: 'Browser Favicon',
    logo_image_error: 'App logo: {{error}}',
    favicon_error: 'Favicon: {{error}}',
-    upload_logo_image_description: 'App Logo to display in UI interface',
-    upload_favicon_description: 'Browser Favicon',
  },
  custom_css: {
    title: 'CUSTOM CSS',
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -29,19 +29,15 @@ const sign_in_exp = {
  branding: {
    title: 'ZONE DE MARQUE',
    ui_style: 'Style',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: "URL de l'image du logo de l'application",
    logo_image_url_placeholder: 'https://votre.domaine.cdn/logo.png',
    dark_logo_image_url: "URL de l'image du logo de l'application (Sombre)",
    dark_logo_image_url_placeholder: 'https://votre.domaine.cdn/logo-dark.png',
    logo_image: 'App logo', // UNTRANSLATED
    dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
@ -25,19 +25,15 @@ const sign_in_exp = {
  branding: {
    title: '브랜딩 영역',
    ui_style: '스타일',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: '앱 로고 이미지 URL',
    logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
    dark_logo_image_url: '앱 로고 이미지 URL (다크 모드)',
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'App logo', // UNTRANSLATED
    dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
@ -28,19 +28,15 @@ const sign_in_exp = {
  branding: {
    title: 'ÁREA DE MARCA',
    ui_style: 'Estilo',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: 'URL da imagem do logotipo do aplicativo',
    logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
    dark_logo_image_url: 'URL da imagem do logotipo do aplicativo (Escuro)',
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'App logo', // UNTRANSLATED
    dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -27,19 +27,15 @@ const sign_in_exp = {
  branding: {
    title: 'ÁREA DE MARCA',
    ui_style: 'Estilo',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: 'URL do logotipo da app',
    logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
    dark_logo_image_url: 'URL do logotipo da app (tema escuro)',
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'App logo', // UNTRANSLATED
    dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -28,19 +28,15 @@ const sign_in_exp = {
  branding: {
    title: 'MARKA ALANI',
    ui_style: 'Stil',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
    logo_image_url: 'Uygulama logosu resim URLi',
    logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
    dark_logo_image_url: 'Uygulama logosu resim URLi (Koyu)',
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'App logo', // UNTRANSLATED
    dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -33,12 +33,8 @@ const sign_in_exp = {
    dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
    logo_image: 'Logo 图片',
    dark_logo_image: 'Logo 图片(深色)',
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
    logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
    favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
  },
  custom_css: {
    title: '自定义 CSS',