#25 File and Relation Column

atomicdata-dev · Mar 9, 2023 · 308d9ae · 308d9ae
1 parent b9ce072
commit 308d9ae
Show file tree

Hide file tree

Showing 25 changed files with 706 additions and 295 deletions.
diff --git a/data-browser/package.json b/data-browser/package.json
@@ -26,7 +26,7 @@
     "react-helmet-async": "^1.3.0",
     "react-hot-toast": "^2.4.0",
     "react-hotkeys-hook": "^3.1.0",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.8.0",
     "react-intersection-observer": "^9.4.1",
     "react-is": "^18",
     "react-markdown": "^8.0.3",

diff --git a/data-browser/src/App.tsx b/data-browser/src/App.tsx
@@ -84,9 +84,11 @@ function App(): JSX.Element {
                   <DropdownContainer>
                     <DialogContainer>
                       <PopoverContainer>
-                        <NavWrapper>
-                          <AppRoutes />
-                        </NavWrapper>
+                        <DropdownContainer>
+                          <NavWrapper>
+                            <AppRoutes />
+                          </NavWrapper>
+                        </DropdownContainer>
                       </PopoverContainer>
                       <NetworkIndicator />
                     </DialogContainer>

diff --git a/data-browser/src/components/ClassDetail.tsx b/data-browser/src/components/ClassDetail.tsx
@@ -18,7 +18,7 @@ export function ClassDetail({ resource }: Props): JSX.Element {
         <Detail>
           <>
             {'is a '}
-            {getIconForClass(klass)}
+            {getIconForClass(classes[0])}
             <InlineFormattedResourceList subjects={classes} />
           </>
         </Detail>

diff --git a/data-browser/src/components/Dialog/index.tsx b/data-browser/src/components/Dialog/index.tsx
@@ -11,6 +11,7 @@ import { FaTimes } from 'react-icons/fa';
 import styled, { keyframes } from 'styled-components';
 import { effectTimeout } from '../../helpers/effectTimeout';
 import { Button } from '../Button';
+import { DropdownContainer } from '../Dropdown/DropdownContainer';
 import { PopoverContainer } from '../Popover';
 import { Slot } from '../Slot';
 import {
@@ -142,12 +143,14 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
     <StyledDialog ref={dialogRef} onMouseDown={handleOutSideClick}>
       <StyledInnerDialog ref={innerDialogRef}>
         <PopoverContainer>
-          <CloseButtonSlot slot='close'>
-            <Button icon onClick={cancelDialog} aria-label='close'>
-              <FaTimes />
-            </Button>
-          </CloseButtonSlot>
-          {children}
+          <DropdownContainer>
+            <CloseButtonSlot slot='close'>
+              <Button icon onClick={cancelDialog} aria-label='close'>
+                <FaTimes />
+              </Button>
+            </CloseButtonSlot>
+            {children}
+          </DropdownContainer>
         </PopoverContainer>
       </StyledInnerDialog>
     </StyledDialog>,

diff --git a/data-browser/src/components/Dropdown/DropdownContainer.tsx b/data-browser/src/components/Dropdown/DropdownContainer.tsx
@@ -10,11 +10,11 @@ export const DropdownContainer: React.FC<React.PropsWithChildren<unknown>> = ({
   return (
     <DropdownPortalContext.Provider value={portalRef}>
       {children}
-      <StyledDiv ref={portalRef}></StyledDiv>
+      <DropdownContainerDiv ref={portalRef}></DropdownContainerDiv>
     </DropdownPortalContext.Provider>
   );
 };
 
-const StyledDiv = styled.div`
+const DropdownContainerDiv = styled.div`
   display: contents;
 `;
diff --git a/data-browser/src/components/Popover.tsx b/data-browser/src/components/Popover.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
 import styled, { keyframes } from 'styled-components';
-import { useDialogTreeContext } from './Dialog/dialogContext';
 import { transparentize } from 'polished';
+import { useDialogTreeContext } from './Dialog/dialogContext';
 
 export interface PopoverProps {
   Trigger: React.ReactNode;
@@ -73,9 +73,7 @@ const Content = styled(RadixPopover.Content)`
       ${p => p.theme.margin}rem
   );
   background-color: ${p => transparentize(0.2, p.theme.colors.bgBody)};
-  backdrop-filter: blur(5px);
-  /* border: 1px solid ${p => p.theme.colors.bg2}; */
-  /* padding: ${p => p.theme.margin}rem; */
+  backdrop-filter: blur(10px);
   box-shadow: ${p => p.theme.boxShadowSoft};
   border-radius: ${p => p.theme.radius};
   position: relative;