Removing slim_mode as it's better handled in CSS

This commit is contained in:
James Barnsley
2017-12-18 08:48:36 +13:00
parent e1876c45cf
commit 46381d2319
4 changed files with 50 additions and 54 deletions

View File

@ -274,8 +274,11 @@ class App extends React.Component{
uiActions={this.props.uiActions} uiActions={this.props.uiActions}
notifications={this.props.notifications} notifications={this.props.notifications}
processes={this.props.processes} processes={this.props.processes}
broadcasts={this.props.broadcasts} /> broadcasts={this.props.broadcasts}
/>
{this.props.debug_info ? <DebugInfo /> : null} {this.props.debug_info ? <DebugInfo /> : null}
</div> </div>
); );
} }

View File

@ -140,10 +140,8 @@ export default class Track extends React.Component{
// Touch contextable // Touch contextable
} else if (target.hasClass('touch-contextable')){ } else if (target.hasClass('touch-contextable')){
console.log('touch-contextable');
// Update our selection. By not passing touch = true selection will work like a regular click // Update our selection. By not passing touch = true selection will work like a regular click
this.props.handleSelection(e); //this.props.handleSelection(e);
this.handleContextMenu(e); this.handleContextMenu(e);
} }

View File

@ -132,30 +132,30 @@ class TrackList extends React.Component{
handleTouchMove(e){ handleTouchMove(e){
if (this.touch_dragging_tracks_keys){ if (this.touch_dragging_tracks_keys){
let touch = e.touches[0] let touch = e.touches[0];
let over = $(document.elementFromPoint(touch.clientX, touch.clientY)) let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
if (!over.is('.track')){ if (!over.is('.track')){
over = over.closest('.track') over = over.closest('.track');
} }
$(document).find('.touch-drag-hover').removeClass('touch-drag-hover') $(document).find('.touch-drag-hover').removeClass('touch-drag-hover');
if (over.length > 0){ if (over.length > 0){
over.addClass('touch-drag-hover') over.addClass('touch-drag-hover');
} }
e.returnValue = false e.returnValue = false;
e.cancelBubble = true e.cancelBubble = true;
e.preventDefault() e.preventDefault();
e.stopPropagation() e.stopPropagation();
return false return false;
} }
} }
handleTouchEnd(e){ handleTouchEnd(e){
if (this.touch_dragging_tracks_keys){ if (this.touch_dragging_tracks_keys){
let touch = e.changedTouches[0] let touch = e.changedTouches[0];
let over = $(document.elementFromPoint(touch.clientX, touch.clientY)) let over = $(document.elementFromPoint(touch.clientX, touch.clientY));
if (!over.is('.track')){ if (!over.is('.track')){
over = over.closest('.track') over = over.closest('.track');
} }
if (over.length > 0){ if (over.length > 0){
let siblings = over.parent().children('.track'); let siblings = over.parent().children('.track');
@ -167,11 +167,11 @@ class TrackList extends React.Component{
} }
} }
$(document).find('.touch-drag-hover').removeClass('touch-drag-hover') $(document).find('.touch-drag-hover').removeClass('touch-drag-hover');
$('body').removeClass('touch-dragging') $('body').removeClass('touch-dragging');
} }
this.touch_dragging_tracks_keys = false this.touch_dragging_tracks_keys = false;
} }
handleDoubleClick(e,track_key){ handleDoubleClick(e,track_key){
@ -182,17 +182,19 @@ class TrackList extends React.Component{
} }
handleContextMenu(e, track_key = null){ handleContextMenu(e, track_key = null){
let selected_tracks = this.props.selected_tracks let selected_tracks = this.props.selected_tracks;
console.log(selected_tracks);
// Not already selected, so select it prior to triggering menu // Not already selected, so select it prior to triggering menu
if (track_key && !selected_tracks.includes(track_key)){ if (track_key && !selected_tracks.includes(track_key)){
selected_tracks = [track_key] selected_tracks = [track_key];
this.props.uiActions.setSelectedTracks(selected_tracks) this.props.uiActions.setSelectedTracks(selected_tracks);
} }
let selected_tracks_digested = this.digestTracksKeys(selected_tracks) let selected_tracks_digested = this.digestTracksKeys(selected_tracks);
let selected_tracks_uris = helpers.arrayOf('uri',selected_tracks_digested) let selected_tracks_uris = helpers.arrayOf('uri',selected_tracks_digested);
let selected_tracks_indexes = helpers.arrayOf('index',selected_tracks_digested) let selected_tracks_indexes = helpers.arrayOf('index',selected_tracks_digested);
let data = { let data = {
e: e, e: e,
@ -207,60 +209,61 @@ class TrackList extends React.Component{
} }
handleSelection(e, track_key, touched = false){ handleSelection(e, track_key, touched = false){
let selected_tracks = this.props.selected_tracks let selected_tracks = this.props.selected_tracks;
if ((e.ctrlKey || e.metaKey) || touched){ if ((e.ctrlKey || e.metaKey) || touched){
// Already selected, so unselect it // Already selected, so unselect it
if (selected_tracks.includes(track_key)){ if (selected_tracks.includes(track_key)){
var index = selected_tracks.indexOf(track_key) var index = selected_tracks.indexOf(track_key);
selected_tracks.splice(index,1) selected_tracks.splice(index, 1);
// Not selected, so add it // Not selected, so add it
} else { } else {
selected_tracks.push(track_key) selected_tracks.push(track_key);
} }
} else if (e.shiftKey){ } else if (e.shiftKey){
let last_selected_track = this.digestTracksKeys(selected_tracks[selected_tracks.length-1]) let last_selected_track = this.digestTracksKeys(selected_tracks[selected_tracks.length-1]);
let last_selected_track_index = last_selected_track.index let last_selected_track_index = last_selected_track.index;
let newly_selected_track = this.digestTracksKeys(track_key) let newly_selected_track = this.digestTracksKeys(track_key);
let newly_selected_track_index = newly_selected_track.index let newly_selected_track_index = newly_selected_track.index;
// We've selected a track further down the list, // We've selected a track further down the list,
// so proceed normally // so proceed normally
if (last_selected_track_index < newly_selected_track_index){ if (last_selected_track_index < newly_selected_track_index){
var start = last_selected_track_index+1 var start = last_selected_track_index + 1;
var end = newly_selected_track_index var end = newly_selected_track_index;
// Selected a track up the list, so // Selected a track up the list, so
// our last selected is the END of our range // our last selected is the END of our range
} else { } else {
var start = newly_selected_track_index var start = newly_selected_track_index;
var end = last_selected_track_index-1 var end = last_selected_track_index - 1;
} }
if (start !== false && start >= 0 && end !== false && end >= 0){ if (start !== false && start >= 0 && end !== false && end >= 0){
for (let i = start; i <= end; i++){ for (let i = start; i <= end; i++){
selected_tracks.push(this.buildTrackKey(this.props.tracks[i], i)) selected_tracks.push(this.buildTrackKey(this.props.tracks[i], i));
} }
} }
// Regular, unmodified left click // Regular, unmodified left click
} else { } else {
selected_tracks = [track_key] selected_tracks = [track_key];
} }
this.props.uiActions.setSelectedTracks(selected_tracks); this.props.uiActions.setSelectedTracks(selected_tracks);
} }
isRightClick(e){ isRightClick(e){
if ('which' in e ) if ('which' in e ){
return e.which == 3 return e.which == 3
if ('button' in e ) } else if ('button' in e){
return e.button == 2 return e.button == 2;
return false }
return false;
} }
playTracks(){ playTracks(){
@ -411,11 +414,6 @@ class TrackList extends React.Component{
if (this.props.className){ if (this.props.className){
className += ' '+this.props.className className += ' '+this.props.className
} }
var mini_zones = false
if (this.props.slim_mode || helpers.isTouchDevice()){
mini_zones = true
className += ' mini-zones'
}
return ( return (
<div className={className}> <div className={className}>
@ -429,7 +427,7 @@ class TrackList extends React.Component{
<Track <Track
show_source_icon={this.props.show_source_icon} show_source_icon={this.props.show_source_icon}
key={track_key} key={track_key}
mini_zones={mini_zones} mini_zones={this.props.slim_mode || helpers.isTouchDevice()}
track={track} track={track}
context={this.props.context} context={this.props.context}
can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'}

View File

@ -12,9 +12,6 @@ export function setSelectedTracks(keys = []){
} }
export function showContextMenu(data){ export function showContextMenu(data){
console.log(data.e);
if (data.e.touches){ if (data.e.touches){
data.position_x = data.e.touches[0].clientX; data.position_x = data.e.touches[0].clientX;
data.position_y = data.e.touches[0].clientY; data.position_y = data.e.touches[0].clientY;