secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Track list to have leaner bindings for better performance and better hybrid devices

Browse Source
This commit is contained in:
James Barnsley
2017-12-05 16:27:45 +13:00
parent 5c49b6a859
commit 6d28eacd65
11 changed files with 438 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
mopidy_iris/static/app.css
View File

@ -4218,16 +4218,15 @@ aside {
display: block;
position: relative;
margin: 0 -10px -1px -10px;
padding: 14px 30px 13px 10px;
cursor: pointer;
border-radius: 3px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05); }
.list .list-item .liner {
padding: 14px 30px 13px 10px; }
.list .list-item .liner::after {
content: '';
clear: both;
display: block; }
.list .list-item::after {
content: '';
clear: both;
display: block; }
.list .list-item.selected {
background: rgba(255, 255, 255, 0.08) !important; }
.list .list-item.selected .select-zone::after {
@ -4238,6 +4237,9 @@ aside {
.list .list-item .select-zone,
.list .list-item .drag-zone {
display: none; }
.list .list-item .select-zone *,
.list .list-item .drag-zone * {
pointer-events: none; }
.list .list-item .context-menu-trigger {
position: absolute;
top: 6px;
@ -4270,6 +4272,8 @@ aside {
position: relative;
padding: 12px 10px 12px 20px;
cursor: pointer; }
.list .list-item .uri-placeholder {
word-break: break-all; }
.list.track-list .list-item .col.name {
width: 40%; }
@ -4357,13 +4361,13 @@ aside {
border-color: #08d58f;
opacity: 1; }
.list.track-list.mini-zones .list-item.can-sort {
padding-left: 60px !important; }
.touch .list.track-list .list-item.can-sort {
padding-left: 70px !important; }
.list.track-list.mini-zones .list-item:not(.can-sort) {
padding-left: 35px !important; }
.touch .list.track-list .list-item:not(.can-sort) {
padding-left: 45px !important; }
.list.track-list.mini-zones .list-item .select-zone {
.touch .list.track-list .list-item .select-zone {
position: absolute;
top: 0;
left: 0;
@ -4371,7 +4375,7 @@ aside {
width: 34px;
font-size: 8px;
display: block; }
.list.track-list.mini-zones .list-item .select-zone .fa {
.touch .list.track-list .list-item .select-zone .fa {
position: absolute;
top: 50%;
left: 17px;
@ -4379,7 +4383,7 @@ aside {
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list.track-list.mini-zones .list-item .select-zone:after {
.touch .list.track-list .list-item .select-zone:after {
display: block;
content: '';
border: 1px solid #a3a19f;
@ -4391,7 +4395,7 @@ aside {
left: 14px;
margin-top: -7px; }
.list.track-list.mini-zones .list-item .drag-zone {
.touch .list.track-list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
@ -4400,7 +4404,7 @@ aside {
font-size: 14px;
display: block;
color: #a3a19f; }
.list.track-list.mini-zones .list-item .drag-zone .fa {
.touch .list.track-list .list-item .drag-zone .fa {
position: absolute;
top: 50%;
left: 6px;
@ -4408,78 +4412,78 @@ aside {
pointer-events: none; }
@media (max-width: 800px) {
.list .list-item .liner {
.list .list-item {
padding: 12px !important; }
.list .list-item .source {
position: static;
float: none; }
.list .list-item .select-zone {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 8px;
display: block; }
.list .list-item .select-zone .fa {
.list .list-item .source {
position: static;
float: none; }
.list .list-item .select-zone {
position: absolute;
top: 27px;
left: 17px;
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list .list-item .select-zone:after {
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 8px;
display: block; }
.list .list-item .select-zone .fa {
position: absolute;
top: 27px;
left: 17px;
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list .list-item .select-zone:after {
display: block;
content: '';
border: 1px solid #a3a19f;
border-radius: 50%;
width: 14px;
height: 14px;
position: absolute;
top: 16px;
left: 14px; }
.list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
content: '';
border: 1px solid #a3a19f;
border-radius: 50%;
width: 14px;
height: 14px;
color: #a3a19f; }
.list .list-item .drag-zone .fa {
position: absolute;
top: 24px;
left: 6px;
pointer-events: none; }
.list .list-item .context-zone {
top: 14px; }
.list .list-item .col.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none; }
.list .list-item .col.duration {
width: auto !important;
position: absolute;
top: 16px;
left: 14px; }
.list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: #a3a19f; }
.list .list-item .drag-zone .fa {
position: absolute;
top: 24px;
left: 6px;
pointer-events: none; }
.list .list-item .context-zone {
top: 14px; }
.list .list-item .col.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none; }
.list .list-item .col.duration {
width: auto !important;
position: absolute;
right: 10px;
text-align: right; }
.list .list-item .col:not(.name):not(.duration):not(.album) {
color: #a3a19f;
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word; }
.list .list-item .col.followers_total:after {
content: ' followers'; }
.list .list-item .col.tracks_total:after {
content: ' tracks'; }
.list .list-item .col.popularity:after {
content: '% popularity'; }
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
display: none; }
.list .list-item.header {
display: none; }
right: 10px;
text-align: right; }
.list .list-item .col:not(.name):not(.duration):not(.album) {
color: #a3a19f;
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word; }
.list .list-item .col.followers_total:after {
content: ' followers'; }
.list .list-item .col.tracks_total:after {
content: ' tracks'; }
.list .list-item .col.popularity:after {
content: '% popularity'; }
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
display: none; }
.list .list-item.header {
display: none; }
.list.queue-track-list .list-item .artists {
padding-left: 0 !important; }
.list.queue-track-list .list-item .artists:before {

245
mopidy_iris/static/app.js
View File

@ -2234,7 +2234,7 @@ function getSearchResults(type, query) {
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: response.tracks.items,
results: helpers.formatTracks(response.tracks.items),
more: response.tracks.next
});
}
@ -18584,7 +18584,7 @@ var ContextMenuTrigger = function (_React$Component) {
value: function render() {
var _this2 = this;
var className = 'context-menu-trigger';
var className = 'context-menu-trigger mouse-contextable touch-contextable';
if (this.props.className) {
className += ' ' + this.props.className;
}
@ -23603,26 +23603,23 @@ var List = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: class_name, key: row_index },
_react2.default.createElement(
'div',
{
className: 'liner',
onClick: function onClick(e) {
return _this2.handleClick(e, row.uri);
},
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e, row);
} },
_this2.props.columns.map(function (col, col_index) {
var className = 'col ' + col.name.replace('.', '_');
return _react2.default.createElement(
'div',
{ className: className, key: col_index },
_this2.renderValue(row, col.name)
);
})
),
{
className: class_name,
key: row_index,
onClick: function onClick(e) {
return _this2.handleClick(e, row.uri);
},
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e, row);
} },
_this2.props.columns.map(function (col, col_index) {
var className = 'col ' + col.name.replace('.', '_');
return _react2.default.createElement(
'div',
{ className: className, key: col_index },
_this2.renderValue(row, col.name)
);
}),
_this2.props.nocontext ? null : _react2.default.createElement(_ContextMenuTrigger2.default, { onTrigger: function onTrigger(e) {
return _this2.handleContextMenu(e, row);
} })
@ -33092,11 +33089,27 @@ var Track = function (_React$Component) {
}
_createClass(Track, [{
key: 'handleMouseEnter',
value: function handleMouseEnter(e) {
console.log("handleMouseEnter");
this.setState({ hover: true });
}
}, {
key: 'handleMouseLeave',
value: function handleMouseLeave(e) {
console.log("handleMouseLeave");
this.setState({ hover: false });
}
}, {
key: 'handleMouseDown',
value: function handleMouseDown(e) {
console.log("handleMouseDown");
var target = $(e.target);
console.log(e.type);
// Clicked a nested link (ie Artist name), so no dragging required
if (e.target.tagName.toLowerCase() === 'a') {
if (target.is('a')) {
return false;
}
@ -33115,6 +33128,8 @@ var Track = function (_React$Component) {
}, {
key: 'handleMouseMove',
value: function handleMouseMove(e) {
console.log("handleMouseMove");
var target = $(e.target);
// No drag handling means NO
if (this.props.handleDrag === undefined) {
@ -33138,6 +33153,8 @@ var Track = function (_React$Component) {
}, {
key: 'handleMouseUp',
value: function handleMouseUp(e) {
console.log("handleMouseUp");
var target = $(e.target);
// Only listen for left clicks
if (e.button === 0) {
@ -33148,7 +33165,6 @@ var Track = function (_React$Component) {
this.props.handleDrop(e);
}
} else {
var target = $(e.target);
if (!target.is('a') && target.closest('a').length <= 0) {
this.props.handleSelection(e);
this.start_position = false;
@ -33161,20 +33177,48 @@ var Track = function (_React$Component) {
return false;
}
}
}, {
key: 'handleDoubleClick',
value: function handleDoubleClick(e) {
console.log("handleDoubleClick");
var target = $(e.target);
}
}, {
key: 'handleTouchStart',
value: function handleTouchStart(e) {
console.log("handleTouchStart");
e.preventDefault();
var target = $(e.target);
// Clicked a nested link (ie Artist name), so no dragging required
if (e.target.tagName.toLowerCase() === 'a') {
// Touch-drag zone
if (target.hasClass('drag-zone')) {
this.props.handleTouchDrag(e);
// Select zone
} else if (target.hasClass('select-zone')) {
this.props.handleSelection(e);
// Clicked a nested link (ie Artist name), so no dragging required
} else if (target.is('a')) {
return false;
// Touch contextable
} else if (target.hasClass('touch-contextable')) {
this.props.handleContextMenu(e);
}
this.props.handleTouchDrag(e);
return false;
}
}, {
key: 'handleTouchEnd',
value: function handleTouchEnd(e) {
console.log("handleTouchEnd");
e.preventDefault();
}
}, {
key: 'handleContextMenu',
value: function handleContextMenu(e) {
console.log("handleContextMenu");
e.preventDefault();
e.stopPropagation();
e.cancelBubble = true;
@ -33190,7 +33234,7 @@ var Track = function (_React$Component) {
}
var track = this.props.track;
var className = 'list-item track';
var className = 'list-item track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' selected';
if (this.props.can_sort) className += ' can-sort';
if (track.type !== undefined) className += ' ' + track.type;
@ -33224,7 +33268,7 @@ var Track = function (_React$Component) {
{ className: 'col name', key: 'name' },
track.name ? track.name : _react2.default.createElement(
'span',
{ className: 'grey-text' },
{ className: 'uri-placeholder grey-text' },
track.uri
)
));
@ -33348,7 +33392,7 @@ var Track = function (_React$Component) {
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col duration', key: 'duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : null
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
));
}
@ -33363,11 +33407,8 @@ var Track = function (_React$Component) {
track_actions.push(_react2.default.createElement(
'span',
{
className: 'select-zone',
key: 'select-zone',
onClick: function onClick(e) {
return _this2.props.handleSelection(e);
} },
className: 'select-zone touch-selectable mouse-selectable',
key: 'select-zone' },
this.props.selected ? _react2.default.createElement(_reactFontawesome2.default, { name: 'check', className: 'selected', fixedWidth: true }) : null
));
@ -33375,62 +33416,49 @@ var Track = function (_React$Component) {
track_actions.push(_react2.default.createElement(
'span',
{
className: 'drag-zone',
key: 'drag-zone',
onTouchStart: function onTouchStart(e) {
return _this2.handleTouchStart(e);
} },
className: 'drag-zone touch-draggable mouse-draggable',
key: 'drag-zone' },
_react2.default.createElement(_reactFontawesome2.default, { name: 'bars', fixedWidth: true })
));
}
// No events attached directly to the track. Instead events are attached to
// the appropriate select/drag zone sub-elements
return _react2.default.createElement(
'div',
{ className: className },
track_actions,
_react2.default.createElement(
'div',
{ className: 'liner' },
track_columns
)
);
} else {
return _react2.default.createElement(
'div',
{
className: className,
onMouseEnter: function onMouseEnter(e) {
return _this2.setState({ hover: true });
},
onMouseLeave: function onMouseLeave(e) {
return _this2.setState({ hover: false });
} },
track_actions,
_react2.default.createElement(
'div',
{ className: 'liner'
//onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me
, onMouseDown: function onMouseDown(e) {
return _this2.handleMouseDown(e);
} // Click (or potentially a mouse drag start)
, onMouseMove: function onMouseMove(e) {
return _this2.handleMouseMove(e);
} // Any movement over me
, onMouseUp: function onMouseUp(e) {
return _this2.handleMouseUp(e);
} // End of click, or potentially a dragging drop event
, onDoubleClick: function onDoubleClick(e) {
return _this2.props.handleDoubleClick(e);
},
onContextMenu: function onContextMenu(e) {
_this2.handleContextMenu(e);
} },
track_columns
)
);
}
return _react2.default.createElement(
'div',
{
className: className,
onMouseEnter: function onMouseEnter(e) {
return _this2.handleMouseEnter(e);
},
onMouseLeave: function onMouseLeave(e) {
return _this2.handleMouseLeave(e);
},
onMouseDown: function onMouseDown(e) {
return _this2.handleMouseDown(e);
},
onMouseUp: function onMouseUp(e) {
return _this2.handleMouseUp(e);
},
onMouseMove: function onMouseMove(e) {
return _this2.handleMouseMove(e);
},
onDoubleClick: function onDoubleClick(e) {
return _this2.handleDoubleClick(e);
},
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e);
},
onTouchStart: function onTouchStart(e) {
return _this2.handleTouchStart(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this2.handleTouchEnd(e);
} },
track_actions,
track_columns
);
}
}]);
@ -52018,7 +52046,7 @@ var MopidyMiddleware = function () {
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
context: action.data.context,
results: tracks
results: helpers.formatTracks(tracks)
});
}
continue_process();
@ -52042,7 +52070,7 @@ var MopidyMiddleware = function () {
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: tracks
results: helpers.formatTracks(tracks)
});
}
@ -56046,7 +56074,7 @@ var SpotifyMiddleware = function () {
store.dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: action.data.tracks.items,
results: helpers.formatTracks(action.data.tracks.items),
more: action.data.tracks.next
});
break;
@ -66644,6 +66672,18 @@ var Search = function (_React$Component) {
alert('load more: ' + type);
//this.props.spotifyActions.getURL(this.props['spotify_'+type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
}
}, {
key: 'setSort',
value: function setSort(value) {
var reverse = false;
if (this.props.sort == value) reverse = !this.props.sort_reverse;
var data = {
search_results_sort_reverse: reverse,
search_results_sort: value
};
this.props.uiActions.set(data);
}
}, {
key: 'renderResults',
value: function renderResults() {
@ -66658,6 +66698,7 @@ var Search = function (_React$Component) {
if (this.props.spotify_search_results.artists) {
artists = [].concat(_toConsumableArray(artists), _toConsumableArray(helpers.getIndexedRecords(this.props.artists, this.props.spotify_search_results.artists)));
}
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
var albums = [];
if (this.props.mopidy_search_results.albums) {
@ -66666,6 +66707,7 @@ var Search = function (_React$Component) {
if (this.props.spotify_search_results.albums) {
albums = [].concat(_toConsumableArray(albums), _toConsumableArray(helpers.getIndexedRecords(this.props.albums, this.props.spotify_search_results.albums)));
}
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
var playlists = [];
if (this.props.mopidy_search_results.playlists) {
@ -66674,6 +66716,7 @@ var Search = function (_React$Component) {
if (this.props.spotify_search_results.playlists) {
playlists = [].concat(_toConsumableArray(playlists), _toConsumableArray(helpers.getIndexedRecords(this.props.playlists, this.props.spotify_search_results.playlists)));
}
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
var tracks = [];
if (this.props.mopidy_search_results.tracks) {
@ -66682,6 +66725,7 @@ var Search = function (_React$Component) {
if (this.props.spotify_search_results.tracks) {
tracks = [].concat(_toConsumableArray(tracks), _toConsumableArray(this.props.spotify_search_results.tracks));
}
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse);
switch (this.props.view) {
@ -66858,9 +66902,26 @@ var Search = function (_React$Component) {
label: 'Tracks'
}];
var sort_options = [{
value: 'name',
label: 'Name'
}, {
value: 'artists.name',
label: 'Artist'
}, {
value: 'duration',
label: 'Duration'
}, {
value: 'source',
label: 'Source'
}];
var options = _react2.default.createElement(
'span',
null,
_react2.default.createElement(_DropdownField2.default, { icon: 'sort', name: 'Sort', value: this.props.sort, options: sort_options, reverse: this.props.sort_reverse, handleChange: function handleChange(val) {
_this3.setSort(val);_this3.props.uiActions.hideContextMenu();
} }),
_react2.default.createElement(_DropdownField2.default, { icon: 'eye', name: 'View', value: this.props.view, options: view_options, handleChange: function handleChange(val) {
_this3.props.uiActions.set({ search_view: val });_this3.props.uiActions.hideContextMenu();
} }),
@ -66902,7 +66963,9 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
tracks: state.core.tracks ? state.core.tracks : [],
search_uri_schemes: state.ui.search_uri_schemes ? state.ui.search_uri_schemes : [],
mopidy_search_results: state.mopidy.search_results ? state.mopidy.search_results : {},
spotify_search_results: state.spotify.search_results ? state.spotify.search_results : {}
spotify_search_results: state.spotify.search_results ? state.spotify.search_results : {},
sort: state.ui.search_results_sort ? state.ui.search_results_sort : 'name',
sort_reverse: state.ui.search_results_sort_reverse ? true : false
};
};

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

170
mopidy_iris/static/app.min.css vendored
View File

@ -4218,16 +4218,15 @@ aside {
display: block;
position: relative;
margin: 0 -10px -1px -10px;
padding: 14px 30px 13px 10px;
cursor: pointer;
border-radius: 3px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05); }
.list .list-item .liner {
padding: 14px 30px 13px 10px; }
.list .list-item .liner::after {
content: '';
clear: both;
display: block; }
.list .list-item::after {
content: '';
clear: both;
display: block; }
.list .list-item.selected {
background: rgba(255, 255, 255, 0.08) !important; }
.list .list-item.selected .select-zone::after {
@ -4238,6 +4237,9 @@ aside {
.list .list-item .select-zone,
.list .list-item .drag-zone {
display: none; }
.list .list-item .select-zone *,
.list .list-item .drag-zone * {
pointer-events: none; }
.list .list-item .context-menu-trigger {
position: absolute;
top: 6px;
@ -4270,6 +4272,8 @@ aside {
position: relative;
padding: 12px 10px 12px 20px;
cursor: pointer; }
.list .list-item .uri-placeholder {
word-break: break-all; }
.list.track-list .list-item .col.name {
width: 40%; }
@ -4357,13 +4361,13 @@ aside {
border-color: #08d58f;
opacity: 1; }
.list.track-list.mini-zones .list-item.can-sort {
padding-left: 60px !important; }
.touch .list.track-list .list-item.can-sort {
padding-left: 70px !important; }
.list.track-list.mini-zones .list-item:not(.can-sort) {
padding-left: 35px !important; }
.touch .list.track-list .list-item:not(.can-sort) {
padding-left: 45px !important; }
.list.track-list.mini-zones .list-item .select-zone {
.touch .list.track-list .list-item .select-zone {
position: absolute;
top: 0;
left: 0;
@ -4371,7 +4375,7 @@ aside {
width: 34px;
font-size: 8px;
display: block; }
.list.track-list.mini-zones .list-item .select-zone .fa {
.touch .list.track-list .list-item .select-zone .fa {
position: absolute;
top: 50%;
left: 17px;
@ -4379,7 +4383,7 @@ aside {
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list.track-list.mini-zones .list-item .select-zone:after {
.touch .list.track-list .list-item .select-zone:after {
display: block;
content: '';
border: 1px solid #a3a19f;
@ -4391,7 +4395,7 @@ aside {
left: 14px;
margin-top: -7px; }
.list.track-list.mini-zones .list-item .drag-zone {
.touch .list.track-list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
@ -4400,7 +4404,7 @@ aside {
font-size: 14px;
display: block;
color: #a3a19f; }
.list.track-list.mini-zones .list-item .drag-zone .fa {
.touch .list.track-list .list-item .drag-zone .fa {
position: absolute;
top: 50%;
left: 6px;
@ -4408,78 +4412,78 @@ aside {
pointer-events: none; }
@media (max-width: 800px) {
.list .list-item .liner {
.list .list-item {
padding: 12px !important; }
.list .list-item .source {
position: static;
float: none; }
.list .list-item .select-zone {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 8px;
display: block; }
.list .list-item .select-zone .fa {
.list .list-item .source {
position: static;
float: none; }
.list .list-item .select-zone {
position: absolute;
top: 27px;
left: 17px;
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list .list-item .select-zone:after {
top: 0;
left: 0;
height: 100%;
width: 34px;
font-size: 8px;
display: block; }
.list .list-item .select-zone .fa {
position: absolute;
top: 27px;
left: 17px;
pointer-events: none;
color: #FFFFFF;
z-index: 1; }
.list .list-item .select-zone:after {
display: block;
content: '';
border: 1px solid #a3a19f;
border-radius: 50%;
width: 14px;
height: 14px;
position: absolute;
top: 16px;
left: 14px; }
.list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
content: '';
border: 1px solid #a3a19f;
border-radius: 50%;
width: 14px;
height: 14px;
color: #a3a19f; }
.list .list-item .drag-zone .fa {
position: absolute;
top: 24px;
left: 6px;
pointer-events: none; }
.list .list-item .context-zone {
top: 14px; }
.list .list-item .col.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none; }
.list .list-item .col.duration {
width: auto !important;
position: absolute;
top: 16px;
left: 14px; }
.list .list-item .drag-zone {
position: absolute;
top: 0;
left: 34px;
height: 100%;
width: 34px;
font-size: 14px;
display: block;
color: #a3a19f; }
.list .list-item .drag-zone .fa {
position: absolute;
top: 24px;
left: 6px;
pointer-events: none; }
.list .list-item .context-zone {
top: 14px; }
.list .list-item .col.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none; }
.list .list-item .col.duration {
width: auto !important;
position: absolute;
right: 10px;
text-align: right; }
.list .list-item .col:not(.name):not(.duration):not(.album) {
color: #a3a19f;
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word; }
.list .list-item .col.followers_total:after {
content: ' followers'; }
.list .list-item .col.tracks_total:after {
content: ' tracks'; }
.list .list-item .col.popularity:after {
content: '% popularity'; }
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
display: none; }
.list .list-item.header {
display: none; }
right: 10px;
text-align: right; }
.list .list-item .col:not(.name):not(.duration):not(.album) {
color: #a3a19f;
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word; }
.list .list-item .col.followers_total:after {
content: ' followers'; }
.list .list-item .col.tracks_total:after {
content: ' tracks'; }
.list .list-item .col.popularity:after {
content: '% popularity'; }
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
display: none; }
.list .list-item.header {
display: none; }
.list.queue-track-list .list-item .artists {
padding-left: 0 !important; }
.list.queue-track-list .list-item .artists:before {

8
mopidy_iris/static/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.min.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -38,7 +38,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1512327748";
var build = "1512444391";
var version = "3.8.9";
// Construct the script tag

2
src/js/components/ContextMenuTrigger.js
View File

@ -15,7 +15,7 @@ export default class ContextMenuTrigger extends React.Component{
}
render(){
var className = 'context-menu-trigger'
var className = 'context-menu-trigger mouse-contextable touch-contextable'
if (this.props.className){
className += ' '+this.props.className
}

33
src/js/components/List.js
View File

@ -91,23 +91,22 @@ class List extends React.Component{
if (row.type ) class_name += ' '+row.type
return (
<div className={class_name} key={row_index}>
<div
className="liner"
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}>
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
return (
<div className={className} key={col_index}>
{ this.renderValue(row, col.name) }
</div>
)
})
}
</div>
{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
<div
className={class_name}
key={row_index}
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}>
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
return (
<div className={className} key={col_index}>
{ this.renderValue(row, col.name) }
</div>
)
})
}
{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
</div>
)
})

113
src/js/components/Track.js
View File

@ -22,10 +22,24 @@ export default class Track extends React.Component{
this.start_position = false
}
handleMouseEnter(e){
console.log("handleMouseEnter");
this.setState({hover: true});
}
handleMouseLeave(e){
console.log("handleMouseLeave");
this.setState({hover: false});
}
handleMouseDown(e){
console.log("handleMouseDown");
var target = $(e.target);
console.log(e.type);
// Clicked a nested link (ie Artist name), so no dragging required
if (e.target.tagName.toLowerCase() === 'a'){
if (target.is('a')){
return false;
}
@ -43,6 +57,8 @@ export default class Track extends React.Component{
}
handleMouseMove(e){
console.log("handleMouseMove");
var target = $(e.target);
// No drag handling means NO
if (this.props.handleDrag === undefined){
@ -65,6 +81,8 @@ export default class Track extends React.Component{
}
handleMouseUp(e){
console.log("handleMouseUp");
var target = $(e.target);
// Only listen for left clicks
if (e.button === 0){
@ -75,7 +93,6 @@ export default class Track extends React.Component{
this.props.handleDrop(e);
}
} else {
var target = $(e.target);
if (!target.is('a') && target.closest('a').length <= 0){
this.props.handleSelection(e);
this.start_position = false;
@ -89,17 +106,43 @@ export default class Track extends React.Component{
}
}
handleDoubleClick(e){
console.log("handleDoubleClick");
var target = $(e.target);
}
handleTouchStart(e){
console.log("handleTouchStart");
e.preventDefault();
var target = $(e.target);
// Touch-drag zone
if (target.hasClass('drag-zone')){
this.props.handleTouchDrag(e);
// Select zone
} else if (target.hasClass('select-zone')){
this.props.handleSelection(e);
// Clicked a nested link (ie Artist name), so no dragging required
if (e.target.tagName.toLowerCase() === 'a'){
} else if (target.is('a')){
return false;
// Touch contextable
} else if (target.hasClass('touch-contextable')){
this.props.handleContextMenu(e);
}
this.props.handleTouchDrag(e);
return false;
}
handleTouchEnd(e){
console.log("handleTouchEnd");
e.preventDefault();
}
handleContextMenu(e){
console.log("handleContextMenu");
e.preventDefault();
e.stopPropagation();
e.cancelBubble = true;
@ -112,7 +155,7 @@ export default class Track extends React.Component{
}
var track = this.props.track;
var className = 'list-item track';
var className = 'list-item track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' selected';
if (this.props.can_sort) className += ' can-sort';
if (track.type !== undefined) className += ' '+track.type;
@ -135,7 +178,7 @@ export default class Track extends React.Component{
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.name ? track.name : <span className="uri-placeholder grey-text">{track.uri}</span>}
</span>
)
track_columns.push(
@ -239,9 +282,8 @@ export default class Track extends React.Component{
// We use onClick to capture touch as well as mouse events in one tidy parcel
track_actions.push(
<span
className="select-zone"
key="select-zone"
onClick={e => this.props.handleSelection(e)}>
className="select-zone touch-selectable mouse-selectable"
key="select-zone">
{this.props.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
</span>
)
@ -249,42 +291,31 @@ export default class Track extends React.Component{
if (this.props.can_sort){
track_actions.push(
<span
className="drag-zone"
key="drag-zone"
onTouchStart={e => this.handleTouchStart(e)}>
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
</span>
)
}
// No events attached directly to the track. Instead events are attached to
// the appropriate select/drag zone sub-elements
return (
<div className={className}>
{track_actions}
<div className="liner">
{track_columns}
</div>
</div>
)
} else {
return (
<div
className={className}
onMouseEnter={e => this.setState({hover: true})}
onMouseLeave={e => this.setState({hover: false})}>
{track_actions}
<div className="liner"
//onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me
onMouseDown={e => this.handleMouseDown(e)} // Click (or potentially a mouse drag start)
onMouseMove={e => this.handleMouseMove(e)} // Any movement over me
onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event
onDoubleClick={e => this.props.handleDoubleClick(e)}
onContextMenu={e => {this.handleContextMenu(e)}}>
{track_columns}
</div>
</div>
)
}
return (
<div
className={className}
onMouseEnter={e => this.handleMouseEnter(e)}
onMouseLeave={e => this.handleMouseLeave(e)}
onMouseDown={e => this.handleMouseDown(e)}
onMouseUp={e => this.handleMouseUp(e)}
onMouseMove={e => this.handleMouseMove(e)}
onDoubleClick={e => this.handleDoubleClick(e)}
onContextMenu={e => this.handleContextMenu(e)}
onTouchStart={e => this.handleTouchStart(e)}
onTouchEnd={e => this.handleTouchEnd(e)}>
{track_actions}
{track_columns}
</div>
);
}
}

27
src/scss/components/_lists.scss
View File

@ -1,7 +1,7 @@
.list {
.list-item {
@include clearfix;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@ -12,16 +12,12 @@
display: block;
position: relative;
margin: 0 -10px -1px -10px;
padding: 14px 30px 13px 10px;
cursor: pointer;
border-radius: 3px;
border-bottom: 1px solid rgba(255,255,255,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
.liner {
@include clearfix;
padding: 14px 30px 13px 10px;
}
&.selected {
background: rgba(255,255,255,0.08) !important;
@ -40,6 +36,10 @@
.select-zone,
.drag-zone {
display: none;
* {
pointer-events: none;
}
}
.context-menu-trigger {
@ -91,6 +91,10 @@
cursor: pointer;
}
}
.uri-placeholder {
word-break: break-all;
}
}
&.track-list {
@ -236,15 +240,15 @@
}
}
&.track-list.mini-zones {
.touch &.track-list {
.list-item {
&.can-sort {
padding-left: 60px !important;
padding-left: 70px !important;
}
&:not(.can-sort){
padding-left: 35px !important;
padding-left: 45px !important;
}
.select-zone {
@ -304,10 +308,7 @@
@include responsive($bp_medium){
.list-item {
.liner {
padding: 12px !important;
}
padding: 12px !important;
.source {
position: static;