From 70709044cce49df3debc418170ea5a2f3a6870bb Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Fri, 17 Mar 2023 13:56:49 +0800 Subject: [PATCH] refactor(console): optimize the image uploader (#3441) --- .../components/Uploader/FileUploader/index.module.scss | 2 +- .../Uploader/ImageUploader/index.module.scss | 10 +++++++++- .../src/components/Uploader/ImageUploader/index.tsx | 7 +++---- .../SignInExperience/tabs/Branding/BrandingForm.tsx | 7 ++++++- .../components/LogoAndFaviconUploader/index.tsx | 4 ++-- .../de/translation/admin-console/sign-in-exp.ts | 6 +----- .../en/translation/admin-console/sign-in-exp.ts | 6 +----- .../fr/translation/admin-console/sign-in-exp.ts | 6 +----- .../ko/translation/admin-console/sign-in-exp.ts | 6 +----- .../pt-br/translation/admin-console/sign-in-exp.ts | 6 +----- .../pt-pt/translation/admin-console/sign-in-exp.ts | 6 +----- .../tr-tr/translation/admin-console/sign-in-exp.ts | 6 +----- .../zh-cn/translation/admin-console/sign-in-exp.ts | 4 ---- 13 files changed, 28 insertions(+), 48 deletions(-) diff --git a/packages/console/src/components/Uploader/FileUploader/index.module.scss b/packages/console/src/components/Uploader/FileUploader/index.module.scss index 5a51a6531..671d4bd7a 100644 --- 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; diff --git a/packages/console/src/components/Uploader/ImageUploader/index.module.scss b/packages/console/src/components/Uploader/ImageUploader/index.module.scss index 785e9b9d8..a76ebbb13 100644 --- 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; + } } } diff --git a/packages/console/src/components/Uploader/ImageUploader/index.tsx b/packages/console/src/components/Uploader/ImageUploader/index.tsx index 4d28332b4..88712ce39 100644 --- 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 & { diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx index 3cda05abb..103bd9ad1 100644 --- 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 } }) => ( - + )} /> diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx index 2730cfbea..3918c9f40 100644 --- 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 = () => { { @@ -48,7 +48,7 @@ const LogoAndFaviconUploader = () => { { diff --git 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 index 79754fd44..9dd4efb9c 100644 --- 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 diff --git 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 index 594642959..3622b2d47 100644 --- 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', diff --git 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 index 87e60d485..999d22278 100644 --- 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 diff --git 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 index c1f357989..00b58f664 100644 --- 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 diff --git 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 index ec91cd16d..01f025731 100644 --- 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 diff --git 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 index 10835c703..130bc65c5 100644 --- 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 diff --git 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 index 8159389fa..ffbb4bb2a 100644 --- 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 diff --git 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 index bac60a323..b232f2e01 100644 --- 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',