mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
update style of app creation
This commit is contained in:
JzoNg
@ -15,8 +15,9 @@ import Button from '@/app/components/base/button'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import EmojiPicker from '@/app/components/base/emoji-picker'
|
||||
import AppsFull from '@/app/components/billing/apps-full-in-dialog'
|
||||
import { ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
|
||||
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
|
||||
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
|
||||
import { HelpCircle, InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
|
||||
import TooltipPlus from '@/app/components/base/tooltip-plus'
|
||||
import { getRedirection } from '@/utils/app-redirection'
|
||||
@ -85,9 +86,9 @@ const AppForm = ({
|
||||
return (
|
||||
<div className='overflow-y-auto'>
|
||||
{/* app type */}
|
||||
<div className='py-2 px-8 w-[480px]'>
|
||||
<div className='py-2 px-8 w-[520px]'>
|
||||
<div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex justify-between'>
|
||||
<TooltipPlus
|
||||
hideArrow
|
||||
popupContent={
|
||||
@ -96,7 +97,7 @@ const AppForm = ({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'relative grow w-[133px] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
'relative grow w-[110px] px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
showChatBotType && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
|
||||
)}
|
||||
onClick={() => {
|
||||
@ -109,6 +110,33 @@ const AppForm = ({
|
||||
<div className='hidden absolute max-h-[92px] left-[-20px] bottom-[75px] px-3 py-[10px] bg-white rounded-xl shadow-lg border-[0.5px] border-[rgba(0,0,0,0.05)] text-gray-700 text-xs leading-[18px] group-hover:block'>{t('app.newApp.chatbotDescription')}</div>
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
<TooltipPlus
|
||||
hideArrow
|
||||
popupContent={
|
||||
<div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
|
||||
<div className='text-gray-700'>{t('app.newApp.completionDescription')}</div>
|
||||
<div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
|
||||
<div className='flex items-center text-[#dc6803]'>
|
||||
<AlertTriangle className='w-3 h-3 mr-1'/>
|
||||
<div>{t('app.newApp.completionWarning')}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'relative grow w-[110px] px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
appMode === 'agent-chat' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
|
||||
)}
|
||||
onClick={() => {
|
||||
setAppMode('completion')
|
||||
setShowChatBotType(false)
|
||||
}}
|
||||
>
|
||||
<AiText className='w-6 h-6' />
|
||||
<div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.completeApp')}</div>
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
<TooltipPlus
|
||||
hideArrow
|
||||
popupContent={
|
||||
@ -117,7 +145,7 @@ const AppForm = ({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'relative grow w-[133px] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
'relative grow w-[110px] px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
appMode === 'agent-chat' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
|
||||
)}
|
||||
onClick={() => {
|
||||
@ -129,19 +157,33 @@ const AppForm = ({
|
||||
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.agent')}</div>
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
<div
|
||||
className={cn(
|
||||
'relative grow flex-[30%] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
appMode === 'workflow' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
|
||||
)}
|
||||
onClick={() => {
|
||||
setAppMode('workflow')
|
||||
setShowChatBotType(false)
|
||||
}}
|
||||
<TooltipPlus
|
||||
hideArrow
|
||||
popupContent={
|
||||
<div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
|
||||
<div className='text-gray-700'>{t('app.newApp.workflowDescription')}</div>
|
||||
<div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
|
||||
<div className='flex items-center text-indigo-600'>
|
||||
<InfoCircle className='w-3 h-3 mr-1'/>
|
||||
<div>{t('app.newApp.completionWarning')}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Route className='w-6 h-6' />
|
||||
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'relative grow w-[110px] px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
|
||||
appMode === 'workflow' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
|
||||
)}
|
||||
onClick={() => {
|
||||
setAppMode('workflow')
|
||||
setShowChatBotType(false)
|
||||
}}
|
||||
>
|
||||
<Route className='w-6 h-6' />
|
||||
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
</div>
|
||||
</div>
|
||||
{showChatBotType && (
|
||||
|
||||
@ -25,7 +25,7 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
|
||||
onClose={() => {}}
|
||||
>
|
||||
{/* blank form */}
|
||||
<div className='shrink-0 flex flex-col max-w-[480px] h-full bg-white'>
|
||||
<div className='shrink-0 flex flex-col max-w-[520px] h-full bg-white'>
|
||||
{/* Heading */}
|
||||
<div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-white rounded-ss-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromBlank')}</div>
|
||||
{/* app form */}
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="ai-text">
|
||||
<path id="Vector" d="M4 18H7M4 12H9M4 6H20M17 10L18.5 13.5L22 15L18.5 16.5L17 20L15.5 16.5L12 15L15.5 13.5L17 10Z" stroke="#344054" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 325 B |
@ -0,0 +1,7 @@
|
||||
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="chat-bot">
|
||||
<path id="Vector" d="M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z" fill="#1570EF" stroke="#1570EF" stroke-width="1.25"/>
|
||||
<path id="Vector_2" d="M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z" fill="#1570EF"/>
|
||||
<path id="Vector_3" d="M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z" fill="#1570EF"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,39 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "24",
|
||||
"height": "24",
|
||||
"viewBox": "0 0 24 24",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "ai-text"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector",
|
||||
"d": "M4 18H7M4 12H9M4 6H20M17 10L18.5 13.5L22 15L18.5 16.5L17 20L15.5 16.5L12 15L15.5 13.5L17 10Z",
|
||||
"stroke": "currentColor",
|
||||
"stroke-width": "1.5",
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "AiText"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './AiText.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
|
||||
props,
|
||||
ref,
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />)
|
||||
|
||||
Icon.displayName = 'AiText'
|
||||
|
||||
export default Icon
|
||||
@ -1,3 +1,4 @@
|
||||
export { default as AiText } from './AiText'
|
||||
export { default as ChatBot } from './ChatBot'
|
||||
export { default as CuteRobot } from './CuteRobot'
|
||||
export { default as MessageCheckRemove } from './MessageCheckRemove'
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "13",
|
||||
"height": "12",
|
||||
"viewBox": "0 0 13 12",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "chat-bot"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector",
|
||||
"d": "M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z",
|
||||
"fill": "currentColor",
|
||||
"stroke": "currentColor",
|
||||
"stroke-width": "1.25"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector_2",
|
||||
"d": "M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Vector_3",
|
||||
"d": "M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "ChatBot"
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './ChatBot.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
|
||||
props,
|
||||
ref,
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />)
|
||||
|
||||
Icon.displayName = 'ChatBot'
|
||||
|
||||
export default Icon
|
||||
@ -1,4 +1,5 @@
|
||||
export { default as AiText } from './AiText'
|
||||
export { default as ChatBot } from './ChatBot'
|
||||
export { default as CuteRobote } from './CuteRobote'
|
||||
export { default as EditList } from './EditList'
|
||||
export { default as MessageDotsCircle } from './MessageDotsCircle'
|
||||
|
||||
@ -3,11 +3,10 @@ import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { PlusIcon } from '@heroicons/react/20/solid'
|
||||
import Button from '../../base/button'
|
||||
import s from './style.module.css'
|
||||
import type { App } from '@/models/explore'
|
||||
import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
|
||||
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
|
||||
export type AppCardProps = {
|
||||
app: App
|
||||
canCreate: boolean
|
||||
@ -24,35 +23,72 @@ const AppCard = ({
|
||||
const { t } = useTranslation()
|
||||
const { app: appBasicInfo } = app
|
||||
return (
|
||||
<div className={cn(s.wrap, 'col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
|
||||
<div className={cn('group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
|
||||
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
|
||||
<AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
|
||||
<div className='relative h-8 text-sm font-medium leading-8 grow'>
|
||||
<div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
|
||||
<div className='relative shrink-0'>
|
||||
<AppIcon size='large' icon={app.app.icon} background={app.app.icon_background} />
|
||||
<span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
|
||||
{appBasicInfo.mode === 'advanced-chat' && (
|
||||
<ChatBot className='w-3 h-3 text-blue-600' />
|
||||
)}
|
||||
{appBasicInfo.mode === 'agent-chat' && (
|
||||
<CuteRobote className='w-3 h-3 text-indigo-600' />
|
||||
)}
|
||||
{appBasicInfo.mode === 'chat' && (
|
||||
<ChatBot className='w-3 h-3 text-blue-600' />
|
||||
)}
|
||||
{appBasicInfo.mode === 'completion' && (
|
||||
<AiText className='w-3 h-3 text-gray-500' />
|
||||
)}
|
||||
{appBasicInfo.mode === 'workflow' && (
|
||||
<Route className='w-3 h-3 text-[#f79009]' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='grow w-0'>
|
||||
<div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
|
||||
<div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
|
||||
</div>
|
||||
<div className='flex items-center text-[10px] leading-[18px] text-gray-500'>
|
||||
{appBasicInfo.mode === 'advanced-chat' && (
|
||||
<div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
|
||||
)}
|
||||
{appBasicInfo.mode === 'agent-chat' && (
|
||||
<div className='truncate'>{t('app.types.agent').toUpperCase()}</div>
|
||||
)}
|
||||
{appBasicInfo.mode === 'chat' && (
|
||||
<div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
|
||||
)}
|
||||
{appBasicInfo.mode === 'completion' && (
|
||||
<div className='truncate'>{t('app.types.completion').toUpperCase()}</div>
|
||||
)}
|
||||
{appBasicInfo.mode === 'workflow' && (
|
||||
<div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
|
||||
<div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
|
||||
<div className={s.mode}>
|
||||
<AppModeLabel mode={appBasicInfo.mode} />
|
||||
</div>
|
||||
{isExplore && canCreate && (
|
||||
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
|
||||
<div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4 group-hover:line-clamp-2 group-hover:h-9'>{app.description}</div>
|
||||
{isExplore && canCreate && (
|
||||
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
|
||||
<div className={cn('flex items-center w-full space-x-2')}>
|
||||
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
|
||||
<PlusIcon className='w-4 h-4 mr-1' />
|
||||
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{!isExplore && (
|
||||
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
|
||||
</div>
|
||||
)}
|
||||
{!isExplore && (
|
||||
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
|
||||
<div className={cn('flex items-center w-full space-x-2')}>
|
||||
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
|
||||
<PlusIcon className='w-4 h-4 mr-1' />
|
||||
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mode {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.opWrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrap:hover .mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrap:hover .opWrap {
|
||||
display: flex;
|
||||
}
|
||||
Reference in New Issue
Block a user