Improved UI for editing layer names

src/renderer/components/layerlist/LayerLineEntry.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { List, ListItem, ListItemText, ListItemSecondaryAction } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import IconButton from '@material-ui/core/IconButton'
+import EditIcon from '@material-ui/icons/Edit'
 import LockIcon from '@material-ui/icons/Lock'
 import LockOpenIcon from '@material-ui/icons/LockOpen'
 import VisibilityIcon from '@material-ui/icons/Visibility'
@@ -65,6 +66,11 @@ export const LayerLineEntry = props => {
         <ListItemText>{ props.active ? <b>{props.name}</b> : props.name }</ListItemText>
 
         <ListItemSecondaryAction>
+          <IconButton
+            size='small'
+            onClick={props.editLayerName}>
+            <EditIcon/>
+          </IconButton>
           <IconButton
             disabled={lockToggleDisabled}
             size='small'
@@ -103,5 +109,6 @@ LayerLineEntry.propTypes = {
   locked: PropTypes.bool, // optional, false if omitted
   hidden: PropTypes.bool, // optional, false if omitted
   expanded: PropTypes.bool, // optional, false if omitted
-  selectLayer: PropTypes.func.isRequired
+  selectLayer: PropTypes.func.isRequired,
+  editLayerName: PropTypes.func.isRequired
 }

src/renderer/components/layerlist/LayerList.js

@@ -44,6 +44,10 @@ const LayerList = (/* props */) => {
   const reducer = (state, event) => (handlers[event.type] || I)(state, event)
   const [layers, dispatch] = React.useReducer(reducer, {})
 
+  const editLayerName = (layerId) => () => {
+    dispatch({ type: 'editoractivated', layerId: layerId })
+  }
+
   const selectedLayerId = () => {
     const selected = selection.selected(URI.isLayerId)
     return selected.length ? selected[0] : null
@@ -116,6 +120,7 @@ const LayerList = (/* props */) => {
         key={layer.id}
         { ...layer }
         selectLayer={selectLayer(layer.id)}
+        editLayerName={editLayerName(layer.id)}
       />
 
   const sortedLayers = () => Object.values(layers)