Merge pull request #122 from jorilallo/new-collection

Create a collection

frontend/components/Button/Button.js

@@ -25,13 +25,17 @@ const RealButton = styled.button`
   &:hover {
     background: ${darken(0.05, color.primary)};
   }
+  &:disabled {
+    background: ${color.slateLight};
+  }
 `;
 
 const Label = styled.span`
-  padding: 2px 12px;
+  padding: 4px 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: 500;
 `;
 
 const Inner = styled.span`

frontend/components/HelpText/HelpText.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+const HelpText = styled.p`
+  user-select: none;
+  color: ${color.slateDark};
+`;
+
+export default HelpText;

frontend/components/HelpText/index.js

@@ -0,0 +1,3 @@
+// @flow
+import HelpText from './HelpText';
+export default HelpText;

frontend/components/Icon/AddIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function AddIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+      </svg>
+    </Icon>
+  );
+}

frontend/components/Input/Input.js

@@ -2,13 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
-import { size } from 'styles/constants';
+import { size, color } from 'styles/constants';
 
 const RealTextarea = styled.textarea`
   border: 0;
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slate};
+  }
 `;
 
 const RealInput = styled.input`
@@ -16,36 +21,56 @@ const RealInput = styled.input`
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slateLight};
+  }
 `;
 
-const Wrapper = styled(Flex)`
+const Wrapper = styled.div`
+
+`;
+
+const Outline = styled(Flex)`
   display: flex;
   flex: 1;
   margin: 0 0 ${size.large};
   color: inherit;
-  border-width: 2px;
+  border-width: 1px;
   border-style: solid;
-  border-color: ${props => (props.hasError ? 'red' : 'rgba(0, 0, 0, .15)')};
-  border-radius: ${size.small};
+  border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+  border-radius: 4px;
+  font-weight: normal;
 
-  &:focus,
-  &:active {
-    border-color: rgba(0, 0, 0, .25);
+  &:focus {
+    border-color: ${color.slate}
   }
 `;
 
+const LabelText = styled.div`
+  font-weight: 500;
+  padding-bottom: 4px;
+`;
+
 export type Props = {
   type: string,
   value: string,
+  label?: string,
   className?: string,
 };
 
-export default function Input({ type, ...rest }: Props) {
-  const Component = type === 'textarea' ? RealTextarea : RealInput;
+export default function Input({ type, label, ...rest }: Props) {
+  const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
     <Wrapper>
-      <Component {...rest} />
+      <label>
+        {label && <LabelText>{label}</LabelText>}
+        <Outline>
+          <InputComponent {...rest} />
+        </Outline>
+      </label>
     </Wrapper>
   );
 }

frontend/components/Layout/Layout.js

@@ -13,6 +13,9 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Avatar from 'components/Avatar';
+import Modal from 'components/Modal';
+import AddIcon from 'components/Icon/AddIcon';
+import CollectionNew from 'scenes/CollectionNew';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
@@ -38,6 +41,8 @@ type Props = {
 
 @observer class Layout extends React.Component {
   props: Props;
+  state: { createCollectionModalOpen: boolean };
+  state = { createCollectionModalOpen: false };
 
   static defaultProps = {
     search: true,
@@ -59,8 +64,16 @@ type Props = {
     this.props.auth.logout(() => this.props.history.push('/'));
   };
 
+  handleCreateCollection = () => {
+    this.setState({ createCollectionModalOpen: true });
+  };
+
+  handleCloseModal = () => {
+    this.setState({ createCollectionModalOpen: false });
+  };
+
   render() {
-    const { user, auth, ui } = this.props;
+    const { user, auth, collections, history, ui } = this.props;
 
     return (
       <Container column auto>
@@ -112,6 +125,9 @@ type Props = {
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
                   <LinkSection>
+                    <CreateCollection onClick={this.handleCreateCollection}>
+                      <AddIcon />
+                    </CreateCollection>
                     {ui.activeCollection
                       ? <SidebarCollection
                           document={ui.activeDocument}
@@ -128,11 +144,40 @@ type Props = {
             {this.props.children}
           </Content>
         </Flex>
+        <Modal
+          isOpen={this.state.createCollectionModalOpen}
+          onRequestClose={this.handleCloseModal}
+          title="Create a collection"
+        >
+          <CollectionNew
+            collections={collections}
+            history={history}
+            onCollectionCreated={this.handleCloseModal}
+          />
+        </Modal>
       </Container>
     );
   }
 }
 
+const CreateCollection = styled.a`
+  position: absolute;
+  top: 8px;
+  right: ${layout.hpadding};
+
+  svg {
+    opacity: .35;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`;
+
 const Container = styled(Flex)`
   position: relative;
   width: 100%;
@@ -179,6 +224,7 @@ const Header = styled(Flex)`
 const LinkSection = styled(Flex)`
   flex-direction: column;
   padding: 10px 0;
+  position: relative;
 `;
 
 export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));

frontend/components/Modal/Modal.js

@@ -0,0 +1,76 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import ReactModal from 'react-modal';
+import { modalFadeIn } from 'styles/animations';
+
+import CloseIcon from 'components/Icon/CloseIcon';
+import Flex from 'components/Flex';
+
+type Props = {
+  children?: React$Element<any>,
+  isOpen: boolean,
+  title?: string,
+  onRequestClose: () => void,
+};
+
+const Modal = ({
+  children,
+  isOpen,
+  title = 'Untitled Modal',
+  onRequestClose,
+  ...rest
+}: Props) => {
+  if (!isOpen) return null;
+
+  return (
+    <StyledModal
+      contentLabel={title}
+      onRequestClose={onRequestClose}
+      isOpen={isOpen}
+      {...rest}
+    >
+      <Content column>
+        {title && <h1>{title}</h1>}
+        <Close onClick={onRequestClose}><CloseIcon /></Close>
+        {children}
+      </Content>
+    </StyledModal>
+  );
+};
+
+const Content = styled(Flex)`
+  width: 640px;
+  max-width: 100%;
+  position: relative;
+`;
+
+const StyledModal = styled(ReactModal)`
+  animation: ${modalFadeIn} 250ms ease;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: white;
+  padding: 15vh 2rem 2rem
+`;
+
+const Close = styled.a`
+  position: fixed;
+  top: 3rem;
+  right: 3rem;
+  opacity: .5;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export default Modal;

frontend/components/Modal/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Modal from './Modal';
+export default Modal;