From 0fd99c3ba4fb486a2fe426bfde08df8ca43a10d3 Mon Sep 17 00:00:00 2001 From: Javi Jimenez Villar Date: Sat, 30 May 2015 16:19:37 +0200 Subject: [PATCH] UX from Session to Console --- dist/assets/img/avatar.jpg | Bin 0 -> 13304 bytes source/app.cjsx | 66 +++++++++++------- source/components/button.cjsx | 4 +- source/components/navigation.cjsx | 6 +- source/components/router.cjsx | 44 ++++++++++++ .../session.cjsx => forms/form.session.cjsx} | 21 +++--- source/modules/constants.coffee | 7 +- source/screens/console.cjsx | 39 +---------- source/styles/__constants.styl | 1 - source/styles/components/button.styl | 19 +++-- source/styles/components/form.styl | 15 ++++ source/styles/components/header.styl | 15 ++++ source/styles/components/input.styl | 38 ++++++++++ source/styles/components/list_item.styl | 6 +- source/styles/components/navigation.styl | 1 + 15 files changed, 192 insertions(+), 90 deletions(-) create mode 100644 dist/assets/img/avatar.jpg create mode 100644 source/components/router.cjsx rename source/{screens/session.cjsx => forms/form.session.cjsx} (62%) create mode 100644 source/styles/components/form.styl create mode 100644 source/styles/components/input.styl diff --git a/dist/assets/img/avatar.jpg b/dist/assets/img/avatar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..08bfe41a056a6ddf33c5f9781f2c8ba6ee09ba67 GIT binary patch literal 13304 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 UY|M){-Ov7n2L6BGVfTpt1%ryR0RR91 literal 0 HcmV?d00001 diff --git a/source/app.cjsx b/source/app.cjsx index 74997695..6272d8ce 100644 --- a/source/app.cjsx +++ b/source/app.cjsx @@ -1,45 +1,63 @@ "use strict" SPArouter = require "spa-router" -# -- Models -Session = require "./models/session" +# -- components +Button = require "./components/button" +Router = require "./components/router" +# -- forms +FormSession = require "./forms/form.session" # -- Screens -ScreenSession = require "./screens/session" ScreenConsole = require "./screens/console" +# -- Modules +C = require "./modules/constants" App = React.createClass - # -- States & Properties - getInitialState: -> - session : null - context : "campaigns" - # -- Lifecycle componentWillMount: -> SPArouter.listen - "/session/:id" : (id) => - @setState session: false, context: id - "/:context/:area/:element" : (context, area, element) => - @setState session: true, context: context + "/session/:context" : (context) => + @setState session: false, context: context "/:context/:area" : (context, area) => - @setState session: true, context: context - "/:context" : (context) => - @setState session: true, context: context + @setState session: true, context: context, area: area # -- Events onSessionSuccess: (data) -> - @setState session: true - SPArouter.path "console" + header_style = @refs.header.getDOMNode().classList + header_style.add "disabled" + header_style.remove "expanded" + setTimeout => + SPArouter.path "campaigns/list" + , C.ANIMATION.DURATION + setTimeout => + header_style.remove "disabled" + , (C.ANIMATION.DURATION * 2) + + onConsoleScroll: (value) -> @setState scrolling: value + + onLogout: -> SPArouter.path "session/login" # -- Render render: -> - - { - if @state.session - - else - - } + if @state.session + avatar = "http://soyjavi.com/assets/img/soyjavi.hat.jpg" + else + avatar = "./assets/img/avatar.jpg" + + +
+ + { + if @state.session + + else + + } +
+ { if @state.session } React.render , document.body diff --git a/source/components/button.cjsx b/source/components/button.cjsx index 2e30ead4..f0cf8f54 100644 --- a/source/components/button.cjsx +++ b/source/components/button.cjsx @@ -15,10 +15,10 @@ module.exports = React.createClass # -- Events onClick: (event) -> event.preventDefault() - console.log ">" + @props.onClick.call @, event # -- Render render: -> - diff --git a/source/components/navigation.cjsx b/source/components/navigation.cjsx index 55e32b31..77f8a515 100644 --- a/source/components/navigation.cjsx +++ b/source/components/navigation.cjsx @@ -23,11 +23,7 @@ module.exports = React.createClass { for route, index in @props.routes method = if route.back is true then @onBack - console.log route.className - + {route.label} } diff --git a/source/components/router.cjsx b/source/components/router.cjsx new file mode 100644 index 00000000..ba68ff4e --- /dev/null +++ b/source/components/router.cjsx @@ -0,0 +1,44 @@ +### +@todo +### + +Button = require "./button" +Navigation = require "./navigation" +C = require "../modules/constants" + +module.exports = React.createClass + + # -- States & Properties + propTypes: + routes : React.PropTypes.array.required + + getDefaultProps: -> + routes : [ + label: "Campaigns", route: "/campaigns/list" + , + label: "Creatives", route: "/creatives/list" + , + label: "Users", route: "/users/list" + , + label: "Deals", route: "/deals/list" + , + label: "Analytics", route: "/analytics" + ] + + # -- Render + render: -> + for route in @props.routes + route.className = if route.label.toLowerCase() is @props.context then "active" else "" + for route in subroutes = C.SUBROUTES[@props.context.toUpperCase()] + route.className = if route.label.toLowerCase() is @props.area then "active" else "" +
+
+ +

Console

+ +
+ +
diff --git a/source/screens/session.cjsx b/source/forms/form.session.cjsx similarity index 62% rename from source/screens/session.cjsx rename to source/forms/form.session.cjsx index 923a4e01..2fb012ed 100644 --- a/source/screens/session.cjsx +++ b/source/forms/form.session.cjsx @@ -2,6 +2,9 @@ @todo ### +# -- components +Button = require "../components/button" + module.exports = React.createClass # -- States & Properties @@ -11,7 +14,7 @@ module.exports = React.createClass onSuccess : React.PropTypes.function getInitialState: -> - disabled: false + disabled : true # -- Events onKeyUp: (event) -> @@ -32,23 +35,19 @@ module.exports = React.createClass # -- Render render: -> - + # -- Private methods _getFormValues: -> diff --git a/source/modules/constants.coffee b/source/modules/constants.coffee index ca0dd136..d60780f4 100644 --- a/source/modules/constants.coffee +++ b/source/modules/constants.coffee @@ -12,10 +12,15 @@ module.exports = , label: "reports", route: "/campaigns/reports" ] - CREATIVES: [ label: "list", route: "/creatives/list" ] + USERS: [] + DEALS: [] + ANALYTICS: [] HEIGHT: LI : 80 + + ANIMATION: + DURATION : 450 diff --git a/source/screens/console.cjsx b/source/screens/console.cjsx index 5d95ce26..64d3ba1e 100644 --- a/source/screens/console.cjsx +++ b/source/screens/console.cjsx @@ -2,48 +2,13 @@ @todo ### -SPArouter = require "spa-router" -Header = require "../components/header" List = require "../components/list" ListItem = require "../components/list_item" -C = require "../modules/constants" module.exports = React.createClass - # -- States & Properties - propTypes: - routes : React.PropTypes.array - - getDefaultProps: -> - routes : [ - label: "Campaigns", route: "/campaigns" - , - label: "Creatives", route: "/creatives" - , - label: "Users", route: "/users" - , - label: "Deals", route: "/deals" - , - label: "Analytics", route: "/analytics" - ] - subroutes : [] - - getInitialState: -> - scrolling : false - - onScroll: (value) -> - @setState scrolling: value - render: -> - context = @props.context.toUpperCase() mock = (id: i, title: "Title #{i}" for i in [1..128]) - - for route in @props.routes - route.className = if route.label.toLowerCase() is @props.context then "active" else "" - -
-
- +
+
diff --git a/source/styles/__constants.styl b/source/styles/__constants.styl index 3ba1a43a..c1e1ddd4 100644 --- a/source/styles/__constants.styl +++ b/source/styles/__constants.styl @@ -26,7 +26,6 @@ OFFSET = (UNIT * 1.35) HEADER_HEIGHT = 33vh BUTTON_HEIGHT = (2.5 * SPACE) -BUTTON_HEIGHT = 14vw BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE) BORDER_RADIUS = (SPACE / 2) H1_SHADOW = (SPACE / 6) (SPACE / 6) rgba(0,0,0,0.2) diff --git a/source/styles/components/button.styl b/source/styles/components/button.styl index 70bc7074..c9cc72f5 100644 --- a/source/styles/components/button.styl +++ b/source/styles/components/button.styl @@ -1,16 +1,20 @@ button, .button - height : BUTTON_HEIGHT - width : auto + font-size : FONT_SIZE_BIG font-weight : FONT_WEIGHT_BOLD line-height : BUTTON_HEIGHT text-align : center border : none overflow : hidden - transition-property opacity, box-shadow + transition-property opacity, background-color, box-shadow transition-duration ANIMATION_DURATION transition-timing-function ANIMATION_EASE + &:not(.circle) + height : BUTTON_HEIGHT + max-height : BUTTON_HEIGHT + width : auto + &.circle width : SIZE = BUTTON_CIRCLE_HEIGHT height : SIZE @@ -22,7 +26,8 @@ button, .button box-shadow BUTTON_SHADOW, inset 0 0 0 UNIT alpha(WHITE, 15%) // -- Colors - &.primary - background-color : PRIMARY - &.secondary - background-color : PRIMARY + &:not([disabled]) + &.primary + background-color : PRIMARY + &.secondary + background-color : PRIMARY diff --git a/source/styles/components/form.styl b/source/styles/components/form.styl new file mode 100644 index 00000000..9ff4bc13 --- /dev/null +++ b/source/styles/components/form.styl @@ -0,0 +1,15 @@ +form + padding : SPACE + // -- Classes + &.session + max-width : 25vw + > * + margin-bottom : (SPACE / 2) + + h1 + padding : 0 + input + font-size : FONT_SIZE_BIG !important + a + text-align : center + font-size : FONT_SIZE_TINY diff --git a/source/styles/components/header.styl b/source/styles/components/header.styl index 5049b30f..b78e9223 100644 --- a/source/styles/components/header.styl +++ b/source/styles/components/header.styl @@ -1,4 +1,5 @@ header + z-index : 2 position : fixed height : HEADER_HEIGHT width : 100vw @@ -16,6 +17,7 @@ header box-shadow 0 0 0 (SIZE / 10) alpha(WHITE, 15%) h1 padding : (UNIT / 2) 0 + text-transform : Capitalize transition all ANIMATION_DURATION ANIMATION_EASE nav &[data-role="text"] @@ -31,7 +33,20 @@ header > * margin-left : SPACE + // -- States + > * + transition all ANIMATION_DURATION ANIMATION_EASE + &.expanded + height : 100vh + &.disabled + delayChild index, 2 for index in (0..3) + + > * + opacity : 0 + transform translateY(-10vh) + // -- Effects + .scrolling & height : (HEADER_HEIGHT / 2) box-shadow : HEADER_SHADOW diff --git a/source/styles/components/input.styl b/source/styles/components/input.styl new file mode 100644 index 00000000..3a0aae45 --- /dev/null +++ b/source/styles/components/input.styl @@ -0,0 +1,38 @@ +input[type="email"], input[type="search"], input[type="text"], input[type="tel"], +input[type="url"], input[type="password"], textarea, select + width : 100% + padding : (SPACE / 2) + font-size : FONT_SIZE_NORMAL + border : none + border-bottom : solid (SPACE / 10) + box-shadow : none + box-sizing : border-box + transition all ANIMATION_DURATION ANIMATION_EASE + & :focus + outline : 0 + + -webkit-appearance : none + -moz-appearance : none + appearance : none + outline : none + -webkit-tap-highlight-color : rgba(255, 255, 255, 0) + -webkit-touch-callout : none + + // -- class ------------------------------------------------------------------ + &.transparent + font-size : FONT_SIZE_BIG + font-weight : FONT_WEIGHT_BOLD + background-color : transparent + color : WHITE + border-bottom-color : alpha(WHITE, 50%) + &:hover, &:focus, &:active + border-bottom-color : WHITE + &::-webkit-input-placeholder + color : alpha(WHITE, 50%) + + &.white + border-bottom-color : alpha(BACKGROUND, 25%) + opacity : 0.75 + &:hover, &:focus, &:active + border-bottom-color : THEME + opacity : 1 diff --git a/source/styles/components/list_item.styl b/source/styles/components/list_item.styl index 57eadefe..49e4ca77 100644 --- a/source/styles/components/list_item.styl +++ b/source/styles/components/list_item.styl @@ -1,6 +1,8 @@ li - padding : (SPACE / 2) 0 - height : 80px + margin-bottom : SPACE + padding : SPACE + background-color : white + box-shadow : HEADER_SHADOW img width : SIZE = (2.5 * SPACE) height : SIZE diff --git a/source/styles/components/navigation.styl b/source/styles/components/navigation.styl index ddc8dae7..d521e331 100644 --- a/source/styles/components/navigation.styl +++ b/source/styles/components/navigation.styl @@ -2,6 +2,7 @@ nav &[data-role="text"] font-size : FONT_SIZE_NORMAL > * + text-transform : Capitalize transition opacity ANIMATION_DURATION ANIMATION_EASE &:not(.active) font-weight : FONT_WEIGHT_THIN