WIP

app/scenes/Collection.js

@@ -152,7 +152,7 @@ class CollectionScene extends React.Component<Props> {
                   )}
                 </Wrapper>
                 <Modal
-                  title="Collection permissions"
+                  title="Collection members"
                   onRequestClose={this.handlePermissionsModalClose}
                   isOpen={this.permissionsModalOpen}
                 >

app/scenes/CollectionEdit.js

@@ -6,6 +6,7 @@ import { inject, observer } from 'mobx-react';
 import Input from 'components/Input';
 import InputRich from 'components/InputRich';
 import Button from 'components/Button';
+import Switch from 'components/Switch';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
 import ColorPicker from 'components/ColorPicker';
@@ -25,11 +26,13 @@ class CollectionEdit extends React.Component<Props> {
   @observable description: string = '';
   @observable color: string = '#4E5C6E';
   @observable isSaving: boolean;
+  @observable private: boolean = false;
 
   componentWillMount() {
     this.name = this.props.collection.name;
     this.description = this.props.collection.description;
     this.color = this.props.collection.color;
+    this.private = this.props.collection.private;
   }
 
   handleSubmit = async (ev: SyntheticEvent<*>) => {
@@ -41,6 +44,7 @@ class CollectionEdit extends React.Component<Props> {
         name: this.name,
         description: this.description,
         color: this.color,
+        private: this.private,
       });
       this.props.onSubmit();
     } catch (err) {
@@ -62,6 +66,10 @@ class CollectionEdit extends React.Component<Props> {
     this.color = color;
   };
 
+  handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
+    this.private = ev.target.checked;
+  };
+
   render() {
     return (
       <Flex column>
@@ -91,6 +99,15 @@ class CollectionEdit extends React.Component<Props> {
             minHeight={68}
             maxHeight={200}
           />
+          <Switch
+            id="private"
+            label="Private collection"
+            onChange={this.handlePrivateChange}
+            checked={this.private}
+          />
+          <HelpText>
+            A private collection will only be visible to invited team members.
+          </HelpText>
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}

app/scenes/CollectionPermissions/CollectionPermissions.js

@@ -4,13 +4,11 @@ import { reject } from 'lodash';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
-import Fade from 'components/Fade';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
 import Subheading from 'components/Subheading';
 import List from 'components/List';
 import Placeholder from 'components/List/Placeholder';
-import Switch from 'components/Switch';
 import UserListItem from './components/UserListItem';
 import MemberListItem from './components/MemberListItem';
 import Collection from 'models/Collection';
@@ -42,7 +40,11 @@ class CollectionPermissions extends React.Component<Props> {
     }
   }
 
-  handlePrivateChange = async (ev: SyntheticInputEvent<*>) => {
+  handlePrivateChange = async (ev: SyntheticInputEvent<HTMLInputElement>) => {
+    console.log('handlePrivateChange');
+    ev.preventDefault();
+    ev.stopPropagation();
+
     const { collection } = this.props;
 
     try {
@@ -100,60 +102,46 @@ class CollectionPermissions extends React.Component<Props> {
     return (
       <Flex column>
         <HelpText>
-          Choose which people on the team have access to read and edit documents
-          in the <strong>{collection.name}</strong> collection. By default
-          collections are visible to all team members.
+          Choose which team members have access to read and edit documents in
+          the <strong>{collection.name}</strong> collection.
         </HelpText>
 
-        <Switch
-          id="private"
-          label="Private collection"
-          onChange={this.handlePrivateChange}
-          checked={collection.private}
-        />
+        <Subheading>Members</Subheading>
+        <List>
+          {isFirstLoadingUsers ? (
+            <Placeholder />
+          ) : (
+            collection.users.map(member => (
+              <MemberListItem
+                key={member.id}
+                user={member}
+                showRemove={user.id !== member.id}
+                onRemove={() => this.handleRemoveUser(member)}
+              />
+            ))
+          )}
+        </List>
 
-        {collection.private && (
-          <Fade>
-            <Flex column>
-              <Subheading>Invited ({collection.users.length})</Subheading>
-              <List>
-                {isFirstLoadingUsers ? (
-                  <Placeholder />
-                ) : (
-                  collection.users.map(member => (
-                    <MemberListItem
-                      key={member.id}
-                      user={member}
-                      showRemove={user.id !== member.id}
-                      onRemove={() => this.handleRemoveUser(member)}
-                    />
-                  ))
-                )}
-              </List>
-
-              {hasOtherUsers && (
-                <React.Fragment>
-                  <Subheading>Team Members</Subheading>
-                  <Input
-                    onChange={this.handleFilter}
-                    placeholder="Filter…"
-                    value={this.filter}
-                    type="search"
-                  />
-                  <List>
-                    {filteredUsers.map(member => (
-                      <UserListItem
-                        key={member.id}
-                        user={member}
-                        onAdd={() => this.handleAddUser(member)}
-                        showAdd
-                      />
-                    ))}
-                  </List>
-                </React.Fragment>
-              )}
-            </Flex>
-          </Fade>
+        {hasOtherUsers && (
+          <React.Fragment>
+            <Subheading>Others</Subheading>
+            <Input
+              onChange={this.handleFilter}
+              placeholder="Find a team member…"
+              value={this.filter}
+              type="search"
+            />
+            <List>
+              {filteredUsers.map(member => (
+                <UserListItem
+                  key={member.id}
+                  user={member}
+                  onAdd={() => this.handleAddUser(member)}
+                  showAdd
+                />
+              ))}
+            </List>
+          </React.Fragment>
         )}
       </Flex>
     );

app/scenes/CollectionPermissions/components/UserListItem.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { PlusIcon } from 'outline-icons';
 import Avatar from 'components/Avatar';
 import Button from 'components/Button';
 import ListItem from 'components/List/Item';
@@ -18,8 +19,8 @@ const UserListItem = ({ user, onAdd, showAdd }: Props) => {
       image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
         showAdd ? (
-          <Button type="button" onClick={onAdd} neutral>
-            Invite
+          <Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
+            Add
           </Button>
         ) : (
           undefined