From a7e751331c6d06b6b4e2141d24e77056d2b0e957 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 17 Jul 2017 09:13:12 +1200 Subject: [PATCH] Tap and drag on drag-zone; Revising select-zone --- src/js/App.js | 2 ++ src/js/components/Track.js | 17 ++++++++-- src/js/components/TrackList.js | 44 +++++++++++++++++++------- src/scss/components/_lists.scss | 56 ++++++++++++++++++++++++++------- src/scss/global/_core.scss | 1 + 5 files changed, 94 insertions(+), 26 deletions(-) diff --git a/src/js/App.js b/src/js/App.js index 8a953284..f661585e 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -218,6 +218,7 @@ class App extends React.Component{ if (this.props.dragger && this.props.dragger.active) className += ' dragging' if (this.props.sidebar_open) className += ' sidebar-open' if (this.props.modal) className += ' modal-open' + if (this.props.touch_dragging) className += ' touch-dragging' if (this.props.slim_mode) className += ' slim-mode' if (helpers.isTouchDevice()){ className += ' touch' @@ -258,6 +259,7 @@ class App extends React.Component{ const mapStateToProps = (state, ownProps) => { return { + touch_dragging: state.ui.touch_dragging, slim_mode: state.ui.slim_mode, broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []), volume: (state.mopidy.volume ? state.mopidy.volume : false), diff --git a/src/js/components/Track.js b/src/js/components/Track.js index 48aaa2a6..4b44b725 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -59,6 +59,9 @@ export default class Track extends React.Component{ var track_columns = ( + + {this.props.track.selected ? : null} + {track.name ? track.name : {track.uri}} @@ -89,8 +92,16 @@ export default class Track extends React.Component{ var added = '-' } + className+= ' has-drag-zone' + var track_columns = ( + + {this.props.track.selected ? : null} + + + + {track.name ? track.name : {track.uri}} {track.explicit ? EXPLICIT : null} @@ -116,6 +127,9 @@ export default class Track extends React.Component{ var track_columns = ( + + {this.props.track.selected ? : null} + {track.name ? track.name : {track.uri}} {track.explicit ? EXPLICIT : null} @@ -146,9 +160,6 @@ 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} - { track_columns } ); diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index ecddb44c..ba92883c 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -21,16 +21,19 @@ class TrackList extends React.Component{ last_selected_track: false } - this._touching = false + this.touch_dragging = false this.handleKeyUp = this.handleKeyUp.bind(this) + this.handleTouchMove = this.handleTouchMove.bind(this) } componentWillMount(){ - window.addEventListener("keyup", this.handleKeyUp, false); + window.addEventListener("keyup", this.handleKeyUp, false) + window.addEventListener("touchmove", this.handleTouchMove, false) } componentWillUnmount(){ - window.removeEventListener("keyup", this.handleKeyUp, false); + window.removeEventListener("keyup", this.handleKeyUp, false) + window.removeEventListener("touchmove", this.handleTouchMove, false) } componentDidMount(){ @@ -51,9 +54,9 @@ class TrackList extends React.Component{ var target = $(e.target) // Wide screen, so no worries - if ($(window).width() > 800){ + if (!this.props.slim_mode){ return 'default' - } else if (target.is('.state-icon') || target.closest('.state-icon').length > 0){ + } else if (target.is('.select-zone') || target.closest('.select-zone').length > 0){ return 'mobile' } @@ -76,12 +79,28 @@ class TrackList extends React.Component{ } handleTouchStart(e,index){ - this._touching = true + var target = $(e.target) + if (target.hasClass('drag-zone')){ + $('body').addClass('touch-dragging') + this.touch_dragging = true + e.preventDefault() + } + } + + handleTouchMove(e){ + if (this.touch_dragging){ + e.preventDefault() + console.log('dragging') + } } handleTouchEnd(e,index){ - this._touching = false - this.handleMouseDown(e,index) + if (this.touch_dragging){ + $('body').removeClass('touch-dragging') + this.touch_dragging = false + } else { + this.handleMouseDown(e,index) + } // Prevent any event bubbling. This prevents clicks and mouse events // from also being fired @@ -348,7 +367,8 @@ class TrackList extends React.Component{ { this.state.tracks.map( (track, index) => { - return self.handleMouseDown(e, index)} handleTouchStart={e => self.handleTouchStart(e, index)} handleTouchEnd={e => self.handleTouchEnd(e, index)} - handleContextMenu={e => self.handleContextMenu(e)} /> + handleContextMenu={e => self.handleContextMenu(e)} + /> + ) } ) } @@ -377,8 +399,8 @@ class TrackList extends React.Component{ const mapStateToProps = (state, ownProps) => { return { + slim_mode: state.ui.slim_mode, dragger: state.ui.dragger, - emulate_touch: state.ui.emulate_touch, current_track: state.ui.current_track, context_menu: state.ui.context_menu } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 185ec2e9..7d5ae7a6 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -22,13 +22,21 @@ &.selected { background: $yellow !important; border-color: darken($yellow,10%); + + .select-zone { + &::after { + background: $dark_grey; + border-color: $dark_grey; + } + } } &.playing { font-weight: bold; } - .state-icon { + .select-zone, + .drag-zone { display: none; } @@ -211,30 +219,51 @@ float: none; } - .state-icon { + .select-zone { position: absolute; top: 0; left: 0; height: 100%; - width: 48px; - font-size: 10px; + width: 38px; + font-size: 8px; display: block; .fa { position: absolute; - top: 19px; - left: 17px; + top: 20px; + left: 13px; + pointer-events: none; + color: $white; + z-index: 1; } &:after { display: block; content: ''; border: 1px solid $darkest_grey; - width: 15px; - height: 15px; + border-radius: 50%; + width: 14px; + height: 14px; position: absolute; - top: 15px; - left: 15px; + top: 16px; + left: 10px; + } + } + + .drag-zone { + position: absolute; + top: 0; + left: 38px; + height: 100%; + width: 38px; + font-size: 14px; + display: block; + + .fa { + position: absolute; + top: 17px; + left: 8px; + pointer-events: none; } } @@ -307,8 +336,11 @@ } &.track-list { - .list-item { - padding: 7px 30px 7px 48px !important; + .list-item.has-drag-zone { + padding: 8px 30px 8px 78px !important; + } + .list-item:not(.has-drag-zone){ + padding: 8px 30px 8px 38px !important; } } } diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 2bd2e950..80057362 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -14,6 +14,7 @@ body { overflow-y: scroll; overflow-x: hidden; + &.touch-dragging, &.modal-open { overflow-y: hidden; }