Skip to content

Commit 84e8acb

Browse files
vietnogivietnogi
committed
all ui components
1 parent c683e61 commit 84e8acb

20 files changed

+612
-37
lines changed

‎components/Avatar/Avatar.cjsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict'
2+
3+
require './Avatar.scss'
4+
5+
React = require 'react'
6+
7+
Avatar = ({avatarUrl}) ->
8+
src = avatarUrl || require './place-holder.svg'
9+
10+
<div className="Avatar">
11+
<img src={src}/>
12+
</div>
13+
14+
module.exports = Avatar

‎components/Avatar/Avatar.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$avatar-diameter: 35px;
2+
3+
.Avatar {
4+
width : $avatar-diameter;
5+
height : $avatar-diameter;
6+
border-radius : 50%;
7+
background-color: #eee;
8+
overflow : hidden;
9+
10+
img {
11+
width : 100%;
12+
height: 100%;
13+
}
14+
}

‎components/Avatar/AvatarExamples.cjsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict'
2+
3+
Avatar = require './Avatar.cjsx'
4+
React = require 'react'
5+
6+
AvatarExamples = ->
7+
<div className="AvatarExamples flex column middle center">
8+
<h1>Default</h1>
9+
10+
<Avatar />
11+
12+
<h1>Url is provided</h1>
13+
14+
<Avatar avatarUrl="http://www.topcoder.com/i/m/cardiboy_big.jpg" />
15+
</div>
16+
17+
module.exports = AvatarExamples

‎components/Avatar/place-holder.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎components/Checkbox/Checkbox.cjsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict'
2+
3+
require './Checkbox.scss'
4+
5+
React = require 'react'
6+
7+
Checkbox = ({onChange, checked, label}) ->
8+
if checked
9+
iconClassName = 'icon checkmark active'
10+
else
11+
iconClassName = 'icon plus hollow'
12+
13+
<div className="Checkbox flex middle">
14+
<button className="clean" type="button" onClick={onChange}>
15+
<div className={iconClassName} />
16+
</button>
17+
18+
{
19+
if label
20+
<label onClick={onChange}>{label}</label>
21+
}
22+
</div>
23+
24+
module.exports = Checkbox

‎components/Checkbox/Checkbox.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import "work/work-includes";
2+
3+
.Checkbox {
4+
label {
5+
margin-left: 10px;
6+
}
7+
8+
.icon, button {
9+
width : 24px;
10+
height : 24px;
11+
/* fixing jumping issues on webkit */
12+
outline : none;
13+
overflow: hidden;
14+
}
15+
}

‎components/Checkbox/CheckboxExamples.cjsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict'
2+
3+
Checkbox = require './Checkbox.cjsx'
4+
React = require 'react'
5+
6+
CheckboxExamples = ->
7+
<div className="CheckboxExamples flex column middle center">
8+
<h1>Default</h1>
9+
10+
<Checkbox />
11+
12+
<h1>Checked is true with label</h1>
13+
14+
<Checkbox checked={true} label="show me the money" />
15+
16+
</div>
17+
18+
module.exports = CheckboxExamples

‎components/ExampleNav/ExampleNav.cjsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,23 @@ classNames = require 'classnames'
1010
component = ({data, state}) ->
1111
<ul className="ExampleNav">
1212
<li>
13-
<Link to="/">FileUploaderContainer</Link>
13+
<Link to="/">Avatar</Link>
14+
15+
<Link to="/FileUploaderContainerExamples">FileUploaderContainer</Link>
1416

1517
<Link to="/UploadedFileExamples">UploadedFile</Link>
1618

1719
<Link to="/UploadedFilesExamples">UploadedFiles</Link>
1820

1921
<Link to="/FileUploaderExamples">FileUploader</Link>
22+
23+
<Link to="/CheckboxExamples">Checkbox</Link>
24+
25+
<Link to="/ImageViewerHeaderExamples">ImageViewerHeader</Link>
26+
27+
<Link to="/ImageViewerExamples">ImageViewer</Link>
28+
29+
<Link to="/LoaderExamples">Loader</Link>
2030
</li>
2131
</ul>
2232

‎components/ImageViewer/ImageViewer.cjsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
'use strict'
2+
3+
require './ImageViewer.scss'
4+
5+
React = require 'react'
6+
7+
ImageViewer = ({
8+
files
9+
file
10+
viewPrevious
11+
viewNext
12+
selectFile
13+
prevFile
14+
nextFile
15+
showNotifications
16+
toggleZoom
17+
imageZoomedIn
18+
}) ->
19+
20+
<div className="ImageViewer">
21+
<main className="flex column middle light-bg">
22+
<div className="content flex column flex-grow">
23+
{if file.name
24+
<p className="file-name">{file.name}</p>
25+
}
26+
27+
{if file.caption
28+
<p className="file-caption">{file.caption}</p>
29+
}
30+
31+
<div className="slideshow flex column flex-grow">
32+
<div className="preview flex center flex-grow flex-shrink">
33+
<div className="previous flex flex-grow">
34+
{ if prevFile
35+
<a className="arrow-previous" onClick={viewPrevious}>
36+
<button className="clean icon arrow"></button>
37+
</a>
38+
}
39+
40+
{ if !prevFile
41+
<a className="arrow-previous invisible disabled">
42+
<button className="clean icon arrow"></button>
43+
</a>
44+
}
45+
</div>
46+
47+
<div className="image flex column center">
48+
<div className="img-container flex flex-grow">
49+
{if !imageZoomedIn
50+
<div className="bg-image" onClick={toggleZoom} style={backgroundImage: 'url(' + file.url + ')'} />
51+
}
52+
{if imageZoomedIn
53+
<div className="bg-image zoomed elevated" onClick={toggleZoom}>
54+
<img src={file.url}/>
55+
</div>
56+
}
57+
</div>
58+
</div>
59+
60+
<div className="next flex flex-grow">
61+
{ if nextFile
62+
<a className="arrow-next" onClick={viewNext}>
63+
<button className="clean icon arrow right"></button>
64+
</a>
65+
}
66+
67+
{ if !nextFile
68+
<a className="arrow-next invisible disabled">
69+
<button className="clean icon arrow right"></button>
70+
</a>
71+
}
72+
</div>
73+
</div>
74+
75+
<ul className="thumbnails">
76+
{for file in files
77+
<li className="thumbnail" key={file.name}>
78+
<button className="clean" onClick={selectFile.bind(null, file)}>
79+
<img src={file.url}/>
80+
{if file.unreadMessages > 0 && showNotifications
81+
<div className="notification absolute">
82+
{file.unreadMessages}
83+
</div>
84+
}
85+
</button>
86+
</li>
87+
}
88+
</ul>
89+
90+
</div>
91+
</div>
92+
</main>
93+
</div>
94+
95+
module.exports = ImageViewer

‎components/ImageViewer/ImageViewer.scss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
@import "work/work-includes";
2+
3+
.ImageViewer {
4+
5+
main {
6+
width : 100vw;
7+
height: 100vh;
8+
padding: 20px;
9+
padding-top: 10px;
10+
11+
.content {
12+
overflow: hidden;
13+
text-align: center;
14+
width: 100%;
15+
16+
.slideshow {
17+
width: 100%;
18+
.icon.arrow {
19+
width: 33px;
20+
height: 74px;
21+
}
22+
23+
.preview {
24+
overflow: hidden;
25+
text-align: center;
26+
padding: 20px 0;
27+
28+
.previous, .next {
29+
min-width: 50px;
30+
31+
.arrow-previous, .arrow-next {
32+
margin: auto
33+
}
34+
35+
.arrow-next {
36+
margin: auto
37+
}
38+
}
39+
40+
.image {
41+
width: 100%;
42+
max-width: 1000px;
43+
margin-right: 80px;
44+
margin-left: 80px;
45+
46+
.img-container {
47+
width: 100%;
48+
height: 100%;
49+
max-height: 800px;
50+
max-width: 1000px;
51+
52+
.bg-image {
53+
margin-top: 40px;
54+
background-size: contain;
55+
background-repeat: no-repeat;
56+
width: 100%;
57+
58+
&.zoomed {
59+
overflow: auto;
60+
61+
img {
62+
&:hover {
63+
cursor: zoom-out;
64+
}
65+
}
66+
}
67+
68+
&:hover {
69+
cursor: zoom-in;
70+
}
71+
}
72+
}
73+
}
74+
}
75+
76+
.thumbnails {
77+
text-align: center;
78+
max-width: 100vw;
79+
padding: 20px;
80+
min-height: 100px;
81+
overflow: auto;
82+
white-space: nowrap;
83+
84+
> * {
85+
display: inline-block;
86+
margin: 10px;
87+
position: relative;
88+
89+
&.elevated {
90+
opacity: 0.4;
91+
}
92+
}
93+
94+
button {
95+
img {
96+
width : 60px;
97+
height : 50px;
98+
display: block;
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}
106+

0 commit comments

Comments
 (0)