Merge and solve conflicts
commit
d008bf47f3
|
@ -7,7 +7,7 @@ module.exports = React.createClass
|
||||||
active : React.PropTypes.bool
|
active : React.PropTypes.bool
|
||||||
className : React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
hideable : React.PropTypes.bool
|
hideable : React.PropTypes.bool
|
||||||
type : React.PropTypes.string.required
|
type : React.PropTypes.string
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className : ""
|
className : ""
|
||||||
|
|
|
@ -7,7 +7,7 @@ module.exports = React.createClass
|
||||||
propTypes:
|
propTypes:
|
||||||
className : React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
colors : React.PropTypes.object
|
colors : React.PropTypes.object
|
||||||
dataSource : React.PropTypes.object
|
dataSource : React.PropTypes.any
|
||||||
disabled : React.PropTypes.bool
|
disabled : React.PropTypes.bool
|
||||||
error : React.PropTypes.string
|
error : React.PropTypes.string
|
||||||
exact : React.PropTypes.bool
|
exact : React.PropTypes.bool
|
||||||
|
@ -16,7 +16,7 @@ module.exports = React.createClass
|
||||||
onChange : React.PropTypes.func
|
onChange : React.PropTypes.func
|
||||||
required : React.PropTypes.bool
|
required : React.PropTypes.bool
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
value : React.PropTypes.string
|
value : React.PropTypes.any
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className : ""
|
className : ""
|
||||||
|
@ -52,8 +52,17 @@ module.exports = React.createClass
|
||||||
@setState focus: false if Object.keys(suggestions).length is 0
|
@setState focus: false if Object.keys(suggestions).length is 0
|
||||||
|
|
||||||
onKeyPress: (event) ->
|
onKeyPress: (event) ->
|
||||||
|
key_ascii = event.which
|
||||||
query = @refs.input.getValue().trim()
|
query = @refs.input.getValue().trim()
|
||||||
if event.which is 13 and query isnt ""
|
|
||||||
|
if @state.focus
|
||||||
|
children = @refs.suggestions.getDOMNode().children
|
||||||
|
for child, index in children when child.classList.contains "active"
|
||||||
|
child.classList.remove "active"
|
||||||
|
query = child.getAttribute "id"
|
||||||
|
break
|
||||||
|
|
||||||
|
if key_ascii is 13 and query isnt ""
|
||||||
for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
|
for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
|
||||||
suggestion = {"#{key}": label}
|
suggestion = {"#{key}": label}
|
||||||
break
|
break
|
||||||
|
@ -62,6 +71,13 @@ module.exports = React.createClass
|
||||||
else if suggestion
|
else if suggestion
|
||||||
@_addValue suggestion
|
@_addValue suggestion
|
||||||
|
|
||||||
|
else if @state.focus and key_ascii in [40, 38]
|
||||||
|
if key_ascii is 40
|
||||||
|
index = if index >= children.length - 1 then 0 else index + 1
|
||||||
|
else
|
||||||
|
index = if index is 0 then children.length - 1 else index - 1
|
||||||
|
children[index].classList.add "active"
|
||||||
|
|
||||||
onBlur: (event) ->
|
onBlur: (event) ->
|
||||||
setTimeout (=> @setState focus: false, suggestions: {}), 300
|
setTimeout (=> @setState focus: false, suggestions: {}), 300
|
||||||
|
|
||||||
|
@ -69,6 +85,12 @@ module.exports = React.createClass
|
||||||
key = event.target.getAttribute "id"
|
key = event.target.getAttribute "id"
|
||||||
@_addValue {"#{key}": @state.suggestions[key]}
|
@_addValue {"#{key}": @state.suggestions[key]}
|
||||||
|
|
||||||
|
onRefreshSelection: (event) ->
|
||||||
|
children = @refs.suggestions.getDOMNode().children
|
||||||
|
for child, index in children when child.classList.contains "active"
|
||||||
|
child.classList.remove "active"
|
||||||
|
break
|
||||||
|
|
||||||
onDelete: (event) ->
|
onDelete: (event) ->
|
||||||
delete @state.values[event.target.getAttribute "id"]
|
delete @state.values[event.target.getAttribute "id"]
|
||||||
@setState focus: false, values: @state.values
|
@setState focus: false, values: @state.values
|
||||||
|
@ -76,21 +98,27 @@ module.exports = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<div data-component-autocomplete={@props.type}
|
className = "focus" if @state.focus
|
||||||
className={"focus" if @state.focus}>
|
<div data-component-autocomplete={@props.type} className={className}>
|
||||||
|
{ <label>{@props.label}</label> if @props.label }
|
||||||
{
|
{
|
||||||
if @props.multiple
|
if @props.multiple
|
||||||
<ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
|
<ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
|
||||||
{
|
{
|
||||||
for key, label of @state.values
|
for key, label of @state.values
|
||||||
<li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
|
<li key={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
}
|
}
|
||||||
<Input {...@props} value="" ref="input" onFocus={@onFocus}
|
<Input {...@props} ref="input" value="" label=""
|
||||||
onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
|
onBlur={@onBlur}
|
||||||
<ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
|
onChange={@onChange}
|
||||||
{<li id={key}>{label}</li> for key, label of @state.suggestions}
|
onFocus={@onFocus}
|
||||||
|
onKeyDown={@onKeyPress}
|
||||||
|
/>
|
||||||
|
<ul ref="suggestions" data-role="suggestions"
|
||||||
|
onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
|
||||||
|
{<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -2,9 +2,10 @@
|
||||||
|
|
||||||
[data-component-autocomplete]
|
[data-component-autocomplete]
|
||||||
position : relative
|
position : relative
|
||||||
// -- Children
|
> label
|
||||||
|
font-size : FONT_SIZE_TINY
|
||||||
|
color : PRIMARY
|
||||||
> [data-role] > *
|
> [data-role] > *
|
||||||
font-size : FONT_SIZE_SMALL
|
|
||||||
cursor : pointer
|
cursor : pointer
|
||||||
> [data-role="values"]
|
> [data-role="values"]
|
||||||
> *
|
> *
|
||||||
|
@ -13,28 +14,33 @@
|
||||||
padding : (SPACE / 4) (SPACE / 2)
|
padding : (SPACE / 4) (SPACE / 2)
|
||||||
font-size : FONT_SIZE_SMALL
|
font-size : FONT_SIZE_SMALL
|
||||||
color : WHITE
|
color : WHITE
|
||||||
background-color : THEME
|
background-color : PRIMARY
|
||||||
border-radius : (SPACE / 8)
|
border-radius : (SPACE / 8)
|
||||||
> [data-role="suggestions"]
|
> [data-role="suggestions"]
|
||||||
z-index : 10
|
z-index : 2
|
||||||
position : absolute
|
position : absolute
|
||||||
width : 100%
|
width : 100%
|
||||||
|
height : 0
|
||||||
|
max-height : 50vh
|
||||||
overflow-x : hidden
|
overflow-x : hidden
|
||||||
overflow-y : scroll
|
overflow-y : scroll
|
||||||
max-height : 0
|
|
||||||
margin-top : -(SPACE)
|
margin-top : -(SPACE)
|
||||||
background-color : WHITE
|
background-color : WHITE
|
||||||
visibility : hidden
|
opacity : 0
|
||||||
box-shadow : ZDEPTH_SHADOW_1
|
transform translateY(-(INPUT_HEIGHT / 2))
|
||||||
transition max-height ANIMATION_DURATION ANIMATION_EASE
|
transition-property height, box-shadow, opacity, transform
|
||||||
|
transition-duration ANIMATION_DURATION
|
||||||
|
transition-timing-function ANIMATION_EASE
|
||||||
> *
|
> *
|
||||||
padding : (SPACE / 2)
|
padding : (SPACE / 2)
|
||||||
&:hover
|
&:hover, &.active
|
||||||
color : WHITE
|
color : WHITE
|
||||||
background-color : THEME
|
background-color : PRIMARY_LIGHT
|
||||||
|
|
||||||
// -- Styles
|
// -- Styles
|
||||||
&.focus
|
&.focus
|
||||||
> [data-role="suggestions"]
|
> [data-role="suggestions"]
|
||||||
max-height : 25vh
|
height : auto
|
||||||
visibility : visible
|
opacity : 1
|
||||||
|
transform translateY(0%)
|
||||||
|
box-shadow ZDEPTH_SHADOW_1
|
||||||
|
|
|
@ -5,12 +5,12 @@ var Button = require('react-toolbox/components/button');
|
||||||
|
|
||||||
<Button caption="Login" />
|
<Button caption="Login" />
|
||||||
<Button caption="Primary" className="primary" icon="access_alarm" />
|
<Button caption="Primary" className="primary" icon="access_alarm" />
|
||||||
<Button caption="Secondary" className="secondary" />
|
<Button caption="Secondary" className="accent" />
|
||||||
<Button caption="Disabled" disabled />
|
<Button caption="Disabled" disabled />
|
||||||
|
|
||||||
<Button type="circle" icon="access_alarm" />
|
<Button type="circle" icon="access_alarm" />
|
||||||
<Button type="circle" icon="explore" className="primary" />
|
<Button type="circle" icon="explore" className="primary" />
|
||||||
<Button type="circle" icon="zoom_in" className="secondary" />
|
<Button type="circle" icon="zoom_in" className="accent" />
|
||||||
<Button type="circle" icon="input" disabled={true} />
|
<Button type="circle" icon="input" disabled={true} />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -21,41 +21,40 @@
|
||||||
outline : 0
|
outline : 0
|
||||||
&:not(.transparent)
|
&:not(.transparent)
|
||||||
box-shadow ZDEPTH_SHADOW_1
|
box-shadow ZDEPTH_SHADOW_1
|
||||||
&:not(.primary):not(.secondary)
|
&:not(.primary):not(.accent)
|
||||||
color : COLOR
|
color : TEXT
|
||||||
background-color : WHITE
|
background-color : WHITE
|
||||||
&:hover
|
&:hover
|
||||||
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
|
||||||
&.primary, &.secondary
|
&.primary, &.accent
|
||||||
color : WHITE
|
color : WHITE
|
||||||
&.primary
|
&.primary
|
||||||
background-color : PRIMARY
|
background-color : PRIMARY
|
||||||
&.secondary
|
&.accent
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
|
|
||||||
&.transparent
|
&.transparent
|
||||||
background-color : transparent
|
background-color : transparent
|
||||||
&:not(.primary):not(.secondary)
|
&:not(.primary):not(.accent)
|
||||||
&:hover
|
&:hover
|
||||||
background-color : alpha(COLOR, 12.5%)
|
background-color : alpha(TEXT, 12.5%)
|
||||||
&.primary
|
&.primary
|
||||||
color : PRIMARY
|
color : PRIMARY
|
||||||
&:hover
|
&:hover
|
||||||
background-color : alpha(PRIMARY, 12.5%)
|
background-color : alpha(PRIMARY, 12.5%)
|
||||||
&.secondary
|
&.accent
|
||||||
color : SECONDARY
|
color : ACCENT
|
||||||
&:hover
|
&:hover
|
||||||
background-color : alpha(SECONDARY, 12.5%)
|
background-color : alpha(ACCENT, 12.5%)
|
||||||
|
&:not(.primary):not(.accent) > [data-component-ripple]
|
||||||
|
background-color : DIVIDER
|
||||||
&[disabled]
|
&[disabled]
|
||||||
|
color : darken(DIVIDER, 25%)
|
||||||
&:not(.transparent)
|
&:not(.transparent)
|
||||||
color : darken(BACKGROUND, 35%)
|
background-color : DIVIDER
|
||||||
background-color : darken(BACKGROUND, 7.5%)
|
|
||||||
&.transparent
|
&.transparent
|
||||||
color : darken(BACKGROUND, 25%)
|
|
||||||
background-color : transparent
|
background-color : transparent
|
||||||
|
|
||||||
|
|
||||||
// -- Layout
|
// -- Layout
|
||||||
&:not(.transparent) ~ &:not(:last-child)
|
&:not(.transparent) ~ &:not(:last-child)
|
||||||
margin-left : SPACE
|
margin-left : SPACE
|
||||||
|
@ -72,6 +71,9 @@
|
||||||
> .icon
|
> .icon
|
||||||
font-size : FONT_SIZE_BIG
|
font-size : FONT_SIZE_BIG
|
||||||
margin-right : (SPACE / 2)
|
margin-right : (SPACE / 2)
|
||||||
|
> abbr
|
||||||
|
font-weight : FONT_WEIGHT_BOLD
|
||||||
|
|
||||||
&.anchor
|
&.anchor
|
||||||
width : 100%
|
width : 100%
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
# Card
|
||||||
|
|
||||||
|
```
|
||||||
|
var Card = require('react-toolbox/components/card');
|
||||||
|
|
||||||
|
<Card title="Default Card" />
|
||||||
|
<Card title="Default Card with text" text={text} />
|
||||||
|
<Card title="Default Card with legend" legend={legend} />
|
||||||
|
<Card title="Default Card with actions" actions={actions} />
|
||||||
|
<Card title="Defaulr Card with text & image" text={text} image="http://" />
|
||||||
|
<Card title="Default Card with text, color & onClick event" text={text}
|
||||||
|
color="#e91e63" onClick={@onClick} />
|
||||||
|
<Card type="small" title="Small Card with text & onClick event"
|
||||||
|
text={text} color="#00bcd4" onClick={@onClick} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description|
|
||||||
|
|:- |:-: | :- |:-|
|
||||||
|
| **className** | String | | Sets the class-styles of the Component.|
|
||||||
|
| **color** | String | | Sets HEX of the Component.|
|
||||||
|
| **image** | String | | Sets a background image url.|
|
||||||
|
| **text** | String | | Sets a complementary text.|
|
||||||
|
| **legend** | String | | Sets a legend text.|
|
||||||
|
| **onClick** | Function | | Callback function that is fired when the components's is clicked.|
|
||||||
|
| **title** | String | "text" | Sets the title of the component.|
|
||||||
|
| **type** | String | "text" | Type of the component, overwrite this property if you need set a different stylesheet.|
|
|
@ -0,0 +1,62 @@
|
||||||
|
require './style'
|
||||||
|
Navigation = require "../navigation"
|
||||||
|
Ripple = require "../ripple"
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
propTypes:
|
||||||
|
className : React.PropTypes.string
|
||||||
|
color : React.PropTypes.string
|
||||||
|
image : React.PropTypes.string
|
||||||
|
text : React.PropTypes.string
|
||||||
|
legend : React.PropTypes.string
|
||||||
|
onClick : React.PropTypes.func
|
||||||
|
title : React.PropTypes.string
|
||||||
|
type : React.PropTypes.string
|
||||||
|
|
||||||
|
getDefaultProps: ->
|
||||||
|
className : ""
|
||||||
|
type : "default"
|
||||||
|
|
||||||
|
getInitialState: ->
|
||||||
|
loading : @props.loading
|
||||||
|
ripple : undefined
|
||||||
|
|
||||||
|
# -- Lifecycle
|
||||||
|
componentWillReceiveProps: ->
|
||||||
|
@setState ripple: undefined
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
onClick: (event) ->
|
||||||
|
event.preventDefault() if @props.onClick?
|
||||||
|
client = event.target.getBoundingClientRect?()
|
||||||
|
@setState ripple:
|
||||||
|
left : event.pageX - client?.left
|
||||||
|
top : event.pageY - client?.top
|
||||||
|
width : (client?.width * 2.5)
|
||||||
|
@props.onClick? event, @
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
className = @props.className
|
||||||
|
className += " touch" if @props.onClick?
|
||||||
|
className += " image" if @props.image?
|
||||||
|
className += " color" if @props.color?
|
||||||
|
style = {}
|
||||||
|
style.backgroundImage = "url(#{@props.image})" if @props.image?
|
||||||
|
style.backgroundColor = @props.color if @props.color
|
||||||
|
|
||||||
|
<div data-component-card={@props.type} className={className} onClick={@onClick}>
|
||||||
|
{
|
||||||
|
if @props.title or @props.image
|
||||||
|
<figure style={style}>
|
||||||
|
{ <small>{@props.subtitle}</small> if @props.subtitle }
|
||||||
|
{ <h2>{@props.title}</h2> if @props.title }
|
||||||
|
</figure>
|
||||||
|
}
|
||||||
|
{ <p>{@props.text}</p> if @props.text }
|
||||||
|
{ <small>{@props.legend}</small> if @props.legend }
|
||||||
|
{ <Navigation actions={@props.actions} /> if @props.actions }
|
||||||
|
{ <Ripple origin={@state.ripple} loading={@state.loading} /> }
|
||||||
|
</div>
|
|
@ -0,0 +1,62 @@
|
||||||
|
@import "../constants.styl"
|
||||||
|
|
||||||
|
SIZE = (5 * UNIT)
|
||||||
|
OFFSET = (SPACE / 1.25)
|
||||||
|
[data-component-card]
|
||||||
|
display-flex()
|
||||||
|
flex-direction column
|
||||||
|
position : relative
|
||||||
|
overflow : hidden
|
||||||
|
width : SIZE
|
||||||
|
box-shadow : ZDEPTH_SHADOW_1
|
||||||
|
background : WHITE
|
||||||
|
|
||||||
|
// -- Children
|
||||||
|
*:not([data-component-button])
|
||||||
|
pointer-events : none
|
||||||
|
> *:not([data-component-ripple]):not([data-component-navigation])
|
||||||
|
padding : OFFSET
|
||||||
|
&:not(.color):not(.image) > [data-component-ripple]
|
||||||
|
background-color : DIVIDER
|
||||||
|
&:not(.color) > *:not(figure), > *:not(:last-child)
|
||||||
|
box-shadow : 0 1px darken(BACKGROUND, 5%)
|
||||||
|
> figure
|
||||||
|
display-flex()
|
||||||
|
flex-direction column
|
||||||
|
justify-content flex-end
|
||||||
|
flex-grow 2
|
||||||
|
min-height : (SIZE / 2)
|
||||||
|
background-size : cover
|
||||||
|
> *
|
||||||
|
font-weight : FONT_WEIGHT_NORMAL
|
||||||
|
|
||||||
|
> [data-component-navigation]
|
||||||
|
padding : OFFSET = (OFFSET / 2)
|
||||||
|
> *
|
||||||
|
pointer-events : all
|
||||||
|
padding-left : OFFSET
|
||||||
|
padding-right : OFFSET
|
||||||
|
box-shadow : none !important
|
||||||
|
&:hover
|
||||||
|
background-color : rgba(0,0,0,0.1) !important
|
||||||
|
|
||||||
|
// -- ClassNames
|
||||||
|
&.touch
|
||||||
|
cursor : pointer
|
||||||
|
&:hover, &:active
|
||||||
|
box-shadow : ZDEPTH_SHADOW_2
|
||||||
|
&.image
|
||||||
|
> figure
|
||||||
|
text-shadow : ZDEPTH_SHADOW_1
|
||||||
|
&.image, &.color
|
||||||
|
> figure
|
||||||
|
color : WHITE
|
||||||
|
|
||||||
|
// -- Extends
|
||||||
|
[data-component-card="small"]
|
||||||
|
> figure
|
||||||
|
min-height : 0px
|
||||||
|
[data-component-card="square"]
|
||||||
|
height : SIZE
|
||||||
|
[data-component-card="wide"]
|
||||||
|
width : (SIZE * 2)
|
|
@ -1,17 +1,20 @@
|
||||||
@import './vendor.styl'
|
@import './vendor.styl'
|
||||||
|
|
||||||
// -- Colors
|
// -- Colors
|
||||||
COLOR = #222222
|
PRIMARY = #E91E63
|
||||||
BACKGROUND = #f5f5f5
|
PRIMARY_DARK = darken(PRIMARY, 25%)
|
||||||
THEME = #cccccc
|
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
|
||||||
|
ACCENT = #03A9F4
|
||||||
|
|
||||||
|
TEXT = #212121
|
||||||
|
TEXT_ACCENT = #727272
|
||||||
|
|
||||||
|
DIVIDER = lighten(#B6B6B6, 75%)
|
||||||
|
BACKGROUND = #ffffff
|
||||||
WHITE = #ffffff
|
WHITE = #ffffff
|
||||||
PRIMARY = #e91e63
|
SUCCESS = #4CAF50
|
||||||
SECONDARY = #00bcd4
|
CANCEL = #F44336
|
||||||
SUCCESS = #259b24
|
WARNING = #FFC107
|
||||||
CANCEL = #e51c23
|
|
||||||
WARNING = #ff9800
|
|
||||||
FORM_COLOR = COLOR
|
|
||||||
FORM_BORDER_COLOR = lighten(FORM_COLOR, 75%)
|
|
||||||
|
|
||||||
// -- Fonts
|
// -- Fonts
|
||||||
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
||||||
|
|
|
@ -13,9 +13,9 @@ module.exports = React.createClass
|
||||||
propTypes:
|
propTypes:
|
||||||
className : React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
dataSource : React.PropTypes.array
|
dataSource : React.PropTypes.array
|
||||||
disabled : React.PropTypes.disabled
|
disabled : React.PropTypes.bool
|
||||||
label : React.PropTypes.string
|
label : React.PropTypes.string
|
||||||
onChange : React.PropTypes.func
|
onChange : React.PropTypes.funca
|
||||||
template : React.PropTypes.func
|
template : React.PropTypes.func
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
value : React.PropTypes.string
|
value : React.PropTypes.string
|
||||||
|
@ -23,7 +23,6 @@ module.exports = React.createClass
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className : ""
|
className : ""
|
||||||
dataSource : []
|
dataSource : []
|
||||||
disabled : false
|
|
||||||
type : "normal"
|
type : "normal"
|
||||||
|
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
|
@ -69,8 +68,8 @@ module.exports = React.createClass
|
||||||
{ <label>{@props.label}</label> if @props.label }
|
{ <label>{@props.label}</label> if @props.label }
|
||||||
<ul ref="values" style={stylesheet} onClick={@onItem}>
|
<ul ref="values" style={stylesheet} onClick={@onItem}>
|
||||||
{
|
{
|
||||||
for item in @props.dataSource
|
for item, index in @props.dataSource
|
||||||
<li id={item.value} className={"selected" if item.value is @state.selected.value}>
|
<li id={item.value} key={index} className={"selected" if item.value is @state.selected.value}>
|
||||||
{ if @props.template then @props.template item else item.label }
|
{ if @props.template then @props.template item else item.label }
|
||||||
{ <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
|
{ <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
position : relative
|
position : relative
|
||||||
margin-bottom : SPACE
|
margin-bottom : SPACE
|
||||||
width : inherit
|
width : inherit
|
||||||
color : FORM_COLOR
|
color : TEXT
|
||||||
border-bottom : 1px solid FORM_BORDER_COLOR
|
border-bottom : 1px solid DIVIDER
|
||||||
|
|
||||||
// -- Class
|
// -- Class
|
||||||
&.active
|
&.active
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
transition-delay ANIMATION_DURATION
|
transition-delay ANIMATION_DURATION
|
||||||
|
|
||||||
&.disabled
|
&.disabled
|
||||||
color : FORM_BORDER_COLOR
|
color : TEXT_SECONDARY
|
||||||
border-bottom-style : dotted
|
border-bottom-style : dotted
|
||||||
> div:after
|
> div:after
|
||||||
transform scale(0)
|
transform scale(0)
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
position : relative
|
position : relative
|
||||||
bottom : -(SPACE / 4)
|
bottom : -(SPACE / 4)
|
||||||
font-size : FONT_SIZE_TINY
|
font-size : FONT_SIZE_TINY
|
||||||
color : FORM_BORDER_COLOR
|
color : TEXT_SECONDARY
|
||||||
> ul
|
> ul
|
||||||
z-index : 2
|
z-index : 2
|
||||||
position : absolute
|
position : absolute
|
||||||
|
@ -76,7 +76,7 @@
|
||||||
> *
|
> *
|
||||||
pointer-events : none
|
pointer-events : none
|
||||||
> [data-component-ripple]
|
> [data-component-ripple]
|
||||||
background-color : lighten(FORM_BORDER_COLOR, 50%)
|
background-color : DIVIDER
|
||||||
> div
|
> div
|
||||||
display : block
|
display : block
|
||||||
> span
|
> span
|
||||||
|
@ -95,6 +95,5 @@
|
||||||
height : 0
|
height : 0
|
||||||
border-left : BORDER = SIZE solid transparent
|
border-left : BORDER = SIZE solid transparent
|
||||||
border-right : BORDER
|
border-right : BORDER
|
||||||
border-top : SIZE solid FORM_BORDER_COLOR
|
border-top : SIZE solid DIVIDER
|
||||||
transition transform ANIMATION_DURATION ANIMATION_EASE
|
transition transform ANIMATION_DURATION ANIMATION_EASE
|
||||||
|
|
||||||
|
|
|
@ -59,15 +59,15 @@ module.exports = React.createClass
|
||||||
{
|
{
|
||||||
for attribute, index in @state.attributes
|
for attribute, index in @state.attributes
|
||||||
if attribute.type is "submit"
|
if attribute.type is "submit"
|
||||||
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
<Button key={index} {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
||||||
else if attribute.type is "autocomplete"
|
else if attribute.type is "autocomplete"
|
||||||
<Autocomplete {...attribute} onChange={@onChange}/>
|
<Autocomplete key={index} {...attribute} onChange={@onChange}/>
|
||||||
else if attribute.type is "dropdown"
|
else if attribute.type is "dropdown"
|
||||||
<Dropdown {...attribute} onChange={@onChange}/>
|
<Dropdown key={index} {...attribute} onChange={@onChange}/>
|
||||||
else if attribute.type is "switch"
|
else if attribute.type is "switch"
|
||||||
<Switch {...attribute} onChange={@onChange}/>
|
<Switch key={index} {...attribute} onChange={@onChange}/>
|
||||||
else
|
else
|
||||||
<Input {...attribute} />
|
<Input key={index} {...attribute} />
|
||||||
}
|
}
|
||||||
{ @props.children }
|
{ @props.children }
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -16,7 +16,7 @@ module.exports = React.createClass
|
||||||
onBlur : React.PropTypes.func
|
onBlur : React.PropTypes.func
|
||||||
required : React.PropTypes.bool
|
required : React.PropTypes.bool
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
value : React.PropTypes.string
|
value : React.PropTypes.any
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className : ''
|
className : ''
|
||||||
|
@ -30,8 +30,14 @@ module.exports = React.createClass
|
||||||
error : @props.error
|
error : @props.error
|
||||||
touch : @props.type in ['checkbox', 'radio']
|
touch : @props.type in ['checkbox', 'radio']
|
||||||
value : @props.value
|
value : @props.value
|
||||||
|
focus : false
|
||||||
|
valid : false
|
||||||
|
|
||||||
# -- Events
|
# -- Events
|
||||||
|
onBlur: (event) ->
|
||||||
|
@setState focus: false
|
||||||
|
@props.onBlur? event, @
|
||||||
|
|
||||||
onChange: (event) ->
|
onChange: (event) ->
|
||||||
if @state.touch
|
if @state.touch
|
||||||
@setState checked: event.target.checked, error: undefined
|
@setState checked: event.target.checked, error: undefined
|
||||||
|
@ -39,29 +45,41 @@ module.exports = React.createClass
|
||||||
@setState value: event.target.value, error: undefined
|
@setState value: event.target.value, error: undefined
|
||||||
@props.onChange? event, @
|
@props.onChange? event, @
|
||||||
|
|
||||||
|
onFocus: (event) ->
|
||||||
|
@setState focus: true
|
||||||
|
@props.onFocus? event, @
|
||||||
|
|
||||||
|
onKeyPress: (event) ->
|
||||||
|
@setState focus: true
|
||||||
|
@props.onKeyPress? event, @
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
className = @props.className
|
className = @props.className
|
||||||
className += ' disabled' if @props.disabled
|
className += ' checked' if @state.checked
|
||||||
className += ' error' if @state.error
|
className += ' disabled' if @props.disabled
|
||||||
className += ' touch' if @state.touch
|
className += ' error' if @state.error
|
||||||
className += ' radio' if @props.type is 'radio'
|
className += ' focus' if @state.focus
|
||||||
className += ' checked' if @state.checked
|
className += ' hidden' if @props.type is 'hidden'
|
||||||
|
className += ' touch' if @state.touch
|
||||||
|
className += ' radio' if @props.type is 'radio'
|
||||||
|
className += ' valid' if @state.value? and @state.value.length > 0
|
||||||
|
|
||||||
<div data-component-input={@props.type} className={className}>
|
<div data-component-input={@props.type} className={className}>
|
||||||
{
|
{
|
||||||
if @props.multiline
|
if @props.multiline
|
||||||
<textarea ref='input' {...@props} value={@state.value}
|
<textarea ref='input' {...@props} value={@state.value}
|
||||||
|
onBlur={@onBlur}
|
||||||
onChange={@onChange}
|
onChange={@onChange}
|
||||||
onKeyPress={@props.onKeyPress}
|
onFocus={@onFocus}
|
||||||
onFocus={@props.onFocus}
|
onKeyPress={@onKeyPress} />
|
||||||
onBlur={@props.onBlur}>{@state.value}</textarea>
|
|
||||||
else
|
else
|
||||||
<input ref='input' {...@props} value={@state.value} checked={@state.checked}
|
<input ref='input' {...@props} value={@state.value}
|
||||||
|
checked={@state.checked}
|
||||||
|
onBlur={@onBlur}
|
||||||
onChange={@onChange}
|
onChange={@onChange}
|
||||||
onKeyPress={@props.onKeyPress}
|
onFocus={@onFocus}
|
||||||
onFocus={@props.onFocus}
|
onKeyPress={@onKeyPress} />
|
||||||
onBlur={@props.onBlur}/>
|
|
||||||
}
|
}
|
||||||
<span className='bar'></span>
|
<span className='bar'></span>
|
||||||
{ <label>{@props.label}</label> if @props.label }
|
{ <label>{@props.label}</label> if @props.label }
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
height : SPACE
|
height : SPACE
|
||||||
margin-right : (SPACE / 1.32)
|
margin-right : (SPACE / 1.32)
|
||||||
border-radius : RADIUS
|
border-radius : RADIUS
|
||||||
box-shadow : inset 0 0 0 RADIUS FORM_COLOR
|
box-shadow : inset 0 0 0 RADIUS TEXT
|
||||||
transition-property background-color, box-shadow
|
transition-property background-color, box-shadow
|
||||||
transition-duration ANIMATION_DURATION
|
transition-duration ANIMATION_DURATION
|
||||||
transition-timing-function ANIMATION_EASE
|
transition-timing-function ANIMATION_EASE
|
||||||
|
@ -52,23 +52,23 @@
|
||||||
transition transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
|
transition transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
|
||||||
label
|
label
|
||||||
font-size : FONT_SIZE_SMALL
|
font-size : FONT_SIZE_SMALL
|
||||||
color : FORM_COLOR
|
color : TEXT
|
||||||
// -- Style
|
// -- Style
|
||||||
&:not(.radio) .bar:after
|
&:not(.radio) .bar:after
|
||||||
content : "✓"
|
content : "✓"
|
||||||
&.radio .bar
|
&.radio .bar
|
||||||
border-radius : 50%
|
border-radius : 50%
|
||||||
&.disabled .bar
|
&.disabled .bar
|
||||||
box-shadow inset 0 0 0 RADIUS FORM_BORDER_COLOR
|
box-shadow inset 0 0 0 RADIUS DIVIDER
|
||||||
&.checked
|
&.checked
|
||||||
&.radio .bar
|
&.radio .bar
|
||||||
box-shadow : inset 0 0 0 RADIUS SECONDARY, inset 0 0 0 (RADIUS * 2.5) WHITE
|
box-shadow : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
|
||||||
&:not(.radio) .bar
|
&:not(.radio) .bar
|
||||||
box-shadow : none
|
box-shadow : none
|
||||||
.bar
|
.bar
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
&:before
|
&:before
|
||||||
background-color : alpha(SECONDARY, .5)
|
background-color : alpha(ACCENT, .5)
|
||||||
animation-name ripple-touch
|
animation-name ripple-touch
|
||||||
animation-iteration-count 1
|
animation-iteration-count 1
|
||||||
animation-timing-function ANIMATION_EASE
|
animation-timing-function ANIMATION_EASE
|
||||||
|
@ -77,42 +77,59 @@
|
||||||
transform scale(1)
|
transform scale(1)
|
||||||
|
|
||||||
&:not(.touch)
|
&:not(.touch)
|
||||||
|
// -- Stylesheets
|
||||||
|
&.focus
|
||||||
|
input, textarea
|
||||||
|
outline : none
|
||||||
|
~ .bar:before, ~ .bar:after
|
||||||
|
width : 50%
|
||||||
|
&:invalid
|
||||||
|
& ~ label
|
||||||
|
color : CANCEL
|
||||||
|
& ~ .bar:before, & ~ .bar:after
|
||||||
|
background-color : CANCEL
|
||||||
|
&.focus , &.valid
|
||||||
|
input, textarea
|
||||||
|
& ~ label
|
||||||
|
top : -(SPACE / 2)
|
||||||
|
font-size : FONT_SIZE_TINY
|
||||||
|
color : PRIMARY
|
||||||
|
input[type="date"]
|
||||||
|
& ~ label
|
||||||
|
top : -(SPACE / 2)
|
||||||
|
font-size : FONT_SIZE_TINY
|
||||||
|
color : PRIMARY
|
||||||
|
&:not(.focus)
|
||||||
|
input, textarea
|
||||||
|
&:invalid:not(:required)
|
||||||
|
border-bottom-color : CANCEL
|
||||||
|
&.error
|
||||||
|
input, textarea
|
||||||
|
border-bottom-color : CANCEL
|
||||||
|
|
||||||
|
// -- Children
|
||||||
input, textarea
|
input, textarea
|
||||||
display : block
|
display : block
|
||||||
padding : (SPACE / 2) 0
|
padding : (SPACE / 2) 0
|
||||||
width : 100%
|
width : 100%
|
||||||
color : FORM_COLOR
|
color : TEXT
|
||||||
background-color : transparent
|
background-color : transparent
|
||||||
border : none
|
border : none
|
||||||
border-bottom : 1px solid FORM_BORDER_COLOR
|
border-bottom : 1px solid DIVIDER
|
||||||
// -- Attributes
|
// -- Attributes
|
||||||
&:focus
|
|
||||||
outline : none
|
|
||||||
~ .bar:before, ~ .bar:after
|
|
||||||
width : 50%
|
|
||||||
&:focus ~ label, &:valid ~ label
|
|
||||||
top : -(SPACE / 2)
|
|
||||||
font-size : FONT_SIZE_TINY
|
|
||||||
// color : THEME
|
|
||||||
&:disabled
|
&:disabled
|
||||||
color : FORM_BORDER_COLOR
|
color : TEXT_SECONDARY
|
||||||
border-bottom-style : dotted
|
border-bottom-style : dotted
|
||||||
&:invalid
|
|
||||||
&:not(:required):not(:focus)
|
|
||||||
border-bottom-color : CANCEL
|
|
||||||
&:focus ~ label
|
|
||||||
color : CANCEL
|
|
||||||
~ .bar:before, ~ .bar:after
|
|
||||||
background-color : CANCEL
|
|
||||||
|
|
||||||
label
|
label
|
||||||
position : absolute
|
position : absolute
|
||||||
left : 0
|
left : 0
|
||||||
top : (SPACE / 2)
|
top : (SPACE / 2)
|
||||||
color : FORM_BORDER_COLOR
|
color : TEXT_SECONDARY
|
||||||
transition-property top, font-size, color
|
transition-property top, font-size, color
|
||||||
transition-duration ANIMATION_DURATION
|
transition-duration ANIMATION_DURATION
|
||||||
transition-timing-function ANIMATION_EASE
|
transition-timing-function ANIMATION_EASE
|
||||||
|
|
||||||
.bar
|
.bar
|
||||||
position : relative
|
position : relative
|
||||||
display : block
|
display : block
|
||||||
|
@ -123,7 +140,7 @@
|
||||||
height : 2px
|
height : 2px
|
||||||
width : 0
|
width : 0
|
||||||
bottom : 0
|
bottom : 0
|
||||||
background-color : THEME
|
background-color : PRIMARY
|
||||||
transition-property width, background-color
|
transition-property width, background-color
|
||||||
transition-duration ANIMATION_DURATION
|
transition-duration ANIMATION_DURATION
|
||||||
transition-timing-function ANIMATION_EASE
|
transition-timing-function ANIMATION_EASE
|
||||||
|
@ -132,11 +149,8 @@
|
||||||
&:after
|
&:after
|
||||||
right : 50%
|
right : 50%
|
||||||
|
|
||||||
&.error
|
&.hidden
|
||||||
input, textarea
|
display : none
|
||||||
border-bottom-color : CANCEL
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// -- Children
|
// -- Children
|
||||||
label
|
label
|
||||||
|
|
|
@ -5,7 +5,7 @@ module.exports = React.createClass
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
className : React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
dataSource : React.PropTypes.Array
|
dataSource : React.PropTypes.array
|
||||||
ItemFactory : React.PropTypes.func
|
ItemFactory : React.PropTypes.func
|
||||||
onClick : React.PropTypes.func
|
onClick : React.PropTypes.func
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
[data-component-list]
|
[data-component-list]
|
||||||
list-style : none
|
list-style : none
|
||||||
&, a
|
&, a
|
||||||
color : COLOR
|
color : TEXT
|
||||||
> li
|
> li
|
||||||
overflow : hidden
|
overflow : hidden
|
||||||
background-color : WHITE
|
background-color : WHITE
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
position : absolute
|
position : absolute
|
||||||
width : SIZE
|
width : SIZE
|
||||||
height : SIZE
|
height : SIZE
|
||||||
background-color : THEME
|
background-color : PRIMARY
|
||||||
transform scale(0.0)
|
transform scale(0.0)
|
||||||
&:nth-child(n+1)
|
&:nth-child(n+1)
|
||||||
margin-top : -(SIZE)
|
margin-top : -(SIZE)
|
||||||
|
|
|
@ -20,7 +20,7 @@ module.exports = React.createClass
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<nav data-component-navigation={@props.type}>
|
<nav data-component-navigation={@props.type}>
|
||||||
{ <Link {...route} /> for route in @props.routes }
|
{ <Link key={index} {...route} /> for route, index in @props.routes }
|
||||||
{ <Button {...action} /> for action in @props.actions }
|
{ <Button key={index} {...action} /> for action, index in @props.actions }
|
||||||
{ @props.children }
|
{ @props.children }
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -7,7 +7,7 @@ var routes = [
|
||||||
{route:'http://google.com', caption='Go to Google.com'},
|
{route:'http://google.com', caption='Go to Google.com'},
|
||||||
];
|
];
|
||||||
var actions = [
|
var actions = [
|
||||||
{caption:"Primary", style:"primary", icon="access_alarm"}
|
{caption: "Primary", style: "primary", icon: "access_alarm"}
|
||||||
];
|
];
|
||||||
|
|
||||||
<Navigation routes={routes} actions={actions} />
|
<Navigation routes={routes} actions={actions} />
|
||||||
|
|
|
@ -25,10 +25,10 @@ SCALE_RATIO = CIRCLE_RADIUS/20
|
||||||
transition-timing-function : ANIMATION_EASE
|
transition-timing-function : ANIMATION_EASE
|
||||||
|
|
||||||
:local(.valueBar)
|
:local(.valueBar)
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
|
|
||||||
:local(.bufferBar)
|
:local(.bufferBar)
|
||||||
background-color : alpha(SECONDARY, 15%)
|
background-color : alpha(ACCENT, 15%)
|
||||||
|
|
||||||
:local(.linearBar).indeterminate :local(.valueBar)
|
:local(.linearBar).indeterminate :local(.valueBar)
|
||||||
transform-origin : center center
|
transform-origin : center center
|
||||||
|
@ -52,7 +52,7 @@ SCALE_RATIO = CIRCLE_RADIUS/20
|
||||||
stroke-linecap : round
|
stroke-linecap : round
|
||||||
stroke-miterlimit : 20
|
stroke-miterlimit : 20
|
||||||
stroke-width : 4
|
stroke-width : 4
|
||||||
stroke : SECONDARY
|
stroke : ACCENT
|
||||||
fill : none
|
fill : none
|
||||||
transition : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
|
transition : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,7 @@ RANGE_SIDE_SEPARATION = 20px
|
||||||
z-index : 5
|
z-index : 5
|
||||||
|
|
||||||
:local(.knobInner)
|
:local(.knobInner)
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
border-radius : 50%
|
border-radius : 50%
|
||||||
height : 12px
|
height : 12px
|
||||||
transition-duration : 0.1s
|
transition-duration : 0.1s
|
||||||
|
@ -84,7 +84,7 @@ RANGE_SIDE_SEPARATION = 20px
|
||||||
|
|
||||||
// When its focused
|
// When its focused
|
||||||
:local(.root):focus :local(.knob):before
|
:local(.root):focus :local(.knob):before
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
border-radius : 50%
|
border-radius : 50%
|
||||||
bottom : 0
|
bottom : 0
|
||||||
content : ""
|
content : ""
|
||||||
|
@ -106,7 +106,7 @@ RANGE_SIDE_SEPARATION = 20px
|
||||||
content : ""
|
content : ""
|
||||||
position : absolute
|
position : absolute
|
||||||
top : 0
|
top : 0
|
||||||
background-color : SECONDARY
|
background-color : ACCENT
|
||||||
left : 0
|
left : 0
|
||||||
width : 26px
|
width : 26px
|
||||||
height : 26px
|
height : 26px
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
margin-bottom : SPACE
|
margin-bottom : SPACE
|
||||||
height : SIZE = (SPACE / 1.25)
|
height : SIZE = (SPACE / 1.25)
|
||||||
width : WIDTH = (2.5 * SIZE)
|
width : WIDTH = (2.5 * SIZE)
|
||||||
background-color : FORM_BORDER_COLOR
|
background-color : DIVIDER
|
||||||
border-radius : SPACE
|
border-radius : SPACE
|
||||||
transition background-color ANIMATION_DURATION ANIMATION_EASE
|
transition background-color ANIMATION_DURATION ANIMATION_EASE
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
display : block
|
display : block
|
||||||
margin-left : WIDTH + (SPACE / 2)
|
margin-left : WIDTH + (SPACE / 2)
|
||||||
font-size : FONT_SIZE_SMALL
|
font-size : FONT_SIZE_SMALL
|
||||||
color : FORM_COLOR
|
color : FORM_TEXT
|
||||||
> [data-component-ripple]
|
> [data-component-ripple]
|
||||||
z-index : -1
|
z-index : -1
|
||||||
overflow : hidden
|
overflow : hidden
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
max-height : (SIZE * 2.7)
|
max-height : (SIZE * 2.7)
|
||||||
top : (SIZE / 2)
|
top : (SIZE / 2)
|
||||||
left : (SIZE * 2)
|
left : (SIZE * 2)
|
||||||
background-color : alpha(COLOR, 10%)
|
background-color : alpha(TEXT, 10%)
|
||||||
opacity : 0
|
opacity : 0
|
||||||
animation-duration (1.0 * ANIMATION_DURATION)
|
animation-duration (1.0 * ANIMATION_DURATION)
|
||||||
|
|
||||||
|
@ -45,16 +45,16 @@
|
||||||
> span
|
> span
|
||||||
box-shadow : ZDEPTH_SHADOW_1
|
box-shadow : ZDEPTH_SHADOW_1
|
||||||
&.disabled
|
&.disabled
|
||||||
background-color : lighten(FORM_BORDER_COLOR, 50%)
|
background-color : lighten(DIVIDER, 50%)
|
||||||
> span
|
> span
|
||||||
background-color : FORM_BORDER_COLOR
|
background-color : DIVIDER
|
||||||
|
|
||||||
&.checked
|
&.checked
|
||||||
background-color : alpha(THEME, 25%)
|
background-color : alpha(PRIMARY, 25%)
|
||||||
> span
|
> span
|
||||||
background-color : THEME
|
background-color : PRIMARY
|
||||||
right : 0
|
right : 0
|
||||||
box-shadow : ZDEPTH_SHADOW_2
|
box-shadow : ZDEPTH_SHADOW_2
|
||||||
> [data-component-ripple]
|
> [data-component-ripple]
|
||||||
left : 0
|
left : 0
|
||||||
background-color : alpha(THEME, 15%)
|
background-color : alpha(PRIMARY, 15%)
|
||||||
|
|
|
@ -26,7 +26,7 @@ App = React.createClass
|
||||||
<h1>Hello React-Toolbox</h1>
|
<h1>Hello React-Toolbox</h1>
|
||||||
<Form attributes={@state.fields} />
|
<Form attributes={@state.fields} />
|
||||||
<Button caption="Hello world!" type="square" style="primary"/>
|
<Button caption="Hello world!" type="square" style="primary"/>
|
||||||
<Button icon="adb" type="circle" style="secondary" />
|
<Button icon="adb" type="circle" style="accent" />
|
||||||
</app>
|
</app>
|
||||||
|
|
||||||
React.render <App/>, document.body
|
React.render <App/>, document.body
|
||||||
|
|
|
@ -34,7 +34,8 @@
|
||||||
"postcss-loader" : "^0.4.3",
|
"postcss-loader" : "^0.4.3",
|
||||||
"style-loader" : "^0.12.3",
|
"style-loader" : "^0.12.3",
|
||||||
"stylus-loader" : "^1.2.0",
|
"stylus-loader" : "^1.2.0",
|
||||||
"webpack" : "^1.9.10"
|
"webpack" : "^1.9.10",
|
||||||
|
"webpack-dev-server" : "*"
|
||||||
},
|
},
|
||||||
"repository" : "github:soyjavi/react-toolbox"
|
"repository" : "github:soyjavi/react-toolbox"
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,7 @@ module.exports = React.createClass
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
|
|
||||||
<Autocomplete ref="autocomplete_multiple"
|
<Autocomplete ref="autocomplete_multiple"
|
||||||
|
label="Choose a country"
|
||||||
placeholder="elements is up to you..."
|
placeholder="elements is up to you..."
|
||||||
dataSource={@state.countries}
|
dataSource={@state.countries}
|
||||||
value={countries_selected}/>
|
value={countries_selected}/>
|
||||||
|
|
|
@ -18,12 +18,12 @@ module.exports = React.createClass
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
<Button caption="Login" disabled=false />
|
<Button caption="Login" disabled=false />
|
||||||
<Button caption="Primary" className="primary" icon="access_alarm" />
|
<Button caption="Primary" className="primary" icon="access_alarm" />
|
||||||
<Button caption="Secondary" className="secondary" />
|
<Button caption="Secondary" className="accent" />
|
||||||
<Button caption="Disabled" disabled={true} />
|
<Button caption="Disabled" disabled={true} />
|
||||||
|
|
||||||
<Button type="circle" icon="access_alarm" />
|
<Button type="circle" icon="access_alarm" />
|
||||||
<Button type="circle" icon="explore" className="primary" />
|
<Button type="circle" icon="explore" className="primary" />
|
||||||
<Button type="circle" icon="zoom_in" className="secondary" />
|
<Button type="circle" icon="zoom_in" className="accent" />
|
||||||
<Button type="circle" icon="input" disabled={true} />
|
<Button type="circle" icon="input" disabled={true} />
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
###
|
||||||
|
@todo
|
||||||
|
###
|
||||||
|
|
||||||
|
Card = require '../../components/card'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
onClick: (event, card) ->
|
||||||
|
console.log "onClick", arguments
|
||||||
|
|
||||||
|
onActionClick: ->
|
||||||
|
console.log "onClick", arguments
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
actions = [
|
||||||
|
caption: "Save", icon: "add", onClick: @onActionClick
|
||||||
|
,
|
||||||
|
caption: "Close", onClick: @onActionClick
|
||||||
|
]
|
||||||
|
text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
|
||||||
|
legend = "Lorem Ipsum is simply dummy text"
|
||||||
|
<section>
|
||||||
|
<h2>Cards</h2>
|
||||||
|
|
||||||
|
<h3>Basic properties</h3>
|
||||||
|
<Card title="Default Card" />
|
||||||
|
<Card title="Default Card with text" text={text} />
|
||||||
|
<Card title="Default Card with legend" legend={legend} />
|
||||||
|
<Card title="Default Card with actions" actions={actions} />
|
||||||
|
<Card title="Defaulr Card with text & image" text={text}
|
||||||
|
image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
|
||||||
|
<Card title="Default Card with text, color & onClick event" text={text}
|
||||||
|
color="#e91e63" onClick={@onClick} />
|
||||||
|
|
||||||
|
<h3>Sizes using type property</h3>
|
||||||
|
<Card type="small" title="Small Card with text & onClick event"
|
||||||
|
text={text} color="#00bcd4" onClick={@onClick} />
|
||||||
|
<Card type="square" title="Square Card with text & onClick event"
|
||||||
|
text={text} color="#00bcd4" onClick={@onClick} />
|
||||||
|
<Card type="wide" title="Wide card with text & onClick event"
|
||||||
|
text={text} color="#00bcd4" onClick={@onClick} />
|
||||||
|
|
||||||
|
</section>
|
|
@ -0,0 +1,24 @@
|
||||||
|
###
|
||||||
|
@todo
|
||||||
|
###
|
||||||
|
|
||||||
|
FontIcon = require '../../components/font_icon'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
onEvent: (type, event, form) ->
|
||||||
|
console.log "[form.#{type}]", form.getValue()
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
<section>
|
||||||
|
<h2>Font Icon</h2>
|
||||||
|
<p>lorem ipsum...</p>
|
||||||
|
|
||||||
|
<FontIcon value="add"/>
|
||||||
|
<FontIcon value="access_alarm"/>
|
||||||
|
<FontIcon value="explore"/>
|
||||||
|
<FontIcon value="zoom_in"/>
|
||||||
|
<FontIcon value="input"/>
|
||||||
|
</section>
|
|
@ -4,35 +4,30 @@
|
||||||
Aside = require './components/aside'
|
Aside = require './components/aside'
|
||||||
Autocomplete = require './components/autocomplete'
|
Autocomplete = require './components/autocomplete'
|
||||||
Button = require './components/button'
|
Button = require './components/button'
|
||||||
|
Card = require './components/card'
|
||||||
Dialog = require './components/dialog'
|
Dialog = require './components/dialog'
|
||||||
Dropdown = require './components/dropdown'
|
Dropdown = require './components/dropdown'
|
||||||
|
FontIcon = require './components/font_icon'
|
||||||
Form = require './components/form'
|
Form = require './components/form'
|
||||||
Progress = require './components/progress'
|
Progress = require './components/progress'
|
||||||
Slider = require './components/slider'
|
Slider = require './components/slider'
|
||||||
Switch = require './components/switch'
|
Switch = require './components/switch'
|
||||||
|
|
||||||
# React = require('react/addons')
|
|
||||||
# TestUtils = React.addons.TestUtils
|
|
||||||
# shallowRenderer = TestUtils.createRenderer()
|
|
||||||
|
|
||||||
# shallowRenderer.render(React.createElement(MyComponent, { className: 'MyComponent' }, 'some child text'))
|
|
||||||
#
|
|
||||||
# component = shallowRenderer.getRenderOutput();
|
|
||||||
|
|
||||||
|
|
||||||
Test = React.createClass
|
Test = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<app data-toolbox={true}>
|
<app data-toolbox={true}>
|
||||||
<h1>React-Kit <small>New way for create</small></h1>
|
<h1>React-Toolbox <small>New way for create</small></h1>
|
||||||
|
|
||||||
|
<Card />
|
||||||
<Switch />
|
<Switch />
|
||||||
<Aside />
|
<Aside />
|
||||||
<Autocomplete />
|
<Autocomplete />
|
||||||
<Button />
|
<Button />
|
||||||
<Dialog />
|
<Dialog />
|
||||||
<Dropdown />
|
<Dropdown />
|
||||||
|
<FontIcon />
|
||||||
<Form />
|
<Form />
|
||||||
<Progress />
|
<Progress />
|
||||||
<Slider />
|
<Slider />
|
||||||
|
|
|
@ -15,7 +15,10 @@
|
||||||
<meta http-equiv="cleartype" content="on">
|
<meta http-equiv="cleartype" content="on">
|
||||||
<link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
|
<link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
|
||||||
<link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
|
<link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
|
||||||
<style> app > h1, app > section { margin: 2rem; } </style>
|
<style>
|
||||||
|
app > h1, app > section { margin: 2rem; }
|
||||||
|
app [data-component-card] { margin: 0 1rem 1rem 0;}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="../node_modules/react/dist/react-with-addons.js"></script>
|
<script src="../node_modules/react/dist/react-with-addons.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue