diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 09477a86..6dde451c 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -135,8 +135,10 @@ export default class Track extends React.Component{
onMouseUp={ e => this.props.handleMouseUp(e) }
onDoubleClick={ e => this.props.handleDoubleClick(e) }
onContextMenu={ e => this.handleContextMenu(e) }>
- { this.props.track.selected ? : null }
- { this.props.track.playing ? : null }
+
+ { this.props.track.selected ? : null }
+ { this.props.track.playing && !this.props.track.selected ? : null }
+
{ track_columns }
);
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index b5626f3d..ac2c5766 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -14,16 +14,11 @@ import * as uiActions from '../services/ui/actions'
class TrackList extends React.Component{
constructor(props) {
- super(props);
-
- this._touch_threshold = 10
- this._touch_x = null
- this._touch_y = null
+ super(props)
this.state = {
tracks: [],
- last_selected_track: false,
- edit_mode: false
+ last_selected_track: false
}
this.handleKeyUp = this.handleKeyUp.bind(this)
@@ -45,6 +40,25 @@ class TrackList extends React.Component{
this.setState({ tracks: this.keyifyTracks(nextProps.tracks) });
}
+ /**
+ * Figure out if our click/touch event is valid and we can act accordingly
+ *
+ * @param e = event obj
+ * @return string
+ **/
+ triggerType(e){
+ var target = $(e.target)
+
+ // Wide screen, so no worries
+ if ($(window).width() > 800){
+ return 'default'
+ } else if (target.is('.state-icon') || target.closest('.state-icon').length > 0){
+ return 'mobile'
+ }
+
+ return false
+ }
+
handleKeyUp(e){
if( this.selectedTracks().length <= 0 ) return;
@@ -61,29 +75,9 @@ 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)
}
handleTouchEnd(e,index){
- var pageX = Math.round(e.changedTouches[0].pageX)
- var pageY = Math.round(e.changedTouches[0].pageY)
- clearTimeout(this._touch_hold_timer)
-
- // 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.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 ) ){
- var tracks = this.state.tracks
- tracks[index].selected = !tracks[index].selected
- this.setState({ tracks: tracks, last_selected_track: index })
- }
-
- e.preventDefault()
}
handleDoubleClick(e,index){
@@ -92,53 +86,57 @@ class TrackList extends React.Component{
}
handleMouseDown(e,index){
- if (this.props.emulate_touch){
- this.handleTouchContextMenu(e,index)
- }else{
- if (this.props.context_menu) this.props.uiActions.hideContextMenu()
- if (!this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey) this.toggleTrackSelections(e, index)
+ if (this.props.context_menu) this.props.uiActions.hideContextMenu()
- var selected_tracks = this.selectedTracks()
- this.props.uiActions.dragStart( e, this.props.context, this.props.uri, selected_tracks, this.tracksIndexes(selected_tracks) )
+ // Regular clicking an un-selected element
+ // This selects the track before we potentially drag
+ switch (this.triggerType(e)){
+
+ case 'mobile':
+ // simple toggle
+ var tracks = this.state.tracks
+ tracks[index].selected = !tracks[index].selected
+ this.setState({tracks: tracks, last_selected_track: index})
+ break
+
+ case 'default':
+ if (!this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey){
+ this.toggleTrackSelections(e, index)
+ }
+ break
}
+
+ var selected_tracks = this.selectedTracks()
+ this.props.uiActions.dragStart( e, this.props.context, this.props.uri, selected_tracks, this.tracksIndexes(selected_tracks) )
}
handleMouseUp(e,index){
+ if (this.triggerType(e) == 'default'){
+ // right-clicking on an un-highlighted track
+ if (!this.state.tracks[index].selected && this.isRightClick(e)){
+ this.toggleTrackSelections(e, index)
- // right-clicking on an un-highlighted track
- if( !this.state.tracks[index].selected && this.isRightClick(e) ){
- this.toggleTrackSelections(e, index)
+ // selected track, regular click
+ }else if (this.state.tracks[index].selected && !this.isRightClick(e)){
+ this.toggleTrackSelections(e, index)
- // selected track, regular click
- }else if( this.state.tracks[index].selected && !this.isRightClick(e) ){
- this.toggleTrackSelections(e, index)
+ // ctrl key
+ } else if(e.ctrlKey){
+ this.toggleTrackSelections(e, index)
+ }
- // ctrl key
- }else if( e.ctrlKey ){
- this.toggleTrackSelections(e, index)
- }
-
- if( this.props.dragger && this.props.dragger.active ){
-
- // if this tracklist handles sorting, handle it
- if( typeof(this.props.reorderTracks) !== 'undefined' ){
- var indexes = this.props.dragger.victims_indexes
- return this.props.reorderTracks( indexes, index );
+ if (this.props.dragger && this.props.dragger.active){
+
+ // if this tracklist handles sorting, handle it
+ if (typeof(this.props.reorderTracks) !== 'undefined'){
+ var indexes = this.props.dragger.victims_indexes
+ return this.props.reorderTracks( indexes, index )
+ }
}
}
}
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,
@@ -327,9 +325,6 @@ class TrackList extends React.Component{
if (this.props.className){
className += ' '+this.props.className
}
- if (this.state.edit_mode){
- className += ' edit-mode'
- }
return (
@@ -342,12 +337,12 @@ class TrackList extends React.Component{
key={track.key}
track={track}
context={this.props.context}
- handleDoubleClick={ e => self.handleDoubleClick(e, index)}
- handleMouseUp={ e => self.handleMouseUp(e, index)}
- handleMouseDown={ e => self.handleMouseDown(e, index)}
- handleTouchStart={ e => self.handleTouchStart(e, index)}
- handleTouchEnd={ e => self.handleTouchEnd(e, index)}
- handleContextMenu={ e => self.handleContextMenu(e)} />
+ handleDoubleClick={e => self.handleDoubleClick(e, index)}
+ handleMouseUp={e => self.handleMouseUp(e, index)}
+ handleMouseDown={e => self.handleMouseDown(e, index)}
+ handleTouchStart={e => self.handleTouchStart(e, index)}
+ handleTouchEnd={e => self.handleTouchEnd(e, index)}
+ handleContextMenu={e => self.handleContextMenu(e)} />
}
)
}
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index 4c0bf143..d8fdec2f 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -249,11 +249,8 @@
}
.list {
- .context-menu-trigger {
- display: none;
- }
- &.track-list.edit-mode {
+ &.track-list {
.context-menu-trigger {
display: block;
position: fixed;
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 79865a35..93d457c5 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -22,6 +22,13 @@
background: $yellow !important;
}
+ .state-icon {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ font-size: 10px;
+ }
+
:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
background: rgba(150,150,150,0.1);
cursor: pointer;
@@ -71,35 +78,6 @@
}
}
- .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;
- }
- }
-
:root .dragging &:hover {
border-top: 3px solid $blue;
margin-top: -3px;
@@ -222,13 +200,34 @@
@include responsive( $bp_medium ){
.list-item {
- padding: 7px 30px 7px 16px !important;
+ padding: 7px 30px 7px 48px !important;
.source {
position: static;
float: none;
}
+ .state-icon {
+ top: 0;
+ left: 0;
+ padding: 19px 17px 15px 17px;
+
+ &:after {
+ display: block;
+ content: '';
+ border: 1px solid $darkest_grey;
+ width: 15px;
+ height: 15px;
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ }
+
+ .playing {
+ display: none !important;
+ }
+ }
+
.col {
&.name {
width: 90% !important;
@@ -275,13 +274,6 @@
&.header {
display: none;
}
-
- &.track {
- .select-state,
- .play-state {
- display: none !important;
- }
- }
}
&.queue-track-list {
@@ -300,17 +292,5 @@
}
}
}
-
- &.edit-mode {
- .list-item {
- padding-left: 40px !important;
-
- &.track {
- .select-state {
- display: block !important;
- }
- }
- }
- }
}
}
\ No newline at end of file