Iconized/Collapsed variant of collaborators badges for mobile (#3307)

quiltdata · Feb 11, 2023 · 687a402 · 687a402
1 parent d566bb2
commit 687a402
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/catalog/app/components/Collaborators/Avatars.tsx b/catalog/app/components/Collaborators/Avatars.tsx
@@ -60,6 +60,9 @@ const useStyles = M.makeStyles((t) => ({
     position: 'relative',
     transition: 'margin 0.3s ease',
   },
+  moreIconized: {
+    marginLeft: '4px',
+  },
   userpic: {
     marginTop: '6px',
   },
@@ -82,10 +85,16 @@ const useStyles = M.makeStyles((t) => ({
 interface AvatarsProps {
   className?: string
   collaborators: Model.Collaborators
+  iconized?: boolean
   onClick: () => void
 }
 
-export default function Avatars({ className, collaborators, onClick }: AvatarsProps) {
+export default function Avatars({
+  className,
+  collaborators,
+  iconized,
+  onClick,
+}: AvatarsProps) {
   const knownCollaborators = collaborators.filter(
     ({ permissionLevel }) => !!permissionLevel,
   )
@@ -94,9 +103,10 @@ export default function Avatars({ className, collaborators, onClick }: AvatarsPr
   )
 
   const avatars = React.useMemo(() => {
+    if (iconized) return []
     if (!potentialCollaborators.length) return knownCollaborators.slice(0, 5)
     return [potentialCollaborators[0], ...knownCollaborators.slice(0, 4)]
-  }, [knownCollaborators, potentialCollaborators])
+  }, [iconized, knownCollaborators, potentialCollaborators])
 
   const classes = useStyles()
   const moreNum = React.useMemo(
@@ -106,6 +116,13 @@ export default function Avatars({ className, collaborators, onClick }: AvatarsPr
 
   return (
     <div className={cx(classes.root, className)} onClick={onClick}>
+      {iconized && (
+        <div className={classes.avatarWrapper}>
+          <M.Icon className={classes.userpic} title="Collaborators">
+            people_outline
+          </M.Icon>
+        </div>
+      )}
       {avatars.reduce(
         (memo, { collaborator: { email }, permissionLevel }, index) => (
           <div className={classes.avatarWrapper}>
@@ -122,7 +139,9 @@ export default function Avatars({ className, collaborators, onClick }: AvatarsPr
           {moreNum > 0 && (
             <div className={classes.avatarWrapper}>
               <M.Tooltip title="Click to see more collaborators">
-                <span className={classes.more}>{moreNum}+</span>
+                <span className={cx(classes.more, { [classes.moreIconized]: iconized })}>
+                  {moreNum}+
+                </span>
               </M.Tooltip>
             </div>
           )}

diff --git a/catalog/app/components/FileEditor/Controls.tsx b/catalog/app/components/FileEditor/Controls.tsx
@@ -88,7 +88,7 @@ export function Controls({
         onEdit(types[0])
       }
     },
-    [onEdit, types],
+    [hasMultipleChoices, onEdit, types],
   )
   const handleTypeClick = React.useCallback(
     (type) => {

diff --git a/catalog/app/containers/NavBar/Collaborators.tsx b/catalog/app/containers/NavBar/Collaborators.tsx
@@ -30,6 +30,8 @@ interface CollaboratorsProps {
 
 export default function Collaborators({ bucket, hidden }: CollaboratorsProps) {
   const classes = useStyles()
+  const t = M.useTheme()
+  const sm = M.useMediaQuery(t.breakpoints.down('sm'))
 
   const [{ data }] = urql.useQuery({
     query: BUCKET_COLLABORATORS,
@@ -65,6 +67,7 @@ export default function Collaborators({ bucket, hidden }: CollaboratorsProps) {
       <Avatars
         className={cx(classes.avatars, { [classes.hidden]: hidden })}
         collaborators={allCollaborators}
+        iconized={sm}
         onClick={handleOpen}
       />
     </M.MuiThemeProvider>

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -14,6 +14,10 @@ Entries inside each section should be ordered by type:
 
 ## Catalog, Lambdas
 !-->
+## Catalog, Lambdas
+* [Fixed] Fixed mobile layout for collaborators badges ([#3307](https://github.com/quiltdata/quilt/pull/3307))
+* [Changed] Edit .quilt/config files with text editor ([#3306](https://github.com/quiltdata/quilt/pull/3306))
+
 # 5.1.1 - 2023-01-25
 ## Python API
 * [Fixed] Reduce backtracking during `pip install quilt3[catalog]` ([#3292](https://github.com/quiltdata/quilt/pull/3292))
@@ -33,7 +37,6 @@ Entries inside each section should be ordered by type:
 * [Changed] Rename "Metadata" to "User metadata" ([#3255](https://github.com/quiltdata/quilt/pull/3255))
 * [Changed] Show selective metadata for packages as JSON ([#3259](https://github.com/quiltdata/quilt/pull/3259))
 * [Changed] Show selective metadata on one line and optionaly on multiple lines ([#3284](https://github.com/quiltdata/quilt/pull/3284))
-* [Changed] Edit .quilt/config files with text editor ([#3306](https://github.com/quiltdata/quilt/pull/3306))
 
 # 5.1.0 - 2022-12-09
 ## Python API