@@ -109,13 +104,6 @@ export default class LayerEditor extends React.Component {
{propertyGroups}
{this.props.layer.type !== 'background' &&
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 55a3651..69cd209 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -15,6 +15,7 @@ import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
const layerListPropTypes = {
layers: React.PropTypes.array.isRequired,
+ selectedLayerIndex: React.PropTypes.number.isRequired,
onLayersChanged: React.PropTypes.func.isRequired,
onLayerSelected: React.PropTypes.func,
}
@@ -45,6 +46,7 @@ class LayerListContainer extends React.Component {
key={layerId}
layerId={layerId}
layerType={layer.type}
+ isSelected={index === this.props.selectedLayerIndex}
onLayerSelected={this.props.onLayerSelected}
/>
})
diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index f23b442..0b0a489 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -1,5 +1,4 @@
import React from 'react'
-import Radium from 'radium'
import Color from 'color'
import Heading from 'rebass/dist/Heading'
@@ -7,6 +6,11 @@ import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
+import CopyIcon from 'react-icons/lib/md/content-copy'
+import VisibilityIcon from 'react-icons/lib/md/visibility'
+import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
+import DeleteIcon from 'react-icons/lib/md/delete'
+
import LayerIcon from '../icons/LayerIcon'
import LayerEditor from './LayerEditor'
import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -27,43 +31,149 @@ class LayerTypeDragHandle extends React.Component {
}
}
+class IconAction extends React.Component {
+ static propTypes = {
+ action: React.PropTypes.string.isRequired,
+ active: React.PropTypes.bool,
+ }
+
+ constructor(props) {
+ super(props)
+ this.state = { hover: false }
+ }
+
+ renderIcon() {
+ const iconStyle = {
+ fill: this.props.active ? (this.state.hover ? colors.lowgray : colors.midgray) : colors.gray,
+ }
+
+ switch(this.props.action) {
+ case 'copy': return
+ case 'show': return
+ case 'hide': return
+ case 'delete': return
+ default: return null
+ }
+ }
+
+ render() {
+ return
this.setState({hover: true})}
+ onMouseOut={e => this.setState({hover: false})}
+ >
+ {this.renderIcon()}
+
+ }
+}
+
@SortableElement
-@Radium
class LayerListItem extends React.Component {
static propTypes = {
layerId: React.PropTypes.string.isRequired,
layerType: React.PropTypes.string.isRequired,
+ isSelected: React.PropTypes.bool,
+ visibility: React.PropTypes.bool,
+
onLayerSelected: React.PropTypes.func.isRequired,
+ onLayerDestroyed: React.PropTypes.func,
+ onLayerVisibilityToggled: React.PropTypes.func,
+ }
+
+ static defaultProps = {
+ isSelected: false,
+ visibility: true,
+ onLayerDestroyed: () => {},
+ onLayerVisibilityToggled: () => {},
+ }
+
+ static childContextTypes = {
+ reactIconBase: React.PropTypes.object
+ }
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ hover: false
+ }
+ }
+
+ getChildContext() {
+ return {
+ reactIconBase: { size: 12 }
+ }
}
render() {
+ const itemStyle = {
+ fontWeight: 400,
+ color: colors.lowgray,
+ fontSize: fontSizes[5],
+ borderLeft: 0,
+ borderTop: 0,
+ borderBottom: 1,
+ borderRight: 0,
+ borderStyle: "solid",
+ userSelect: 'none',
+ listStyle: 'none',
+ zIndex: 2000,
+ cursor: 'pointer',
+ position: 'relative',
+ padding: margins[1],
+ borderColor: Color(colors.gray).lighten(0.1).string(),
+ backgroundColor: colors.gray,
+ }
+
+ if(this.state.hover) {
+ console.log('hooover')
+ itemStyle.backgroundColor = Color(colors.gray).lighten(0.10)
+ }
+
+ if(this.props.isSelected) {
+ itemStyle.backgroundColor = Color(colors.gray).lighten(0.15)
+ }
+
+ const iconProps = {
+ active: this.state.hover || this.props.isSelected
+ }
+
return
this.props.onLayerSelected(this.props.layerId)}
- style={{
- fontWeight: 400,
- color: colors.lowgray,
- fontSize: fontSizes[5],
- borderBottom: 1,
- borderLeft: 2,
- borderRight: 0,
- borderStyle: "solid",
- userSelect: 'none',
- listStyle: 'none',
- zIndex: 2000,
- cursor: 'pointer',
- position: 'relative',
- padding: margins[1],
- borderColor: Color(colors.gray).lighten(0.1).string(),
- backgroundColor: colors.gray,
- ":hover": {
- backgroundColor: Color(colors.gray).lighten(0.15).string(),
- }
- }}>
-
- {this.props.layerId}
+ onClick={e => this.props.onLayerSelected(this.props.layerId)}
+ onMouseOver={e => this.setState({hover: true})}
+ onMouseOut={e => this.setState({hover: false})}
+ style={itemStyle}>
+
+
+ {this.props.layerId}
+
+ this.props.onLayerDestroyed(this.props.layerId)}
+ />
+ this.props.onLayerVisibilityToggled(this.props.layerId)}
+ />
+ this.props.onLayerVisibilityToggled(this.props.layerId)}
+ />
+
}
}
-export default Radium(LayerListItem);
+export default LayerListItem;