all ui components

components/Avatar/Avatar.cjsx

@@ -0,0 +1,14 @@
+'use strict'
+
+require './Avatar.scss'
+
+React  = require 'react'
+
+Avatar = ({avatarUrl}) ->
+  src = avatarUrl || require './place-holder.svg'
+
+  <div className="Avatar">
+    <img src={src}/>
+  </div>
+
+module.exports = Avatar

components/Avatar/Avatar.scss

@@ -0,0 +1,14 @@
+$avatar-diameter: 35px;
+
+.Avatar {
+  width           : $avatar-diameter;
+  height          : $avatar-diameter;
+  border-radius   : 50%;
+  background-color: #eee;
+  overflow        : hidden;
+
+  img {
+    width : 100%;
+    height: 100%;
+  }
+}

components/Avatar/AvatarExamples.cjsx

@@ -0,0 +1,17 @@
+'use strict'
+
+Avatar = require './Avatar.cjsx'
+React  = require 'react'
+
+AvatarExamples = ->
+  <div className="AvatarExamples flex column middle center">
+    <h1>Default</h1>
+
+    <Avatar />
+
+    <h1>Url is provided</h1>
+
+    <Avatar avatarUrl="http://www.topcoder.com/i/m/cardiboy_big.jpg" />
+  </div>
+
+module.exports = AvatarExamples

components/Checkbox/Checkbox.cjsx

@@ -0,0 +1,24 @@
+'use strict'
+
+require './Checkbox.scss'
+
+React    = require 'react'
+
+Checkbox = ({onChange, checked, label}) ->
+  if checked
+    iconClassName = 'icon checkmark active'
+  else
+    iconClassName = 'icon plus hollow'
+
+  <div className="Checkbox flex middle">
+    <button className="clean" type="button" onClick={onChange}>
+      <div className={iconClassName} />
+    </button>
+
+    {
+      if label
+        <label onClick={onChange}>{label}</label>
+    }
+  </div>
+
+module.exports = Checkbox

components/Checkbox/Checkbox.scss

@@ -0,0 +1,15 @@
+@import "work/work-includes";
+
+.Checkbox {
+  label {
+    margin-left: 10px;
+  }
+
+  .icon, button {
+    width   : 24px;
+    height  : 24px;
+    /* fixing jumping issues on webkit */
+    outline : none;
+    overflow: hidden;
+  }
+}

components/Checkbox/CheckboxExamples.cjsx

@@ -0,0 +1,18 @@
+'use strict'
+
+Checkbox = require './Checkbox.cjsx'
+React    = require 'react'
+
+CheckboxExamples = ->
+  <div className="CheckboxExamples flex column middle center">
+    <h1>Default</h1>
+
+    <Checkbox />
+
+    <h1>Checked is true with label</h1>
+
+    <Checkbox checked={true} label="show me the money" />
+
+  </div>
+
+module.exports = CheckboxExamples

components/ExampleNav/ExampleNav.cjsx

@@ -10,13 +10,23 @@ classNames = require 'classnames'
 component = ({data, state}) ->
   <ul className="ExampleNav">
     <li>
-      <Link to="/">FileUploaderContainer</Link>
+      <Link to="/">Avatar</Link>
+
+      <Link to="/FileUploaderContainerExamples">FileUploaderContainer</Link>
 
       <Link to="/UploadedFileExamples">UploadedFile</Link>
 
       <Link to="/UploadedFilesExamples">UploadedFiles</Link>
 
       <Link to="/FileUploaderExamples">FileUploader</Link>
+
+      <Link to="/CheckboxExamples">Checkbox</Link>
+
+      <Link to="/ImageViewerHeaderExamples">ImageViewerHeader</Link>
+
+      <Link to="/ImageViewerExamples">ImageViewer</Link>
+
+      <Link to="/LoaderExamples">Loader</Link>
     </li>
   </ul>
 

components/ImageViewer/ImageViewer.cjsx

@@ -0,0 +1,95 @@
+'use strict'
+
+require './ImageViewer.scss'
+
+React = require 'react'
+
+ImageViewer = ({
+  files
+  file
+  viewPrevious
+  viewNext
+  selectFile
+  prevFile
+  nextFile
+  showNotifications
+  toggleZoom
+  imageZoomedIn
+ }) ->
+
+  <div className="ImageViewer">
+    <main className="flex column middle light-bg">
+      <div className="content flex column flex-grow">
+        {if file.name
+          <p className="file-name">{file.name}</p>
+        }
+
+        {if file.caption
+          <p className="file-caption">{file.caption}</p>
+        }
+
+        <div className="slideshow flex column flex-grow">
+          <div className="preview flex center flex-grow flex-shrink">
+            <div className="previous flex flex-grow">
+              { if prevFile
+                <a className="arrow-previous" onClick={viewPrevious}>
+                  <button className="clean icon arrow"></button>
+                </a>
+              }
+
+              { if !prevFile
+                <a className="arrow-previous invisible disabled">
+                  <button className="clean icon arrow"></button>
+                </a>
+              }
+            </div>
+
+            <div className="image flex column center">
+              <div className="img-container flex flex-grow">
+                {if !imageZoomedIn
+                  <div className="bg-image" onClick={toggleZoom} style={backgroundImage: 'url(' + file.url + ')'} />
+                }
+                {if imageZoomedIn
+                  <div className="bg-image zoomed elevated" onClick={toggleZoom}>
+                    <img src={file.url}/>
+                  </div>
+                }
+              </div>
+            </div>
+
+            <div className="next flex flex-grow">
+              { if nextFile
+                <a className="arrow-next" onClick={viewNext}>
+                  <button className="clean icon arrow right"></button>
+                </a>
+              }
+
+              { if !nextFile
+                <a className="arrow-next invisible disabled">
+                  <button className="clean icon arrow right"></button>
+                </a>
+              }
+            </div>
+          </div>
+
+          <ul className="thumbnails">
+            {for file in files
+              <li className="thumbnail" key={file.name}>
+                <button className="clean" onClick={selectFile.bind(null, file)}>
+                  <img src={file.url}/>
+                  {if file.unreadMessages > 0 && showNotifications
+                    <div className="notification absolute">
+                      {file.unreadMessages}
+                    </div>
+                  }
+                </button>
+              </li>
+            }
+          </ul>
+
+        </div>
+      </div>
+    </main>
+  </div>
+
+module.exports = ImageViewer

components/ImageViewer/ImageViewer.scss

@@ -0,0 +1,106 @@
+@import "work/work-includes";
+
+.ImageViewer {
+
+  main {
+    width : 100vw;
+    height: 100vh;
+    padding: 20px;
+    padding-top: 10px;
+
+    .content {
+      overflow: hidden;
+      text-align: center;
+      width: 100%;
+
+      .slideshow {
+        width: 100%;
+        .icon.arrow {
+          width: 33px;
+          height: 74px;
+        }
+
+        .preview {
+          overflow: hidden;
+          text-align: center;
+          padding: 20px 0;
+
+          .previous, .next {
+            min-width: 50px;
+
+            .arrow-previous, .arrow-next {
+              margin: auto
+            }
+
+            .arrow-next {
+              margin: auto
+            }
+          }
+
+          .image {
+            width: 100%;
+            max-width: 1000px;
+            margin-right: 80px;
+            margin-left: 80px;
+
+            .img-container {
+              width: 100%;
+              height: 100%;
+              max-height: 800px;
+              max-width: 1000px;
+
+              .bg-image {
+                margin-top: 40px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                width: 100%;
+
+                &.zoomed {
+                  overflow: auto;
+
+                  img {
+                    &:hover {
+                      cursor: zoom-out;
+                    }
+                  }
+                }
+
+                &:hover {
+                  cursor: zoom-in;
+                }
+              }
+            }
+          }
+        }
+
+        .thumbnails {
+          text-align: center;
+          max-width: 100vw;
+          padding: 20px;
+          min-height: 100px;
+          overflow: auto;
+          white-space: nowrap;
+
+          > * {
+            display: inline-block;
+            margin: 10px;
+            position: relative;
+
+            &.elevated {
+              opacity: 0.4;
+            }
+          }
+
+          button {
+            img {
+              width  : 60px;
+              height : 50px;
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+