OpenConceptLab/ocl_issues#1776 | Concept Breadcrumbs

OpenConceptLab · Oct 17, 2024 · 0a1b227 · 0a1b227
1 parent 3a99812
commit 0a1b227
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 57 deletions.
diff --git a/src/components/common/Breadcrumbs.jsx b/src/components/common/Breadcrumbs.jsx
@@ -4,39 +4,102 @@ import RepoIcon from '../repos/RepoIcon';
 import ConceptIcon from '../concepts/ConceptIcon';
 import DotSeparator from './DotSeparator'
 import RepoVersionButton from '../repos/RepoVersionButton'
+import RepoTooltip from '../repos/RepoTooltip'
 import Box from '@mui/material/Box';
 import OwnerButton from './OwnerButton'
 
-const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, id, version, concept, noIcons, color, fontSize, size, ownerURL}) => {
+const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, id, version, concept, noIcons, color, fontSize, size, ownerURL, nested}) => {
   const iconProps = {color: 'secondary', style: {marginRight: '8px', width: '0.8em'}}
+  const hideParents = Boolean(concept && nested)
   return (
     <Box className='col-xs-12 padding-0' sx={{display: 'flex', alignItems: 'center', color: color, fontSize: fontSize}}>
       {
-        ownerType && owner &&
+        ownerType && owner && !hideParents &&
           <OwnerButton
             ownerType={ownerType}
             owner={owner}
             ownerURL={ownerURL}
             noIcons={noIcons}
             size={size}
+            sx={{
+              '.owner-button-label': {
+                maxWidth: '125px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                fontSize: '14px',
+                whiteSpace: 'nowrap',
+              },
+              '.MuiButton-startIcon': {
+                fontSize: '18px',
+              }
+            }}
           />
       }
       {
-        repo &&
+        repo && !hideParents &&
           <React.Fragment>
             <DotSeparator />
-            <RepoVersionButton size={size} href={repoURL} icon={noIcons ? false : <RepoIcon noTooltip sx={{color: 'secondary'}} />} repo={repo} version={repoVersion} versionStyle={{fontSize: fontSize || '14px'}} />
+        <RepoTooltip repo={{url: repoURL}}>
+            <RepoVersionButton
+              size={size}
+              href={repoURL}
+              icon={
+                noIcons ?
+                  false :
+                  <RepoIcon
+                    noTooltip
+                    sx={{color: 'secondary', fontSize: '18px'}}
+                  />
+              }
+              sx={{
+                '.repo-button-label': {
+                  display: 'inline-block !important',
+                  maxWidth: '200px',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  fontSize: '14px',
+                  whiteSpace: 'nowrap',
+                },
+                '.repo-version-label': {
+                  display: 'inline-block',
+                maxWidth: '75px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                fontSize: '14px',
+                whiteSpace: 'nowrap',
+                }
+              }}
+              repo={repo}
+              version={repoVersion}
+              versionStyle={{fontSize: fontSize || '14px'}}
+          />
+        </RepoTooltip>
           </React.Fragment>
       }
       {
         id && concept &&
           <React.Fragment>
-            <DotSeparator />
+            {!hideParents && <DotSeparator />}
             {
               !noIcons &&
-                <ConceptIcon selected {...iconProps} color='primary' />
+                <ConceptIcon
+                  selected
+                  sx={{
+                    fontSize: '18px'
+                  }}
+                  {...iconProps}
+                  color='primary'
+                />
             }
-            <span className='searchable'>{id}</span>
+            <span className='searchable' style={{
+              maxWidth: '125px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              fontSize: '14px',
+              whiteSpace: 'nowrap',
+            }}>
+              {id}
+            </span>
           </React.Fragment>
       }
       {

diff --git a/src/components/common/OwnerButton.jsx b/src/components/common/OwnerButton.jsx
@@ -1,37 +1,40 @@
 import React from 'react';
 import Button from '@mui/material/Button'
 import OwnerIcon from './OwnerIcon'
+import OwnerTooltip from './OwnerTooltip'
 
 const OwnerButton = ({owner, ownerType, ownerURL, noIcons, sx, ...rest}) => {
   const iconProps = {color: 'secondary', style: {marginRight: '8px', width: '0.8em'}}
   return (
-    <Button
-      sx={{
-        textTransform: 'none',
-        color: 'inherit',
-        '&:hover': {
+    <OwnerTooltip owner={{url: ownerURL, type: ownerType, id: owner}}>
+      <Button
+        sx={{
           textTransform: 'none',
           color: 'inherit',
-          background: 'transparent'
-        },
-        '&:focus': {
-          textTransform: 'none',
-          color: 'inherit',
-          background: 'transparent',
-          outline: 'none'
-        },
-        padding: ownerURL ? '4px' : '0 8px',
-        minWidth: 'auto',
-        ...sx
-      }}
-      startIcon={!noIcons && <OwnerIcon noTooltip ownerType={ownerType} {...iconProps} />}
-      href={ownerURL ? '#' + ownerURL : undefined}
-      component="button"
-      {...rest}
-    >
+          '&:hover': {
+            textTransform: 'none',
+            color: 'inherit',
+            background: 'transparent'
+          },
+          '&:focus': {
+            textTransform: 'none',
+            color: 'inherit',
+            background: 'transparent',
+            outline: 'none'
+          },
+          padding: ownerURL ? '4px' : '0 8px',
+          minWidth: 'auto',
+          ...sx
+        }}
+        startIcon={!noIcons && <OwnerIcon noTooltip ownerType={ownerType} {...iconProps} />}
+        href={ownerURL ? '#' + ownerURL : undefined}
+        component="button"
+        {...rest}
+      >
 
-      <span className='owner-button-label'>{owner}</span>
-    </Button>
+        <span className='owner-button-label'>{owner}</span>
+      </Button>
+    </OwnerTooltip>
   )
 }
 

diff --git a/src/components/common/OwnerTooltip.jsx b/src/components/common/OwnerTooltip.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import OrgTooltip from '../orgs/OrgTooltip';
+import UserTooltip from '../users/UserTooltip'
+
+const OwnerTooltip = ({children, owner, ...rest}) => {
+  return owner?.type?.toLowerCase() === 'organization' ?
+    <OrgTooltip org={owner} {...rest}>
+      {children}
+    </OrgTooltip> :
+  <UserTooltip user={owner} {...rest}>
+    {children}
+  </UserTooltip>
+}
+
+export default OwnerTooltip
diff --git a/src/components/concepts/ConceptHeader.jsx b/src/components/concepts/ConceptHeader.jsx
@@ -28,7 +28,7 @@ const PropertyChip = ({name, property, sx}) => {
   )
 }
 
-const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit}) => {
+const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested}) => {
   const { t } = useTranslation()
   const [menu, setMenu] = React.useState(false)
   const [menuAnchorEl, setMenuAnchorEl] = React.useState(false)
@@ -51,7 +51,7 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit}) => {
   return (
     <React.Fragment>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-        <span>
+        <span style={{width: 'calc(100% - 40px)'}}>
           <Breadcrumbs
             ownerURL={repoURL ? toOwnerURI(repoURL) : false}
             owner={concept.owner}
@@ -63,6 +63,7 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit}) => {
             version={concept.version}
             repoURL={repoURL}
             concept
+            nested={nested}
           />
         </span>
         <span>

diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -118,7 +118,7 @@ const ConceptHome = props => {
             !edit &&
               <>
                 <div className='col-xs-12 padding-0' style={{marginBottom: '12px'}}>
-                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={onEdit} repo={repo} />
+                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={onEdit} repo={repo} nested={props.nested} />
                 </div>
                 <ConceptTabs tab={tab} onTabChange={(event, newTab) => setTab(newTab)} />
                 {

diff --git a/src/components/repos/RepoHeader.jsx b/src/components/repos/RepoHeader.jsx
@@ -48,15 +48,16 @@ const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClic
 
   return (
     <Paper component="div" className='col-xs-12' sx={{backgroundColor: 'surface.main', boxShadow: 'none', padding: '16px', borderRadius: '8px 8px 0 0'}}>
-      <div className='col-xs-9 padding-0' style={{display: 'flex'}}>
+      <div className='col-xs-12 padding-0' style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', overflow: 'auto'}}>
+        <span style={{display: 'flex', alignItems: 'center'}}>
         <OwnerChip owner={owner} sx={{background: 'transparent', borderColor: 'surface.light'}} hideType />
         <RepoChip repo={repo} sx={{marginLeft: '12px', background: 'transparent', borderColor: 'surface.light'}} onChange={onVersionChange} checkbox version={repo} versions={versions}  />
         {
           onVersionChange &&
             <RepoVersionChip checkbox version={repo} versions={versions} sx={{marginLeft: '8px', borderRadius: '4px'}} onChange={onVersionChange} />
         }
-      </div>
-      <div className='col-xs-3 padding-0' style={{textAlign: 'right'}}>
+      </span>
+        <span style={{display: 'flex', alignItems: 'center', marginLeft: '16px'}}>
         <FollowActionButton iconButton entity={repo} />
         {
           Boolean(hasAccess && repo.version === 'HEAD' && has(repo, 'source_type')) &&
@@ -67,6 +68,7 @@ const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClic
               <RepoManagementList anchorEl={menuAnchorEl} open={menu} onClose={onMenuClose} id='repo-manage' onClick={onManageOptionClick} />
           </React.Fragment>
         }
+          </span>
       </div>
       <div className='col-xs-12 padding-0' style={{margin: '8px 0'}}>
         <Typography sx={{fontSize: '28px', color: 'surface.dark', fontWeight: 600}}>{repo.name}</Typography>

diff --git a/src/components/repos/RepoVersionButton.jsx b/src/components/repos/RepoVersionButton.jsx
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import DotSeparator from '../common/DotSeparator'
 
-const RepoVersionButton = ({icon, repo, repoType, version, repoLabelStyle, versionStyle, href, vertical, size}) => {
+const RepoVersionButton = ({icon, repo, repoType, version, repoLabelStyle, versionStyle, href, vertical, size, sx}) => {
   const verticalStyle = version && vertical ? {flexDirection: 'column', alignItems: 'baseline', textAlign: 'left'} : {}
   return (
     <Button
@@ -23,35 +23,38 @@ const RepoVersionButton = ({icon, repo, repoType, version, repoLabelStyle, versi
         },
         padding: href ? '4px' : 0,
         minWidth: 'auto',
-        ...verticalStyle
+        ...verticalStyle,
+        ...sx
       }}
       startIcon={icon}
       href={href ? '#' + href : undefined}
       component="button"
       size={size}
     >
-      <span style={{display: 'flex', alignItems: 'center'}}>
-        <span style={{whiteSpace: 'nowrap', display: 'flex', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>
-          {repo}
+      <span className='repo-button-group' style={{display: 'flex', alignItems: 'center'}}>
+        <span style={{display: 'flex', alignItems: 'center'}}>
+          <span className='repo-button-label'  style={{whiteSpace: 'nowrap', display: 'flex', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>
+            {repo}
+          </span>
+          {
+            repoType &&
+              <React.Fragment>
+                <span style={{display: 'flex', alignItems: 'center', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>
+                  <DotSeparator />
+                  <Typography component='span' sx={{color: 'secondary.50', fontSize: '0.85rem'}}>
+                    {repoType}
+                  </Typography>
+                </span>
+              </React.Fragment>
+          }
         </span>
         {
-          repoType &&
-            <React.Fragment>
-              <span style={{display: 'flex', alignItems: 'center', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>
-                <DotSeparator />
-                <Typography component='span' sx={{color: 'secondary.50', fontSize: '0.85rem'}}>
-                  {repoType}
-                </Typography>
-              </span>
-            </React.Fragment>
+          version &&
+            <Typography className='repo-version-label' component='span' sx={{marginLeft: '4px', color: 'secondary.50', fontFamily: '"Roboto Mono","Helvetica","Arial",sans-serif', display: 'flex', fontSize: '0.85rem', marginTop: '1px', ...(versionStyle || {})}}>
+              {version}
+            </Typography>
         }
       </span>
-      {
-        version &&
-          <Typography component='span' sx={{marginLeft: '4px', color: 'secondary.50', fontFamily: '"Roboto Mono","Helvetica","Arial",sans-serif', display: 'flex', fontSize: '0.85rem', marginTop: '1px', ...(versionStyle || {})}}>
-            {version}
-          </Typography>
-      }
     </Button>
   )
 }