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}
notifications={this.props.notifications}
processes={this.props.processes}
broadcasts={this.props.broadcasts} />
broadcasts={this.props.broadcasts}
/>
{this.props.debug_info ? <DebugInfo /> : null}
</div>
);
}

View File

@ -140,10 +140,8 @@ export default class Track extends React.Component{
// 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
this.props.handleSelection(e);
//this.props.handleSelection(e);
this.handleContextMenu(e);
}

View File

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