From d0f047d88aceb46403e321a0dc170d52cea920fe Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Wed, 11 Jan 2017 17:52:21 +0100 Subject: [PATCH] Group layers #66 --- src/components/layers/Collapser.jsx | 20 ++++++ src/components/layers/LayerEditorGroup.jsx | 18 +---- src/components/layers/LayerList.jsx | 82 +++++++++++++++++----- src/components/layers/LayerListGroup.jsx | 26 +++++++ src/components/layers/LayerListItem.jsx | 4 -- src/styles/_layer.scss | 30 +++++++- 6 files changed, 142 insertions(+), 38 deletions(-) create mode 100644 src/components/layers/Collapser.jsx create mode 100644 src/components/layers/LayerListGroup.jsx diff --git a/src/components/layers/Collapser.jsx b/src/components/layers/Collapser.jsx new file mode 100644 index 0000000..19410a5 --- /dev/null +++ b/src/components/layers/Collapser.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down' +import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up' + +export default class Collapser extends React.Component { + static propTypes = { + isCollapsed: React.PropTypes.bool.isRequired, + style: React.PropTypes.object, + } + + render() { + const iconStyle = { + width: 20, + height: 20, + ...this.props.style, + } + return this.props.isCollapsed ? : + } +} + diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx index 6634fa8..5c4f86f 100644 --- a/src/components/layers/LayerEditorGroup.jsx +++ b/src/components/layers/LayerEditorGroup.jsx @@ -1,22 +1,6 @@ import React from 'react' - import Collapse from 'react-collapse' -import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down' -import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up' - -class Collapser extends React.Component { - static propTypes = { - isCollapsed: React.PropTypes.bool.isRequired, - } - - render() { - const iconStyle = { - width: 20, - height: 20, - } - return this.props.isCollapsed ? : - } -} +import Collapser from './Collapser' export default class LayerEditorGroup extends React.Component { static propTypes = { diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 1f7c11a..7e1e11d 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -2,6 +2,7 @@ import React from 'react' import cloneDeep from 'lodash.clonedeep' import Button from '../Button' +import LayerListGroup from './LayerListGroup' import LayerListItem from './LayerListItem' import AddIcon from 'react-icons/lib/md/add-circle-outline' import AddModal from '../modals/AddModal' @@ -9,6 +10,8 @@ import AddModal from '../modals/AddModal' import style from '../../libs/style.js' import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc'; +const layerPrefix = name => name.replace(' ', '-').replace('_', '-').split('-')[0] + const layerListPropTypes = { layers: React.PropTypes.array.isRequired, selectedLayerIndex: React.PropTypes.number.isRequired, @@ -73,22 +76,69 @@ class LayerListContainer extends React.Component { }) } - render() { - const layerPanels = this.props.layers.map((layer, index) => { - const layerId = layer.id - return + groupedLayers() { + const groups = [] + for (let i = 0; i < this.props.layers.length; i++) { + const previousLayer = this.props.layers[i-1] + const layer = this.props.layers[i] + if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) { + const lastGroup = groups[groups.length - 1] + lastGroup.push(layer) + } else { + groups.push([layer]) + } + } + return groups + } + + toggleLayerGroup(groupPrefix) { + groupedLayers().forEach(layers => { + if(groupPrefix === layerPrefix(layers[0].id)) { + layers.forEach(layer => { + //HACK + //In this case it is ok to modify the metadata + //because no one else depends on it + layer.metadata = { + ...layer.metadata, + 'maputnik:visible': false + } + }) + } }) + } + + render() { + const listItems = [] + let idx = 0 + this.groupedLayers().forEach(layers => { + if(layers.length > 1) { + const groupPrefix = layerPrefix(layers[0].id) + const grp = + listItems.push(grp) + } + + layers.forEach(layer => { + const listItem = + listItems.push(listItem) + idx += 1 + }) + }) + return
    - {layerPanels} + {listItems}
} diff --git a/src/components/layers/LayerListGroup.jsx b/src/components/layers/LayerListGroup.jsx new file mode 100644 index 0000000..09476b8 --- /dev/null +++ b/src/components/layers/LayerListGroup.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import Collapser from './Collapser' + +export default class LayerEditorGroup extends React.Component { + static propTypes = { + title: React.PropTypes.string.isRequired, + children: React.PropTypes.element.isRequired, + isActive: React.PropTypes.bool.isRequired, + onActiveToggle: React.PropTypes.func.isRequired + } + + render() { + return
+
this.props.onActiveToggle(!this.props.isActive)} + > + {this.props.title} + + +
+
+ } +} diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 67955c7..5f7c377 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -80,10 +80,6 @@ class LayerListItem extends React.Component { reactIconBase: React.PropTypes.object } - constructor(props) { - super(props) - } - getChildContext() { return { reactIconBase: { size: 14 } diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index c1bd1e5..9ca2f5b 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -37,7 +37,6 @@ cursor: pointer; position: relative; padding: 5px 10px; - background-color: $color-black; line-height: 1.3; display: flex; display: -ms-flexbox; @@ -69,6 +68,35 @@ overflow: hidden; text-overflow: ellipsis; } + + &-group { + //border-bottom: 2px solid $color-gray; + } + + &-group-header { + font-size: $font-size-6; + color: $color-lowgray; + background-color: lighten($color-black, 2); + cursor: pointer; + user-select: none; + padding: $margin-2; + display: flex; + display: -ms-flexbox; + @include vendor-prefix(flex-direction, row) + + svg { + width: 14px; + height: 14px; + } + } + + &-group-title { + vertical-align: middle; + } + + &-group-content { + margin-left: $margin-3; + } }