Cursor on lane header respects draggable (#302)

* no grab cursor if lane not draggable
* Update CHANGELOG.md

Author: dapi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased] - 2019-07-22
+
+### Improvements
+
+* Cursor on lane header respects draggable
+
 ## [2.2.0] - 2019-07-20
 
 ### Added

src/components/Card.js

@@ -31,6 +31,7 @@ class Card extends Component {
       label,
       description,
       tags,
+      cardDraggable
     } = this.props
 
     return (
@@ -41,7 +42,7 @@ class Card extends Component {
         className={className}
       >
         <CardHeader>
-          <CardTitle>{title}</CardTitle>
+          <CardTitle draggable={cardDraggable}>{title}</CardTitle>
           <CardRightContent>{label}</CardRightContent>
           {showDeleteButton && <DeleteButton onClick={this.onDelete} />}
         </CardHeader>

src/components/Lane/LaneHeader.js

@@ -5,12 +5,12 @@ import {Title, LaneHeader, RightContent } from 'rt/styles/Base'
 import LaneMenu from './LaneHeader/LaneMenu'
 
 const LaneHeaderComponent = ({
-  updateTitle, canAddLanes, onDelete, onDoubleClick, editLaneTitle, label, title, titleStyle, labelStyle, t
+  updateTitle, canAddLanes, onDelete, onDoubleClick, editLaneTitle, label, title, titleStyle, labelStyle, t, laneDraggable
 }) => {
 
   return (
     <LaneHeader onDoubleClick={onDoubleClick} editLaneTitle={editLaneTitle}>
-      <Title style={titleStyle}>
+      <Title draggable={laneDraggable} style={titleStyle}>
       {editLaneTitle ?
         <InlineInput value={title} border placeholder={t('placeholder.title')} resize='vertical' onSave={updateTitle} /> :
         title
@@ -30,6 +30,7 @@ LaneHeaderComponent.propTypes = {
   updateTitle: PropTypes.func,
   editLaneTitle: PropTypes.bool,
   canAddLanes: PropTypes.bool,
+  laneDraggable: PropTypes.bool,
   label: PropTypes.string,
   title: PropTypes.string,
   onDelete: PropTypes.func,

src/controllers/BoardContainer.js

@@ -143,6 +143,7 @@ class BoardContainer extends Component {
       'onLaneClick',
       'laneSortFunction',
       'draggable',
+      'laneDraggable',
       'cardDraggable',
       'collapsibleLanes',
       'canAddLanes',

src/controllers/Lane.js

@@ -137,7 +137,6 @@ class Lane extends Component {
       laneSortFunction,
       editable,
       hideCardDeleteIcon,
-      draggable,
       cardDraggable,
       cardDragClass,
       tagStyle,
@@ -161,10 +160,11 @@ class Lane extends Component {
           onClick={e => this.handleCardClick(e, card)}
           showDeleteButton={!hideCardDeleteIcon}
           tagStyle={tagStyle}
+          cardDraggable={cardDraggable}
           {...card}
         />
       )
-      return draggable && cardDraggable && (!card.hasOwnProperty('draggable') || card.draggable) ? (
+      return cardDraggable && (!card.hasOwnProperty('draggable') || card.draggable) ? (
         <Draggable key={card.id}>{cardToRender}</Draggable>
       ) : (
         <span key={card.id}>{cardToRender}</span>
@@ -215,7 +215,8 @@ class Lane extends Component {
       'labelStyle',
       't',
       'editLaneTitle',
-      'canAddLanes'
+      'canAddLanes',
+      'laneDraggable',
     ])
     return (
       <components.LaneHeader
@@ -293,6 +294,7 @@ Lane.propTypes = {
   onLaneClick: PropTypes.func,
   onLaneScroll: PropTypes.func,
   editable: PropTypes.bool,
+  laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
   canAddLanes: PropTypes.bool,

src/styles/Base.js

@@ -151,7 +151,7 @@ export const Title = styled.span`
   font-weight: bold;
   font-size: 15px;
   line-height: 18px;
-  cursor: grab;
+  cursor: ${props => (props.draggable ? 'grab' : `auto`)};
   width: 70%;
 `