ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSS bug causing ProjectCard links to flicker (#2375)

Browse Source 
on Microsoft desktop apps running old versions of Edge
This commit is contained in:
Frank Noirot
2024-05-16 21:05:20 -04:00
committed by GitHub
parent e63bf5db11
commit 4a0811eec8
1 changed files with 56 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ProjectCard.tsx
View File

@ -70,9 +70,9 @@ function ProjectCard({
className="group relative min-h-[5em] p-1 rounded-sm border border-chalkboard-20 dark:border-chalkboard-80 hover:!border-primary" className="group relative min-h-[5em] p-1 rounded-sm border border-chalkboard-20 dark:border-chalkboard-80 hover:!border-primary"
> >
{isEditing ? ( {isEditing ? (
<form onSubmit={handleSave} className="flex gap-2 items-center"> <form onSubmit={handleSave} className="flex items-center gap-2">
<input <input
className="dark:bg-chalkboard-80 dark:border-chalkboard-40 min-w-0 p-1 focus:outline-none" className="min-w-0 p-1 dark:bg-chalkboard-80 dark:border-chalkboard-40 focus:outline-none"
type="text" type="text"
id="newProjectName" id="newProjectName"
name="newProjectName" name="newProjectName"
@ -81,7 +81,7 @@ function ProjectCard({
defaultValue={project.name} defaultValue={project.name}
ref={inputRef} ref={inputRef}
/> />
<div className="flex gap-1 items-center"> <div className="flex items-center gap-1">
<ActionButton <ActionButton
Element="button" Element="button"
type="submit" type="submit"
@ -117,28 +117,27 @@ function ProjectCard({
</form> </form>
) : ( ) : (
<> <>
<div className="p-1 flex flex-col h-full gap-2">
<Link <Link
className="flex-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10 after:content-[''] after:absolute after:inset-0" className="relative z-0 flex flex-col h-full gap-2 p-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10"
to={`${paths.FILE}/${encodeURIComponent(project.path)}`} to={`${paths.FILE}/${encodeURIComponent(project.path)}`}
data-testid="project-link" data-testid="project-link"
> >
{project.name?.replace(FILE_EXT, '')} <div className="flex-1">{project.name?.replace(FILE_EXT, '')}</div>
</Link> <span className="text-xs text-chalkboard-60">
<span className="text-chalkboard-60 text-xs">
{numberOfFiles} file{numberOfFiles === 1 ? '' : 's'}{' '} {numberOfFiles} file{numberOfFiles === 1 ? '' : 's'}{' '}
{numberOfFolders > 0 && {numberOfFolders > 0 &&
`/ ${numberOfFolders} folder${ `/ ${numberOfFolders} folder${
numberOfFolders === 1 ? '' : 's' numberOfFolders === 1 ? '' : 's'
}`} }`}
</span> </span>
<span className="text-chalkboard-60 text-xs"> <span className="text-xs text-chalkboard-60">
Edited{' '} Edited{' '}
{project.metadata && project.metadata?.modified {project.metadata && project.metadata?.modified
? getDisplayedTime(project.metadata.modified) ? getDisplayedTime(project.metadata.modified)
: 'never'} : 'never'}
</span> </span>
<div className="absolute z-10 bottom-2 right-2 flex gap-1 items-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"> </Link>
<div className="absolute z-10 flex items-center gap-1 opacity-0 bottom-2 right-2 group-hover:opacity-100 group-focus-within:opacity-100">
<ActionButton <ActionButton
Element="button" Element="button"
iconStart={{ iconStart={{
@ -180,15 +179,14 @@ function ProjectCard({
</Tooltip> </Tooltip>
</ActionButton> </ActionButton>
</div> </div>
</div>
<Dialog <Dialog
open={isConfirmingDelete} open={isConfirmingDelete}
onClose={() => setIsConfirmingDelete(false)} onClose={() => setIsConfirmingDelete(false)}
className="relative z-50" className="relative z-50"
> >
<div className="fixed inset-0 bg-chalkboard-110/80 grid place-content-center"> <div className="fixed inset-0 grid bg-chalkboard-110/80 place-content-center">
<Dialog.Panel className="rounded p-4 bg-chalkboard-10 dark:bg-chalkboard-100 border border-destroy-80 max-w-2xl"> <Dialog.Panel className="max-w-2xl p-4 border rounded bg-chalkboard-10 dark:bg-chalkboard-100 border-destroy-80">
<Dialog.Title as="h2" className="text-2xl font-bold mb-4"> <Dialog.Title as="h2" className="mb-4 text-2xl font-bold">
Delete File Delete File
</Dialog.Title> </Dialog.Title>
<Dialog.Description> <Dialog.Description>