Skip to content

Commit 0fd99c3

Browse files
soyjavisoyjavi
committed
UX from Session to Console
1 parent 19a04a6 commit 0fd99c3

File tree

15 files changed

+192
-90
lines changed

15 files changed

+192
-90
lines changed

‎dist/assets/img/avatar.jpg

13 KB
Loading

‎source/app.cjsx

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,63 @@
11
"use strict"
22

33
SPArouter = require "spa-router"
4-
# -- Models
5-
Session = require "./models/session"
4+
# -- components
5+
Button = require "./components/button"
6+
Router = require "./components/router"
7+
# -- forms
8+
FormSession = require "./forms/form.session"
69
# -- Screens
7-
ScreenSession = require "./screens/session"
810
ScreenConsole = require "./screens/console"
11+
# -- Modules
12+
C = require "./modules/constants"
913

1014
App = React.createClass
1115

12-
# -- States & Properties
13-
getInitialState: ->
14-
session : null
15-
context : "campaigns"
16-
1716
# -- Lifecycle
1817
componentWillMount: ->
1918
SPArouter.listen
20-
"/session/:id" : (id) =>
21-
@setState session: false, context: id
22-
"/:context/:area/:element" : (context, area, element) =>
23-
@setState session: true, context: context
19+
"/session/:context" : (context) =>
20+
@setState session: false, context: context
2421
"/:context/:area" : (context, area) =>
25-
@setState session: true, context: context
26-
"/:context" : (context) =>
27-
@setState session: true, context: context
22+
@setState session: true, context: context, area: area
2823

2924
# -- Events
3025
onSessionSuccess: (data) ->
31-
@setState session: true
32-
SPArouter.path "console"
26+
header_style = @refs.header.getDOMNode().classList
27+
header_style.add "disabled"
28+
header_style.remove "expanded"
29+
setTimeout =>
30+
SPArouter.path "campaigns/list"
31+
, C.ANIMATION.DURATION
32+
setTimeout =>
33+
header_style.remove "disabled"
34+
, (C.ANIMATION.DURATION * 2)
35+
36+
onConsoleScroll: (value) -> @setState scrolling: value
37+
38+
onLogout: -> SPArouter.path "session/login"
3339

3440
# -- Render
3541
render: ->
36-
<app>
37-
{
38-
if @state.session
39-
<ScreenConsole context={@state.context}/>
40-
else
41-
<ScreenSession context={@state.context} onSuccess={@onSessionSuccess} />
42-
}
42+
if @state.session
43+
avatar = "http://soyjavi.com/assets/img/soyjavi.hat.jpg"
44+
else
45+
avatar = "./assets/img/avatar.jpg"
46+
47+
<app className={"scrolling" if @state.scrolling}>
48+
<header ref="header"
49+
data-flex="horizontal center grow"
50+
data-flex-justify="start"
51+
className={"expanded" unless @state.session}>
52+
<img src={avatar} data-flex-grow="min" onClick={@onLogout}/>
53+
{
54+
if @state.session
55+
<Router context={@state.context} area={@state.area} />
56+
else
57+
<FormSession context={@state.context} onSuccess={@onSessionSuccess}/>
58+
}
59+
</header>
60+
{ <ScreenConsole context={@state.context} onScroll={@onConsoleScroll}/> if @state.session }
4361
</app>
4462

4563
React.render <App />, document.body

‎source/components/button.cjsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ module.exports = React.createClass
1515
# -- Events
1616
onClick: (event) ->
1717
event.preventDefault()
18-
console.log ">"
18+
@props.onClick.call @, event
1919

2020
# -- Render
2121
render: ->
22-
<button onClick={@onClick} className={@props.style}>
22+
<button onClick={@onClick} className={@props.style} disabled={@props.disabled}>
2323
<abbr>{@props.caption}</abbr>
2424
</button>

‎source/components/navigation.cjsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,7 @@ module.exports = React.createClass
2323
{
2424
for route, index in @props.routes
2525
method = if route.back is true then @onBack
26-
console.log route.className
27-
<a href={"#" + route.route}
28-
key={index}
29-
className={route.className}
30-
onClick={method}>
26+
<a href={"#" + route.route} key={index} className={route.className} onClick={method}>
3127
{route.label}
3228
</a>
3329
}

‎source/components/router.cjsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
###
2+
@todo
3+
###
4+
5+
Button = require "./button"
6+
Navigation = require "./navigation"
7+
C = require "../modules/constants"
8+
9+
module.exports = React.createClass
10+
11+
# -- States & Properties
12+
propTypes:
13+
routes : React.PropTypes.array.required
14+
15+
getDefaultProps: ->
16+
routes : [
17+
label: "Campaigns", route: "/campaigns/list"
18+
,
19+
label: "Creatives", route: "/creatives/list"
20+
,
21+
label: "Users", route: "/users/list"
22+
,
23+
label: "Deals", route: "/deals/list"
24+
,
25+
label: "Analytics", route: "/analytics"
26+
]
27+
28+
# -- Render
29+
render: ->
30+
for route in @props.routes
31+
route.className = if route.label.toLowerCase() is @props.context then "active" else ""
32+
for route in subroutes = C.SUBROUTES[@props.context.toUpperCase()]
33+
route.className = if route.label.toLowerCase() is @props.area then "active" else ""
34+
<div>
35+
<div data-flex-grow="max">
36+
<Navigation routes={@props.routes} role="text"/>
37+
<h1>Console</h1>
38+
<Navigation routes={subroutes} role="text"/>
39+
</div>
40+
<nav data-role="circle">
41+
<Button caption="+" style="circle primary"/>
42+
<Button caption="?" style="circle secondary"/>
43+
</nav>
44+
</div>

‎source/screens/session.cjsx renamed to ‎source/forms/form.session.cjsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@todo
33
###
44

5+
# -- components
6+
Button = require "../components/button"
7+
58
module.exports = React.createClass
69

710
# -- States & Properties
@@ -11,7 +14,7 @@ module.exports = React.createClass
1114
onSuccess : React.PropTypes.function
1215

1316
getInitialState: ->
14-
disabled: false
17+
disabled : true
1518

1619
# -- Events
1720
onKeyUp: (event) ->
@@ -32,23 +35,19 @@ module.exports = React.createClass
3235

3336
# -- Render
3437
render: ->
35-
<article data-screen="session" className={@state.active} data-flex="vertical center">
38+
label = if @props.context is "login" then "Sign In" else "Sign Up"
39+
<form data-flex="vertical" className="session">
3640
<h1>Welcome...</h1>
37-
<form data-flex="vertical center">
38-
<input ref="mail" type="text" placeholder="mail" onKeyUp={@onKeyUp} className="transparent"/>
39-
<input ref="password" type="password" placeholder="password" onKeyUp={@onKeyUp} className="transparent"/>
40-
<button ref="button" onClick={@onSign} disabled={@state.disabled} className="radius white">
41-
<abbr>{ if @props.context is "login" then "Sign In" else "Sign Up"}</abbr>
42-
</button>
43-
</form>
41+
<input ref="mail" type="text" placeholder="mail" onKeyUp={@onKeyUp} className="transparent"/>
42+
<input ref="password" type="password" placeholder="password" onKeyUp={@onKeyUp} className="transparent"/>
43+
<Button ref="button" caption={label} onClick={@onSign} disabled={@state.disabled} style="primary" />
4444
{
4545
if @props.context is "login"
4646
<a href="#/session/signup">Dont have an account? <strong>Sign Up</strong></a>
4747
else
4848
<a href="#/session/login">You have an account, <strong>Sign In</strong></a>
4949
}
50-
<small>Copyright 2015</small>
51-
</article>
50+
</form>
5251

5352
# -- Private methods
5453
_getFormValues: ->

‎source/modules/constants.coffee

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,15 @@ module.exports =
1212
,
1313
label: "reports", route: "/campaigns/reports"
1414
]
15-
1615
CREATIVES: [
1716
label: "list", route: "/creatives/list"
1817
]
18+
USERS: []
19+
DEALS: []
20+
ANALYTICS: []
1921

2022
HEIGHT:
2123
LI : 80
24+
25+
ANIMATION:
26+
DURATION : 450

‎source/screens/console.cjsx

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,13 @@
22
@todo
33
###
44

5-
SPArouter = require "spa-router"
6-
Header = require "../components/header"
75
List = require "../components/list"
86
ListItem = require "../components/list_item"
9-
C = require "../modules/constants"
107

118
module.exports = React.createClass
129

13-
# -- States & Properties
14-
propTypes:
15-
routes : React.PropTypes.array
16-
17-
getDefaultProps: ->
18-
routes : [
19-
label: "Campaigns", route: "/campaigns"
20-
,
21-
label: "Creatives", route: "/creatives"
22-
,
23-
label: "Users", route: "/users"
24-
,
25-
label: "Deals", route: "/deals"
26-
,
27-
label: "Analytics", route: "/analytics"
28-
]
29-
subroutes : []
30-
31-
getInitialState: ->
32-
scrolling : false
33-
34-
onScroll: (value) ->
35-
@setState scrolling: value
36-
3710
render: ->
38-
context = @props.context.toUpperCase()
3911
mock = (id: i, title: "Title #{i}" for i in [1..128])
40-
41-
for route in @props.routes
42-
route.className = if route.label.toLowerCase() is @props.context then "active" else ""
43-
44-
<article data-screen="console" className={"scrolling" if @state.scrolling}>
45-
<Header title="Console"
46-
routes={@props.routes}
47-
subroutes={C.SUBROUTES[context]} />
48-
<List dataSource={mock} itemFactory={ListItem} onScroll={@onScroll} />
12+
<article data-screen="console">
13+
<List dataSource={mock} itemFactory={ListItem} onScroll={@props.onScroll} />
4914
</article>

‎source/styles/__constants.styl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ OFFSET = (UNIT * 1.35)
2626
HEADER_HEIGHT = 33vh
2727

2828
BUTTON_HEIGHT = (2.5 * SPACE)
29-
BUTTON_HEIGHT = 14vw
3029
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
3130
BORDER_RADIUS = (SPACE / 2)
3231
H1_SHADOW = (SPACE / 6) (SPACE / 6) rgba(0,0,0,0.2)

‎source/styles/components/button.styl

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
button, .button
2-
height : BUTTON_HEIGHT
3-
width : auto
2+
43
font-size : FONT_SIZE_BIG
54
font-weight : FONT_WEIGHT_BOLD
65
line-height : BUTTON_HEIGHT
76
text-align : center
87
border : none
98
overflow : hidden
10-
transition-property opacity, box-shadow
9+
transition-property opacity, background-color, box-shadow
1110
transition-duration ANIMATION_DURATION
1211
transition-timing-function ANIMATION_EASE
1312

13+
&:not(.circle)
14+
height : BUTTON_HEIGHT
15+
max-height : BUTTON_HEIGHT
16+
width : auto
17+
1418
&.circle
1519
width : SIZE = BUTTON_CIRCLE_HEIGHT
1620
height : SIZE
@@ -22,7 +26,8 @@ button, .button
2226
box-shadow BUTTON_SHADOW, inset 0 0 0 UNIT alpha(WHITE, 15%)
2327

2428
// -- Colors
25-
&.primary
26-
background-color : PRIMARY
27-
&.secondary
28-
background-color : PRIMARY
29+
&:not([disabled])
30+
&.primary
31+
background-color : PRIMARY
32+
&.secondary
33+
background-color : PRIMARY

‎source/styles/components/form.styl

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
form
2+
padding : SPACE
3+
// -- Classes
4+
&.session
5+
max-width : 25vw
6+
> *
7+
margin-bottom : (SPACE / 2)
8+
9+
h1
10+
padding : 0
11+
input
12+
font-size : FONT_SIZE_BIG !important
13+
a
14+
text-align : center
15+
font-size : FONT_SIZE_TINY

‎source/styles/components/header.styl

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
header
2+
z-index : 2
23
position : fixed
34
height : HEADER_HEIGHT
45
width : 100vw
@@ -16,6 +17,7 @@ header
1617
box-shadow 0 0 0 (SIZE / 10) alpha(WHITE, 15%)
1718
h1
1819
padding : (UNIT / 2) 0
20+
text-transform : Capitalize
1921
transition all ANIMATION_DURATION ANIMATION_EASE
2022
nav
2123
&[data-role="text"]
@@ -31,7 +33,20 @@ header
3133
> *
3234
margin-left : SPACE
3335

36+
// -- States
37+
> *
38+
transition all ANIMATION_DURATION ANIMATION_EASE
39+
&.expanded
40+
height : 100vh
41+
&.disabled
42+
delayChild index, 2 for index in (0..3)
43+
44+
> *
45+
opacity : 0
46+
transform translateY(-10vh)
47+
3448
// -- Effects
49+
3550
.scrolling &
3651
height : (HEADER_HEIGHT / 2)
3752
box-shadow : HEADER_SHADOW

0 commit comments

Comments
 (0)