UI bugs related to borders in lists (#687)

Fix #645
This commit is contained in:
ericlinagora
2024-10-11 11:32:03 +02:00
committed by GitHub
4 changed files with 13 additions and 10 deletions
@@ -227,8 +227,8 @@ export default memo(
const commonProps = {
key: index,
className:
(index === 0 ? 'rounded-t-md ' : '') +
(index === documents.length - 1 ? 'rounded-b-md ' : ''),
(index === 0 ? 'rounded-t-md ' : '-mt-px ') +
(index === items.length - 1 ? 'rounded-b-md ' : ''),
item: child,
checked: checked[child.id] || false,
onCheck: (v: boolean) => setChecked(_.pickBy({ ...checked, [child.id]: v }, _.identity)),
@@ -238,7 +238,7 @@ export default memo(
return isMobile ? (
<DocumentRow {...commonProps} />
) : (
<Draggable id={index}>
<Draggable id={index} key={index}>
<DocumentRow {...commonProps} />
</Draggable>
);
@@ -450,7 +450,7 @@ export default memo(
<FolderRow
key={index}
className={
(index === 0 ? 'rounded-t-md ' : '') +
(index === 0 ? 'rounded-t-md ' : '-mt-px ') +
(index === items.length - 1 ? 'rounded-b-md ' : '')
}
item={child}
@@ -476,7 +476,7 @@ export default memo(
{activeIndex ? (
<DocumentRowOverlay
className={
(activeIndex === 0 ? 'rounded-t-md ' : '') +
(activeIndex === 0 ? 'rounded-t-md ' : '-mt-px ') +
(activeIndex === items.length - 1 ? 'rounded-b-md ' : '')
}
item={activeChild}
@@ -39,7 +39,7 @@ export const DocumentRow = ({
return (
<div
className={
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 -mt-px px-4 py-3 cursor-pointer ' +
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 px-4 py-3 cursor-pointer ' +
(checked
? 'bg-blue-500 bg-opacity-10 hover:bg-opacity-25 '
: 'hover:bg-zinc-500 hover:bg-opacity-10 ') +
@@ -96,7 +96,7 @@ export const DocumentRowOverlay = ({ item, className }: DriveItemOverlayProps) =
return (
<div
className={
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 -mt-px px-4 py-3 cursor-pointer ' +
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 px-4 py-3 cursor-pointer ' +
(className || '')
}
>
@@ -23,7 +23,7 @@ export const FolderRow = ({
return (
<div
className={
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 -mt-px px-4 py-3 cursor-pointer ' +
'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 px-4 py-3 cursor-pointer ' +
(className || '') +
(checked
? 'bg-blue-500 bg-opacity-10 hover:bg-opacity-25 '
@@ -81,7 +81,10 @@ export const InternalUsersAccessManager = ({
return (
<>
<div className="rounded-md border-t mt-2 dark:border-zinc-700">
<div className="p-4 flex flex-row items-center justify-center rounded-t-md border-x dark:border-zinc-700">
<div className={
"p-4 flex flex-row items-center justify-center rounded-t-md border-x dark:border-zinc-700"
+ (showResults ? ' rounded-b-md' : '')
}>
<div className="grow">
<InputDecorationIcon
prefix={SearchIcon}
@@ -157,7 +160,7 @@ export const InternalUsersAccessManager = ({
id={id}
userId={user?.id}
disabled={disabled}
className={(showResults ? '!rounded-none !rounded-t-md' : '') + (index === usersWithAccess.length - 1 ? ' rounded-b-md border-y' : ' border-t')}
className={(showResults ? '!rounded-none' : '') + (index === usersWithAccess.length - 1 ? ' !rounded-b-md border-y' : ' border-t')}
/>
)}
{(usersWithAccess?.length ?? 0) < minUserHeight &&