diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index b809fa7e..cd1f89b4 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -19,12 +19,11 @@ class TrackList extends React.Component{ this._touch_threshold = 10 this._touch_x = null this._touch_y = null - this._touch_hold_timer = null - this._touch_held = false this.state = { tracks: [], - lastSelectedTrack: false + last_selected_track: false, + edit_mode: false } this.handleKeyUp = this.handleKeyUp.bind(this) @@ -64,14 +63,6 @@ class TrackList extends React.Component{ handleTouchStart(e,index){ this._touch_x = Math.round(e.changedTouches[0].pageX) this._touch_y = Math.round(e.changedTouches[0].pageY) - this._touch_hold_timer = setTimeout(() => {this.handleTouchHold(e,index)}, 500, e) - } - - handleTouchHold(e,index){ - this._touch_held = true - var tracks = this.state.tracks - tracks[index].selected = true - this.setState({ tracks: tracks, lastSelectedTrack: index }) } handleTouchEnd(e,index){ @@ -82,21 +73,14 @@ class TrackList extends React.Component{ // make sure our touch was within the threshold of the touch start // this helps us differentiate between taps and drags but doesn't consider // multi-finger touches - if( this._touch_x < ( pageX + this._touch_threshold ) && + if( this.state.edit_mode && + this._touch_x < ( pageX + this._touch_threshold ) && this._touch_x > ( pageX - this._touch_threshold ) && this._touch_y < ( pageY + this._touch_threshold ) && this._touch_y > ( pageY - this._touch_threshold ) ){ - - // make sure we didn't touch and hold, as that's different to a tap - if (!this._touch_held){ - var tracks = this.state.tracks - tracks[index].selected = !tracks[index].selected - this.setState({ tracks: tracks, lastSelectedTrack: index }) - - // release our held switch for the next interaction - } else { - this._touch_held = false - } + var tracks = this.state.tracks + tracks[index].selected = !tracks[index].selected + this.setState({ tracks: tracks, last_selected_track: index }) } e.preventDefault() @@ -144,7 +128,17 @@ class TrackList extends React.Component{ } } - handleContextMenu(e, deselect = false){ + handleContextMenu(e, native_event = true){ + + // touch events fired? we assume the user is primarily touching, + // so for touch devices we disable direct context menus + // hybrid devices will only work with touch OR mouse, not both in this case + if (this._touch_x && this._touch_y && native_event){ + this.setState({edit_mode: true}) + e.preventDefault() + return false + } + var selected_tracks = this.selectedTracks() var data = { e: e, @@ -156,14 +150,15 @@ class TrackList extends React.Component{ } this.props.uiActions.showContextMenu(data) - if (deselect){ + if (!native_event){ this.deselectAllTracks() + this.setState({edit_mode: false}) } } toggleTrackSelections(e,index){ var tracks = this.state.tracks - var lastSelectedTrack = this.state.lastSelectedTrack + var last_selected_track = this.state.last_selected_track if( e.ctrlKey ){ @@ -171,23 +166,23 @@ class TrackList extends React.Component{ tracks[index].selected = false } else { tracks[index].selected = true - lastSelectedTrack = index + last_selected_track = index } }else if( e.shiftKey ){ - if( this.state.lastSelectedTrack < index ){ - var start = this.state.lastSelectedTrack + if( this.state.last_selected_track < index ){ + var start = this.state.last_selected_track var end = index }else{ var start = index - var end = this.state.lastSelectedTrack + var end = this.state.last_selected_track } if (start !== false && end !== false){ for( var i = start; i <= end; i++ ){ tracks[i].selected = true - lastSelectedTrack = index + last_selected_track = index } } @@ -198,10 +193,10 @@ class TrackList extends React.Component{ } tracks[index].selected = true - lastSelectedTrack = index + last_selected_track = index } - this.setState({ tracks: tracks, lastSelectedTrack: lastSelectedTrack }) + this.setState({ tracks: tracks, last_selected_track: last_selected_track }) } deselectAllTracks(){ @@ -327,6 +322,9 @@ class TrackList extends React.Component{ if (this.props.className){ className += ' '+this.props.className } + if (this.state.edit_mode){ + className += ' edit-mode' + } return (
@@ -348,7 +346,7 @@ class TrackList extends React.Component{ } ) } - {this.selectedTracks().length > 0 ? this.handleContextMenu(e, true)} /> : null} + {this.selectedTracks().length > 0 ? this.handleContextMenu(e, false)} /> : null}
); } diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 49c77f4a..30aacfcf 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -264,9 +264,9 @@ } } -.track-list { +.track-list.edit-mode { .context-menu-trigger { - display: none; + display: block; position: fixed; bottom: 50px; right: 5px; @@ -282,9 +282,5 @@ &:active { background: darken($blue, 10%); } - - @include responsive( $bp_medium ){ - display: block; - } } } \ No newline at end of file diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 253cb678..20942741 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -22,7 +22,7 @@ background: $yellow !important; } - &:not(.header):hover { + :root .notouch &:not(.header):hover { background: $faint_grey; cursor: pointer; border-color: $faint_grey; @@ -55,55 +55,57 @@ } } - &.track-list .list-item { - padding-left: 40px; + &.track-list { + .list-item { + padding-left: 40px; - .col { - &.name { - width: 40%; + .col { + &.name { + width: 40%; + } + &.artists, + &.album { + width: 25%; + } + &.duration { + width: 5%; + } } - &.artists, - &.album { - width: 25%; + + .select-state { + position: absolute; + top: 15px; + left: 15px; + font-size: 10px; } - &.duration { - width: 5%; - } - } - .select-state { - position: absolute; - top: 15px; - left: 15px; - font-size: 10px; - } - - .play-state { - display: none; - position: absolute; - top: 16px; - left: 15px; - font-size: 10px; - } - - &.playing { - font-weight: 600; - .play-state { - display: block; - opacity: 1; - } - } - - &.playing.selected { .play-state { display: none; + position: absolute; + top: 16px; + left: 15px; + font-size: 10px; } - } - :root .dragging &:hover { - border-top: 3px solid $blue; - margin-top: -3px; - background: transparent; + &.playing { + font-weight: 600; + .play-state { + display: block; + opacity: 1; + } + } + + &.playing.selected { + .play-state { + display: none; + } + } + + :root .dragging &:hover { + border-top: 3px solid $blue; + margin-top: -3px; + background: transparent; + } } } @@ -223,13 +225,6 @@ .list-item { padding: 7px 30px 7px 16px !important; - &.track { - .select-state, - .play-state { - display: none !important; - } - } - .source { position: static; float: none; @@ -281,6 +276,25 @@ &.header { display: none; } + + &.track { + .select-state, + .play-state { + display: none !important; + } + } + } + + &.edit-mode { + .list-item { + padding-left: 40px !important; + + &.track { + .select-state { + display: block !important; + } + } + } } } } \ No newline at end of file