From 7c9e2a5eba3b4b6995ac7856992ec6b1472e1d56 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 20 Nov 2017 15:49:52 +1300 Subject: [PATCH] List columns and actions separated --- src/js/components/ContextMenu.js | 21 ++------- src/js/components/ContextMenuTrigger.js | 11 +++-- src/js/components/List.js | 31 +++++++------ src/js/components/Track.js | 62 +++++++++++++------------ src/js/services/ui/actions.js | 5 +- src/scss/components/_context-menu.scss | 13 ++---- 6 files changed, 66 insertions(+), 77 deletions(-) diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 14cab971..6ba2a926 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -22,20 +22,17 @@ class ContextMenu extends React.Component{ submenu_expanded: false } this.handleScroll = this.handleScroll.bind(this); - this.handleMouseUp = this.handleMouseUp.bind(this); - this.handleTouchEnd = this.handleTouchEnd.bind(this); + this.handleMouseDown = this.handleMouseDown.bind(this); } componentDidMount(){ window.addEventListener("scroll", this.handleScroll, false); - window.addEventListener("mouseup", this.handleMouseUp, false); - window.addEventListener("touchend", this.handleTouchEnd, false); + window.addEventListener("mousedown", this.handleMouseDown, false); } componentWillUnmount(){ window.removeEventListener("scroll", this.handleScroll, false); - window.removeEventListener("mouseup", this.handleMouseUp, false); - window.removeEventListener("touchend", this.handleTouchEnd, false); + window.removeEventListener("mousedown", this.handleMouseDown, false); } componentWillReceiveProps(nextProps){ @@ -77,17 +74,7 @@ class ContextMenu extends React.Component{ } } - handleTouchEnd(e){ - console.log('ContextMenu > handleTouchEnd'); - this.handleClick(e); - } - - handleMouseUp(e){ - console.log('ContextMenu > handleMouseUp'); - this.handleClick(e); - } - - handleClick(e){ + handleMouseDown(e){ // if we click (touch or mouse) outside of the context menu or context menu trigger, kill it if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){ this.props.uiActions.hideContextMenu() diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js index 1e119a54..d941eae1 100755 --- a/src/js/components/ContextMenuTrigger.js +++ b/src/js/components/ContextMenuTrigger.js @@ -8,11 +8,15 @@ export default class ContextMenuTrigger extends React.Component{ super(props); } - handleMouseUp(e){ + handleMouseDown(e){ + e.preventDefault(); + e.stopPropagation(); this.props.onTrigger(e); } - handleTouchEnd(e){ + handleClick(e){ + e.preventDefault(); + e.stopPropagation(); this.props.onTrigger(e); } @@ -23,8 +27,7 @@ export default class ContextMenuTrigger extends React.Component{ } return ( this.handleMouseUp(e)} - onTouchEnd={e => this.handleTouchEnd(e)}> + onClick={e => this.handleClick(e)}> diff --git a/src/js/components/List.js b/src/js/components/List.js index 8ed126ad..a4eeb98a 100755 --- a/src/js/components/List.js +++ b/src/js/components/List.js @@ -89,21 +89,22 @@ class List extends React.Component{ if (row.type ) class_name += ' '+row.type return ( -
this.handleClick(e, row.uri)} - onContextMenu={e => this.handleContextMenu(e,row)} - className={class_name} - key={row_index}> - { - this.props.columns.map((col, col_index) => { - var className = 'col '+col.name.replace('.','_') - return ( -
- { this.renderValue(row, col.name) } -
- ) - }) - } +
+
this.handleClick(e, row.uri)} + onContextMenu={e => this.handleContextMenu(e,row)}> + { + this.props.columns.map((col, col_index) => { + var className = 'col '+col.name.replace('.','_') + return ( +
+ { this.renderValue(row, col.name) } +
+ ) + }) + } +
{this.props.nocontext ? null : this.handleContextMenu(e, row)} />}
) diff --git a/src/js/components/Track.js b/src/js/components/Track.js index 2a930822..021426f7 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -100,7 +100,6 @@ export default class Track extends React.Component{ } handleContextMenu(e){ - console.log('handle'); e.preventDefault(); e.stopPropagation(); e.cancelBubble = true; @@ -108,27 +107,29 @@ export default class Track extends React.Component{ } render(){ - if (!this.props.track ) return null + if (!this.props.track){ + return null; + } - var track = this.props.track - var className = 'list-item track' - if (this.props.selected) className += ' selected' - if (this.props.selected) className += ' selected' - if (this.props.can_sort) className += ' can-sort' - if (track.type !== undefined) className += ' '+track.type - if (track.playing) className += ' playing' - if (this.state.hover) className += ' hover' + var track = this.props.track; + var className = 'list-item track'; + if (this.props.selected) className += ' selected'; + if (this.props.can_sort) className += ' can-sort'; + if (track.type !== undefined) className += ' '+track.type; + if (track.playing) className += ' playing'; + if (this.state.hover) className += ' hover'; - var album = '-' + var album = '-'; if (track.album){ if (track.album.uri){ - album = {track.album.name} + album = {track.album.name}; } else { - album = {track.album.name} + album = {track.album.name}; } } - let track_columns = [] + let track_columns = []; + let track_actions = []; if (track.type == 'history'){ @@ -228,7 +229,7 @@ export default class Track extends React.Component{ ) } - track_columns.push( + track_actions.push( this.handleContextMenu(e)} /> ) @@ -236,7 +237,7 @@ export default class Track extends React.Component{ // Select zone handles selection events only // We use onClick to capture touch as well as mouse events in one tidy parcel - track_columns.push( + track_actions.push( - { track_columns } + {track_actions} + {track_columns}
) } else { return ( -
this.setState({hover: true})} - onMouseLeave={e => this.setState({hover: false})} - //onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me - onMouseDown={e => this.handleMouseDown(e)} // Click (or potentially a mouse drag start) - onMouseMove={e => this.handleMouseMove(e)} // Any movement over me - onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event - onDoubleClick={e => this.props.handleDoubleClick(e)} - onContextMenu={e => {this.handleContextMenu(e)}}> - {track_columns} +
+ {track_actions} +
this.setState({hover: true})} + onMouseLeave={e => this.setState({hover: false})} + //onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me + onMouseDown={e => this.handleMouseDown(e)} // Click (or potentially a mouse drag start) + onMouseMove={e => this.handleMouseMove(e)} // Any movement over me + onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event + onDoubleClick={e => this.props.handleDoubleClick(e)} + onContextMenu={e => {this.handleContextMenu(e)}}> + {track_columns} +
) } diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 24595fd7..5d1e45a2 100755 --- a/src/js/services/ui/actions.js +++ b/src/js/services/ui/actions.js @@ -12,8 +12,9 @@ export function setSelectedTracks(keys = []){ } export function showContextMenu(data){ - data.position_x = data.e.clientX - data.position_y = data.e.clientY + data.position_x = data.e.clientX; + data.position_y = data.e.clientY; + console.log(data); return { type: 'SHOW_CONTEXT_MENU', data: data diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 62890853..1e30e847 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -21,7 +21,7 @@ font-family: "Overpass"; .title { - display: block; + display: none; padding: 10px 14px; font-weight: bold; box-sizing: border-box; @@ -221,14 +221,6 @@ } } - @include responsive(null, $bp_medium){ - .liner { - .title { - display: none; - } - } - } - @include responsive($bp_medium){ top: 0 !important; right: 0 !important; @@ -255,7 +247,8 @@ z-index: 2; border-radius: 3px; - .title { + .title { + display: block; padding: 14px 18px; box-sizing: border-box; border-radius: 3px 3px 0 0;