ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: some menu

Browse Source
chore/upgrade-next
Joel 1 year ago
parent 4ad152f525
commit e797e97b18
3 changed files with 53 additions and 25 deletions
Show Stats Download Patch File Download Diff File

18
web/app/account/avatar.tsx
Unescape Escape View File

@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment } from 'react' import { Fragment } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import Avatar from '@/app/components/base/avatar' import Avatar from '@/app/components/base/avatar'
import { logout } from '@/service/common' import { logout } from '@/service/common'
import { useAppContext } from '@/context/app-context' import { useAppContext } from '@/context/app-context'
@ -36,7 +36,7 @@ export default function AppSelector() {
({ open }) => ( ({ open }) => (
<> <>
<div> <div>
<Menu.Button <MenuButton
className={` className={`
inline-flex items-center inline-flex items-center
rounded-[20px] p-1x text-sm rounded-[20px] p-1x text-sm
@ -46,7 +46,7 @@ export default function AppSelector() {
`} `}
> >
<Avatar name={userProfile.name} size={32} /> <Avatar name={userProfile.name} size={32} />
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment} as={Fragment}
@ -57,14 +57,14 @@ export default function AppSelector() {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className=" className="
absolute -right-2 -top-1 w-60 max-w-80 absolute -right-2 -top-1 w-60 max-w-80
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg shadow-lg
" "
> >
<Menu.Item> <MenuItem>
<div className='p-1'> <div className='p-1'>
<div className='flex flex-nowrap items-center px-3 py-2'> <div className='flex flex-nowrap items-center px-3 py-2'>
<div className='grow'> <div className='grow'>
@ -74,8 +74,8 @@ export default function AppSelector() {
<Avatar name={userProfile.name} size={32} /> <Avatar name={userProfile.name} size={32} />
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<div className='p-1' onClick={() => handleLogout()}> <div className='p-1' onClick={() => handleLogout()}>
<div <div
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover' className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
@ -84,8 +84,8 @@ export default function AppSelector() {
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div> <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

10
web/app/components/app/annotation/header-opts/index.tsx
Unescape Escape View File

@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
import { import {
useCSVDownloader, useCSVDownloader,
} from 'react-papaparse' } from 'react-papaparse'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import Button from '../../../base/button' import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal' import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type' import type { AnnotationItemBasic } from '../type'
@ -87,11 +87,11 @@ const HeaderOptions: FC<Props> = ({
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span> <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
</button> </button>
<Menu as="div" className="relative w-full h-full"> <Menu as="div" className="relative w-full h-full">
<Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'> <MenuButton className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
<FileDownload02 className='w-4 h-4 text-text-tertiary' /> <FileDownload02 className='w-4 h-4 text-text-tertiary' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span> <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' /> <ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -101,7 +101,7 @@ const HeaderOptions: FC<Props> = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className={cn( className={cn(
'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs', 'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
)} )}
@ -122,7 +122,7 @@ const HeaderOptions: FC<Props> = ({
<button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}> <button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
<span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span> <span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
</button> </button>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>

50
web/app/components/base/modal/index.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
import { Fragment } from 'react' import { Fragment } from 'react'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine } from '@remixicon/react'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
@ -30,7 +30,7 @@ export default function Modal({
return ( return (
<Transition appear show={isShow} as={Fragment}> <Transition appear show={isShow} as={Fragment}>
<Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}> <Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -40,7 +40,9 @@ export default function Modal({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-background-overlay" /> <div className="fixed inset-0 bg-background-overlay" />
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-background-overlay" />
<div <div
className="fixed inset-0 overflow-y-auto" className="fixed inset-0 overflow-y-auto"
@ -50,7 +52,7 @@ export default function Modal({
}} }}
> >
<div className="flex min-h-full items-center justify-center p-4 text-center"> <div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child {/* <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
@ -59,20 +61,20 @@ export default function Modal({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={classNames( <DialogPanel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all', 'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
overflowVisible ? 'overflow-visible' : 'overflow-hidden', overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className, className,
)}> )}>
{title && <Dialog.Title {title && <DialogTitle
as="h3" as="h3"
className="title-2xl-semi-bold text-text-primary" className="title-2xl-semi-bold text-text-primary"
> >
{title} {title}
</Dialog.Title>} </DialogTitle>}
{description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'> {description && <div className='text-text-secondary body-md-regular mt-2'>
{description} {description}
</Dialog.Description>} </div>}
{closable {closable
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'> && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={ <RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
@ -83,8 +85,34 @@ export default function Modal({
} /> } />
</div>} </div>}
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
{title && <DialogTitle
as="h3"
className="title-2xl-semi-bold text-text-primary"
>
{title}
</DialogTitle>}
{description && <div className='text-text-secondary body-md-regular mt-2'>
{description}
</div>}
{closable
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
(e) => {
e.stopPropagation()
onClose()
}
} />
</div>}
{children}
</DialogPanel>
</div> </div>
</div> </div>
</Dialog> </Dialog>

Write Preview
Loading…
Cancel
Save