From 19a04a6297a47d14316542ae960297b8b59c5ff5 Mon Sep 17 00:00:00 2001 From: Javi Jimenez Villar Date: Sat, 30 May 2015 12:59:01 +0200 Subject: [PATCH] Improving UX --- package.json | 48 ++++++++++++------------ source/app.cjsx | 6 ++- source/components/button.cjsx | 24 ++++++++++++ source/components/header.cjsx | 13 +++++-- source/components/list.cjsx | 39 +++++++++++++++++++ source/components/list_item.cjsx | 13 +++++++ source/components/navigation.cjsx | 6 ++- source/modules/constants.coffee | 9 +++-- source/screens/console.cjsx | 45 +++++++++++----------- source/styles/__constants.styl | 17 ++++++--- source/styles/app.styl | 4 +- source/styles/components/button.styl | 20 +++++++++- source/styles/components/header.styl | 32 +++++++++++----- source/styles/components/list.styl | 2 + source/styles/components/list_item.styl | 1 + source/styles/components/navigation.styl | 19 +++------- source/styles/normalize.styl | 4 +- source/styles/screens/__init.styl | 2 +- 18 files changed, 216 insertions(+), 88 deletions(-) create mode 100644 source/components/button.cjsx create mode 100644 source/components/list.cjsx create mode 100644 source/components/list_item.cjsx create mode 100644 source/styles/components/list.styl diff --git a/package.json b/package.json index 0ab19b09..4aa8f1ac 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,32 @@ { - "name" : "material-console", - "version" : "0.5.29", - "description" : "", - "homepage" : "http://zetapath.com", - "author" : "Zetapath LTD.", + "name": "material-console", + "version": "0.5.29", + "description": "", + "homepage": "http://zetapath.com", + "author": "Zetapath LTD.", "dependencies": { - "coffee-script" : "*" + "coffee-script": "*" }, "devDependencies": { - "browserify" : "^10.0.0", - "coffee-reactify" : "^3.0.0", - "moment" : "^2.10.2", - "react" : "^0.13.2", - "spa-router" : "^0.5.20", - "vinyl-source-stream" : "^1.1.0", - "gulp" : "*", - "gulp-cjsx" : "*", - "gulp-concat" : "*", - "gulp-connect" : "*", - "gulp-flatten" : "*", - "gulp-header" : "*", - "gulp-stylus" : "*", - "gulp-uglify" : "*", - "gulp-util" : "*", - "gulp-yml" : "*" + "browserify": "^10.0.0", + "coffee-reactify": "^3.0.0", + "gulp": "*", + "gulp-cjsx": "*", + "gulp-concat": "*", + "gulp-connect": "*", + "gulp-flatten": "*", + "gulp-header": "*", + "gulp-stylus": "*", + "gulp-uglify": "*", + "gulp-util": "*", + "gulp-yml": "*", + "moment": "^2.10.2", + "react": "^0.13.2", + "spa-router": "^0.5.20", + "vinyl-source-stream": "^1.1.0" }, "scripts": { - "start" : "gulp", - "postinstall" : "bower install" + "start": "gulp", + "postinstall": "bower install" } } diff --git a/source/app.cjsx b/source/app.cjsx index 890d0cb2..74997695 100644 --- a/source/app.cjsx +++ b/source/app.cjsx @@ -19,7 +19,11 @@ App = React.createClass SPArouter.listen "/session/:id" : (id) => @setState session: false, context: id - "/console/:context" : (context) => + "/:context/:area/:element" : (context, area, element) => + @setState session: true, context: context + "/:context/:area" : (context, area) => + @setState session: true, context: context + "/:context" : (context) => @setState session: true, context: context # -- Events diff --git a/source/components/button.cjsx b/source/components/button.cjsx new file mode 100644 index 00000000..2e30ead4 --- /dev/null +++ b/source/components/button.cjsx @@ -0,0 +1,24 @@ +### +@todo +### + +module.exports = React.createClass + + # -- States & Properties + propTypes: + caption : React.PropTypes.string + icon : React.PropTypes.string + + getDefaultProps: -> + icon : undefined + + # -- Events + onClick: (event) -> + event.preventDefault() + console.log ">" + + # -- Render + render: -> + diff --git a/source/components/header.cjsx b/source/components/header.cjsx index 66e87b54..3718a22a 100644 --- a/source/components/header.cjsx +++ b/source/components/header.cjsx @@ -2,8 +2,10 @@ @todo ### +Button = require './button' Navigation = require './navigation' + module.exports = React.createClass # -- States & Properties @@ -32,13 +34,16 @@ module.exports = React.createClass # -- Render render: ->
-
+ +
-

{@props.title}

+
+

{@props.title}

+
{ if @props.subroutes }
diff --git a/source/components/list.cjsx b/source/components/list.cjsx new file mode 100644 index 00000000..6747c212 --- /dev/null +++ b/source/components/list.cjsx @@ -0,0 +1,39 @@ +### +@todo +### + +module.exports = React.createClass + + # -- States & Properties + propTypes: + itemFactory : React.PropTypes.func.isRequired + dataSource : React.PropTypes.array.isRequired + + getDefaultProps: -> + itemFactory : (index) ->
+ dataSource : [] + + getInitialState: -> + scrolling : false + scroll : 0 + + # -- Lifecycle + componentDidMount: -> + @setState clientHeight: @getDOMNode().clientHeight + + # -- Events + onScroll: (event) -> + scroll = @refs.section.getDOMNode().scrollTop + @props.onScroll? scroll > @state.scroll + @setState scroll: scroll + + # -- Render + render: -> +
+ +
diff --git a/source/components/list_item.cjsx b/source/components/list_item.cjsx new file mode 100644 index 00000000..a9d0409f --- /dev/null +++ b/source/components/list_item.cjsx @@ -0,0 +1,13 @@ +### +@todo +### + +module.exports = (data) -> +
+
+
+ text + lorem ipsum... +
+ moment +
diff --git a/source/components/navigation.cjsx b/source/components/navigation.cjsx index d5fac0fa..55e32b31 100644 --- a/source/components/navigation.cjsx +++ b/source/components/navigation.cjsx @@ -23,7 +23,11 @@ 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/modules/constants.coffee b/source/modules/constants.coffee index dd961121..ca0dd136 100644 --- a/source/modules/constants.coffee +++ b/source/modules/constants.coffee @@ -8,11 +8,14 @@ module.exports = SUBROUTES: CAMPAIGNS: [ - label: "list", route: "/console/campaigns" + label: "list", route: "/campaigns/list" , - label: "reports", route: "/console/campaigns/reports" + label: "reports", route: "/campaigns/reports" ] CREATIVES: [ - label: "list", route: "/console/creatives/list" + label: "list", route: "/creatives/list" ] + + HEIGHT: + LI : 80 diff --git a/source/screens/console.cjsx b/source/screens/console.cjsx index 427e541f..5d95ce26 100644 --- a/source/screens/console.cjsx +++ b/source/screens/console.cjsx @@ -4,6 +4,8 @@ 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 @@ -14,35 +16,34 @@ module.exports = React.createClass getDefaultProps: -> routes : [ - label: "Campaigns", route: "/console/campaigns" + label: "Campaigns", route: "/campaigns" , - label: "Creatives", route: "/console/creatives" + label: "Creatives", route: "/creatives" , - label: "Users", route: "/console/users" + label: "Users", route: "/users" , - label: "Deals", route: "/console/deals" + label: "Deals", route: "/deals" , - label: "Analytics", route: "/console/analytics" + label: "Analytics", route: "/analytics" ] subroutes : [] + getInitialState: -> + scrolling : false + + onScroll: (value) -> + @setState scrolling: value + render: -> context = @props.context.toUpperCase() -
-
-
-
    - { - for i in [1..128] -
  • - -
    - Title {{i}} - lorem ipsum.... -
    - time ago... -
    • - } -
-
+ 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 e709b0f2..3ba1a43a 100644 --- a/source/styles/__constants.styl +++ b/source/styles/__constants.styl @@ -1,10 +1,11 @@ -@import url("http://fonts.googleapis.com/css?family=Roboto:300,400,700") +@import url("http://fonts.googleapis.com/css?family=Roboto:200,300,700") // -- Colors COLOR = #222222 -BACKGROUND = #ffffff +BACKGROUND = #F5F5F5 THEME = #00bcd4 +WHITE = #ffffff PRIMARY = rgb(255, 64, 129) // -- Fonts @@ -14,14 +15,15 @@ FONT_SIZE_TINY = 80% FONT_SIZE_SMALL = 90% FONT_SIZE_NORMAL = 100% FONT_SIZE_BIG = 120% -FONT_WEIGHT_THIN = 100 -FONT_WEIGHT_NORMAL = 400 +FONT_WEIGHT_THIN = 200 +FONT_WEIGHT_NORMAL = 300 FONT_WEIGHT_BOLD = 700 // -- Sizes UNIT = 4rem SPACE = (UNIT * 0.29) -HEADER_HEIGHT = 25vh +OFFSET = (UNIT * 1.35) +HEADER_HEIGHT = 33vh BUTTON_HEIGHT = (2.5 * SPACE) BUTTON_HEIGHT = 14vw @@ -29,6 +31,11 @@ BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE) BORDER_RADIUS = (SPACE / 2) H1_SHADOW = (SPACE / 6) (SPACE / 6) rgba(0,0,0,0.2) +// -- Shadows +HEADER_SHADOW = 0 2px 5px rgba(0,0,0,0.26) +BUTTON_SHADOW = 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24) + + // -- Animations ANIMATION_DURATION = 450ms ANIMATION_EASE = cubic-bezier(.55,0,.1,1) diff --git a/source/styles/app.styl b/source/styles/app.styl index ff01caf1..f9eded1f 100644 --- a/source/styles/app.styl +++ b/source/styles/app.styl @@ -4,15 +4,17 @@ body font-weight : FONT_WEIGHT_NORMAL color : COLOR background-color : BACKGROUND - a color : WHITE + h1, h2, h3, h4, h5, h6 + font-weight : FONT_WEIGHT_NORMAL h1 font-size : SIZE = (1.75 * FONT_SIZE_NORMAL) line-height : SIZE h2 font-size : (1.5 * FONT_SIZE_NORMAL) + // -- Classes .scroll overflow-x : hidden overflow-y : scroll diff --git a/source/styles/components/button.styl b/source/styles/components/button.styl index 08f86349..70bc7074 100644 --- a/source/styles/components/button.styl +++ b/source/styles/components/button.styl @@ -7,4 +7,22 @@ button, .button text-align : center border : none overflow : hidden - transition all ANIMATION_DURATION ANIMATION_EASE + transition-property opacity, box-shadow + transition-duration ANIMATION_DURATION + transition-timing-function ANIMATION_EASE + + &.circle + width : SIZE = BUTTON_CIRCLE_HEIGHT + height : SIZE + font-size : FONT_SIZE_BIG + line-height : SIZE + border-radius : SIZE + box-shadow BUTTON_SHADOW + &:hover, &:active + box-shadow BUTTON_SHADOW, inset 0 0 0 UNIT alpha(WHITE, 15%) + + // -- Colors + &.primary + background-color : PRIMARY + &.secondary + background-color : PRIMARY diff --git a/source/styles/components/header.styl b/source/styles/components/header.styl index ccdf80bc..5049b30f 100644 --- a/source/styles/components/header.styl +++ b/source/styles/components/header.styl @@ -1,33 +1,45 @@ header position : fixed - // padding : UNIT 0 height : HEADER_HEIGHT width : 100vw - background-color : THEME color : WHITE - transition all ANIMATION_DURATION ANIMATION_EASE - > * - padding : 0 UNIT + background-color : THEME + transition-property height, transform, box-shadow + transition-duration ANIMATION_DURATION + transition-timing-function ANIMATION_EASE + > img + width : SIZE = (UNIT / 1.5) + height : SIZE + margin : 0 ((OFFSET - SIZE) / 2) + border-radius : SIZE + background-color : alpha(WHITE, 25%) + box-shadow 0 0 0 (SIZE / 10) alpha(WHITE, 15%) h1 - font-weight : FONT_WEIGHT_NORMAL padding : (UNIT / 2) 0 + transition all ANIMATION_DURATION ANIMATION_EASE nav &[data-role="text"] &:first-child + display : block font-size : FONT_SIZE_TINY + transition all ANIMATION_DURATION ANIMATION_EASE &[data-role="circle"] position : absolute - right : 0 + right : OFFSET bottom : -(BUTTON_CIRCLE_HEIGHT / 2) > * margin-left : SPACE // -- Effects - &.scrolling - // padding : SPACE 0 - transform translateY(-(1.5 * SPACE)) + .scrolling & + height : (HEADER_HEIGHT / 2) + box-shadow : HEADER_SHADOW + transform translateY(-(SPACE)) + h1 + padding : 0 nav &[data-role="text"] &:first-child + transform translateY(-10vh) opacity : 0 diff --git a/source/styles/components/list.styl b/source/styles/components/list.styl new file mode 100644 index 00000000..9e14bd78 --- /dev/null +++ b/source/styles/components/list.styl @@ -0,0 +1,2 @@ +ul + list-style: none diff --git a/source/styles/components/list_item.styl b/source/styles/components/list_item.styl index 5148b337..57eadefe 100644 --- a/source/styles/components/list_item.styl +++ b/source/styles/components/list_item.styl @@ -1,5 +1,6 @@ li padding : (SPACE / 2) 0 + height : 80px img width : SIZE = (2.5 * SPACE) height : SIZE diff --git a/source/styles/components/navigation.styl b/source/styles/components/navigation.styl index a30d6013..ddc8dae7 100644 --- a/source/styles/components/navigation.styl +++ b/source/styles/components/navigation.styl @@ -1,21 +1,14 @@ nav &[data-role="text"] font-size : FONT_SIZE_NORMAL - > *:not(:last-child) - margin-right : SPACE + > * transition opacity ANIMATION_DURATION ANIMATION_EASE &:not(.active) font-weight : FONT_WEIGHT_THIN - opacity : 0.75 + opacity : 0.5 &:hover, &:active, &.active opacity : 1 - - &[data-role="circle"] - > * - width : SIZE = BUTTON_CIRCLE_HEIGHT - height : SIZE - font-size : FONT_SIZE_BIG - line-height : SIZE - border-radius : SIZE - background-color : PRIMARY - box-shadow : 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24) + &.active + font-weight : FONT_WEIGHT_NORMAL + &:not(:last-child) + margin-right : SPACE diff --git a/source/styles/normalize.styl b/source/styles/normalize.styl index 325d5396..983071dd 100644 --- a/source/styles/normalize.styl +++ b/source/styles/normalize.styl @@ -62,14 +62,14 @@ sub bottom -0.25em img - border 0 + border: 0 svg &:not(:root) overflow hidden figure - margin 1em 40px + border: 0 hr -moz-box-sizing content-box diff --git a/source/styles/screens/__init.styl b/source/styles/screens/__init.styl index 5afd80cd..2d59d9a3 100644 --- a/source/styles/screens/__init.styl +++ b/source/styles/screens/__init.styl @@ -7,4 +7,4 @@ transition transform ANIMATION_DURATION ANIMATION_EASE > section height : 100vh - padding : (HEADER_HEIGHT + UNIT) UNIT UNIT UNIT + padding : (HEADER_HEIGHT + UNIT) OFFSET OFFSET OFFSET