From 3b190467c16a538e95627bcc45ff62698b35ec84 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Sat, 24 Feb 2024 14:58:00 +0800 Subject: [PATCH] update i18n and style of creatioin from app template --- web/app/(commonLayout)/apps/NewAppCard.tsx | 2 +- .../app/create-from-dsl-modal/index.tsx | 3 - web/app/components/explore/app-list/index.tsx | 3 +- .../explore/create-app-modal/index.tsx | 58 ++++++++++++++----- .../explore/create-app-modal/style.module.css | 36 ------------ web/i18n/pt-BR/app.ts | 19 +++--- web/i18n/uk-UA/app.ts | 17 +++--- web/i18n/zh-Hans/app.ts | 1 - 8 files changed, 67 insertions(+), 72 deletions(-) delete mode 100644 web/app/components/explore/create-app-modal/style.module.css diff --git a/web/app/(commonLayout)/apps/NewAppCard.tsx b/web/app/(commonLayout)/apps/NewAppCard.tsx index 43bdbdc6bf..2586eb0cd1 100644 --- a/web/app/(commonLayout)/apps/NewAppCard.tsx +++ b/web/app/(commonLayout)/apps/NewAppCard.tsx @@ -17,7 +17,7 @@ const CreateAppCard = forwardRef(({ onSuc const { t } = useTranslation() const { onPlanInfoChanged } = useProviderContext() - const [showNewAppDialog, setShowNewAppDialog] = useState(true) + const [showNewAppDialog, setShowNewAppDialog] = useState(false) const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false) return ( (null) const [isShowCreateModal, setIsShowCreateModal] = React.useState(false) - const onCreate: CreateAppModalProps['onConfirm'] = async ({ name, icon, icon_background }) => { + const onCreate: CreateAppModalProps['onConfirm'] = async ({ name, icon, icon_background, description }) => { const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string) try { @@ -69,6 +69,7 @@ const Apps = ({ icon, icon_background, mode: currApp?.app.mode as AppMode, + description, config: model_config, }) setIsShowCreateModal(false) diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx index 007ef0c14e..9541926577 100644 --- a/web/app/components/explore/create-app-modal/index.tsx +++ b/web/app/components/explore/create-app-modal/index.tsx @@ -1,8 +1,6 @@ 'use client' import React, { useState } from 'react' -import cn from 'classnames' import { useTranslation } from 'react-i18next' -import s from './style.module.css' import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' import Toast from '@/app/components/base/toast' @@ -10,6 +8,8 @@ import AppIcon from '@/app/components/base/app-icon' import EmojiPicker from '@/app/components/base/emoji-picker' import { useProviderContext } from '@/context/provider-context' import AppsFull from '@/app/components/billing/apps-full-in-dialog' +import { XClose } from '@/app/components/base/icons/src/vender/line/general' + export type CreateAppModalProps = { appName: string show: boolean @@ -17,6 +17,7 @@ export type CreateAppModalProps = { name: string icon: string icon_background: string + description: string }) => Promise onHide: () => void } @@ -30,9 +31,9 @@ const CreateAppModal = ({ const { t } = useTranslation() const [name, setName] = React.useState(appName) - const [showEmojiPicker, setShowEmojiPicker] = useState(false) const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' }) + const [description, setDescription] = useState('') const { plan, enableBilling } = useProviderContext() const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps) @@ -45,6 +46,7 @@ const CreateAppModal = ({ onConfirm({ name, ...emoji, + description, }) onHide() } @@ -53,20 +55,46 @@ const CreateAppModal = ({ <> { }} + onClose={() => {}} wrapperClassName='z-40' - className={cn(s.modal, '!max-w-[480px]', 'px-8')} + className='relative !max-w-[480px] px-8' > - -
{t('explore.appCustomize.title', { name: appName })}
-
-
{t('explore.appCustomize.subTitle')}
-
- { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} /> - setName(e.target.value)} - className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' +
+ +
+
{t('explore.appCustomize.title', { name: appName })}
+
+ {/* icon & name */} +
+
{t('app.newApp.captionName')}
+
+ { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} /> + setName(e.target.value)} + placeholder={t('app.newApp.appNamePlaceholder') || ''} + className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs' + /> +
+ {showEmojiPicker && { + setEmoji({ icon, icon_background }) + setShowEmojiPicker(false) + }} + onClose={() => { + setEmoji({ icon: '🤖', icon_background: '#FFEAD5' }) + setShowEmojiPicker(false) + }} + />} +
+ {/* description */} +
+
{t('app.newApp.captionDescription')}
+