diff --git a/components/Avatar/Avatar.cjsx b/components/Avatar/Avatar.cjsx new file mode 100644 index 000000000..bedc3c070 --- /dev/null +++ b/components/Avatar/Avatar.cjsx @@ -0,0 +1,14 @@ +'use strict' + +require './Avatar.scss' + +React = require 'react' + +Avatar = ({avatarUrl}) -> + src = avatarUrl || require './place-holder.svg' + +
+ +
+ +module.exports = Avatar diff --git a/components/Avatar/Avatar.scss b/components/Avatar/Avatar.scss new file mode 100644 index 000000000..bddc3e9ce --- /dev/null +++ b/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%; + } +} diff --git a/components/Avatar/AvatarExamples.cjsx b/components/Avatar/AvatarExamples.cjsx new file mode 100644 index 000000000..8420cd54d --- /dev/null +++ b/components/Avatar/AvatarExamples.cjsx @@ -0,0 +1,17 @@ +'use strict' + +Avatar = require './Avatar.cjsx' +React = require 'react' + +AvatarExamples = -> +
+

Default

+ + + +

Url is provided

+ + +
+ +module.exports = AvatarExamples diff --git a/components/Avatar/place-holder.svg b/components/Avatar/place-holder.svg new file mode 100644 index 000000000..d1517fab4 --- /dev/null +++ b/components/Avatar/place-holder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/Checkbox/Checkbox.cjsx b/components/Checkbox/Checkbox.cjsx new file mode 100644 index 000000000..ea92288c4 --- /dev/null +++ b/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' + +
+ + + { + if label + + } +
+ +module.exports = Checkbox diff --git a/components/Checkbox/Checkbox.scss b/components/Checkbox/Checkbox.scss new file mode 100644 index 000000000..02f1f6cac --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/Checkbox/CheckboxExamples.cjsx b/components/Checkbox/CheckboxExamples.cjsx new file mode 100644 index 000000000..a26248498 --- /dev/null +++ b/components/Checkbox/CheckboxExamples.cjsx @@ -0,0 +1,18 @@ +'use strict' + +Checkbox = require './Checkbox.cjsx' +React = require 'react' + +CheckboxExamples = -> +
+

Default

+ + + +

Checked is true with label

+ + + +
+ +module.exports = CheckboxExamples diff --git a/components/ExampleNav/ExampleNav.cjsx b/components/ExampleNav/ExampleNav.cjsx index ec1a88c46..2563eeb08 100644 --- a/components/ExampleNav/ExampleNav.cjsx +++ b/components/ExampleNav/ExampleNav.cjsx @@ -10,13 +10,23 @@ classNames = require 'classnames' component = ({data, state}) -> diff --git a/components/ImageViewer/ImageViewer.cjsx b/components/ImageViewer/ImageViewer.cjsx new file mode 100644 index 000000000..21b8266de --- /dev/null +++ b/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 + }) -> + +
+
+
+ {if file.name +

{file.name}

+ } + + {if file.caption +

{file.caption}

+ } + +
+
+
+ { if prevFile + + + + } + + { if !prevFile + + + + } +
+ +
+
+ {if !imageZoomedIn +
+ } + {if imageZoomedIn +
+ +
+ } +
+
+ +
+ { if nextFile + + + + } + + { if !nextFile + + + + } +
+
+ +
    + {for file in files +
  • + +
    • + } +
+ +
+
+
+
+ +module.exports = ImageViewer \ No newline at end of file diff --git a/components/ImageViewer/ImageViewer.scss b/components/ImageViewer/ImageViewer.scss new file mode 100644 index 000000000..4d4f33aef --- /dev/null +++ b/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; + } + } + } + } + } + } +} + diff --git a/components/ImageViewer/ImageViewerContainer.coffee b/components/ImageViewer/ImageViewerContainer.coffee new file mode 100644 index 000000000..21fec4433 --- /dev/null +++ b/components/ImageViewer/ImageViewerContainer.coffee @@ -0,0 +1,75 @@ +'use strict' + +React = require 'react' +{ PropTypes, createElement, createClass } = React +ImageViewerElement = require './ImageViewer.cjsx' + +ImageViewer = React.createClass + propTypes: + files: PropTypes.array.isRequired + showNotifications: PropTypes.bool + initialFile: PropTypes.object.isRequired + onFileChange: PropTypes.func + + getInitialState: -> + file = this.props.initialFile + currentIndex = this.props.files.indexOf this.props.initialFile + nextFile = currentIndex + 1 < this.props.files.length + prevFile = currentIndex - 1 >= 0 + + file: file + currentIndex: currentIndex + nextFile: nextFile + prevFile: prevFile + + componentWillMount: -> + this.props.onFileChange({file: this.state.file}) if this.props.onFileChange + + componentWillUpdate: -> + this.props.onFileChange({file: this.state.file}) if this.props.onFileChange + + viewNext: -> + file = this.props.files[this.state.currentIndex + 1] + this.updateArrowsState(file) + + viewPrevious: -> + file = this.props.files[this.state.currentIndex - 1] + this.updateArrowsState(file) + + selectFile: (file) -> + file = file + this.updateArrowsState(file) + + updateArrowsState: (file) -> + currentIndex = this.props.files.indexOf file + nextFile = currentIndex + 1 < this.props.files.length + prevFile = currentIndex - 1 >= 0 + + this.setState + file: file + currentIndex: currentIndex + nextFile: nextFile + prevFile: prevFile + imageZoomedIn: false + + toggleZoom: -> + imageZoomedIn = this.state.imageZoomedIn + + this.setState + imageZoomedIn: !imageZoomedIn + + render: -> + createElement ImageViewerElement, + showNotifications: this.props.showNotifications + files: this.props.files + file: this.state.file + prevFile: this.state.prevFile + nextFile: this.state.nextFile + currentIndex: this.state.currentIndex + imageZoomedIn: this.state.imageZoomedIn + viewNext: this.viewNext + viewPrevious: this.viewPrevious + selectFile: this.selectFile + toggleZoom: this.toggleZoom + +module.exports = ImageViewer \ No newline at end of file diff --git a/components/ImageViewer/ImageViewerExamples.cjsx b/components/ImageViewer/ImageViewerExamples.cjsx new file mode 100644 index 000000000..b24e6163c --- /dev/null +++ b/components/ImageViewer/ImageViewerExamples.cjsx @@ -0,0 +1,27 @@ +'use strict' + +React = require 'react' +ImageViewerContainer = require './ImageViewerContainer.coffee' + +ImageViewerExamples = -> + + files = [ + name: 'flower 1' + url: require('./flower.png') + , + name: 'phone 2' + url: require('./phone.jpg') + , + name: 'turtles 3' + url: require('./turtles-breaking.jpg') + ] + + +
+

With Files (Required)

+
+ +
+
+ +module.exports = ImageViewerExamples \ No newline at end of file diff --git a/components/ImageViewer/flower.png b/components/ImageViewer/flower.png new file mode 100644 index 000000000..df3dfb695 Binary files /dev/null and b/components/ImageViewer/flower.png differ diff --git a/components/ImageViewer/phone.jpg b/components/ImageViewer/phone.jpg new file mode 100644 index 000000000..9c4b21745 Binary files /dev/null and b/components/ImageViewer/phone.jpg differ diff --git a/components/ImageViewer/turtles-breaking.jpg b/components/ImageViewer/turtles-breaking.jpg new file mode 100644 index 000000000..1a0db7811 Binary files /dev/null and b/components/ImageViewer/turtles-breaking.jpg differ diff --git a/components/ImageViewerHeader/ImageViewerHeader.cjsx b/components/ImageViewerHeader/ImageViewerHeader.cjsx new file mode 100644 index 000000000..e5999dcbf --- /dev/null +++ b/components/ImageViewerHeader/ImageViewerHeader.cjsx @@ -0,0 +1,59 @@ +'use strict' + +require './ImageViewerHeader.scss' + +React = require 'react' +Avatar = require '../Avatar/Avatar.cjsx' + +ImageViewerHeader = ({ + avatar + handle + title + downloadUrl + commentsAllowed + downloadAllowed + toggleComments + }) -> + +
+
+
+
+ + + + +
+ +

{handle} +

+ + +

+ {title} +

+
+
+ +
+ { + if downloadAllowed + + } + + { + if commentsAllowed + + } +
+
+
+
+ +module.exports = ImageViewerHeader \ No newline at end of file diff --git a/components/ImageViewerHeader/ImageViewerHeader.scss b/components/ImageViewerHeader/ImageViewerHeader.scss new file mode 100644 index 000000000..1ecdc48cf --- /dev/null +++ b/components/ImageViewerHeader/ImageViewerHeader.scss @@ -0,0 +1,58 @@ +@import "work/work-includes"; + +.ImageViewerHeader { + + main { + width: 100vw; + padding: 20px; + + > hr { + height : 2px; + width : 100%; + margin-top: 20px; + } + + .header { + width : 100%; + + .user { + min-width: 240px; + + .titles { + text-align: left; + margin-left: 15px; + max-width: 225px; + overflow: hidden; + + .name { + font-size : 16px; + font-weight: 200; + } + + .title { + color: $gray; + } + } + } + + .icons { + text-align: right; + margin-right: 60px; + + .icon { + width: 25px; + height: 25px; + } + + .icon.download { + width: 22px; + height: 25px; + } + + > * { + margin-left: 15px; + } + } + } + } +} diff --git a/components/ImageViewerHeader/ImageViewerHeaderExamples.cjsx b/components/ImageViewerHeader/ImageViewerHeaderExamples.cjsx new file mode 100644 index 000000000..c9c59e447 --- /dev/null +++ b/components/ImageViewerHeader/ImageViewerHeaderExamples.cjsx @@ -0,0 +1,21 @@ +'use strict' + +ImageViewerHeader = require './ImageViewerHeader.cjsx' +React = require 'react' + +ImageViewerHeaderExamples = -> + alertMessage = -> + alert('toggled comments') + +
+

Default

+ + + +

With Params

+ + + +
+ +module.exports = ImageViewerHeaderExamples \ No newline at end of file diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx index 227a6d6a0..008bc2767 100644 --- a/components/Router/Router.cjsx +++ b/components/Router/Router.cjsx @@ -2,63 +2,45 @@ React = require 'react' { Provider } = require 'react-redux' -configureStore = require('appirio-tech-client-app-layer').default +store = require '../../store' ExampleApp = require '../ExampleApp/ExampleApp.cjsx' Router = require '../Router/Router.cjsx' + UploadedFileExamples = require '../UploadedFile/UploadedFileExamples.cjsx' UploadedFilesExamples = require '../UploadedFiles/UploadedFilesExamples.cjsx' FileUploaderExamples = require '../FileUploader/FileUploaderExamples.cjsx' FileUploaderContainerExamples = require '../FileUploader/FileUploaderContainerExamples.cjsx' +AvatarExamples = require '../Avatar/AvatarExamples.cjsx' +CheckboxExamples = require '../Checkbox/CheckboxExamples.cjsx' +ImageViewerHeaderExamples = require '../ImageViewerHeader/ImageViewerHeaderExamples.cjsx' +ImageViewerExamples = require '../ImageViewer/ImageViewerExamples.cjsx' +LoaderExamples = require '../Loader/LoaderExamples.cjsx' { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router' -store = configureStore - attachments: - 'mockDataInRouter.jpg': - assetType : 'specs' - progress : 33 - category :'work' - fileName : 'mockDataInRouter.jpg' - filePath : 'some/unique/path' - fileType : 'image/jpeg' - id : 'workid' - 'specsworkworkidmockDataInRouterError.jpg': - assetType : 'specs' - progress : 33 - category :'work' - fileName : 'mockDataInRouterError.jpg' - filePath : 'some/unique/path3' - fileType : 'image/jpeg' - id : 'workid' - errors : [] - 'mockDataInRouter2.jpg': - assetType : 'specs' - progress : 33 - category :'work' - fileName : 'mockDataInRouter2.jpg' - filePath : 'some/unique/path2' - fileType : 'image/jpeg' - id : 'workid' - preview : 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7' - fileUploader: - id : 'workid' # has to match schemas - assetType: 'specs' # has to match schemas - category : 'work' # has to match schemas - component = -> - + + + + + + + + + + + - module.exports = component \ No newline at end of file diff --git a/store.coffee b/store.coffee new file mode 100644 index 000000000..423cb0ebe --- /dev/null +++ b/store.coffee @@ -0,0 +1,36 @@ +configureStore = require('appirio-tech-client-app-layer').default + +store = configureStore + attachments: + 'mockDataInRouter.jpg': + assetType : 'specs' + progress : 33 + category :'work' + fileName : 'mockDataInRouter.jpg' + filePath : 'some/unique/path' + fileType : 'image/jpeg' + id : 'workid' + 'specsworkworkidmockDataInRouterError.jpg': + assetType : 'specs' + progress : 33 + category :'work' + fileName : 'mockDataInRouterError.jpg' + filePath : 'some/unique/path3' + fileType : 'image/jpeg' + id : 'workid' + errors : [] + 'mockDataInRouter2.jpg': + assetType : 'specs' + progress : 33 + category :'work' + fileName : 'mockDataInRouter2.jpg' + filePath : 'some/unique/path2' + fileType : 'image/jpeg' + id : 'workid' + preview : 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7' + fileUploader: + id : 'workid' # has to match schemas + assetType: 'specs' # has to match schemas + category : 'work' # has to match schemas + +module.exports = store \ No newline at end of file