Skip to content

D
dify
Unverified Commit a8d5ef98 authored by Matri's avatar Matri Committed by GitHub
Browse files
Options

fix: members page z-index bug (#768)

parent 6242e91a
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 71 deletions
web/app/components/header/account-setting/index.tsx
View file @ a8d5ef98
...@@ -144,7 +144,7 @@ export default function AccountSetting({ ...@@ -144,7 +144,7 @@ export default function AccountSetting({
</div> </div>
</div> </div>
<div ref={scrollRef} className='relative w-[520px] h-[580px] pb-4 overflow-y-auto'> <div ref={scrollRef} className='relative w-[520px] h-[580px] pb-4 overflow-y-auto'>
<div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900', scrolled && scrolledClassName)}> <div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
{[...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)?.name} {[...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)?.name}
<XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} /> <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
</div> </div>
......
web/app/components/header/account-setting/members-page/operation/index.tsx
View file @ a8d5ef98
...@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next' ...@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'
import { Fragment } from 'react' import { Fragment } from 'react'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { Menu, Transition } from '@headlessui/react' import { Menu, Transition } from '@headlessui/react'
import cn from 'classnames'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
import s from './index.module.css'
import type { Member } from '@/models/common' import type { Member } from '@/models/common'
import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common' import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
import { ToastContext } from '@/app/components/base/toast' import { ToastContext } from '@/app/components/base/toast'
import s from './index.module.css'
import cn from 'classnames'
import { ChevronDownIcon, CheckIcon } from '@heroicons/react/24/outline'
const itemClassName = ` const itemClassName = `
flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg
...@@ -23,14 +23,14 @@ const itemDescClassName = ` ...@@ -23,14 +23,14 @@ const itemDescClassName = `
leading-[18px] text-xs text-gray-500 whitespace-nowrap leading-[18px] text-xs text-gray-500 whitespace-nowrap
` `
interface IOperationProps { type IOperationProps = {
member: Member member: Member
onOperate: () => void onOperate: () => void
} }
const Operation = ({ const Operation = ({
member, member,
onOperate onOperate,
}: IOperationProps) => { }: IOperationProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const RoleMap = { const RoleMap = {
...@@ -44,92 +44,94 @@ const Operation = ({ ...@@ -44,92 +44,94 @@ const Operation = ({
await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` }) await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
onOperate() onOperate()
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
} catch (e) { }
catch (e) {
} }
} }
const handleUpdateMemberRole = async (role: string) => { const handleUpdateMemberRole = async (role: string) => {
try { try {
await updateMemberRole({ await updateMemberRole({
url: `/workspaces/current/members/${member.id}/update-role`, url: `/workspaces/current/members/${member.id}/update-role`,
body: { role } body: { role },
}) })
onOperate() onOperate()
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
} catch (e) { }
catch (e) {
} }
} }
return ( return (
<Menu as="div" className="relative w-full h-full"> <Menu as="div" className="relative w-full h-full">
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={cn( <Menu.Button className={cn(
` `
group flex items-center justify-between w-full h-full justify-center group flex items-center justify-between w-full h-full
hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'} hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
text-[13px] text-gray-700 px-3 text-[13px] text-gray-700 px-3
` `,
)}> )}>
{RoleMap[member.role] || RoleMap.normal} {RoleMap[member.role] || RoleMap.normal}
<ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} /> <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
</Menu.Button> </Menu.Button>
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
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 <Menu.Items
className={cn( className={cn(
` `
absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200 absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
divide-y divide-gray-100 origin-top-right rounded-lg divide-y divide-gray-100 origin-top-right rounded-lg
`, `,
s.popup s.popup,
)} )}
> >
<div className="px-1 py-1"> <div className="px-1 py-1">
{ {
['admin', 'normal'].map(role => ( ['admin', 'normal'].map(role => (
<Menu.Item> <Menu.Item>
<div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}> <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
{ {
role === member.role role === member.role
? <CheckIcon className={itemIconClassName} /> ? <CheckIcon className={itemIconClassName} />
: <div className={itemIconClassName} /> : <div className={itemIconClassName} />
} }
<div> <div>
<div className={itemTitleClassName}>{t(`common.members.${role}`)}</div> <div className={itemTitleClassName}>{t(`common.members.${role}`)}</div>
<div className={itemDescClassName}>{t(`common.members.${role}Tip`)}</div> <div className={itemDescClassName}>{t(`common.members.${role}Tip`)}</div>
</div>
</div> </div>
</Menu.Item>
))
}
</div>
<Menu.Item>
<div className='px-1 py-1'>
<div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
<div className={itemIconClassName} />
<div>
<div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
<div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
</div> </div>
</Menu.Item>
))
}
</div>
<Menu.Item>
<div className='px-1 py-1'>
<div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
<div className={itemIconClassName} />
<div>
<div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
<div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
</div> </div>
</div> </div>
</Menu.Item> </div>
</Menu.Items> </Menu.Item>
</Transition> </Menu.Items>
</> </Transition>
) </>
} )
</Menu> }
</Menu>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment