feat: toggle collaborator icons

hackforplay · Nov 21, 2019 · a328eab · a328eab
1 parent e709fad
commit a328eab
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/CollaboratorIcons.tsx b/src/CollaboratorIcons.tsx
@@ -1,7 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { Icon } from './Button';
+import card from './styles/cards.scss';
 import style from './styles/collaborator-icons.scss';
 import flex from './styles/flex.scss';
+import { Transition } from './Transition';
 
 export interface User {
   id: string;
@@ -72,13 +75,28 @@ export function CollaboratorIcons({}) {
     };
   }, [needSpace]);
 
+  const [open, setOpen] = React.useState(false);
+
   return (
     <div
       ref={wrapperRef}
       className={classNames(style.wrapper, flex.horizontal)}
     >
       {shrink ? (
-        <div className={style.shrink}>{users.length}</div>
+        <>
+          <div className={style.shrink} onClick={() => setOpen(!open)}>
+            {open ? <Icon name="arrow_drop_up" /> : users.length}
+          </div>
+          <Transition
+            in={open}
+            className={classNames(style.popout, flex.vertical, card.elevated)}
+            exiting={style.exiting}
+          >
+            {users.map(user => (
+              <Item key={user.id} open user={user} />
+            ))}
+          </Transition>
+        </>
       ) : (
         users.map(user => (
           <Item
@@ -96,7 +114,7 @@ export function CollaboratorIcons({}) {
 interface ItemProps {
   user: User;
   open: boolean;
-  onSelect: (id: string) => void;
+  onSelect?: (id: string) => void;
 }
 
 function Item({ user, open, onSelect }: ItemProps) {
@@ -108,7 +126,7 @@ function Item({ user, open, onSelect }: ItemProps) {
         !user.asset && style.nothing
       )}
       style={{ backgroundColor: user.color }}
-      onClick={() => onSelect(user.id)}
+      onClick={() => onSelect && onSelect(user.id)}
     >
       {open ? (
         <div className={style.asset}>

diff --git a/src/styles/collaborator-icons.scss b/src/styles/collaborator-icons.scss
@@ -19,6 +19,7 @@ $gap: 5px;
   padding: 4px $overlap;
   margin-right: 4px;
   overflow: hidden;
+  position: static; // for .popout
 }
 
 .item {
@@ -103,8 +104,21 @@ $gap: 5px;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: $inactiveColor;
+  background-color: $activeColor;
   &:hover {
-    background-color: $activeColor;
+    background-color: $textColor;
+  }
+}
+
+.popout {
+  @include transition(transform);
+  position: absolute;
+  top: 42px;
+  padding: 8px;
+  max-height: 224;
+  overflow: scroll;
+  transform-origin: top center;
+  &.exiting {
+    transform: scaleY(0);
   }
 }